:v: (#6567)

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

5 files changed, 53 insertions, 37 deletions

diff --git a/src/client/components/deck/antenna-column.vue b/src/client/components/deck/antenna-column.vue
index 83fe14f2cc..dd38a087e9 100644
--- a/src/client/components/deck/antenna-column.vue
+++ b/src/client/components/deck/antenna-column.vue
@@ -4,7 +4,7 @@
 		<fa :icon="faSatellite"/><span style="margin-left: 8px;">{{ column.name }}</span>
 	</template>
 
-	<x-timeline ref="timeline" src="antenna" :antenna="column.antennaId" @after="() => $emit('loaded')"/>
+	<x-timeline v-if="column.antennaId" ref="timeline" src="antenna" :antenna="column.antennaId" @after="() => $emit('loaded')"/>
 </x-column>
 </template>
 
@@ -33,7 +33,6 @@ export default Vue.extend({
 
 	data() {
 		return {
-			menu: null,
 			faSatellite
 		};
 	},
@@ -47,28 +46,36 @@ export default Vue.extend({
 	created() {
 		this.menu = [{
 			icon: faCog,
-			text: this.$t('antenna'),
-			action: async () => {
-				const antennas = await this.$root.api('antennas/list');
-				this.$root.dialog({
-					title: this.$t('antenna'),
-					type: null,
-					select: {
-						items: antennas.map(x => ({
-							value: x, text: x.name
-						}))
-					},
-					showCancelButton: true
-				}).then(({ canceled, result: antenna }) => {
-					if (canceled) return;
-					this.column.antennaId = antenna.id;
-					this.$store.commit('deviceUser/updateDeckColumn', this.column);
-				});
-			}
+			text: this.$t('selectAntenna'),
+			action: this.setAntenna
 		}];
 	},
 
+	mounted() {
+		if (this.column.antennaId == null) {
+			this.setAntenna();
+		}
+	},
+
 	methods: {
+		async setAntenna() {
+			const antennas = await this.$root.api('antennas/list');
+			const { canceled, result: antenna } = await this.$root.dialog({
+				title: this.$t('selectAntenna'),
+				type: null,
+				select: {
+					items: antennas.map(x => ({
+						value: x, text: x.name
+					})),
+				default: this.column.antennaId
+				},
+				showCancelButton: true
+			});
+			if (canceled) return;
+			Vue.set(this.column, 'antennaId', antenna.id);
+			this.$store.commit('deviceUser/updateDeckColumn', this.column);
+		},
+
 		focus() {
 			(this.$refs.timeline as any).focus();
 		}
diff --git a/src/client/components/deck/column.vue b/src/client/components/deck/column.vue
index f7620e5749..61b7ac9c69 100644
--- a/src/client/components/deck/column.vue
+++ b/src/client/components/deck/column.vue
@@ -150,37 +150,37 @@ export default Vue.extend({
 				}
 			}, null, {
 				icon: faArrowLeft,
-				text: this.$t('swap-left'),
+				text: this.$t('_deck.swapLeft'),
 				action: () => {
 					this.$store.commit('deviceUser/swapLeftDeckColumn', this.column.id);
 				}
 			}, {
 				icon: faArrowRight,
-				text: this.$t('swap-right'),
+				text: this.$t('_deck.swapRight'),
 				action: () => {
 					this.$store.commit('deviceUser/swapRightDeckColumn', this.column.id);
 				}
 			}, this.isStacked ? {
 				icon: faArrowUp,
-				text: this.$t('swap-up'),
+				text: this.$t('_deck.swapUp'),
 				action: () => {
 					this.$store.commit('deviceUser/swapUpDeckColumn', this.column.id);
 				}
 			} : undefined, this.isStacked ? {
 				icon: faArrowDown,
-				text: this.$t('swap-down'),
+				text: this.$t('_deck.swapDown'),
 				action: () => {
 					this.$store.commit('deviceUser/swapDownDeckColumn', this.column.id);
 				}
 			} : undefined, null, {
 				icon: faWindowRestore,
-				text: this.$t('stack-left'),
+				text: this.$t('_deck.stackLeft'),
 				action: () => {
 					this.$store.commit('deviceUser/stackLeftDeckColumn', this.column.id);
 				}
 			}, this.isStacked ? {
 				icon: faWindowMaximize,
-				text: this.$t('pop-right'),
+				text: this.$t('_deck.popRight'),
 				action: () => {
 					this.$store.commit('deviceUser/popRightDeckColumn', this.column.id);
 				}
diff --git a/src/client/components/deck/list-column.vue b/src/client/components/deck/list-column.vue
index a3576e8d67..a6e50802e0 100644
--- a/src/client/components/deck/list-column.vue
+++ b/src/client/components/deck/list-column.vue
@@ -46,7 +46,7 @@ export default Vue.extend({
 	created() {
 		this.menu = [{
 			icon: faCog,
-			text: this.$t('list'),
+			text: this.$t('selectList'),
 			action: this.setList
 		}];
 	},
@@ -61,7 +61,7 @@ export default Vue.extend({
 		async setList() {
 			const lists = await this.$root.api('users/lists/list');
 			const { canceled, result: list } = await this.$root.dialog({
-				title: this.$t('list'),
+				title: this.$t('selectList'),
 				type: null,
 				select: {
 					items: lists.map(x => ({
diff --git a/src/client/components/deck/notifications-column.vue b/src/client/components/deck/notifications-column.vue
index 58873aa130..331cb9207f 100644
--- a/src/client/components/deck/notifications-column.vue
+++ b/src/client/components/deck/notifications-column.vue
@@ -45,14 +45,14 @@ export default Vue.extend({
 
 		this.menu = [{
 			icon: faCog,
-			text: this.$t('@.notification-type'),
+			text: this.$t('notificationType'),
 			action: () => {
 				this.$root.dialog({
-					title: this.$t('@.notification-type'),
+					title: this.$t('notificationType'),
 					type: null,
 					select: {
 						items: ['all', 'follow', 'mention', 'reply', 'renote', 'quote', 'reaction', 'pollVote', 'receiveFollowRequest'].map(x => ({
-							value: x, text: this.$t('@.notification-types.' + x)
+							value: x, text: this.$t(`_notification._types.${x}`)
 						}))
 						default: this.column.notificationType,
 					},
diff --git a/src/client/components/deck/widgets-column.vue b/src/client/components/deck/widgets-column.vue
index 417027a8e7..31d1e3d53c 100644
--- a/src/client/components/deck/widgets-column.vue
+++ b/src/client/components/deck/widgets-column.vue
@@ -5,9 +5,12 @@
 	<div class="wtdtxvec">
 		<template v-if="edit">
 			<header>
-				<select v-model="widgetAdderSelected" @change="addWidget">
-					<option v-for="widget in widgets" :value="widget" :key="widget">{{ widget }}</option>
-				</select>
+				<mk-select v-model="widgetAdderSelected" style="margin-bottom: var(--margin)">
+					<template #label>{{ $t('selectWidget') }}</template>
+					<option v-for="widget in widgets" :value="widget" :key="widget">{{ $t(`_widgets.${widget}`) }}</option>
+				</mk-select>
+				<mk-button inline @click="addWidget" primary><fa :icon="faPlus"/> {{ $t('add') }}</mk-button>
+				<mk-button inline @click="edit = false">{{ $t('close') }}</mk-button>
 			</header>
 			<x-draggable
 				:list="column.widgets"
@@ -15,7 +18,7 @@
 				@sort="onWidgetSort"
 			>
 				<div v-for="widget in column.widgets" class="customize-container" :key="widget.id" @click="widgetFunc(widget.id)">
-					<button class="remove _button" @click="removeWidget(widget)"><fa :icon="faTimes"/></button>
+					<button class="remove _button" @click.prevent.stop="removeWidget(widget)"><fa :icon="faTimes"/></button>
 					<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true" :column="column"/>
 				</div>
 			</x-draggable>
@@ -29,7 +32,9 @@
 import Vue from 'vue';
 import * as XDraggable from 'vuedraggable';
 import { v4 as uuid } from 'uuid';
-import { faWindowMaximize, faTimes, faCog } from '@fortawesome/free-solid-svg-icons';
+import { faWindowMaximize, faTimes, faCog, faPlus } from '@fortawesome/free-solid-svg-icons';
+import MkSelect from '../../components/ui/select.vue';
+import MkButton from '../../components/ui/button.vue';
 import XColumn from './column.vue';
 import { widgets } from '../../widgets';
 
@@ -37,6 +42,8 @@ export default Vue.extend({
 	components: {
 		XColumn,
 		XDraggable,
+		MkSelect,
+		MkButton,
 	},
 
 	props: {
@@ -56,7 +63,7 @@ export default Vue.extend({
 			menu: null,
 			widgetAdderSelected: null,
 			widgets,
-			faWindowMaximize, faTimes
+			faWindowMaximize, faTimes, faPlus
 		};
 	},
 
@@ -80,6 +87,8 @@ export default Vue.extend({
 		},
 
 		addWidget() {
+			if (this.widgetAdderSelected == null) return;
+
 			this.$store.commit('deviceUser/addDeckWidget', {
 				id: this.column.id,
 				widget: {