From 0bcb1434b0bd10e7553519c90e62f23d8777fab6 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 25 Oct 2020 09:15:20 +0900
Subject: Refactor

---
 src/client/components/deck/antenna-column.vue      |  88 -----
 src/client/components/deck/column-core.vue         |  50 ---
 src/client/components/deck/column.vue              | 419 ---------------------
 src/client/components/deck/direct-column.vue       |  58 ---
 src/client/components/deck/list-column.vue         |  88 -----
 src/client/components/deck/mentions-column.vue     |  55 ---
 .../components/deck/notifications-column.vue       |  61 ---
 src/client/components/deck/tl-column.vue           | 146 -------
 src/client/components/deck/widgets-column.vue      | 160 --------
 src/client/ui/deck.vue                             |   4 +-
 src/client/ui/deck/antenna-column.vue              |  88 +++++
 src/client/ui/deck/column-core.vue                 |  50 +++
 src/client/ui/deck/column.vue                      | 419 +++++++++++++++++++++
 src/client/ui/deck/direct-column.vue               |  58 +++
 src/client/ui/deck/list-column.vue                 |  88 +++++
 src/client/ui/deck/mentions-column.vue             |  55 +++
 src/client/ui/deck/notifications-column.vue        |  61 +++
 src/client/ui/deck/tl-column.vue                   | 146 +++++++
 src/client/ui/deck/widgets-column.vue              | 160 ++++++++
 19 files changed, 1127 insertions(+), 1127 deletions(-)
 delete mode 100644 src/client/components/deck/antenna-column.vue
 delete mode 100644 src/client/components/deck/column-core.vue
 delete mode 100644 src/client/components/deck/column.vue
 delete mode 100644 src/client/components/deck/direct-column.vue
 delete mode 100644 src/client/components/deck/list-column.vue
 delete mode 100644 src/client/components/deck/mentions-column.vue
 delete mode 100644 src/client/components/deck/notifications-column.vue
 delete mode 100644 src/client/components/deck/tl-column.vue
 delete mode 100644 src/client/components/deck/widgets-column.vue
 create mode 100644 src/client/ui/deck/antenna-column.vue
 create mode 100644 src/client/ui/deck/column-core.vue
 create mode 100644 src/client/ui/deck/column.vue
 create mode 100644 src/client/ui/deck/direct-column.vue
 create mode 100644 src/client/ui/deck/list-column.vue
 create mode 100644 src/client/ui/deck/mentions-column.vue
 create mode 100644 src/client/ui/deck/notifications-column.vue
 create mode 100644 src/client/ui/deck/tl-column.vue
 create mode 100644 src/client/ui/deck/widgets-column.vue

diff --git a/src/client/components/deck/antenna-column.vue b/src/client/components/deck/antenna-column.vue
deleted file mode 100644
index e7cb9d8482..0000000000
--- a/src/client/components/deck/antenna-column.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-<XColumn :menu="menu" :column="column" :is-stacked="isStacked">
-	<template #header>
-		<Fa :icon="faSatellite"/><span style="margin-left: 8px;">{{ column.name }}</span>
-	</template>
-
-	<XTimeline v-if="column.antennaId" ref="timeline" src="antenna" :antenna="column.antennaId" @after="() => $emit('loaded')"/>
-</XColumn>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { faSatellite, faCog } from '@fortawesome/free-solid-svg-icons';
-import XColumn from './column.vue';
-import XTimeline from '../timeline.vue';
-import * as os from '@/os';
-
-export default defineComponent({
-	components: {
-		XColumn,
-		XTimeline,
-	},
-
-	props: {
-		column: {
-			type: Object,
-			required: true
-		},
-		isStacked: {
-			type: Boolean,
-			required: true
-		}
-	},
-
-	data() {
-		return {
-			faSatellite
-		};
-	},
-
-	watch: {
-		mediaOnly() {
-			(this.$refs.timeline as any).reload();
-		}
-	},
-
-	created() {
-		this.menu = [{
-			icon: faCog,
-			text: this.$t('selectAntenna'),
-			action: this.setAntenna
-		}];
-	},
-
-	mounted() {
-		if (this.column.antennaId == null) {
-			this.setAntenna();
-		}
-	},
-
-	methods: {
-		async setAntenna() {
-			const antennas = await os.api('antennas/list');
-			const { canceled, result: antenna } = await os.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;
-			this.column.antennaId = antenna.id;
-			this.$store.commit('deviceUser/updateDeckColumn', this.column);
-		},
-
-		focus() {
-			(this.$refs.timeline as any).focus();
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/src/client/components/deck/column-core.vue b/src/client/components/deck/column-core.vue
deleted file mode 100644
index 36872d987c..0000000000
--- a/src/client/components/deck/column-core.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-<!-- TODO: リファクタの余地がありそう -->
-<XWidgetsColumn v-if="column.type === 'widgets'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
-<XNotificationsColumn v-else-if="column.type === 'notifications'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
-<XTlColumn v-else-if="column.type === 'tl'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
-<XListColumn v-else-if="column.type === 'list'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
-<XAntennaColumn v-else-if="column.type === 'antenna'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
-<!-- TODO: <XTlColumn v-else-if="column.type === 'hashtag'" :column="column" :is-stacked="isStacked" v-on="$listeners"/> -->
-<XMentionsColumn v-else-if="column.type === 'mentions'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
-<XDirectColumn v-else-if="column.type === 'direct'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import XTlColumn from './tl-column.vue';
-import XAntennaColumn from './antenna-column.vue';
-import XListColumn from './list-column.vue';
-import XNotificationsColumn from './notifications-column.vue';
-import XWidgetsColumn from './widgets-column.vue';
-import XMentionsColumn from './mentions-column.vue';
-import XDirectColumn from './direct-column.vue';
-
-export default defineComponent({
-	components: {
-		XTlColumn,
-		XAntennaColumn,
-		XListColumn,
-		XNotificationsColumn,
-		XWidgetsColumn,
-		XMentionsColumn,
-		XDirectColumn
-	},
-	props: {
-		column: {
-			type: Object,
-			required: true
-		},
-		isStacked: {
-			type: Boolean,
-			required: false,
-			default: false
-		}
-	},
-	methods: {
-		focus() {
-			this.$children[0].focus();
-		}
-	}
-});
-</script>
diff --git a/src/client/components/deck/column.vue b/src/client/components/deck/column.vue
deleted file mode 100644
index 8137cbfd45..0000000000
--- a/src/client/components/deck/column.vue
+++ /dev/null
@@ -1,419 +0,0 @@
-<template>
-<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
-<section class="dnpfarvg _panel _narrow_" :class="{ paged: isMainColumn, naked, _close_: !isMainColumn, active, isStacked, draghover, dragging, dropready }"
-	@dragover.prevent.stop="onDragover"
-	@dragleave="onDragleave"
-	@drop.prevent.stop="onDrop"
-	v-hotkey="keymap"
-	:style="{ width: `${width}px` }"
->
-	<header :class="{ indicated }"
-		draggable="true"
-		@click="goTop"
-		@dragstart="onDragstart"
-		@dragend="onDragend"
-		@contextmenu.prevent.stop="onContextmenu"
-	>
-		<button class="toggleActive _button" @click="toggleActive" v-if="isStacked">
-			<template v-if="active"><Fa :icon="faAngleUp"/></template>
-			<template v-else><Fa :icon="faAngleDown"/></template>
-		</button>
-		<div class="action">
-			<slot name="action"></slot>
-		</div>
-		<span class="header"><slot name="header"></slot></span>
-		<button v-if="!isMainColumn" class="menu _button" ref="menu" @click.stop="showMenu"><Fa :icon="faCaretDown"/></button>
-	</header>
-	<div ref="body" v-show="active">
-		<slot></slot>
-	</div>
-</section>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown, faArrowRight, faArrowLeft, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
-import { faWindowMaximize, faTrashAlt, faWindowRestore } from '@fortawesome/free-regular-svg-icons';
-import * as os from '@/os';
-
-export default defineComponent({
-	props: {
-		column: {
-			type: Object,
-			required: false,
-			default: null
-		},
-		isStacked: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
-		menu: {
-			type: Array,
-			required: false,
-			default: null
-		},
-		naked: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
-		indicated: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
-	},
-
-	data() {
-		return {
-			active: true,
-			dragging: false,
-			draghover: false,
-			dropready: false,
-			faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown,
-		};
-	},
-
-	computed: {
-		isMainColumn(): boolean {
-			return this.column == null;
-		},
-
-		width(): number {
-			return this.isMainColumn ? 350 : this.column.width;
-		},
-
-		keymap(): any {
-			return {
-				'shift+up': () => this.$parent.$emit('parent-focus', 'up'),
-				'shift+down': () => this.$parent.$emit('parent-focus', 'down'),
-				'shift+left': () => this.$parent.$emit('parent-focus', 'left'),
-				'shift+right': () => this.$parent.$emit('parent-focus', 'right'),
-			};
-		}
-	},
-
-	watch: {
-		active(v) {
-			this.$emit('change-active-state', v);
-		},
-
-		dragging(v) {
-			os.deckGlobalEvents.emit(v ? 'column.dragStart' : 'column.dragEnd');
-		}
-	},
-
-	mounted() {
-		if (!this.isMainColumn) {
-			os.deckGlobalEvents.on('column.dragStart', this.onOtherDragStart);
-			os.deckGlobalEvents.on('column.dragEnd', this.onOtherDragEnd);
-		}
-	},
-
-	beforeUnmount() {
-		if (!this.isMainColumn) {
-			os.deckGlobalEvents.off('column.dragStart', this.onOtherDragStart);
-			os.deckGlobalEvents.off('column.dragEnd', this.onOtherDragEnd);
-		}
-	},
-
-	methods: {
-		onOtherDragStart() {
-			this.dropready = true;
-		},
-
-		onOtherDragEnd() {
-			this.dropready = false;
-		},
-
-		toggleActive() {
-			if (!this.isStacked) return;
-			this.active = !this.active;
-		},
-
-		getMenu() {
-			const items = [{
-				icon: faPencilAlt,
-				text: this.$t('rename'),
-				action: () => {
-					os.dialog({
-						title: this.$t('rename'),
-						input: {
-							default: this.column.name,
-							allowEmpty: false
-						}
-					}).then(({ canceled, result: name }) => {
-						if (canceled) return;
-						this.$store.commit('deviceUser/renameDeckColumn', { id: this.column.id, name });
-					});
-				}
-			}, null, {
-				icon: faArrowLeft,
-				text: this.$t('_deck.swapLeft'),
-				action: () => {
-					this.$store.commit('deviceUser/swapLeftDeckColumn', this.column.id);
-				}
-			}, {
-				icon: faArrowRight,
-				text: this.$t('_deck.swapRight'),
-				action: () => {
-					this.$store.commit('deviceUser/swapRightDeckColumn', this.column.id);
-				}
-			}, this.isStacked ? {
-				icon: faArrowUp,
-				text: this.$t('_deck.swapUp'),
-				action: () => {
-					this.$store.commit('deviceUser/swapUpDeckColumn', this.column.id);
-				}
-			} : undefined, this.isStacked ? {
-				icon: faArrowDown,
-				text: this.$t('_deck.swapDown'),
-				action: () => {
-					this.$store.commit('deviceUser/swapDownDeckColumn', this.column.id);
-				}
-			} : undefined, null, {
-				icon: faWindowRestore,
-				text: this.$t('_deck.stackLeft'),
-				action: () => {
-					this.$store.commit('deviceUser/stackLeftDeckColumn', this.column.id);
-				}
-			}, this.isStacked ? {
-				icon: faWindowMaximize,
-				text: this.$t('_deck.popRight'),
-				action: () => {
-					this.$store.commit('deviceUser/popRightDeckColumn', this.column.id);
-				}
-			} : undefined, null, {
-				icon: faTrashAlt,
-				text: this.$t('remove'),
-				action: () => {
-					this.$store.commit('deviceUser/removeDeckColumn', this.column.id);
-				}
-			}];
-
-			if (this.menu) {
-				for (const i of this.menu.reverse()) {
-					items.unshift(i);
-				}
-			}
-
-			return items;
-		},
-
-		onContextmenu(e) {
-			if (this.isMainColumn) return;
-			this.showMenu();
-		},
-
-		showMenu() {
-			os.modalMenu(this.getMenu(), this.$refs.menu);
-		},
-
-		goTop() {
-			this.$refs.body.scrollTo({
-				top: 0,
-				behavior: 'smooth'
-			});
-		},
-
-		onDragstart(e) {
-			// メインカラムはドラッグさせない
-			if (this.isMainColumn) {
-				e.preventDefault();
-				return;
-			}
-
-			e.dataTransfer.effectAllowed = 'move';
-			e.dataTransfer.setData(_DATA_TRANSFER_DECK_COLUMN_, this.column.id);
-			this.dragging = true;
-		},
-
-		onDragend(e) {
-			this.dragging = false;
-		},
-
-		onDragover(e) {
-			// メインカラムにはドロップさせない
-			if (this.isMainColumn) {
-				e.dataTransfer.dropEffect = 'none';
-				return;
-			}
-
-			// 自分自身がドラッグされている場合
-			if (this.dragging) {
-				// 自分自身にはドロップさせない
-				e.dataTransfer.dropEffect = 'none';
-				return;
-			}
-
-			const isDeckColumn = e.dataTransfer.types[0] == _DATA_TRANSFER_DECK_COLUMN_;
-
-			e.dataTransfer.dropEffect = isDeckColumn ? 'move' : 'none';
-
-			if (!this.dragging && isDeckColumn) this.draghover = true;
-		},
-
-		onDragleave() {
-			this.draghover = false;
-		},
-
-		onDrop(e) {
-			this.draghover = false;
-			os.deckGlobalEvents.emit('column.dragEnd');
-
-			const id = e.dataTransfer.getData(_DATA_TRANSFER_DECK_COLUMN_);
-			if (id != null && id != '') {
-				this.$store.commit('deviceUser/swapDeckColumn', {
-					a: this.column.id,
-					b: id
-				});
-			}
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.dnpfarvg {
-	$header-height: 42px;
-
-	--section-padding: 10px;
-
-	height: 100%;
-	overflow: hidden;
-	contain: content;
-
-	&.draghover {
-		box-shadow: 0 0 0 2px var(--focus);
-
-		&:after {
-			content: "";
-			display: block;
-			position: absolute;
-			z-index: 1000;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			background: var(--focus);
-		}
-	}
-
-	&.dragging {
-		box-shadow: 0 0 0 2px var(--focus);
-	}
-
-	&.dropready {
-		* {
-			pointer-events: none;
-		}
-	}
-
-	&:not(.active) {
-		flex-basis: $header-height;
-		min-height: $header-height;
-
-		> header.indicated {
-			box-shadow: 4px 0px var(--accent) inset;
-		}
-	}
-
-	&.naked {
-		//background: var(--deckAcrylicColumnBg);
-		background: transparent !important;
-
-		> header {
-			background: transparent;
-			box-shadow: none;
-
-			> button {
-				color: var(--fg);
-			}
-		}
-	}
-
-	&.paged {
-		> div {
-			background: var(--bg);
-		}
-	}
-
-	> header {
-		position: relative;
-		display: flex;
-		z-index: 2;
-		line-height: $header-height;
-		height: $header-height;
-		padding: 0 16px;
-		font-size: 0.9em;
-		color: var(--panelHeaderFg);
-		background: var(--panelHeaderBg);
-		box-shadow: 0 1px 0 0 var(--panelHeaderDivider);
-		cursor: pointer;
-
-		&, * {
-			user-select: none;
-		}
-
-		&.indicated {
-			box-shadow: 0 3px 0 0 var(--accent);
-		}
-
-		> .header {
-			display: inline-block;
-			align-items: center;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-		}
-
-		> span:only-of-type {
-			width: 100%;
-		}
-
-		> .toggleActive,
-		> .action > *,
-		> .menu {
-			z-index: 1;
-			width: $header-height;
-			line-height: $header-height;
-			font-size: 16px;
-			color: var(--faceTextButton);
-
-			&:hover {
-				color: var(--faceTextButtonHover);
-			}
-
-			&:active {
-				color: var(--faceTextButtonActive);
-			}
-		}
-
-		> .toggleActive, > .action {
-			margin-left: -16px;
-		}
-
-		> .action {
-			z-index: 1;
-		}
-
-		> .action:empty {
-			display: none;
-		}
-
-		> .menu {
-			margin-left: auto;
-			margin-right: -16px;
-		}
-	}
-
-	> div {
-		height: calc(100% - #{$header-height});
-		overflow: auto;
-		overflow-x: hidden;
-		-webkit-overflow-scrolling: touch;
-		box-sizing: border-box;
-	}
-}
-</style>
diff --git a/src/client/components/deck/direct-column.vue b/src/client/components/deck/direct-column.vue
deleted file mode 100644
index ec598cebcb..0000000000
--- a/src/client/components/deck/direct-column.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-<XColumn :name="name" :column="column" :is-stacked="isStacked" :menu="menu">
-	<template #header><Fa :icon="faEnvelope" style="margin-right: 8px;"/>{{ column.name }}</template>
-
-	<XNotes :pagination="pagination" @before="before()" @after="after()"/>
-</XColumn>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
-import Progress from '@/scripts/loading';
-import XColumn from './column.vue';
-import XNotes from '../notes.vue';
-import * as os from '@/os';
-
-export default defineComponent({
-	components: {
-		XColumn,
-		XNotes
-	},
-
-	props: {
-		column: {
-			type: Object,
-			required: true
-		},
-		isStacked: {
-			type: Boolean,
-			required: true
-		}
-	},
-
-	data() {
-		return {
-			menu: null,
-			pagination: {
-				endpoint: 'notes/mentions',
-				limit: 10,
-				params: () => ({
-					visibility: 'specified'
-				})
-			},
-			faEnvelope
-		}
-	},
-
-	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		}
-	}
-});
-</script>
diff --git a/src/client/components/deck/list-column.vue b/src/client/components/deck/list-column.vue
deleted file mode 100644
index 4b8fc4a895..0000000000
--- a/src/client/components/deck/list-column.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-<XColumn :menu="menu" :column="column" :is-stacked="isStacked">
-	<template #header>
-		<Fa :icon="faListUl"/><span style="margin-left: 8px;">{{ column.name }}</span>
-	</template>
-
-	<XTimeline v-if="column.listId" ref="timeline" src="list" :list="column.listId" @after="() => $emit('loaded')"/>
-</XColumn>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { faListUl, faCog } from '@fortawesome/free-solid-svg-icons';
-import XColumn from './column.vue';
-import XTimeline from '../timeline.vue';
-import * as os from '@/os';
-
-export default defineComponent({
-	components: {
-		XColumn,
-		XTimeline,
-	},
-
-	props: {
-		column: {
-			type: Object,
-			required: true
-		},
-		isStacked: {
-			type: Boolean,
-			required: true
-		}
-	},
-
-	data() {
-		return {
-			faListUl
-		};
-	},
-
-	watch: {
-		mediaOnly() {
-			(this.$refs.timeline as any).reload();
-		}
-	},
-
-	created() {
-		this.menu = [{
-			icon: faCog,
-			text: this.$t('selectList'),
-			action: this.setList
-		}];
-	},
-
-	mounted() {
-		if (this.column.listId == null) {
-			this.setList();
-		}
-	},
-
-	methods: {
-		async setList() {
-			const lists = await os.api('users/lists/list');
-			const { canceled, result: list } = await os.dialog({
-				title: this.$t('selectList'),
-				type: null,
-				select: {
-					items: lists.map(x => ({
-						value: x, text: x.name
-					})),
-					default: this.column.listId
-				},
-				showCancelButton: true
-			});
-			if (canceled) return;
-			this.column.listId = list.id;
-			this.$store.commit('deviceUser/updateDeckColumn', this.column);
-		},
-
-		focus() {
-			(this.$refs.timeline as any).focus();
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/src/client/components/deck/mentions-column.vue b/src/client/components/deck/mentions-column.vue
deleted file mode 100644
index dfa82af9b9..0000000000
--- a/src/client/components/deck/mentions-column.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-<XColumn :column="column" :is-stacked="isStacked" :menu="menu">
-	<template #header><Fa :icon="faAt" style="margin-right: 8px;"/>{{ column.name }}</template>
-
-	<XNotes :pagination="pagination" @before="before()" @after="after()"/>
-</XColumn>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { faAt } from '@fortawesome/free-solid-svg-icons';
-import Progress from '@/scripts/loading';
-import XColumn from './column.vue';
-import XNotes from '../notes.vue';
-import * as os from '@/os';
-
-export default defineComponent({
-	components: {
-		XColumn,
-		XNotes
-	},
-
-	props: {
-		column: {
-			type: Object,
-			required: true
-		},
-		isStacked: {
-			type: Boolean,
-			required: true
-		}
-	},
-
-	data() {
-		return {
-			menu: null,
-			pagination: {
-				endpoint: 'notes/mentions',
-				limit: 10,
-			},
-			faAt
-		}
-	},
-
-	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		}
-	}
-});
-</script>
diff --git a/src/client/components/deck/notifications-column.vue b/src/client/components/deck/notifications-column.vue
deleted file mode 100644
index 23fcb15681..0000000000
--- a/src/client/components/deck/notifications-column.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-<XColumn :column="column" :is-stacked="isStacked" :menu="menu">
-	<template #header><Fa :icon="faBell" style="margin-right: 8px;"/>{{ column.name }}</template>
-
-	<XNotifications :include-types="column.includingTypes"/>
-</XColumn>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { faCog } from '@fortawesome/free-solid-svg-icons';
-import { faBell } from '@fortawesome/free-regular-svg-icons';
-import XColumn from './column.vue';
-import XNotifications from '../notifications.vue';
-import * as os from '@/os';
-
-export default defineComponent({
-	components: {
-		XColumn,
-		XNotifications
-	},
-
-	props: {
-		column: {
-			type: Object,
-			required: true
-		},
-		isStacked: {
-			type: Boolean,
-			required: true
-		}
-	},
-
-	data() {
-		return {
-			menu: null,
-			faBell
-		}
-	},
-
-	created() {
-		this.menu = [{
-			icon: faCog,
-			text: this.$t('notificationSetting'),
-			action: async () => {
-				os.popup(await import('@/components/notification-setting-window.vue'), {
-					includingTypes: this.column.includingTypes,
-				}, {
-					done: async (res) => {
-						const { includingTypes } = res;
-						this.$store.commit('deviceUser/updateDeckColumn', {
-							...this.column,
-							includingTypes: includingTypes
-						});
-					},
-				}, 'closed');
-			}
-		}];
-	},
-});
-</script>
diff --git a/src/client/components/deck/tl-column.vue b/src/client/components/deck/tl-column.vue
deleted file mode 100644
index f757618881..0000000000
--- a/src/client/components/deck/tl-column.vue
+++ /dev/null
@@ -1,146 +0,0 @@
-<template>
-<XColumn :menu="menu" :column="column" :is-stacked="isStacked" :indicated="indicated" @change-active-state="onChangeActiveState">
-	<template #header>
-		<Fa v-if="column.tl === 'home'" :icon="faHome"/>
-		<Fa v-else-if="column.tl === 'local'" :icon="faComments"/>
-		<Fa v-else-if="column.tl === 'social'" :icon="faShareAlt"/>
-		<Fa v-else-if="column.tl === 'global'" :icon="faGlobe"/>
-		<span style="margin-left: 8px;">{{ column.name }}</span>
-	</template>
-
-	<div class="iwaalbte" v-if="disabled">
-		<p>
-			<Fa :icon="faMinusCircle"/>
-			{{ $t('disabled-timeline.title') }}
-		</p>
-		<p class="desc">{{ $t('disabled-timeline.description') }}</p>
-	</div>
-	<XTimeline v-else-if="column.tl" ref="timeline" :src="column.tl" @after="() => $emit('loaded')" @queue="queueUpdated" @note="onNote" :key="column.tl"/>
-</XColumn>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { faMinusCircle, faHome, faComments, faShareAlt, faGlobe, faCog } from '@fortawesome/free-solid-svg-icons';
-import XColumn from './column.vue';
-import XTimeline from '../timeline.vue';
-import * as os from '@/os';
-
-export default defineComponent({
-	components: {
-		XColumn,
-		XTimeline,
-	},
-
-	props: {
-		column: {
-			type: Object,
-			required: true
-		},
-		isStacked: {
-			type: Boolean,
-			required: true
-		}
-	},
-
-	data() {
-		return {
-			menu: null,
-			disabled: false,
-			indicated: false,
-			columnActive: true,
-			faMinusCircle, faHome, faComments, faShareAlt, faGlobe,
-		};
-	},
-
-	watch: {
-		mediaOnly() {
-			(this.$refs.timeline as any).reload();
-		}
-	},
-
-	created() {
-		this.menu = [{
-			icon: faCog,
-			text: this.$t('timeline'),
-			action: this.setType
-		}];
-	},
-
-	mounted() {
-		if (this.column.tl == null) {
-			this.setType();
-		} else {
-			this.disabled = !this.$store.state.i.isModerator && !this.$store.state.i.isAdmin && (
-				this.$store.state.instance.meta.disableLocalTimeline && ['local', 'social'].includes(this.column.tl) ||
-				this.$store.state.instance.meta.disableGlobalTimeline && ['global'].includes(this.column.tl));
-		}
-	},
-
-	methods: {
-		async setType() {
-			const { canceled, result: src } = await os.dialog({
-				title: this.$t('timeline'),
-				type: null,
-				select: {
-					items: [{
-						value: 'home', text: this.$t('_timelines.home')
-					}, {
-						value: 'local', text: this.$t('_timelines.local')
-					}, {
-						value: 'social', text: this.$t('_timelines.social')
-					}, {
-						value: 'global', text: this.$t('_timelines.global')
-					}]
-				},
-			});
-			if (canceled) {
-				if (this.column.tl == null) {
-					this.$store.commit('deviceUser/removeDeckColumn', this.column.id);
-				}
-				return;
-			}
-			this.column.tl = src;
-			this.$store.commit('deviceUser/updateDeckColumn', this.column);
-		},
-
-		queueUpdated(q) {
-			if (this.columnActive) {
-				this.indicated = q !== 0;
-			}
-		},
-
-		onNote() {
-			if (!this.columnActive) {
-				this.indicated = true;
-			}
-		},
-
-		onChangeActiveState(state) {
-			this.columnActive = state;
-
-			if (this.columnActive) {
-				this.indicated = false;
-			}
-		},
-
-		focus() {
-			(this.$refs.timeline as any).focus();
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.iwaalbte {
-	text-align: center;
-
-	> p {
-		margin: 16px;
-
-		&.desc {
-			font-size: 14px;
-		}
-	}
-}
-</style>
diff --git a/src/client/components/deck/widgets-column.vue b/src/client/components/deck/widgets-column.vue
deleted file mode 100644
index e19fb01e5e..0000000000
--- a/src/client/components/deck/widgets-column.vue
+++ /dev/null
@@ -1,160 +0,0 @@
-<template>
-<XColumn :menu="menu" :naked="true" :column="column" :is-stacked="isStacked">
-	<template #header><Fa :icon="faWindowMaximize" style="margin-right: 8px;"/>{{ column.name }}</template>
-
-	<div class="wtdtxvec">
-		<template v-if="edit">
-			<header>
-				<MkSelect v-model:value="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>
-				</MkSelect>
-				<MkButton inline @click="addWidget" primary><Fa :icon="faPlus"/> {{ $t('add') }}</MkButton>
-				<MkButton inline @click="edit = false">{{ $t('close') }}</MkButton>
-			</header>
-			<XDraggable
-				:list="column.widgets"
-				animation="150"
-				@sort="onWidgetSort"
-			>
-				<div v-for="widget in column.widgets" class="customize-container" :key="widget.id" @click="widgetFunc(widget.id)">
-					<button class="remove _button" @click.prevent.stop="removeWidget(widget)"><Fa :icon="faTimes"/></button>
-					<component :is="`mkw-${widget.name}`" :widget="widget" :setting-callback="setting => settings[widget.id] = setting" :column="column"/>
-				</div>
-			</XDraggable>
-		</template>
-		<component v-else class="widget" v-for="widget in column.widgets" :is="`mkw-${widget.name}`" :key="widget.id" :widget="widget" :column="column"/>
-	</div>
-</XColumn>
-</template>
-
-<script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
-import { v4 as uuid } from 'uuid';
-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';
-
-export default defineComponent({
-	components: {
-		XColumn,
-		XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)),
-		MkSelect,
-		MkButton,
-	},
-
-	props: {
-		column: {
-			type: Object,
-			required: true,
-		},
-		isStacked: {
-			type: Boolean,
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-			edit: false,
-			menu: null,
-			widgetAdderSelected: null,
-			widgets,
-			settings: {},
-			faWindowMaximize, faTimes, faPlus
-		};
-	},
-
-	created() {
-		this.menu = [{
-			icon: faCog,
-			text: this.$t('edit'),
-			action: () => {
-				this.edit = !this.edit;
-			}
-		}];
-	},
-
-	methods: {
-		widgetFunc(id) {
-			this.settings[id]();
-		},
-
-		onWidgetSort() {
-			this.saveWidgets();
-		},
-
-		addWidget() {
-			if (this.widgetAdderSelected == null) return;
-
-			this.$store.commit('deviceUser/addDeckWidget', {
-				id: this.column.id,
-				widget: {
-					name: this.widgetAdderSelected,
-					id: uuid(),
-					data: {}
-				}
-			});
-
-			this.widgetAdderSelected = null;
-		},
-
-		removeWidget(widget) {
-			this.$store.commit('deviceUser/removeDeckWidget', {
-				id: this.column.id,
-				widget
-			});
-		},
-
-		saveWidgets() {
-			this.$store.commit('deviceUser/updateDeckColumn', this.column);
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.wtdtxvec {
-	padding-top: 1px; // ウィジェットのbox-shadowを利用した1px borderを隠さないようにするため
-
-	> header {
-		padding: 16px;
-
-		> * {
-			width: 100%;
-			padding: 4px;
-		}
-	}
-
-	> .widget, .customize-container {
-		margin: 8px;
-
-		&:first-of-type {
-			margin-top: 0;
-		}
-	}
-
-	.customize-container {
-		position: relative;
-		cursor: move;
-
-		> *:not(.remove) {
-			pointer-events: none;
-		}
-
-		> .remove {
-			position: absolute;
-			z-index: 2;
-			top: 8px;
-			right: 8px;
-			width: 32px;
-			height: 32px;
-			color: #fff;
-			background: rgba(#000, 0.7);
-			border-radius: 4px;
-		}
-	}
-}
-</style>
diff --git a/src/client/ui/deck.vue b/src/client/ui/deck.vue
index 2a5008dc56..b2097be493 100644
--- a/src/client/ui/deck.vue
+++ b/src/client/ui/deck.vue
@@ -40,8 +40,8 @@ import {  } from '@fortawesome/free-regular-svg-icons';
 import { v4 as uuid } from 'uuid';
 import { host } from '@/config';
 import { search } from '@/scripts/search';
-import DeckColumnCore from '@/components/deck/column-core.vue';
-import DeckColumn from '@/components/deck/column.vue';
+import DeckColumnCore from '@/ui/deck/column-core.vue';
+import DeckColumn from '@/ui/deck/column.vue';
 import XSidebar from '@/components/sidebar.vue';
 import XHeader from './_common_/header.vue';
 import { getScrollContainer } from '@/scripts/scroll';
diff --git a/src/client/ui/deck/antenna-column.vue b/src/client/ui/deck/antenna-column.vue
new file mode 100644
index 0000000000..87df0fa870
--- /dev/null
+++ b/src/client/ui/deck/antenna-column.vue
@@ -0,0 +1,88 @@
+<template>
+<XColumn :menu="menu" :column="column" :is-stacked="isStacked">
+	<template #header>
+		<Fa :icon="faSatellite"/><span style="margin-left: 8px;">{{ column.name }}</span>
+	</template>
+
+	<XTimeline v-if="column.antennaId" ref="timeline" src="antenna" :antenna="column.antennaId" @after="() => $emit('loaded')"/>
+</XColumn>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { faSatellite, faCog } from '@fortawesome/free-solid-svg-icons';
+import XColumn from './column.vue';
+import XTimeline from '@/components/timeline.vue';
+import * as os from '@/os';
+
+export default defineComponent({
+	components: {
+		XColumn,
+		XTimeline,
+	},
+
+	props: {
+		column: {
+			type: Object,
+			required: true
+		},
+		isStacked: {
+			type: Boolean,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			faSatellite
+		};
+	},
+
+	watch: {
+		mediaOnly() {
+			(this.$refs.timeline as any).reload();
+		}
+	},
+
+	created() {
+		this.menu = [{
+			icon: faCog,
+			text: this.$t('selectAntenna'),
+			action: this.setAntenna
+		}];
+	},
+
+	mounted() {
+		if (this.column.antennaId == null) {
+			this.setAntenna();
+		}
+	},
+
+	methods: {
+		async setAntenna() {
+			const antennas = await os.api('antennas/list');
+			const { canceled, result: antenna } = await os.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;
+			this.column.antennaId = antenna.id;
+			this.$store.commit('deviceUser/updateDeckColumn', this.column);
+		},
+
+		focus() {
+			(this.$refs.timeline as any).focus();
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/client/ui/deck/column-core.vue b/src/client/ui/deck/column-core.vue
new file mode 100644
index 0000000000..36872d987c
--- /dev/null
+++ b/src/client/ui/deck/column-core.vue
@@ -0,0 +1,50 @@
+<template>
+<!-- TODO: リファクタの余地がありそう -->
+<XWidgetsColumn v-if="column.type === 'widgets'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<XNotificationsColumn v-else-if="column.type === 'notifications'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<XTlColumn v-else-if="column.type === 'tl'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<XListColumn v-else-if="column.type === 'list'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<XAntennaColumn v-else-if="column.type === 'antenna'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<!-- TODO: <XTlColumn v-else-if="column.type === 'hashtag'" :column="column" :is-stacked="isStacked" v-on="$listeners"/> -->
+<XMentionsColumn v-else-if="column.type === 'mentions'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<XDirectColumn v-else-if="column.type === 'direct'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import XTlColumn from './tl-column.vue';
+import XAntennaColumn from './antenna-column.vue';
+import XListColumn from './list-column.vue';
+import XNotificationsColumn from './notifications-column.vue';
+import XWidgetsColumn from './widgets-column.vue';
+import XMentionsColumn from './mentions-column.vue';
+import XDirectColumn from './direct-column.vue';
+
+export default defineComponent({
+	components: {
+		XTlColumn,
+		XAntennaColumn,
+		XListColumn,
+		XNotificationsColumn,
+		XWidgetsColumn,
+		XMentionsColumn,
+		XDirectColumn
+	},
+	props: {
+		column: {
+			type: Object,
+			required: true
+		},
+		isStacked: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+	methods: {
+		focus() {
+			this.$children[0].focus();
+		}
+	}
+});
+</script>
diff --git a/src/client/ui/deck/column.vue b/src/client/ui/deck/column.vue
new file mode 100644
index 0000000000..8137cbfd45
--- /dev/null
+++ b/src/client/ui/deck/column.vue
@@ -0,0 +1,419 @@
+<template>
+<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
+<section class="dnpfarvg _panel _narrow_" :class="{ paged: isMainColumn, naked, _close_: !isMainColumn, active, isStacked, draghover, dragging, dropready }"
+	@dragover.prevent.stop="onDragover"
+	@dragleave="onDragleave"
+	@drop.prevent.stop="onDrop"
+	v-hotkey="keymap"
+	:style="{ width: `${width}px` }"
+>
+	<header :class="{ indicated }"
+		draggable="true"
+		@click="goTop"
+		@dragstart="onDragstart"
+		@dragend="onDragend"
+		@contextmenu.prevent.stop="onContextmenu"
+	>
+		<button class="toggleActive _button" @click="toggleActive" v-if="isStacked">
+			<template v-if="active"><Fa :icon="faAngleUp"/></template>
+			<template v-else><Fa :icon="faAngleDown"/></template>
+		</button>
+		<div class="action">
+			<slot name="action"></slot>
+		</div>
+		<span class="header"><slot name="header"></slot></span>
+		<button v-if="!isMainColumn" class="menu _button" ref="menu" @click.stop="showMenu"><Fa :icon="faCaretDown"/></button>
+	</header>
+	<div ref="body" v-show="active">
+		<slot></slot>
+	</div>
+</section>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown, faArrowRight, faArrowLeft, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
+import { faWindowMaximize, faTrashAlt, faWindowRestore } from '@fortawesome/free-regular-svg-icons';
+import * as os from '@/os';
+
+export default defineComponent({
+	props: {
+		column: {
+			type: Object,
+			required: false,
+			default: null
+		},
+		isStacked: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		menu: {
+			type: Array,
+			required: false,
+			default: null
+		},
+		naked: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		indicated: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+	},
+
+	data() {
+		return {
+			active: true,
+			dragging: false,
+			draghover: false,
+			dropready: false,
+			faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown,
+		};
+	},
+
+	computed: {
+		isMainColumn(): boolean {
+			return this.column == null;
+		},
+
+		width(): number {
+			return this.isMainColumn ? 350 : this.column.width;
+		},
+
+		keymap(): any {
+			return {
+				'shift+up': () => this.$parent.$emit('parent-focus', 'up'),
+				'shift+down': () => this.$parent.$emit('parent-focus', 'down'),
+				'shift+left': () => this.$parent.$emit('parent-focus', 'left'),
+				'shift+right': () => this.$parent.$emit('parent-focus', 'right'),
+			};
+		}
+	},
+
+	watch: {
+		active(v) {
+			this.$emit('change-active-state', v);
+		},
+
+		dragging(v) {
+			os.deckGlobalEvents.emit(v ? 'column.dragStart' : 'column.dragEnd');
+		}
+	},
+
+	mounted() {
+		if (!this.isMainColumn) {
+			os.deckGlobalEvents.on('column.dragStart', this.onOtherDragStart);
+			os.deckGlobalEvents.on('column.dragEnd', this.onOtherDragEnd);
+		}
+	},
+
+	beforeUnmount() {
+		if (!this.isMainColumn) {
+			os.deckGlobalEvents.off('column.dragStart', this.onOtherDragStart);
+			os.deckGlobalEvents.off('column.dragEnd', this.onOtherDragEnd);
+		}
+	},
+
+	methods: {
+		onOtherDragStart() {
+			this.dropready = true;
+		},
+
+		onOtherDragEnd() {
+			this.dropready = false;
+		},
+
+		toggleActive() {
+			if (!this.isStacked) return;
+			this.active = !this.active;
+		},
+
+		getMenu() {
+			const items = [{
+				icon: faPencilAlt,
+				text: this.$t('rename'),
+				action: () => {
+					os.dialog({
+						title: this.$t('rename'),
+						input: {
+							default: this.column.name,
+							allowEmpty: false
+						}
+					}).then(({ canceled, result: name }) => {
+						if (canceled) return;
+						this.$store.commit('deviceUser/renameDeckColumn', { id: this.column.id, name });
+					});
+				}
+			}, null, {
+				icon: faArrowLeft,
+				text: this.$t('_deck.swapLeft'),
+				action: () => {
+					this.$store.commit('deviceUser/swapLeftDeckColumn', this.column.id);
+				}
+			}, {
+				icon: faArrowRight,
+				text: this.$t('_deck.swapRight'),
+				action: () => {
+					this.$store.commit('deviceUser/swapRightDeckColumn', this.column.id);
+				}
+			}, this.isStacked ? {
+				icon: faArrowUp,
+				text: this.$t('_deck.swapUp'),
+				action: () => {
+					this.$store.commit('deviceUser/swapUpDeckColumn', this.column.id);
+				}
+			} : undefined, this.isStacked ? {
+				icon: faArrowDown,
+				text: this.$t('_deck.swapDown'),
+				action: () => {
+					this.$store.commit('deviceUser/swapDownDeckColumn', this.column.id);
+				}
+			} : undefined, null, {
+				icon: faWindowRestore,
+				text: this.$t('_deck.stackLeft'),
+				action: () => {
+					this.$store.commit('deviceUser/stackLeftDeckColumn', this.column.id);
+				}
+			}, this.isStacked ? {
+				icon: faWindowMaximize,
+				text: this.$t('_deck.popRight'),
+				action: () => {
+					this.$store.commit('deviceUser/popRightDeckColumn', this.column.id);
+				}
+			} : undefined, null, {
+				icon: faTrashAlt,
+				text: this.$t('remove'),
+				action: () => {
+					this.$store.commit('deviceUser/removeDeckColumn', this.column.id);
+				}
+			}];
+
+			if (this.menu) {
+				for (const i of this.menu.reverse()) {
+					items.unshift(i);
+				}
+			}
+
+			return items;
+		},
+
+		onContextmenu(e) {
+			if (this.isMainColumn) return;
+			this.showMenu();
+		},
+
+		showMenu() {
+			os.modalMenu(this.getMenu(), this.$refs.menu);
+		},
+
+		goTop() {
+			this.$refs.body.scrollTo({
+				top: 0,
+				behavior: 'smooth'
+			});
+		},
+
+		onDragstart(e) {
+			// メインカラムはドラッグさせない
+			if (this.isMainColumn) {
+				e.preventDefault();
+				return;
+			}
+
+			e.dataTransfer.effectAllowed = 'move';
+			e.dataTransfer.setData(_DATA_TRANSFER_DECK_COLUMN_, this.column.id);
+			this.dragging = true;
+		},
+
+		onDragend(e) {
+			this.dragging = false;
+		},
+
+		onDragover(e) {
+			// メインカラムにはドロップさせない
+			if (this.isMainColumn) {
+				e.dataTransfer.dropEffect = 'none';
+				return;
+			}
+
+			// 自分自身がドラッグされている場合
+			if (this.dragging) {
+				// 自分自身にはドロップさせない
+				e.dataTransfer.dropEffect = 'none';
+				return;
+			}
+
+			const isDeckColumn = e.dataTransfer.types[0] == _DATA_TRANSFER_DECK_COLUMN_;
+
+			e.dataTransfer.dropEffect = isDeckColumn ? 'move' : 'none';
+
+			if (!this.dragging && isDeckColumn) this.draghover = true;
+		},
+
+		onDragleave() {
+			this.draghover = false;
+		},
+
+		onDrop(e) {
+			this.draghover = false;
+			os.deckGlobalEvents.emit('column.dragEnd');
+
+			const id = e.dataTransfer.getData(_DATA_TRANSFER_DECK_COLUMN_);
+			if (id != null && id != '') {
+				this.$store.commit('deviceUser/swapDeckColumn', {
+					a: this.column.id,
+					b: id
+				});
+			}
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.dnpfarvg {
+	$header-height: 42px;
+
+	--section-padding: 10px;
+
+	height: 100%;
+	overflow: hidden;
+	contain: content;
+
+	&.draghover {
+		box-shadow: 0 0 0 2px var(--focus);
+
+		&:after {
+			content: "";
+			display: block;
+			position: absolute;
+			z-index: 1000;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			background: var(--focus);
+		}
+	}
+
+	&.dragging {
+		box-shadow: 0 0 0 2px var(--focus);
+	}
+
+	&.dropready {
+		* {
+			pointer-events: none;
+		}
+	}
+
+	&:not(.active) {
+		flex-basis: $header-height;
+		min-height: $header-height;
+
+		> header.indicated {
+			box-shadow: 4px 0px var(--accent) inset;
+		}
+	}
+
+	&.naked {
+		//background: var(--deckAcrylicColumnBg);
+		background: transparent !important;
+
+		> header {
+			background: transparent;
+			box-shadow: none;
+
+			> button {
+				color: var(--fg);
+			}
+		}
+	}
+
+	&.paged {
+		> div {
+			background: var(--bg);
+		}
+	}
+
+	> header {
+		position: relative;
+		display: flex;
+		z-index: 2;
+		line-height: $header-height;
+		height: $header-height;
+		padding: 0 16px;
+		font-size: 0.9em;
+		color: var(--panelHeaderFg);
+		background: var(--panelHeaderBg);
+		box-shadow: 0 1px 0 0 var(--panelHeaderDivider);
+		cursor: pointer;
+
+		&, * {
+			user-select: none;
+		}
+
+		&.indicated {
+			box-shadow: 0 3px 0 0 var(--accent);
+		}
+
+		> .header {
+			display: inline-block;
+			align-items: center;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+
+		> span:only-of-type {
+			width: 100%;
+		}
+
+		> .toggleActive,
+		> .action > *,
+		> .menu {
+			z-index: 1;
+			width: $header-height;
+			line-height: $header-height;
+			font-size: 16px;
+			color: var(--faceTextButton);
+
+			&:hover {
+				color: var(--faceTextButtonHover);
+			}
+
+			&:active {
+				color: var(--faceTextButtonActive);
+			}
+		}
+
+		> .toggleActive, > .action {
+			margin-left: -16px;
+		}
+
+		> .action {
+			z-index: 1;
+		}
+
+		> .action:empty {
+			display: none;
+		}
+
+		> .menu {
+			margin-left: auto;
+			margin-right: -16px;
+		}
+	}
+
+	> div {
+		height: calc(100% - #{$header-height});
+		overflow: auto;
+		overflow-x: hidden;
+		-webkit-overflow-scrolling: touch;
+		box-sizing: border-box;
+	}
+}
+</style>
diff --git a/src/client/ui/deck/direct-column.vue b/src/client/ui/deck/direct-column.vue
new file mode 100644
index 0000000000..874a55ba0e
--- /dev/null
+++ b/src/client/ui/deck/direct-column.vue
@@ -0,0 +1,58 @@
+<template>
+<XColumn :name="name" :column="column" :is-stacked="isStacked" :menu="menu">
+	<template #header><Fa :icon="faEnvelope" style="margin-right: 8px;"/>{{ column.name }}</template>
+
+	<XNotes :pagination="pagination" @before="before()" @after="after()"/>
+</XColumn>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
+import Progress from '@/scripts/loading';
+import XColumn from './column.vue';
+import XNotes from '@/components/notes.vue';
+import * as os from '@/os';
+
+export default defineComponent({
+	components: {
+		XColumn,
+		XNotes
+	},
+
+	props: {
+		column: {
+			type: Object,
+			required: true
+		},
+		isStacked: {
+			type: Boolean,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			menu: null,
+			pagination: {
+				endpoint: 'notes/mentions',
+				limit: 10,
+				params: () => ({
+					visibility: 'specified'
+				})
+			},
+			faEnvelope
+		}
+	},
+
+	methods: {
+		before() {
+			Progress.start();
+		},
+
+		after() {
+			Progress.done();
+		}
+	}
+});
+</script>
diff --git a/src/client/ui/deck/list-column.vue b/src/client/ui/deck/list-column.vue
new file mode 100644
index 0000000000..ee4bf2bf1b
--- /dev/null
+++ b/src/client/ui/deck/list-column.vue
@@ -0,0 +1,88 @@
+<template>
+<XColumn :menu="menu" :column="column" :is-stacked="isStacked">
+	<template #header>
+		<Fa :icon="faListUl"/><span style="margin-left: 8px;">{{ column.name }}</span>
+	</template>
+
+	<XTimeline v-if="column.listId" ref="timeline" src="list" :list="column.listId" @after="() => $emit('loaded')"/>
+</XColumn>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { faListUl, faCog } from '@fortawesome/free-solid-svg-icons';
+import XColumn from './column.vue';
+import XTimeline from '@/components/timeline.vue';
+import * as os from '@/os';
+
+export default defineComponent({
+	components: {
+		XColumn,
+		XTimeline,
+	},
+
+	props: {
+		column: {
+			type: Object,
+			required: true
+		},
+		isStacked: {
+			type: Boolean,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			faListUl
+		};
+	},
+
+	watch: {
+		mediaOnly() {
+			(this.$refs.timeline as any).reload();
+		}
+	},
+
+	created() {
+		this.menu = [{
+			icon: faCog,
+			text: this.$t('selectList'),
+			action: this.setList
+		}];
+	},
+
+	mounted() {
+		if (this.column.listId == null) {
+			this.setList();
+		}
+	},
+
+	methods: {
+		async setList() {
+			const lists = await os.api('users/lists/list');
+			const { canceled, result: list } = await os.dialog({
+				title: this.$t('selectList'),
+				type: null,
+				select: {
+					items: lists.map(x => ({
+						value: x, text: x.name
+					})),
+					default: this.column.listId
+				},
+				showCancelButton: true
+			});
+			if (canceled) return;
+			this.column.listId = list.id;
+			this.$store.commit('deviceUser/updateDeckColumn', this.column);
+		},
+
+		focus() {
+			(this.$refs.timeline as any).focus();
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/client/ui/deck/mentions-column.vue b/src/client/ui/deck/mentions-column.vue
new file mode 100644
index 0000000000..3ba4f4e6ad
--- /dev/null
+++ b/src/client/ui/deck/mentions-column.vue
@@ -0,0 +1,55 @@
+<template>
+<XColumn :column="column" :is-stacked="isStacked" :menu="menu">
+	<template #header><Fa :icon="faAt" style="margin-right: 8px;"/>{{ column.name }}</template>
+
+	<XNotes :pagination="pagination" @before="before()" @after="after()"/>
+</XColumn>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { faAt } from '@fortawesome/free-solid-svg-icons';
+import Progress from '@/scripts/loading';
+import XColumn from './column.vue';
+import XNotes from '@/components/notes.vue';
+import * as os from '@/os';
+
+export default defineComponent({
+	components: {
+		XColumn,
+		XNotes
+	},
+
+	props: {
+		column: {
+			type: Object,
+			required: true
+		},
+		isStacked: {
+			type: Boolean,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			menu: null,
+			pagination: {
+				endpoint: 'notes/mentions',
+				limit: 10,
+			},
+			faAt
+		}
+	},
+
+	methods: {
+		before() {
+			Progress.start();
+		},
+
+		after() {
+			Progress.done();
+		}
+	}
+});
+</script>
diff --git a/src/client/ui/deck/notifications-column.vue b/src/client/ui/deck/notifications-column.vue
new file mode 100644
index 0000000000..6284cdcd0b
--- /dev/null
+++ b/src/client/ui/deck/notifications-column.vue
@@ -0,0 +1,61 @@
+<template>
+<XColumn :column="column" :is-stacked="isStacked" :menu="menu">
+	<template #header><Fa :icon="faBell" style="margin-right: 8px;"/>{{ column.name }}</template>
+
+	<XNotifications :include-types="column.includingTypes"/>
+</XColumn>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { faCog } from '@fortawesome/free-solid-svg-icons';
+import { faBell } from '@fortawesome/free-regular-svg-icons';
+import XColumn from './column.vue';
+import XNotifications from '@/components/notifications.vue';
+import * as os from '@/os';
+
+export default defineComponent({
+	components: {
+		XColumn,
+		XNotifications
+	},
+
+	props: {
+		column: {
+			type: Object,
+			required: true
+		},
+		isStacked: {
+			type: Boolean,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			menu: null,
+			faBell
+		}
+	},
+
+	created() {
+		this.menu = [{
+			icon: faCog,
+			text: this.$t('notificationSetting'),
+			action: async () => {
+				os.popup(await import('@/components/notification-setting-window.vue'), {
+					includingTypes: this.column.includingTypes,
+				}, {
+					done: async (res) => {
+						const { includingTypes } = res;
+						this.$store.commit('deviceUser/updateDeckColumn', {
+							...this.column,
+							includingTypes: includingTypes
+						});
+					},
+				}, 'closed');
+			}
+		}];
+	},
+});
+</script>
diff --git a/src/client/ui/deck/tl-column.vue b/src/client/ui/deck/tl-column.vue
new file mode 100644
index 0000000000..de95857992
--- /dev/null
+++ b/src/client/ui/deck/tl-column.vue
@@ -0,0 +1,146 @@
+<template>
+<XColumn :menu="menu" :column="column" :is-stacked="isStacked" :indicated="indicated" @change-active-state="onChangeActiveState">
+	<template #header>
+		<Fa v-if="column.tl === 'home'" :icon="faHome"/>
+		<Fa v-else-if="column.tl === 'local'" :icon="faComments"/>
+		<Fa v-else-if="column.tl === 'social'" :icon="faShareAlt"/>
+		<Fa v-else-if="column.tl === 'global'" :icon="faGlobe"/>
+		<span style="margin-left: 8px;">{{ column.name }}</span>
+	</template>
+
+	<div class="iwaalbte" v-if="disabled">
+		<p>
+			<Fa :icon="faMinusCircle"/>
+			{{ $t('disabled-timeline.title') }}
+		</p>
+		<p class="desc">{{ $t('disabled-timeline.description') }}</p>
+	</div>
+	<XTimeline v-else-if="column.tl" ref="timeline" :src="column.tl" @after="() => $emit('loaded')" @queue="queueUpdated" @note="onNote" :key="column.tl"/>
+</XColumn>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { faMinusCircle, faHome, faComments, faShareAlt, faGlobe, faCog } from '@fortawesome/free-solid-svg-icons';
+import XColumn from './column.vue';
+import XTimeline from '@/components/timeline.vue';
+import * as os from '@/os';
+
+export default defineComponent({
+	components: {
+		XColumn,
+		XTimeline,
+	},
+
+	props: {
+		column: {
+			type: Object,
+			required: true
+		},
+		isStacked: {
+			type: Boolean,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			menu: null,
+			disabled: false,
+			indicated: false,
+			columnActive: true,
+			faMinusCircle, faHome, faComments, faShareAlt, faGlobe,
+		};
+	},
+
+	watch: {
+		mediaOnly() {
+			(this.$refs.timeline as any).reload();
+		}
+	},
+
+	created() {
+		this.menu = [{
+			icon: faCog,
+			text: this.$t('timeline'),
+			action: this.setType
+		}];
+	},
+
+	mounted() {
+		if (this.column.tl == null) {
+			this.setType();
+		} else {
+			this.disabled = !this.$store.state.i.isModerator && !this.$store.state.i.isAdmin && (
+				this.$store.state.instance.meta.disableLocalTimeline && ['local', 'social'].includes(this.column.tl) ||
+				this.$store.state.instance.meta.disableGlobalTimeline && ['global'].includes(this.column.tl));
+		}
+	},
+
+	methods: {
+		async setType() {
+			const { canceled, result: src } = await os.dialog({
+				title: this.$t('timeline'),
+				type: null,
+				select: {
+					items: [{
+						value: 'home', text: this.$t('_timelines.home')
+					}, {
+						value: 'local', text: this.$t('_timelines.local')
+					}, {
+						value: 'social', text: this.$t('_timelines.social')
+					}, {
+						value: 'global', text: this.$t('_timelines.global')
+					}]
+				},
+			});
+			if (canceled) {
+				if (this.column.tl == null) {
+					this.$store.commit('deviceUser/removeDeckColumn', this.column.id);
+				}
+				return;
+			}
+			this.column.tl = src;
+			this.$store.commit('deviceUser/updateDeckColumn', this.column);
+		},
+
+		queueUpdated(q) {
+			if (this.columnActive) {
+				this.indicated = q !== 0;
+			}
+		},
+
+		onNote() {
+			if (!this.columnActive) {
+				this.indicated = true;
+			}
+		},
+
+		onChangeActiveState(state) {
+			this.columnActive = state;
+
+			if (this.columnActive) {
+				this.indicated = false;
+			}
+		},
+
+		focus() {
+			(this.$refs.timeline as any).focus();
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.iwaalbte {
+	text-align: center;
+
+	> p {
+		margin: 16px;
+
+		&.desc {
+			font-size: 14px;
+		}
+	}
+}
+</style>
diff --git a/src/client/ui/deck/widgets-column.vue b/src/client/ui/deck/widgets-column.vue
new file mode 100644
index 0000000000..e19fb01e5e
--- /dev/null
+++ b/src/client/ui/deck/widgets-column.vue
@@ -0,0 +1,160 @@
+<template>
+<XColumn :menu="menu" :naked="true" :column="column" :is-stacked="isStacked">
+	<template #header><Fa :icon="faWindowMaximize" style="margin-right: 8px;"/>{{ column.name }}</template>
+
+	<div class="wtdtxvec">
+		<template v-if="edit">
+			<header>
+				<MkSelect v-model:value="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>
+				</MkSelect>
+				<MkButton inline @click="addWidget" primary><Fa :icon="faPlus"/> {{ $t('add') }}</MkButton>
+				<MkButton inline @click="edit = false">{{ $t('close') }}</MkButton>
+			</header>
+			<XDraggable
+				:list="column.widgets"
+				animation="150"
+				@sort="onWidgetSort"
+			>
+				<div v-for="widget in column.widgets" class="customize-container" :key="widget.id" @click="widgetFunc(widget.id)">
+					<button class="remove _button" @click.prevent.stop="removeWidget(widget)"><Fa :icon="faTimes"/></button>
+					<component :is="`mkw-${widget.name}`" :widget="widget" :setting-callback="setting => settings[widget.id] = setting" :column="column"/>
+				</div>
+			</XDraggable>
+		</template>
+		<component v-else class="widget" v-for="widget in column.widgets" :is="`mkw-${widget.name}`" :key="widget.id" :widget="widget" :column="column"/>
+	</div>
+</XColumn>
+</template>
+
+<script lang="ts">
+import { defineComponent, defineAsyncComponent } from 'vue';
+import { v4 as uuid } from 'uuid';
+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';
+
+export default defineComponent({
+	components: {
+		XColumn,
+		XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)),
+		MkSelect,
+		MkButton,
+	},
+
+	props: {
+		column: {
+			type: Object,
+			required: true,
+		},
+		isStacked: {
+			type: Boolean,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			edit: false,
+			menu: null,
+			widgetAdderSelected: null,
+			widgets,
+			settings: {},
+			faWindowMaximize, faTimes, faPlus
+		};
+	},
+
+	created() {
+		this.menu = [{
+			icon: faCog,
+			text: this.$t('edit'),
+			action: () => {
+				this.edit = !this.edit;
+			}
+		}];
+	},
+
+	methods: {
+		widgetFunc(id) {
+			this.settings[id]();
+		},
+
+		onWidgetSort() {
+			this.saveWidgets();
+		},
+
+		addWidget() {
+			if (this.widgetAdderSelected == null) return;
+
+			this.$store.commit('deviceUser/addDeckWidget', {
+				id: this.column.id,
+				widget: {
+					name: this.widgetAdderSelected,
+					id: uuid(),
+					data: {}
+				}
+			});
+
+			this.widgetAdderSelected = null;
+		},
+
+		removeWidget(widget) {
+			this.$store.commit('deviceUser/removeDeckWidget', {
+				id: this.column.id,
+				widget
+			});
+		},
+
+		saveWidgets() {
+			this.$store.commit('deviceUser/updateDeckColumn', this.column);
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.wtdtxvec {
+	padding-top: 1px; // ウィジェットのbox-shadowを利用した1px borderを隠さないようにするため
+
+	> header {
+		padding: 16px;
+
+		> * {
+			width: 100%;
+			padding: 4px;
+		}
+	}
+
+	> .widget, .customize-container {
+		margin: 8px;
+
+		&:first-of-type {
+			margin-top: 0;
+		}
+	}
+
+	.customize-container {
+		position: relative;
+		cursor: move;
+
+		> *:not(.remove) {
+			pointer-events: none;
+		}
+
+		> .remove {
+			position: absolute;
+			z-index: 2;
+			top: 8px;
+			right: 8px;
+			width: 32px;
+			height: 32px;
+			color: #fff;
+			background: rgba(#000, 0.7);
+			border-radius: 4px;
+		}
+	}
+}
+</style>
-- 
cgit v1.3.1-freya