enhance(client): tweak deck

locales/ja-JP.yml

@@ -1729,6 +1729,8 @@ _deck:
   stackLeft: "左に重ねる"
   popRight: "右に出す"
   profile: "プロファイル"
+  introduction: "カラムを組み合わせて自分だけのインターフェイスを作りましょう！"
+  introduction2: "画面の右にある + を押して、いつでもカラムを追加できます。"
 
   _columns:
     main: "メイン"

packages/client/src/ui/deck.vue

@@ -6,7 +6,6 @@
 
 	<div class="main">
 		<XStatusBars class="statusbars"/>
-		<div class="columnsWrapper">
 		<div ref="columnsEl" class="columns" :class="deckStore.reactiveState.columnAlign.value" @contextmenu.self.prevent="onContextmenu">
 			<template v-for="ids in layout">
 				<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
@@ -28,9 +27,13 @@
 					@parent-focus="moveFocus(ids[0], $event)"
 				/>
 			</template>
+			<div v-if="layout.length === 0" class="intro _panel">
+				<div>{{ i18n.ts._deck.introduction }}</div>
+				<MkButton primary class="add" @click="addColumn">{{ i18n.ts._deck.addColumn }}</MkButton>
+				<div>{{ i18n.ts._deck.introduction2 }}</div>
 			</div>
 			<div class="sideMenu">
-				<button class="_button button" @click="addColumn"><i class="fas fa-plus"></i></button>
+				<button v-tooltip="i18n.ts._deck.addColumn" class="_button button" @click="addColumn"><i class="fas fa-plus"></i></button>
 			</div>
 		</div>
 	</div>
@@ -67,6 +70,7 @@ import { deckStore, addColumn as addColumnToStore, loadDeck } from './deck/deck-
 import DeckColumnCore from '@/ui/deck/column-core.vue';
 import XSidebar from '@/ui/_common_/sidebar.vue';
 import XDrawerMenu from '@/ui/_common_/sidebar-for-mobile.vue';
+import MkButton from '@/components/ui/button.vue';
 import { getScrollContainer } from '@/scripts/scroll';
 import * as os from '@/os';
 import { menuDef } from '@/menu';
@@ -206,11 +210,6 @@ function moveFocus(id: string, direction: 'up' | 'down' | 'left' | 'right') {
 		display: flex;
 		flex-direction: column;
 
-		> .columnsWrapper {
-			flex: 1;
-			display: flex;
-			flex-direction: row;
-
 		> .columns {
 			flex: 1;
 			display: flex;
@@ -231,7 +230,7 @@ function moveFocus(id: string, direction: 'up' | 'down' | 'left' | 'right') {
 				flex-shrink: 0;
 				border-right: solid var(--deckDividerThickness) var(--deckDivider);
 
-					&:first-child {
+				&:first-of-type {
 					border-left: solid var(--deckDividerThickness) var(--deckDivider);
 				}
 
@@ -239,14 +238,27 @@ function moveFocus(id: string, direction: 'up' | 'down' | 'left' | 'right') {
 					display: flex;
 					flex-direction: column;
 
-						> *:not(:last-child) {
+					> *:not(:last-of-type) {
 						border-bottom: solid var(--deckDividerThickness) var(--deckDivider);
 					}
 				}
 			}
+
+			> .intro {
+				padding: 32px;
+				height: min-content;
+				text-align: center;
+				margin: auto;
+
+				> .add {
+					margin: 1em auto;
+				}
 			}
 
 			> .sideMenu {
+				flex-shrink: 0;
+				margin-right: 0;
+				margin-left: auto;
 				display: flex;
 				flex-direction: column;
 				justify-content: center;