Refactor

9 files changed, 0 insertions, 1125 deletions

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>