From 53422ffcb296be404c0f3ef7e175bedecca4fb4d Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 15 Feb 2019 05:08:59 +0900
Subject: Improve desktop UX (#4262)

* wip

* wip

* wip

* wip

* wip

* wip

* Merge

* wip

* wip

* wip

* wip

* wip

* wip
---
 src/client/app/desktop/script.ts                   |  37 +-
 src/client/app/desktop/views/components/home.vue   | 396 ----------------
 src/client/app/desktop/views/components/index.ts   |   4 -
 .../app/desktop/views/components/settings.vue      |  19 +-
 .../app/desktop/views/components/timeline.core.vue | 195 --------
 .../app/desktop/views/components/timeline.vue      | 264 -----------
 .../desktop/views/components/ui.header.account.vue |   7 -
 .../app/desktop/views/components/ui.header.nav.vue |  19 +-
 .../app/desktop/views/components/ui.sidebar.vue    |   2 +-
 .../app/desktop/views/deck/deck.column-core.vue    |  49 ++
 src/client/app/desktop/views/deck/deck.column.vue  | 421 +++++++++++++++++
 .../app/desktop/views/deck/deck.direct-column.vue  |  46 ++
 src/client/app/desktop/views/deck/deck.direct.vue  | 101 ++++
 .../desktop/views/deck/deck.favorites-column.vue   |  88 ++++
 .../app/desktop/views/deck/deck.hashtag-column.vue | 119 +++++
 .../app/desktop/views/deck/deck.hashtag-tl.vue     | 126 +++++
 src/client/app/desktop/views/deck/deck.list-tl.vue | 136 ++++++
 .../desktop/views/deck/deck.mentions-column.vue    |  46 ++
 .../app/desktop/views/deck/deck.mentions.vue       |  97 ++++
 .../app/desktop/views/deck/deck.note-column.vue    |  77 ++++
 src/client/app/desktop/views/deck/deck.notes.vue   | 245 ++++++++++
 .../app/desktop/views/deck/deck.notification.vue   | 193 ++++++++
 .../views/deck/deck.notifications-column.vue       |  40 ++
 .../app/desktop/views/deck/deck.notifications.vue  | 223 +++++++++
 .../app/desktop/views/deck/deck.tl-column.vue      | 105 +++++
 src/client/app/desktop/views/deck/deck.tl.vue      | 151 ++++++
 .../app/desktop/views/deck/deck.user-column.vue    | 507 +++++++++++++++++++++
 src/client/app/desktop/views/deck/deck.vue         | 385 ++++++++++++++++
 .../app/desktop/views/deck/deck.widgets-column.vue | 172 +++++++
 src/client/app/desktop/views/home/favorites.vue    |  83 ++++
 src/client/app/desktop/views/home/home.vue         | 400 ++++++++++++++++
 src/client/app/desktop/views/home/note.vue         |  63 +++
 src/client/app/desktop/views/home/tag.vue          | 117 +++++
 .../app/desktop/views/home/timeline.core.vue       | 195 ++++++++
 src/client/app/desktop/views/home/timeline.vue     | 273 +++++++++++
 .../views/home/user/user.followers-you-know.vue    |  84 ++++
 .../app/desktop/views/home/user/user.friends.vue   | 112 +++++
 .../app/desktop/views/home/user/user.header.vue    | 272 +++++++++++
 .../home/user/user.integrations.integration.vue    |  14 +
 .../desktop/views/home/user/user.integrations.vue  |  63 +++
 .../app/desktop/views/home/user/user.photos.vue    | 106 +++++
 .../app/desktop/views/home/user/user.timeline.vue  | 175 +++++++
 src/client/app/desktop/views/home/user/user.vue    | 109 +++++
 .../desktop/views/pages/deck/deck.column-core.vue  |  49 --
 .../app/desktop/views/pages/deck/deck.column.vue   | 424 -----------------
 .../views/pages/deck/deck.direct-column.vue        |  46 --
 .../app/desktop/views/pages/deck/deck.direct.vue   | 101 ----
 .../views/pages/deck/deck.hashtag-column.vue       | 112 -----
 .../desktop/views/pages/deck/deck.hashtag-tl.vue   | 126 -----
 .../app/desktop/views/pages/deck/deck.list-tl.vue  | 136 ------
 .../views/pages/deck/deck.mentions-column.vue      |  46 --
 .../app/desktop/views/pages/deck/deck.mentions.vue |  97 ----
 .../desktop/views/pages/deck/deck.note-column.vue  |  70 ---
 .../app/desktop/views/pages/deck/deck.notes.vue    | 245 ----------
 .../desktop/views/pages/deck/deck.notification.vue | 193 --------
 .../views/pages/deck/deck.notifications-column.vue |  40 --
 .../views/pages/deck/deck.notifications.vue        | 223 ---------
 .../desktop/views/pages/deck/deck.tl-column.vue    | 105 -----
 .../app/desktop/views/pages/deck/deck.tl.vue       | 151 ------
 .../desktop/views/pages/deck/deck.user-column.vue  | 505 --------------------
 src/client/app/desktop/views/pages/deck/deck.vue   | 433 ------------------
 .../views/pages/deck/deck.widgets-column.vue       | 172 -------
 src/client/app/desktop/views/pages/favorites.vue   |  87 ----
 .../app/desktop/views/pages/home-customize.vue     |   3 -
 src/client/app/desktop/views/pages/home.vue        |  39 --
 src/client/app/desktop/views/pages/index.vue       |  25 -
 src/client/app/desktop/views/pages/note.vue        |  66 ---
 src/client/app/desktop/views/pages/tag.vue         | 126 -----
 .../views/pages/user/user.followers-you-know.vue   |  84 ----
 .../app/desktop/views/pages/user/user.friends.vue  | 112 -----
 .../app/desktop/views/pages/user/user.header.vue   | 253 ----------
 .../pages/user/user.integrations.integration.vue   |  14 -
 .../desktop/views/pages/user/user.integrations.vue |  63 ---
 .../app/desktop/views/pages/user/user.photos.vue   | 106 -----
 .../app/desktop/views/pages/user/user.profile.vue  |  66 ---
 .../app/desktop/views/pages/user/user.timeline.vue | 175 -------
 src/client/app/desktop/views/pages/user/user.vue   | 155 -------
 src/client/app/desktop/views/widgets/customize.vue |  21 +
 src/client/app/desktop/views/widgets/index.ts      |   2 +
 79 files changed, 5449 insertions(+), 5558 deletions(-)
 delete mode 100644 src/client/app/desktop/views/components/home.vue
 delete mode 100644 src/client/app/desktop/views/components/timeline.core.vue
 delete mode 100644 src/client/app/desktop/views/components/timeline.vue
 create mode 100644 src/client/app/desktop/views/deck/deck.column-core.vue
 create mode 100644 src/client/app/desktop/views/deck/deck.column.vue
 create mode 100644 src/client/app/desktop/views/deck/deck.direct-column.vue
 create mode 100644 src/client/app/desktop/views/deck/deck.direct.vue
 create mode 100644 src/client/app/desktop/views/deck/deck.favorites-column.vue
 create mode 100644 src/client/app/desktop/views/deck/deck.hashtag-column.vue
 create mode 100644 src/client/app/desktop/views/deck/deck.hashtag-tl.vue
 create mode 100644 src/client/app/desktop/views/deck/deck.list-tl.vue
 create mode 100644 src/client/app/desktop/views/deck/deck.mentions-column.vue
 create mode 100644 src/client/app/desktop/views/deck/deck.mentions.vue
 create mode 100644 src/client/app/desktop/views/deck/deck.note-column.vue
 create mode 100644 src/client/app/desktop/views/deck/deck.notes.vue
 create mode 100644 src/client/app/desktop/views/deck/deck.notification.vue
 create mode 100644 src/client/app/desktop/views/deck/deck.notifications-column.vue
 create mode 100644 src/client/app/desktop/views/deck/deck.notifications.vue
 create mode 100644 src/client/app/desktop/views/deck/deck.tl-column.vue
 create mode 100644 src/client/app/desktop/views/deck/deck.tl.vue
 create mode 100644 src/client/app/desktop/views/deck/deck.user-column.vue
 create mode 100644 src/client/app/desktop/views/deck/deck.vue
 create mode 100644 src/client/app/desktop/views/deck/deck.widgets-column.vue
 create mode 100644 src/client/app/desktop/views/home/favorites.vue
 create mode 100644 src/client/app/desktop/views/home/home.vue
 create mode 100644 src/client/app/desktop/views/home/note.vue
 create mode 100644 src/client/app/desktop/views/home/tag.vue
 create mode 100644 src/client/app/desktop/views/home/timeline.core.vue
 create mode 100644 src/client/app/desktop/views/home/timeline.vue
 create mode 100644 src/client/app/desktop/views/home/user/user.followers-you-know.vue
 create mode 100644 src/client/app/desktop/views/home/user/user.friends.vue
 create mode 100644 src/client/app/desktop/views/home/user/user.header.vue
 create mode 100644 src/client/app/desktop/views/home/user/user.integrations.integration.vue
 create mode 100644 src/client/app/desktop/views/home/user/user.integrations.vue
 create mode 100644 src/client/app/desktop/views/home/user/user.photos.vue
 create mode 100644 src/client/app/desktop/views/home/user/user.timeline.vue
 create mode 100644 src/client/app/desktop/views/home/user/user.vue
 delete mode 100644 src/client/app/desktop/views/pages/deck/deck.column-core.vue
 delete mode 100644 src/client/app/desktop/views/pages/deck/deck.column.vue
 delete mode 100644 src/client/app/desktop/views/pages/deck/deck.direct-column.vue
 delete mode 100644 src/client/app/desktop/views/pages/deck/deck.direct.vue
 delete mode 100644 src/client/app/desktop/views/pages/deck/deck.hashtag-column.vue
 delete mode 100644 src/client/app/desktop/views/pages/deck/deck.hashtag-tl.vue
 delete mode 100644 src/client/app/desktop/views/pages/deck/deck.list-tl.vue
 delete mode 100644 src/client/app/desktop/views/pages/deck/deck.mentions-column.vue
 delete mode 100644 src/client/app/desktop/views/pages/deck/deck.mentions.vue
 delete mode 100644 src/client/app/desktop/views/pages/deck/deck.note-column.vue
 delete mode 100644 src/client/app/desktop/views/pages/deck/deck.notes.vue
 delete mode 100644 src/client/app/desktop/views/pages/deck/deck.notification.vue
 delete mode 100644 src/client/app/desktop/views/pages/deck/deck.notifications-column.vue
 delete mode 100644 src/client/app/desktop/views/pages/deck/deck.notifications.vue
 delete mode 100644 src/client/app/desktop/views/pages/deck/deck.tl-column.vue
 delete mode 100644 src/client/app/desktop/views/pages/deck/deck.tl.vue
 delete mode 100644 src/client/app/desktop/views/pages/deck/deck.user-column.vue
 delete mode 100644 src/client/app/desktop/views/pages/deck/deck.vue
 delete mode 100644 src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
 delete mode 100644 src/client/app/desktop/views/pages/favorites.vue
 delete mode 100644 src/client/app/desktop/views/pages/home-customize.vue
 delete mode 100644 src/client/app/desktop/views/pages/home.vue
 delete mode 100644 src/client/app/desktop/views/pages/index.vue
 delete mode 100644 src/client/app/desktop/views/pages/note.vue
 delete mode 100644 src/client/app/desktop/views/pages/tag.vue
 delete mode 100644 src/client/app/desktop/views/pages/user/user.followers-you-know.vue
 delete mode 100644 src/client/app/desktop/views/pages/user/user.friends.vue
 delete mode 100644 src/client/app/desktop/views/pages/user/user.header.vue
 delete mode 100644 src/client/app/desktop/views/pages/user/user.integrations.integration.vue
 delete mode 100644 src/client/app/desktop/views/pages/user/user.integrations.vue
 delete mode 100644 src/client/app/desktop/views/pages/user/user.photos.vue
 delete mode 100644 src/client/app/desktop/views/pages/user/user.profile.vue
 delete mode 100644 src/client/app/desktop/views/pages/user/user.timeline.vue
 delete mode 100644 src/client/app/desktop/views/pages/user/user.vue
 create mode 100644 src/client/app/desktop/views/widgets/customize.vue

(limited to 'src/client/app/desktop')

diff --git a/src/client/app/desktop/script.ts b/src/client/app/desktop/script.ts
index 05cd79f706..26fe273394 100644
--- a/src/client/app/desktop/script.ts
+++ b/src/client/app/desktop/script.ts
@@ -12,19 +12,13 @@ import init from '../init';
 import fuckAdBlock from '../common/scripts/fuck-ad-block';
 import composeNotification from '../common/scripts/compose-notification';
 
-import MkIndex from './views/pages/index.vue';
-import MkHome from './views/pages/home.vue';
-import MkDeck from './views/pages/deck/deck.vue';
-import MkUser from './views/pages/user/user.vue';
+import MkHome from './views/home/home.vue';
+import MkDeck from './views/deck/deck.vue';
 import MkUserFollowingOrFollowers from './views/pages/user-following-or-followers.vue';
-import MkFavorites from './views/pages/favorites.vue';
 import MkSelectDrive from './views/pages/selectdrive.vue';
 import MkDrive from './views/pages/drive.vue';
-import MkHomeCustomize from './views/pages/home-customize.vue';
 import MkMessagingRoom from './views/pages/messaging-room.vue';
-import MkNote from './views/pages/note.vue';
 import MkSearch from './views/pages/search.vue';
-import MkTag from './views/pages/tag.vue';
 import MkReversi from './views/pages/games/reversi.vue';
 import MkShare from './views/pages/share.vue';
 import MkFollow from '../common/views/pages/follow.vue';
@@ -36,6 +30,7 @@ import PostFormWindow from './views/components/post-form-window.vue';
 import RenoteFormWindow from './views/components/renote-form-window.vue';
 import MkChooseFileFromDriveWindow from './views/components/choose-file-from-drive-window.vue';
 import MkChooseFolderFromDriveWindow from './views/components/choose-folder-from-drive-window.vue';
+import MkHomeTimeline from './views/home/timeline.vue';
 import Notification from './views/components/ui-notification.vue';
 
 import { url } from '../config';
@@ -44,7 +39,7 @@ import MiOS from '../mios';
 /**
  * init
  */
-init(async (launch) => {
+init(async (launch, os) => {
 	Vue.mixin({
 		methods: {
 			$contextmenu(e, menu, opts?) {
@@ -134,31 +129,37 @@ init(async (launch) => {
 	const router = new VueRouter({
 		mode: 'history',
 		routes: [
-			{ path: '/', name: 'index', component: MkIndex },
-			{ path: '/home', name: 'home', component: MkHome },
-			{ path: '/deck', name: 'deck', component: MkDeck },
-			{ path: '/i/customize-home', component: MkHomeCustomize },
-			{ path: '/i/favorites', component: MkFavorites },
+			os.store.getters.isSignedIn && os.store.state.device.deckMode
+				? { path: '/', name: 'index', component: MkDeck, children: [
+					{ path: '/@:user', name: 'user', component: () => import('./views/deck/deck.user-column.vue').then(m => m.default) },
+					{ path: '/notes/:note', name: 'note', component: () => import('./views/deck/deck.note-column.vue').then(m => m.default) },
+					{ path: '/tags/:tag', name: 'tag', component: () => import('./views/deck/deck.hashtag-column.vue').then(m => m.default) },
+					{ path: '/i/favorites', component: () => import('./views/deck/deck.favorites-column.vue').then(m => m.default) }
+				]}
+				: { path: '/', component: MkHome, children: [
+					{ path: '', name: 'index', component: MkHomeTimeline },
+					{ path: '/@:user', name: 'user', component: () => import('./views/home/user/user.vue').then(m => m.default) },
+					{ path: '/notes/:note', name: 'note', component: () => import('./views/home/note.vue').then(m => m.default) },
+					{ path: '/tags/:tag', name: 'tag', component: () => import('./views/home/tag.vue').then(m => m.default) },
+					{ path: '/i/favorites', component: () => import('./views/home/favorites.vue').then(m => m.default) }
+				]},
 			{ path: '/i/messaging/:user', component: MkMessagingRoom },
 			{ path: '/i/drive', component: MkDrive },
 			{ path: '/i/drive/folder/:folder', component: MkDrive },
 			{ path: '/i/settings', component: MkSettings },
 			{ path: '/selectdrive', component: MkSelectDrive },
 			{ path: '/search', component: MkSearch },
-			{ path: '/tags/:tag', name: 'tag', component: MkTag },
 			{ path: '/share', component: MkShare },
 			{ path: '/games/reversi/:game?', component: MkReversi },
-			{ path: '/@:user', name: 'user', component: MkUser },
 			{ path: '/@:user/following', name: 'userFollowing', component: MkUserFollowingOrFollowers },
 			{ path: '/@:user/followers', name: 'userFollowers', component: MkUserFollowingOrFollowers },
-			{ path: '/notes/:note', name: 'note', component: MkNote },
 			{ path: '/authorize-follow', component: MkFollow },
 			{ path: '*', component: MkNotFound }
 		]
 	});
 
 	// Launch the app
-	const [app, os] = launch(router);
+	const [app, _] = launch(router);
 
 	if (os.store.getters.isSignedIn) {
 		/**
diff --git a/src/client/app/desktop/views/components/home.vue b/src/client/app/desktop/views/components/home.vue
deleted file mode 100644
index 18cb215202..0000000000
--- a/src/client/app/desktop/views/components/home.vue
+++ /dev/null
@@ -1,396 +0,0 @@
-<template>
-<div class="mk-home" :data-customize="customize">
-	<div class="customize" v-if="customize">
-		<router-link to="/"><fa icon="check"/>{{ $t('done') }}</router-link>
-		<div>
-			<div class="adder">
-				<p>{{ $t('add-widget') }}</p>
-				<select v-model="widgetAdderSelected">
-					<option value="profile">{{ $t('@.widgets.profile') }}</option>
-					<option value="analog-clock">{{ $t('@.widgets.analog-clock') }}</option>
-					<option value="calendar">{{ $t('@.widgets.calendar') }}</option>
-					<option value="timemachine">{{ $t('@.widgets.timemachine') }}</option>
-					<option value="activity">{{ $t('@.widgets.activity') }}</option>
-					<option value="rss">{{ $t('@.widgets.rss') }}</option>
-					<option value="trends">{{ $t('@.widgets.trends') }}</option>
-					<option value="photo-stream">{{ $t('@.widgets.photo-stream') }}</option>
-					<option value="slideshow">{{ $t('@.widgets.slideshow') }}</option>
-					<option value="version">{{ $t('@.widgets.version') }}</option>
-					<option value="broadcast">{{ $t('@.widgets.broadcast') }}</option>
-					<option value="notifications">{{ $t('@.widgets.notifications') }}</option>
-					<option value="users">{{ $t('@.widgets.users') }}</option>
-					<option value="polls">{{ $t('@.widgets.polls') }}</option>
-					<option value="post-form">{{ $t('@.widgets.post-form') }}</option>
-					<option value="messaging">{{ $t('@.widgets.messaging') }}</option>
-					<option value="memo">{{ $t('@.widgets.memo') }}</option>
-					<option value="hashtags">{{ $t('@.widgets.hashtags') }}</option>
-					<option value="posts-monitor">{{ $t('@.widgets.posts-monitor') }}</option>
-					<option value="server">{{ $t('@.widgets.server') }}</option>
-					<option value="nav">{{ $t('@.widgets.nav') }}</option>
-					<option value="tips">{{ $t('@.widgets.tips') }}</option>
-				</select>
-				<button @click="addWidget">{{ $t('add') }}</button>
-			</div>
-			<div class="trash">
-				<x-draggable v-model="trash" :options="{ group: 'x' }" @add="onTrash"></x-draggable>
-				<p>{{ $t('@.trash') }}</p>
-			</div>
-		</div>
-	</div>
-	<div class="main" :class="{ side: widgets.left.length == 0 || widgets.right.length == 0 }">
-		<template v-if="customize">
-			<x-draggable v-for="place in ['left', 'right']"
-				:list="widgets[place]"
-				:class="place"
-				:data-place="place"
-				:options="{ group: 'x', animation: 150 }"
-				@sort="onWidgetSort"
-				:key="place"
-			>
-				<div v-for="widget in widgets[place]" class="customize-container" :key="widget.id" @contextmenu.stop.prevent="onWidgetContextmenu(widget.id)">
-					<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true" platform="desktop"/>
-				</div>
-			</x-draggable>
-			<div class="main">
-				<a @click="hint">{{ $t('@.customization-tips.title') }}</a>
-				<div>
-					<mk-post-form v-if="$store.state.settings.showPostFormOnTopOfTl"/>
-					<mk-timeline ref="tl" @loaded="onTlLoaded"/>
-				</div>
-			</div>
-		</template>
-		<template v-else>
-			<div v-for="place in ['left', 'right']" :class="place">
-				<component v-for="widget in widgets[place]" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" @chosen="warp" platform="desktop"/>
-			</div>
-			<div class="main">
-				<mk-post-form class="form" v-if="$store.state.settings.showPostFormOnTopOfTl"/>
-				<mk-timeline class="tl" ref="tl" @loaded="onTlLoaded" v-if="mode == 'timeline'"/>
-			</div>
-		</template>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../i18n';
-import * as XDraggable from 'vuedraggable';
-import * as uuid from 'uuid';
-
-const defaultDesktopHomeWidgets = {
-	left: [
-		'profile',
-		'calendar',
-		'activity',
-		'rss',
-		'hashtags',
-		'photo-stream',
-		'version'
-	],
-	right: [
-		'broadcast',
-		'notifications',
-		'users',
-		'polls',
-		'server',
-		'nav',
-		'tips'
-	]
-};
-
-//#region Construct home data
-const _defaultDesktopHomeWidgets = [];
-
-for (const widget of defaultDesktopHomeWidgets.left) {
-	_defaultDesktopHomeWidgets.push({
-		name: widget,
-		id: uuid(),
-		place: 'left',
-		data: {}
-	});
-}
-
-for (const widget of defaultDesktopHomeWidgets.right) {
-	_defaultDesktopHomeWidgets.push({
-		name: widget,
-		id: uuid(),
-		place: 'right',
-		data: {}
-	});
-}
-//#endregion
-
-export default Vue.extend({
-	i18n: i18n('desktop/views/components/home.vue'),
-	components: {
-		XDraggable
-	},
-
-	props: {
-		customize: {
-			type: Boolean,
-			default: false
-		},
-		mode: {
-			type: String,
-			default: 'timeline'
-		}
-	},
-
-	data() {
-		return {
-			connection: null,
-			widgetAdderSelected: null,
-			trash: []
-		};
-	},
-
-	computed: {
-		home(): any[] {
-			return this.$store.state.settings.home || [];
-		},
-		left(): any[] {
-			return this.home.filter(w => w.place == 'left');
-		},
-		right(): any[] {
-			return this.home.filter(w => w.place == 'right');
-		},
-		widgets(): any {
-			return {
-				left: this.left,
-				right: this.right
-			};
-		}
-	},
-
-	created() {
-		if (this.$store.state.settings.home == null) {
-			this.$root.api('i/update_home', {
-				home: _defaultDesktopHomeWidgets
-			}).then(() => {
-				this.$store.commit('settings/setHome', _defaultDesktopHomeWidgets);
-			});
-		}
-	},
-
-	mounted() {
-		this.connection = this.$root.stream.useSharedConnection('main');
-	},
-
-	beforeDestroy() {
-		this.connection.dispose();
-	},
-
-	methods: {
-		hint() {
-			this.$root.dialog({
-				title: this.$t('@.customization-tips.title'),
-				text: this.$t('@.customization-tips.paragraph')
-			});
-		},
-
-		onTlLoaded() {
-			this.$emit('loaded');
-		},
-
-		onWidgetContextmenu(widgetId) {
-			const w = (this.$refs[widgetId] as any)[0];
-			if (w.func) w.func();
-		},
-
-		onWidgetSort() {
-			this.saveHome();
-		},
-
-		onTrash(evt) {
-			this.saveHome();
-		},
-
-		addWidget() {
-			this.$store.dispatch('settings/addHomeWidget', {
-				name: this.widgetAdderSelected,
-				id: uuid(),
-				place: 'left',
-				data: {}
-			});
-		},
-
-		saveHome() {
-			const left = this.widgets.left;
-			const right = this.widgets.right;
-			this.$store.commit('settings/setHome', left.concat(right));
-			for (const w of left) w.place = 'left';
-			for (const w of right) w.place = 'right';
-			this.$root.api('i/update_home', {
-				home: this.home
-			});
-		},
-
-		warp(date) {
-			(this.$refs.tl as any).warp(date);
-		},
-
-		focus() {
-			(this.$refs.tl as any).focus();
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-home
-	display block
-
-	&[data-customize]
-		padding-top 48px
-		background-image url('/assets/desktop/grid.svg')
-
-		> .main > .main
-			> a
-				display block
-				margin-bottom 8px
-				text-align center
-
-			> div
-				cursor not-allowed !important
-
-				> *
-					pointer-events none
-
-	&:not([data-customize])
-		> .main > *:empty
-			display none
-
-	> .customize
-		position fixed
-		z-index 1000
-		top 0
-		left 0
-		width 100%
-		height 48px
-		color var(--text)
-		background var(--desktopHeaderBg)
-		box-shadow 0 1px 1px rgba(#000, 0.075)
-
-		> a
-			display block
-			position absolute
-			z-index 1001
-			top 0
-			right 0
-			padding 0 16px
-			line-height 48px
-			text-decoration none
-			color var(--primaryForeground)
-			background var(--primary)
-			transition background 0.1s ease
-
-			&:hover
-				background var(--primaryLighten10)
-
-			&:active
-				background var(--primaryDarken10)
-				transition background 0s ease
-
-			> [data-icon]
-				margin-right 8px
-
-		> div
-			display flex
-			margin 0 auto
-			max-width 1220px - 32px
-
-			> div
-				width 50%
-
-				&.adder
-					> p
-						display inline
-						line-height 48px
-
-				&.trash
-					border-left solid 1px var(--faceDivider)
-
-					> div
-						width 100%
-						height 100%
-
-					> p
-						position absolute
-						top 0
-						left 0
-						width 100%
-						line-height 48px
-						margin 0
-						text-align center
-						pointer-events none
-
-	> .main
-		display flex
-		justify-content center
-		margin 0 auto
-		max-width 1240px
-
-		> *
-			.customize-container
-				cursor move
-				border-radius 6px
-
-				&:hover
-					box-shadow 0 0 8px rgba(64, 120, 200, 0.3)
-
-				> *
-					pointer-events none
-
-		> .main
-			padding 16px
-			width calc(100% - 280px * 2)
-			order 2
-
-			> .form
-				margin-bottom 16px
-				box-shadow var(--shadow)
-				border-radius var(--round)
-
-		&.side
-			> .main
-				width calc(100% - 280px)
-				max-width 680px
-
-		> *:not(.main)
-			width 280px
-			padding 16px 0 16px 0
-
-			> *:not(:last-child)
-				margin-bottom 16px
-
-		> .left
-			padding-left 16px
-			order 1
-
-		> .right
-			padding-right 16px
-			order 3
-
-		&.side
-			@media (max-width 1000px)
-				> *:not(.main)
-					display none
-
-				> .main
-					width 100%
-					max-width 700px
-					margin 0 auto
-
-		&:not(.side)
-			@media (max-width 1200px)
-				> *:not(.main)
-					display none
-
-				> .main
-					width 100%
-					max-width 700px
-					margin 0 auto
-
-</style>
diff --git a/src/client/app/desktop/views/components/index.ts b/src/client/app/desktop/views/components/index.ts
index 2edc8117a8..0bc6fa9af4 100644
--- a/src/client/app/desktop/views/components/index.ts
+++ b/src/client/app/desktop/views/components/index.ts
@@ -2,8 +2,6 @@ import Vue from 'vue';
 
 import ui from './ui.vue';
 import uiNotification from './ui-notification.vue';
-import home from './home.vue';
-import timeline from './timeline.vue';
 import notes from './notes.vue';
 import subNoteContent from './sub-note-content.vue';
 import window from './window.vue';
@@ -24,8 +22,6 @@ import widgetContainer from './widget-container.vue';
 
 Vue.component('mk-ui', ui);
 Vue.component('mk-ui-notification', uiNotification);
-Vue.component('mk-home', home);
-Vue.component('mk-timeline', timeline);
 Vue.component('mk-notes', notes);
 Vue.component('mk-sub-note-content', subNoteContent);
 Vue.component('mk-window', window);
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index 3452122b9a..e4e7830a16 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -31,9 +31,6 @@
 				<ui-switch v-model="autoPopout">{{ $t('auto-popout') }}
 					<span slot="desc">{{ $t('auto-popout-desc') }}</span>
 				</ui-switch>
-				<ui-switch v-model="deckNav">{{ $t('deck-nav') }}
-					<span slot="desc">{{ $t('deck-nav-desc') }}</span>
-				</ui-switch>
 				<ui-switch v-model="keepCw">{{ $t('keep-cw') }}
 					<span slot="desc">{{ $t('keep-cw-desc') }}</span>
 				</ui-switch>
@@ -89,9 +86,6 @@
 				<ui-radio v-model="navbar" value="left">{{ $t('navbar-position-left') }}</ui-radio>
 				<ui-radio v-model="navbar" value="right">{{ $t('navbar-position-right') }}</ui-radio>
 			</section>
-			<section>
-				<ui-switch v-model="deckDefault">{{ $t('deck-default') }}</ui-switch>
-			</section>
 			<section>
 				<ui-switch v-model="darkmode">{{ $t('dark-mode') }}</ui-switch>
 				<ui-switch v-model="useShadow">{{ $t('use-shadow') }}</ui-switch>
@@ -337,11 +331,6 @@ export default Vue.extend({
 			set(value) { this.$store.commit('device/set', { key: 'autoPopout', value }); }
 		},
 
-		deckNav: {
-			get() { return this.$store.state.settings.deckNav; },
-			set(value) { this.$store.commit('settings/set', { key: 'deckNav', value }); }
-		},
-
 		keepCw: {
 			get() { return this.$store.state.settings.keepCw; },
 			set(value) { this.$store.commit('settings/set', { key: 'keepCw', value }); }
@@ -367,11 +356,6 @@ export default Vue.extend({
 			set(value) { this.$store.commit('device/set', { key: 'deckColumnWidth', value }); }
 		},
 
-		deckDefault: {
-			get() { return this.$store.state.device.deckDefault; },
-			set(value) { this.$store.commit('device/set', { key: 'deckDefault', value }); }
-		},
-
 		enableSounds: {
 			get() { return this.$store.state.device.enableSounds; },
 			set(value) { this.$store.commit('device/set', { key: 'enableSounds', value }); }
@@ -534,8 +518,7 @@ export default Vue.extend({
 	},
 	methods: {
 		customizeHome() {
-			this.$router.push('/i/customize-home');
-			this.$emit('done');
+			location.href = '/?customize';
 		},
 		updateWallpaper() {
 			this.$chooseDriveFile({
diff --git a/src/client/app/desktop/views/components/timeline.core.vue b/src/client/app/desktop/views/components/timeline.core.vue
deleted file mode 100644
index 63bc20dc28..0000000000
--- a/src/client/app/desktop/views/components/timeline.core.vue
+++ /dev/null
@@ -1,195 +0,0 @@
-<template>
-<div class="mk-timeline-core">
-	<mk-friends-maker v-if="src == 'home' && alone"/>
-
-	<mk-notes ref="timeline" :more="existMore ? more : null">
-		<p :class="$style.empty" slot="empty">
-			<fa :icon="['far', 'comments']"/>{{ $t('empty') }}
-		</p>
-	</mk-notes>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../i18n';
-
-const fetchLimit = 10;
-
-export default Vue.extend({
-	i18n: i18n('desktop/views/components/timeline.core.vue'),
-	props: {
-		src: {
-			type: String,
-			required: true
-		},
-		tagTl: {
-			required: false
-		}
-	},
-
-	data() {
-		return {
-			fetching: true,
-			moreFetching: false,
-			existMore: false,
-			connection: null,
-			date: null,
-			baseQuery: {
-				includeMyRenotes: this.$store.state.settings.showMyRenotes,
-				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-				includeLocalRenotes: this.$store.state.settings.showLocalRenotes
-			},
-			query: {},
-			endpoint: null
-		};
-	},
-
-	computed: {
-		alone(): boolean {
-			return this.$store.state.i.followingCount == 0;
-		},
-
-		canFetchMore(): boolean {
-			return !this.moreFetching && !this.fetching && this.existMore;
-		}
-	},
-
-	mounted() {
-		const prepend = note => {
-			(this.$refs.timeline as any).prepend(note);
-		};
-
-		if (this.src == 'tag') {
-			this.endpoint = 'notes/search_by_tag';
-			this.query = {
-				query: this.tagTl.query
-			};
-			this.connection = this.$root.stream.connectToChannel('hashtag', { q: this.tagTl.query });
-			this.connection.on('note', prepend);
-		} else if (this.src == 'home') {
-			this.endpoint = 'notes/timeline';
-			const onChangeFollowing = () => {
-				this.fetch();
-			};
-			this.connection = this.$root.stream.useSharedConnection('homeTimeline');
-			this.connection.on('note', prepend);
-			this.connection.on('follow', onChangeFollowing);
-			this.connection.on('unfollow', onChangeFollowing);
-		} else if (this.src == 'local') {
-			this.endpoint = 'notes/local-timeline';
-			this.connection = this.$root.stream.useSharedConnection('localTimeline');
-			this.connection.on('note', prepend);
-		} else if (this.src == 'hybrid') {
-			this.endpoint = 'notes/hybrid-timeline';
-			this.connection = this.$root.stream.useSharedConnection('hybridTimeline');
-			this.connection.on('note', prepend);
-		} else if (this.src == 'global') {
-			this.endpoint = 'notes/global-timeline';
-			this.connection = this.$root.stream.useSharedConnection('globalTimeline');
-			this.connection.on('note', prepend);
-		} else if (this.src == 'mentions') {
-			this.endpoint = 'notes/mentions';
-			this.connection = this.$root.stream.useSharedConnection('main');
-			this.connection.on('mention', prepend);
-		} else if (this.src == 'messages') {
-			this.endpoint = 'notes/mentions';
-			this.query = {
-				visibility: 'specified'
-			};
-			const onNote = note => {
-				if (note.visibility == 'specified') {
-					prepend(note);
-				}
-			};
-			this.connection = this.$root.stream.useSharedConnection('main');
-			this.connection.on('mention', onNote);
-		}
-
-		this.fetch();
-	},
-
-	beforeDestroy() {
-		this.connection.dispose();
-	},
-
-	methods: {
-		fetch() {
-			this.fetching = true;
-
-			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
-				this.$root.api(this.endpoint, Object.assign({
-					limit: fetchLimit + 1,
-					untilDate: this.date ? this.date.getTime() : undefined
-				}, this.baseQuery, this.query)).then(notes => {
-					if (notes.length == fetchLimit + 1) {
-						notes.pop();
-						this.existMore = true;
-					}
-					res(notes);
-					this.fetching = false;
-					this.$emit('loaded');
-				}, rej);
-			}));
-		},
-
-		more() {
-			if (!this.canFetchMore) return;
-
-			this.moreFetching = true;
-
-			const promise = this.$root.api(this.endpoint, Object.assign({
-				limit: fetchLimit + 1,
-				untilId: (this.$refs.timeline as any).tail().id
-			}, this.baseQuery, this.query));
-
-			promise.then(notes => {
-				if (notes.length == fetchLimit + 1) {
-					notes.pop();
-				} else {
-					this.existMore = false;
-				}
-				for (const n of notes) {
-					(this.$refs.timeline as any).append(n);
-				}
-				this.moreFetching = false;
-			});
-
-			return promise;
-		},
-
-		focus() {
-			(this.$refs.timeline as any).focus();
-		},
-
-		warp(date) {
-			this.date = date;
-			this.fetch();
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-timeline-core
-	> .mk-friends-maker
-		border-bottom solid var(--lineWidth) #eee
-
-</style>
-
-<style lang="stylus" module>
-.empty
-	display block
-	margin 0 auto
-	padding 32px
-	max-width 400px
-	text-align center
-	color #999
-
-	> [data-icon]
-		display block
-		margin-bottom 16px
-		font-size 3em
-		color #ccc
-
-</style>
diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
deleted file mode 100644
index 0a91cfb59d..0000000000
--- a/src/client/app/desktop/views/components/timeline.vue
+++ /dev/null
@@ -1,264 +0,0 @@
-<template>
-<div class="mk-timeline">
-	<header>
-		<span :data-active="src == 'home'" @click="src = 'home'"><fa icon="home"/> {{ $t('home') }}</span>
-		<span :data-active="src == 'local'" @click="src = 'local'" v-if="enableLocalTimeline"><fa :icon="['far', 'comments']"/> {{ $t('local') }}</span>
-		<span :data-active="src == 'hybrid'" @click="src = 'hybrid'" v-if="enableLocalTimeline"><fa icon="share-alt"/> {{ $t('hybrid') }}</span>
-		<span :data-active="src == 'global'" @click="src = 'global'" v-if="enableGlobalTimeline"><fa icon="globe"/> {{ $t('global') }}</span>
-		<span :data-active="src == 'tag'" @click="src = 'tag'" v-if="tagTl"><fa icon="hashtag"/> {{ tagTl.title }}</span>
-		<span :data-active="src == 'list'" @click="src = 'list'" v-if="list"><fa icon="list"/> {{ list.title }}</span>
-		<div class="buttons">
-			<button :data-active="src == 'mentions'" @click="src = 'mentions'" :title="$t('mentions')"><fa icon="at"/><i class="badge" v-if="$store.state.i.hasUnreadMentions"><fa icon="circle"/></i></button>
-			<button :data-active="src == 'messages'" @click="src = 'messages'" :title="$t('messages')"><fa :icon="['far', 'envelope']"/><i class="badge" v-if="$store.state.i.hasUnreadSpecifiedNotes"><fa icon="circle"/></i></button>
-			<button @click="chooseTag" :title="$t('hashtag')" ref="tagButton"><fa icon="hashtag"/></button>
-			<button @click="chooseList" :title="$t('list')" ref="listButton"><fa icon="list"/></button>
-		</div>
-	</header>
-	<x-core v-if="src == 'home'" ref="tl" key="home" src="home"/>
-	<x-core v-if="src == 'local'" ref="tl" key="local" src="local"/>
-	<x-core v-if="src == 'hybrid'" ref="tl" key="hybrid" src="hybrid"/>
-	<x-core v-if="src == 'global'" ref="tl" key="global" src="global"/>
-	<x-core v-if="src == 'mentions'" ref="tl" key="mentions" src="mentions"/>
-	<x-core v-if="src == 'messages'" ref="tl" key="messages" src="messages"/>
-	<x-core v-if="src == 'tag'" ref="tl" key="tag" src="tag" :tag-tl="tagTl"/>
-	<mk-user-list-timeline v-if="src == 'list'" ref="tl" :key="list.id" :list="list"/>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../i18n';
-import XCore from './timeline.core.vue';
-import Menu from '../../../common/views/components/menu.vue';
-import MkSettingsWindow from './settings-window.vue';
-
-export default Vue.extend({
-	i18n: i18n('desktop/views/components/timeline.vue'),
-	components: {
-		XCore
-	},
-
-	data() {
-		return {
-			src: 'home',
-			list: null,
-			tagTl: null,
-			enableLocalTimeline: false,
-			enableGlobalTimeline: false,
-		};
-	},
-
-	watch: {
-		src() {
-			this.saveSrc();
-		},
-
-		list(x) {
-			this.saveSrc();
-			if (x != null) this.tagTl = null;
-		},
-
-		tagTl(x) {
-			this.saveSrc();
-			if (x != null) this.list = null;
-		}
-	},
-
-	created() {
-		this.$root.getMeta().then((meta: Record<string, any>) => {
-			if (!(
-				this.enableGlobalTimeline = !meta.disableGlobalTimeline || this.$store.state.i.isModerator || this.$store.state.i.isAdmin
-			) && this.src === 'global') this.src = 'local';
-			if (!(
-				this.enableLocalTimeline = !meta.disableLocalTimeline || this.$store.state.i.isModerator || this.$store.state.i.isAdmin
-			) && ['local', 'hybrid'].includes(this.src)) this.src = 'home';
-		});
-
-		if (this.$store.state.device.tl) {
-			this.src = this.$store.state.device.tl.src;
-			if (this.src == 'list') {
-				this.list = this.$store.state.device.tl.arg;
-			} else if (this.src == 'tag') {
-				this.tagTl = this.$store.state.device.tl.arg;
-			}
-		} else if (this.$store.state.i.followingCount == 0) {
-			this.src = 'hybrid';
-		}
-	},
-
-	mounted() {
-		(this.$refs.tl as any).$once('loaded', () => {
-			this.$emit('loaded');
-		});
-	},
-
-	methods: {
-		saveSrc() {
-			this.$store.commit('device/setTl', {
-				src: this.src,
-				arg: this.src == 'list' ? this.list : this.tagTl
-			});
-		},
-
-		focus() {
-			(this.$refs.tl as any).focus();
-		},
-
-		warp(date) {
-			(this.$refs.tl as any).warp(date);
-		},
-
-		async chooseList() {
-			const lists = await this.$root.api('users/lists/list');
-
-			let menu = [{
-				icon: 'plus',
-				text: this.$t('add-list'),
-				action: () => {
-					this.$root.dialog({
-						title: this.$t('list-name'),
-						input: true
-					}).then(async ({ canceled, result: title }) => {
-						if (canceled) return;
-						const list = await this.$root.api('users/lists/create', {
-							title
-						});
-
-						this.list = list;
-						this.src = 'list';
-					});
-				}
-			}];
-
-			if (lists.length > 0) {
-				menu.push(null);
-			}
-
-			menu = menu.concat(lists.map(list => ({
-				icon: 'list',
-				text: list.title,
-				action: () => {
-					this.list = list;
-					this.src = 'list';
-				}
-			})));
-
-			this.$root.new(Menu, {
-				source: this.$refs.listButton,
-				items: menu
-			});
-		},
-
-		chooseTag() {
-			let menu = [{
-				icon: 'plus',
-				text: this.$t('add-tag-timeline'),
-				action: () => {
-					this.$root.new(MkSettingsWindow, {
-						initialPage: 'hashtags'
-					});
-				}
-			}];
-
-			if (this.$store.state.settings.tagTimelines.length > 0) {
-				menu.push(null);
-			}
-
-			menu = menu.concat(this.$store.state.settings.tagTimelines.map(t => ({
-				icon: 'hashtag',
-				text: t.title,
-				action: () => {
-					this.tagTl = t;
-					this.src = 'tag';
-				}
-			})));
-
-			this.$root.new(Menu, {
-				source: this.$refs.tagButton,
-				items: menu
-			});
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-timeline
-	background var(--face)
-	box-shadow var(--shadow)
-	border-radius var(--round)
-	overflow hidden
-
-	> header
-		padding 0 8px
-		z-index 10
-		background var(--faceHeader)
-		box-shadow 0 var(--lineWidth) var(--desktopTimelineHeaderShadow)
-
-		> .buttons
-			position absolute
-			z-index 2
-			top 0
-			right 0
-			padding-right 8px
-
-			> button
-				padding 0 8px
-				font-size 0.9em
-				line-height 42px
-				color var(--faceTextButton)
-
-				> .badge
-					position absolute
-					top -4px
-					right 4px
-					font-size 10px
-					color var(--notificationIndicator)
-
-				&:hover
-					color var(--faceTextButtonHover)
-
-				&[data-active]
-					color var(--primary)
-					cursor default
-
-					&:before
-						content ""
-						display block
-						position absolute
-						bottom 0
-						left 0
-						width 100%
-						height 2px
-						background var(--primary)
-
-		> span
-			display inline-block
-			padding 0 10px
-			line-height 42px
-			font-size 12px
-			user-select none
-
-			&[data-active]
-				color var(--primary)
-				cursor default
-				font-weight bold
-
-				&:before
-					content ""
-					display block
-					position absolute
-					bottom 0
-					left -8px
-					width calc(100% + 16px)
-					height 2px
-					background var(--primary)
-
-			&:not([data-active])
-				color var(--desktopTimelineSrc)
-				cursor pointer
-
-				&:hover
-					color var(--desktopTimelineSrcHover)
-
-</style>
diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue
index bc7a8b2231..4a3cc71548 100644
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -44,13 +44,6 @@
 				</li>
 			</ul>
 			<ul>
-				<li>
-					<router-link to="/i/customize-home">
-						<i><fa icon="wrench"/></i>
-						<span>{{ $t('customize') }}</span>
-						<i><fa icon="angle-right"/></i>
-					</router-link>
-				</li>
 				<li>
 					<router-link to="/i/settings">
 						<i><fa icon="cog"/></i>
diff --git a/src/client/app/desktop/views/components/ui.header.nav.vue b/src/client/app/desktop/views/components/ui.header.nav.vue
index 8e78829de3..44659eb0d8 100644
--- a/src/client/app/desktop/views/components/ui.header.nav.vue
+++ b/src/client/app/desktop/views/components/ui.header.nav.vue
@@ -2,20 +2,20 @@
 <div class="nav">
 	<ul>
 		<template v-if="$store.getters.isSignedIn">
-			<template v-if="$store.state.device.deckDefault">
-				<li class="deck" :class="{ active: $route.name == 'deck' || $route.name == 'index' }" @click="goToTop">
+			<template v-if="$store.state.device.deckMode">
+				<li class="deck active" @click="goToTop">
 					<router-link to="/"><fa icon="columns"/><p>{{ $t('deck') }}</p></router-link>
 				</li>
-				<li class="home" :class="{ active: $route.name == 'home' }" @click="goToTop">
-					<router-link to="/home"><fa icon="home"/><p>{{ $t('home') }}</p></router-link>
+				<li class="home">
+					<a @click="toggleDeckMode(false)"><fa icon="home"/><p>{{ $t('home') }}</p></a>
 				</li>
 			</template>
 			<template v-else>
-				<li class="home" :class="{ active: $route.name == 'home' || $route.name == 'index' }" @click="goToTop">
+				<li class="home active" @click="goToTop">
 					<router-link to="/"><fa icon="home"/><p>{{ $t('home') }}</p></router-link>
 				</li>
-				<li class="deck" :class="{ active: $route.name == 'deck' }" @click="goToTop">
-					<router-link to="/deck"><fa icon="columns"/><p>{{ $t('deck') }}</p></router-link>
+				<li class="deck">
+					<a @click="toggleDeckMode(true)"><fa icon="columns"/><p>{{ $t('deck') }}</p></a>
 				</li>
 			</template>
 			<li class="messaging">
@@ -70,6 +70,11 @@ export default Vue.extend({
 		}
 	},
 	methods: {
+		toggleDeckMode(deck) {
+			this.$store.commit('device/set', { key: 'deckMode', value: deck });
+			location.reload();
+		},
+
 		onReversiInvited() {
 			this.hasGameInvitations = true;
 		},
diff --git a/src/client/app/desktop/views/components/ui.sidebar.vue b/src/client/app/desktop/views/components/ui.sidebar.vue
index 8b5f14290c..ec6b056595 100644
--- a/src/client/app/desktop/views/components/ui.sidebar.vue
+++ b/src/client/app/desktop/views/components/ui.sidebar.vue
@@ -6,7 +6,7 @@
 		</div>
 
 		<div class="nav" v-if="$store.getters.isSignedIn">
-			<template v-if="$store.state.device.deckDefault">
+			<template v-if="$store.state.device.deckMode">
 				<div class="deck" :class="{ active: $route.name == 'deck' || $route.name == 'index' }" @click="goToTop">
 					<router-link to="/"><fa icon="columns"/></router-link>
 				</div>
diff --git a/src/client/app/desktop/views/deck/deck.column-core.vue b/src/client/app/desktop/views/deck/deck.column-core.vue
new file mode 100644
index 0000000000..974c58235d
--- /dev/null
+++ b/src/client/app/desktop/views/deck/deck.column-core.vue
@@ -0,0 +1,49 @@
+<template>
+<x-widgets-column v-if="column.type == 'widgets'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<x-notifications-column v-else-if="column.type == 'notifications'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<x-tl-column v-else-if="column.type == 'home'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<x-tl-column v-else-if="column.type == 'local'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<x-tl-column v-else-if="column.type == 'hybrid'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<x-tl-column v-else-if="column.type == 'global'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<x-tl-column v-else-if="column.type == 'list'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<x-tl-column v-else-if="column.type == 'hashtag'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<x-mentions-column v-else-if="column.type == 'mentions'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<x-direct-column v-else-if="column.type == 'direct'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XTlColumn from './deck.tl-column.vue';
+import XNotificationsColumn from './deck.notifications-column.vue';
+import XWidgetsColumn from './deck.widgets-column.vue';
+import XMentionsColumn from './deck.mentions-column.vue';
+import XDirectColumn from './deck.direct-column.vue';
+
+export default Vue.extend({
+	components: {
+		XTlColumn,
+		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/app/desktop/views/deck/deck.column.vue b/src/client/app/desktop/views/deck/deck.column.vue
new file mode 100644
index 0000000000..f731e2e9b1
--- /dev/null
+++ b/src/client/app/desktop/views/deck/deck.column.vue
@@ -0,0 +1,421 @@
+<template>
+<div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs" :class="{ naked, narrow, active, isStacked, draghover, dragging, dropready }"
+		@dragover.prevent.stop="onDragover"
+		@dragleave="onDragleave"
+		@drop.prevent.stop="onDrop"
+		v-hotkey="keymap">
+	<header :class="{ indicate: count > 0 }"
+			draggable="true"
+			@click="goTop"
+			@dragstart="onDragstart"
+			@dragend="onDragend"
+			@contextmenu.prevent.stop="onContextmenu">
+		<button class="toggleActive" @click="toggleActive" v-if="isStacked">
+			<template v-if="active"><fa icon="angle-up"/></template>
+			<template v-else><fa icon="angle-down"/></template>
+		</button>
+		<slot name="header"></slot>
+		<span class="count" v-if="count > 0">({{ count }})</span>
+		<button v-if="!isTemporaryColumn" class="menu" ref="menu" @click.stop="showMenu"><fa icon="caret-down"/></button>
+		<button v-else class="close" @click.stop="close"><fa icon="times"/></button>
+	</header>
+	<div ref="body" v-show="active">
+		<slot></slot>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import Menu from '../../../common/views/components/menu.vue';
+import { countIf } from '../../../../../prelude/array';
+
+export default Vue.extend({
+	i18n: i18n('deck'),
+	props: {
+		column: {
+			type: Object,
+			required: false,
+			default: null
+		},
+		isStacked: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		menu: {
+			type: Array,
+			required: false,
+			default: null
+		},
+		naked: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		narrow: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+
+	computed: {
+		isTemporaryColumn(): boolean {
+			return this.column == null;
+		},
+
+		keymap(): any {
+			return {
+				'shift+up': () => this.$parent.$emit('parentFocus', 'up'),
+				'shift+down': () => this.$parent.$emit('parentFocus', 'down'),
+				'shift+left': () => this.$parent.$emit('parentFocus', 'left'),
+				'shift+right': () => this.$parent.$emit('parentFocus', 'right'),
+			};
+		}
+	},
+
+	inject: {
+		getColumnVm: { from: 'getColumnVm' }
+	},
+
+	data() {
+		return {
+			count: 0,
+			active: true,
+			dragging: false,
+			draghover: false,
+			dropready: false
+		};
+	},
+
+	watch: {
+		active(v) {
+			if (v && this.isScrollTop()) {
+				this.$emit('top');
+			}
+		},
+		dragging(v) {
+			this.$root.$emit(v ? 'deck.column.dragStart' : 'deck.column.dragEnd');
+		}
+	},
+
+	provide() {
+		return {
+			column: this,
+			isScrollTop: this.isScrollTop,
+			count: v => this.count = v
+		};
+	},
+
+	mounted() {
+		this.$refs.body.addEventListener('scroll', this.onScroll, { passive: true });
+
+		if (!this.isTemporaryColumn) {
+			this.$root.$on('deck.column.dragStart', this.onOtherDragStart);
+			this.$root.$on('deck.column.dragEnd', this.onOtherDragEnd);
+		}
+	},
+
+	beforeDestroy() {
+		this.$refs.body.removeEventListener('scroll', this.onScroll);
+
+		if (!this.isTemporaryColumn) {
+			this.$root.$off('deck.column.dragStart', this.onOtherDragStart);
+			this.$root.$off('deck.column.dragEnd', this.onOtherDragEnd);
+		}
+	},
+
+	methods: {
+		onOtherDragStart() {
+			this.dropready = true;
+		},
+
+		onOtherDragEnd() {
+			this.dropready = false;
+		},
+
+		toggleActive() {
+			if (!this.isStacked) return;
+			const vms = this.$store.state.settings.deck.layout.find(ids => ids.indexOf(this.column.id) != -1).map(id => this.getColumnVm(id));
+			if (this.active && countIf(vm => vm.$el.classList.contains('active'), vms) == 1) return;
+			this.active = !this.active;
+		},
+
+		isScrollTop() {
+			return this.active && this.$refs.body.scrollTop == 0;
+		},
+
+		onScroll() {
+			if (this.isScrollTop()) {
+				this.$emit('top');
+			}
+
+			if (this.$store.state.settings.fetchOnScroll !== false) {
+				const current = this.$refs.body.scrollTop + this.$refs.body.clientHeight;
+				if (current > this.$refs.body.scrollHeight - 1) this.$emit('bottom');
+			}
+		},
+
+		getMenu() {
+			const items = [{
+				icon: 'pencil-alt',
+				text: this.$t('rename'),
+				action: () => {
+					this.$root.dialog({
+						title: this.$t('rename'),
+						input: {
+							default: this.name,
+							allowEmpty: false
+						}
+					}).then(({ canceled, result: name }) => {
+						if (canceled) return;
+						this.$store.dispatch('settings/renameDeckColumn', { id: this.column.id, name });
+					});
+				}
+			}, null, {
+				icon: 'arrow-left',
+				text: this.$t('swap-left'),
+				action: () => {
+					this.$store.dispatch('settings/swapLeftDeckColumn', this.column.id);
+				}
+			}, {
+				icon: 'arrow-right',
+				text: this.$t('swap-right'),
+				action: () => {
+					this.$store.dispatch('settings/swapRightDeckColumn', this.column.id);
+				}
+			}, this.isStacked ? {
+				icon: 'arrow-up',
+				text: this.$t('swap-up'),
+				action: () => {
+					this.$store.dispatch('settings/swapUpDeckColumn', this.column.id);
+				}
+			} : undefined, this.isStacked ? {
+				icon: 'arrow-down',
+				text: this.$t('swap-down'),
+				action: () => {
+					this.$store.dispatch('settings/swapDownDeckColumn', this.column.id);
+				}
+			} : undefined, null, {
+				icon: ['far', 'window-restore'],
+				text: this.$t('stack-left'),
+				action: () => {
+					this.$store.dispatch('settings/stackLeftDeckColumn', this.column.id);
+				}
+			}, this.isStacked ? {
+				icon: ['far', 'window-maximize'],
+				text: this.$t('pop-right'),
+				action: () => {
+					this.$store.dispatch('settings/popRightDeckColumn', this.column.id);
+				}
+			} : undefined, null, {
+				icon: ['far', 'trash-alt'],
+				text: this.$t('remove'),
+				action: () => {
+					this.$store.dispatch('settings/removeDeckColumn', this.column.id);
+				}
+			}];
+
+			if (this.menu) {
+				items.unshift(null);
+				for (const i of this.menu.reverse()) {
+					items.unshift(i);
+				}
+			}
+
+			return items;
+		},
+
+		onContextmenu(e) {
+			if (this.isTemporaryColumn) return;
+			this.$contextmenu(e, this.getMenu());
+		},
+
+		showMenu() {
+			this.$root.new(Menu, {
+				source: this.$refs.menu,
+				items: this.getMenu()
+			});
+		},
+
+		close() {
+			this.$router.push('/');
+		},
+
+		goTop() {
+			this.$refs.body.scrollTo({
+				top: 0,
+				behavior: 'smooth'
+			});
+		},
+
+		onDragstart(e) {
+			// テンポラリカラムはドラッグさせない
+			if (this.isTemporaryColumn) {
+				e.preventDefault();
+				return;
+			}
+
+			e.dataTransfer.effectAllowed = 'move';
+			e.dataTransfer.setData('mk-deck-column', this.column.id);
+			this.dragging = true;
+		},
+
+		onDragend(e) {
+			this.dragging = false;
+		},
+
+		onDragover(e) {
+			// テンポラリカラムにはドロップさせない
+			if (this.isTemporaryColumn) {
+				e.dataTransfer.dropEffect = 'none';
+				return;
+			}
+
+			// 自分自身がドラッグされている場合
+			if (this.dragging) {
+				// 自分自身にはドロップさせない
+				e.dataTransfer.dropEffect = 'none';
+				return;
+			}
+
+			const isDeckColumn = e.dataTransfer.types[0] == 'mk-deck-column';
+
+			e.dataTransfer.dropEffect = isDeckColumn ? 'move' : 'none';
+
+			if (!this.dragging && isDeckColumn) this.draghover = true;
+		},
+
+		onDragleave() {
+			this.draghover = false;
+		},
+
+		onDrop(e) {
+			this.draghover = false;
+			this.$root.$emit('deck.column.dragEnd');
+
+			const id = e.dataTransfer.getData('mk-deck-column');
+			if (id != null && id != '') {
+				this.$store.dispatch('settings/swapDeckColumn', {
+					a: this.column.id,
+					b: id
+				});
+			}
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.dnpfarvgbnfmyzbdquhhzyxcmstpdqzs
+	$header-height = 42px
+
+	height 100%
+	background var(--face)
+	border-radius var(--round)
+	box-shadow var(--shadow)
+	overflow hidden
+
+	&.draghover
+		box-shadow 0 0 0 2px var(--primaryAlpha08)
+
+		&:after
+			content ""
+			display block
+			position absolute
+			z-index 1000
+			top 0
+			left 0
+			width 100%
+			height 100%
+			background var(--primaryAlpha02)
+
+	&.dragging
+		box-shadow 0 0 0 2px var(--primaryAlpha04)
+
+	&.dropready
+		*
+			pointer-events none
+
+	&:not(.active)
+		flex-basis $header-height
+		min-height $header-height
+
+	&:not(.isStacked).narrow
+		width 285px
+		min-width 285px
+		flex-grow 0 !important
+
+	&.naked
+		background var(--deckAcrylicColumnBg)
+
+		> header
+			background transparent
+			box-shadow none
+
+			> button
+				color var(--text)
+
+	> header
+		display flex
+		z-index 2
+		line-height $header-height
+		padding 0 16px
+		font-size 14px
+		color var(--faceHeaderText)
+		background var(--faceHeader)
+		box-shadow 0 var(--lineWidth) rgba(#000, 0.15)
+		cursor pointer
+
+		&, *
+			user-select none
+
+		*:not(button)
+			pointer-events none
+
+		&.indicate
+			box-shadow 0 3px 0 0 var(--primary)
+
+		> span
+			[data-icon]
+				margin-right 8px
+
+		> .count
+			margin-left 4px
+			opacity 0.5
+
+		> .toggleActive
+		> .menu
+		> .close
+			padding 0
+			width $header-height
+			line-height $header-height
+			font-size 16px
+			color var(--faceTextButton)
+
+			&:hover
+				color var(--faceTextButtonHover)
+
+			&:active
+				color var(--faceTextButtonActive)
+
+		> .toggleActive
+			margin-left -16px
+
+		> .menu
+		> .close
+			margin-left auto
+			margin-right -16px
+
+	> div
+		height "calc(100% - %s)" % $header-height
+		overflow auto
+		overflow-x hidden
+
+</style>
diff --git a/src/client/app/desktop/views/deck/deck.direct-column.vue b/src/client/app/desktop/views/deck/deck.direct-column.vue
new file mode 100644
index 0000000000..a1acf4e7f7
--- /dev/null
+++ b/src/client/app/desktop/views/deck/deck.direct-column.vue
@@ -0,0 +1,46 @@
+<template>
+<x-column :name="name" :column="column" :is-stacked="isStacked">
+	<span slot="header"><fa :icon="['far', 'envelope']"/>{{ name }}</span>
+
+	<x-direct/>
+</x-column>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import XColumn from './deck.column.vue';
+import XDirect from './deck.direct.vue';
+
+export default Vue.extend({
+	i18n: i18n(),
+	components: {
+		XColumn,
+		XDirect
+	},
+
+	props: {
+		column: {
+			type: Object,
+			required: true
+		},
+		isStacked: {
+			type: Boolean,
+			required: true
+		}
+	},
+
+	computed: {
+		name(): string {
+			if (this.column.name) return this.column.name;
+			return this.$t('@deck.direct');
+		}
+	},
+
+	methods: {
+		focus() {
+			this.$refs.tl.focus();
+		}
+	}
+});
+</script>
diff --git a/src/client/app/desktop/views/deck/deck.direct.vue b/src/client/app/desktop/views/deck/deck.direct.vue
new file mode 100644
index 0000000000..c6c2b99233
--- /dev/null
+++ b/src/client/app/desktop/views/deck/deck.direct.vue
@@ -0,0 +1,101 @@
+<template>
+<x-notes ref="timeline" :more="existMore ? more : null"/>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XNotes from './deck.notes.vue';
+
+const fetchLimit = 10;
+
+export default Vue.extend({
+	components: {
+		XNotes
+	},
+
+	props: {
+	},
+
+	data() {
+		return {
+			fetching: true,
+			moreFetching: false,
+			existMore: false,
+			connection: null
+		};
+	},
+
+	mounted() {
+		this.connection = this.$root.stream.useSharedConnection('main');
+		this.connection.on('mention', this.onNote);
+
+		this.fetch();
+	},
+
+	beforeDestroy() {
+		this.connection.dispose();
+	},
+
+	methods: {
+		fetch() {
+			this.fetching = true;
+
+			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
+				this.$root.api('notes/mentions', {
+					limit: fetchLimit + 1,
+					includeMyRenotes: this.$store.state.settings.showMyRenotes,
+					includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
+					includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
+					visibility: 'specified'
+				}).then(notes => {
+					if (notes.length == fetchLimit + 1) {
+						notes.pop();
+						this.existMore = true;
+					}
+					res(notes);
+					this.fetching = false;
+					this.$emit('loaded');
+				}, rej);
+			}));
+		},
+
+		more() {
+			this.moreFetching = true;
+
+			const promise = this.$root.api('notes/mentions', {
+				limit: fetchLimit + 1,
+				untilId: (this.$refs.timeline as any).tail().id,
+				includeMyRenotes: this.$store.state.settings.showMyRenotes,
+				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
+				includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
+				visibility: 'specified'
+			});
+
+			promise.then(notes => {
+				if (notes.length == fetchLimit + 1) {
+					notes.pop();
+				} else {
+					this.existMore = false;
+				}
+				for (const n of notes) {
+					(this.$refs.timeline as any).append(n);
+				}
+				this.moreFetching = false;
+			});
+
+			return promise;
+		},
+
+		onNote(note) {
+			// Prepend a note
+			if (note.visibility == 'specified') {
+				(this.$refs.timeline as any).prepend(note);
+			}
+		},
+
+		focus() {
+			this.$refs.timeline.focus();
+		}
+	}
+});
+</script>
diff --git a/src/client/app/desktop/views/deck/deck.favorites-column.vue b/src/client/app/desktop/views/deck/deck.favorites-column.vue
new file mode 100644
index 0000000000..3c2b50dee8
--- /dev/null
+++ b/src/client/app/desktop/views/deck/deck.favorites-column.vue
@@ -0,0 +1,88 @@
+<template>
+<x-column>
+	<span slot="header">
+		<fa :icon="['fa', 'star']"/>{{ $t('favorites') }}
+	</span>
+
+	<div>
+		<x-notes ref="timeline" :more="existMore ? more : null"/>
+	</div>
+</x-column>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import XColumn from './deck.column.vue';
+import XNotes from './deck.notes.vue';
+
+const fetchLimit = 10;
+
+export default Vue.extend({
+	i18n: i18n(),
+
+	components: {
+		XColumn,
+		XNotes,
+	},
+
+	data() {
+		return {
+			fetching: true,
+			moreFetching: false,
+			existMore: false,
+		};
+	},
+
+	mounted() {
+		this.fetch();
+	},
+
+	methods: {
+		fetch() {
+			this.fetching = true;
+
+			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
+				this.$root.api('i/favorites', {
+					limit: fetchLimit + 1,
+				}).then(notes => {
+					if (notes.length == fetchLimit + 1) {
+						notes.pop();
+						this.existMore = true;
+					}
+					res(notes.map(x => x.note));
+					this.fetching = false;
+					this.$emit('loaded');
+				}, rej);
+			}));
+		},
+
+		more() {
+			this.moreFetching = true;
+
+			const promise = this.$root.api('i/favorites', {
+				limit: fetchLimit + 1,
+				untilId: (this.$refs.timeline as any).tail().id,
+			});
+
+			promise.then(notes => {
+				if (notes.length == fetchLimit + 1) {
+					notes.pop();
+				} else {
+					this.existMore = false;
+				}
+				for (const n of notes) {
+					(this.$refs.timeline as any).append(n);
+				}
+				this.moreFetching = false;
+			});
+
+			return promise;
+		},
+
+		focus() {
+			this.$refs.timeline.focus();
+		}
+	}
+});
+</script>
diff --git a/src/client/app/desktop/views/deck/deck.hashtag-column.vue b/src/client/app/desktop/views/deck/deck.hashtag-column.vue
new file mode 100644
index 0000000000..ca2d8cdb8d
--- /dev/null
+++ b/src/client/app/desktop/views/deck/deck.hashtag-column.vue
@@ -0,0 +1,119 @@
+<template>
+<x-column>
+	<span slot="header">
+		<fa icon="hashtag"/><span>{{ tag }}</span>
+	</span>
+
+	<div class="xroyrflcmhhtmlwmyiwpfqiirqokfueb">
+		<div ref="chart" class="chart"></div>
+		<x-hashtag-tl :tag-tl="tagTl" class="tl"/>
+	</div>
+</x-column>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XColumn from './deck.column.vue';
+import XHashtagTl from './deck.hashtag-tl.vue';
+import ApexCharts from 'apexcharts';
+
+export default Vue.extend({
+	components: {
+		XColumn,
+		XHashtagTl
+	},
+
+	computed: {
+		tag(): string {
+			return this.$route.params.tag;
+		},
+
+		tagTl(): any {
+			return {
+				query: [[this.tag]]
+			};
+		}
+	},
+
+	watch: {
+		$route: 'fetch'
+	},
+
+	created() {
+		this.fetch();
+	},
+
+	methods: {
+		fetch() {
+			this.$root.api('charts/hashtag', {
+				tag: this.tag,
+				span: 'hour',
+				limit: 24
+			}).then(stats => {
+				const local = [];
+				const remote = [];
+
+				const now = new Date();
+				const y = now.getFullYear();
+				const m = now.getMonth();
+				const d = now.getDate();
+				const h = now.getHours();
+
+				for (let i = 0; i < 24; i++) {
+					const x = new Date(y, m, d, h - i);
+					local.push([x, stats.local.count[i]]);
+					remote.push([x, stats.remote.count[i]]);
+				}
+
+				const chart = new ApexCharts(this.$refs.chart, {
+					chart: {
+						type: 'area',
+						height: 70,
+						sparkline: {
+							enabled: true
+						},
+					},
+					grid: {
+						clipMarkers: false,
+						padding: {
+							top: 16,
+							right: 16,
+							bottom: 16,
+							left: 16
+						}
+					},
+					stroke: {
+						curve: 'straight',
+						width: 2
+					},
+					series: [{
+						name: 'Local',
+						data: local
+					}, {
+						name: 'Remote',
+						data: remote
+					}],
+					xaxis: {
+						type: 'datetime',
+					}
+				});
+
+				chart.render();
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.xroyrflcmhhtmlwmyiwpfqiirqokfueb
+	background var(--deckColumnBg)
+
+	> .chart
+		margin-bottom 16px
+		background var(--face)
+
+	> .tl
+		background var(--face)
+
+</style>
diff --git a/src/client/app/desktop/views/deck/deck.hashtag-tl.vue b/src/client/app/desktop/views/deck/deck.hashtag-tl.vue
new file mode 100644
index 0000000000..9a70733fda
--- /dev/null
+++ b/src/client/app/desktop/views/deck/deck.hashtag-tl.vue
@@ -0,0 +1,126 @@
+<template>
+<x-notes ref="timeline" :more="existMore ? more : null" :media-view="mediaView"/>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XNotes from './deck.notes.vue';
+
+const fetchLimit = 10;
+
+export default Vue.extend({
+	components: {
+		XNotes
+	},
+
+	props: {
+		tagTl: {
+			type: Object,
+			required: true
+		},
+		mediaOnly: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		mediaView: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+
+	data() {
+		return {
+			fetching: true,
+			moreFetching: false,
+			existMore: false,
+			connection: null
+		};
+	},
+
+	watch: {
+		mediaOnly() {
+			this.fetch();
+		}
+	},
+
+	mounted() {
+		if (this.connection) this.connection.close();
+		this.connection = this.$root.stream.connectToChannel('hashtag', {
+			q: this.tagTl.query
+		});
+		this.connection.on('note', this.onNote);
+
+		this.fetch();
+	},
+
+	beforeDestroy() {
+		this.connection.dispose();
+	},
+
+	methods: {
+		fetch() {
+			this.fetching = true;
+
+			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
+				this.$root.api('notes/search_by_tag', {
+					limit: fetchLimit + 1,
+					withFiles: this.mediaOnly,
+					includeMyRenotes: this.$store.state.settings.showMyRenotes,
+					includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
+					includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
+					query: this.tagTl.query
+				}).then(notes => {
+					if (notes.length == fetchLimit + 1) {
+						notes.pop();
+						this.existMore = true;
+					}
+					res(notes);
+					this.fetching = false;
+					this.$emit('loaded');
+				}, rej);
+			}));
+		},
+
+		more() {
+			this.moreFetching = true;
+
+			const promise = this.$root.api('notes/search_by_tag', {
+				limit: fetchLimit + 1,
+				untilId: (this.$refs.timeline as any).tail().id,
+				withFiles: this.mediaOnly,
+				includeMyRenotes: this.$store.state.settings.showMyRenotes,
+				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
+				includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
+				query: this.tagTl.query
+			});
+
+			promise.then(notes => {
+				if (notes.length == fetchLimit + 1) {
+					notes.pop();
+				} else {
+					this.existMore = false;
+				}
+				for (const n of notes) {
+					(this.$refs.timeline as any).append(n);
+				}
+				this.moreFetching = false;
+			});
+
+			return promise;
+		},
+
+		onNote(note) {
+			if (this.mediaOnly && note.files.length == 0) return;
+
+			// Prepend a note
+			(this.$refs.timeline as any).prepend(note);
+		},
+
+		focus() {
+			this.$refs.timeline.focus();
+		}
+	}
+});
+</script>
diff --git a/src/client/app/desktop/views/deck/deck.list-tl.vue b/src/client/app/desktop/views/deck/deck.list-tl.vue
new file mode 100644
index 0000000000..68fbbb3ff9
--- /dev/null
+++ b/src/client/app/desktop/views/deck/deck.list-tl.vue
@@ -0,0 +1,136 @@
+<template>
+<x-notes ref="timeline" :more="existMore ? more : null" :media-view="mediaView"/>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XNotes from './deck.notes.vue';
+
+const fetchLimit = 10;
+
+export default Vue.extend({
+	components: {
+		XNotes
+	},
+
+	props: {
+		list: {
+			type: Object,
+			required: true
+		},
+		mediaOnly: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		mediaView: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+
+	data() {
+		return {
+			fetching: true,
+			moreFetching: false,
+			existMore: false,
+			connection: null
+		};
+	},
+
+	watch: {
+		mediaOnly() {
+			this.fetch();
+		}
+	},
+
+	mounted() {
+		if (this.connection) this.connection.dispose();
+		this.connection = this.$root.stream.connectToChannel('userList', {
+			listId: this.list.id
+		});
+		this.connection.on('note', this.onNote);
+		this.connection.on('userAdded', this.onUserAdded);
+		this.connection.on('userRemoved', this.onUserRemoved);
+
+		this.fetch();
+	},
+
+	beforeDestroy() {
+		this.connection.dispose();
+	},
+
+	methods: {
+		fetch() {
+			this.fetching = true;
+
+			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
+				this.$root.api('notes/user-list-timeline', {
+					listId: this.list.id,
+					limit: fetchLimit + 1,
+					withFiles: this.mediaOnly,
+					includeMyRenotes: this.$store.state.settings.showMyRenotes,
+					includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
+					includeLocalRenotes: this.$store.state.settings.showLocalRenotes
+				}).then(notes => {
+					if (notes.length == fetchLimit + 1) {
+						notes.pop();
+						this.existMore = true;
+					}
+					res(notes);
+					this.fetching = false;
+					this.$emit('loaded');
+				}, rej);
+			}));
+		},
+
+		more() {
+			this.moreFetching = true;
+
+			const promise = this.$root.api('notes/user-list-timeline', {
+				listId: this.list.id,
+				limit: fetchLimit + 1,
+				untilId: (this.$refs.timeline as any).tail().id,
+				withFiles: this.mediaOnly,
+				includeMyRenotes: this.$store.state.settings.showMyRenotes,
+				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
+				includeLocalRenotes: this.$store.state.settings.showLocalRenotes
+			});
+
+			promise.then(notes => {
+				if (notes.length == fetchLimit + 1) {
+					notes.pop();
+				} else {
+					this.existMore = false;
+				}
+				for (const n of notes) {
+					(this.$refs.timeline as any).append(n);
+				}
+				this.moreFetching = false;
+			});
+
+			return promise;
+		},
+
+		onNote(note) {
+			if (this.mediaOnly && note.files.length == 0) return;
+
+			// Prepend a note
+			(this.$refs.timeline as any).prepend(note);
+		},
+
+		onUserAdded() {
+			this.fetch();
+		},
+
+		onUserRemoved() {
+			this.fetch();
+		},
+
+		focus() {
+			this.$refs.timeline.focus();
+		}
+	}
+});
+</script>
diff --git a/src/client/app/desktop/views/deck/deck.mentions-column.vue b/src/client/app/desktop/views/deck/deck.mentions-column.vue
new file mode 100644
index 0000000000..1fce65ea70
--- /dev/null
+++ b/src/client/app/desktop/views/deck/deck.mentions-column.vue
@@ -0,0 +1,46 @@
+<template>
+<x-column :name="name" :column="column" :is-stacked="isStacked">
+	<span slot="header"><fa icon="at"/>{{ name }}</span>
+
+	<x-mentions ref="tl"/>
+</x-column>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import XColumn from './deck.column.vue';
+import XMentions from './deck.mentions.vue';
+
+export default Vue.extend({
+	i18n: i18n(),
+	components: {
+		XColumn,
+		XMentions
+	},
+
+	props: {
+		column: {
+			type: Object,
+			required: true
+		},
+		isStacked: {
+			type: Boolean,
+			required: true
+		}
+	},
+
+	computed: {
+		name(): string {
+			if (this.column.name) return this.column.name;
+			return this.$t('@deck.mentions');
+		}
+	},
+
+	methods: {
+		focus() {
+			this.$refs.tl.focus();
+		}
+	}
+});
+</script>
diff --git a/src/client/app/desktop/views/deck/deck.mentions.vue b/src/client/app/desktop/views/deck/deck.mentions.vue
new file mode 100644
index 0000000000..5fcabde5d6
--- /dev/null
+++ b/src/client/app/desktop/views/deck/deck.mentions.vue
@@ -0,0 +1,97 @@
+<template>
+<x-notes ref="timeline" :more="existMore ? more : null"/>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XNotes from './deck.notes.vue';
+
+const fetchLimit = 10;
+
+export default Vue.extend({
+	components: {
+		XNotes
+	},
+
+	props: {
+	},
+
+	data() {
+		return {
+			fetching: true,
+			moreFetching: false,
+			existMore: false,
+			connection: null
+		};
+	},
+
+	mounted() {
+		this.connection = this.$root.stream.useSharedConnection('main');
+		this.connection.on('mention', this.onNote);
+
+		this.fetch();
+	},
+
+	beforeDestroy() {
+		this.connection.dispose();
+	},
+
+	methods: {
+		fetch() {
+			this.fetching = true;
+
+			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
+				this.$root.api('notes/mentions', {
+					limit: fetchLimit + 1,
+					includeMyRenotes: this.$store.state.settings.showMyRenotes,
+					includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
+					includeLocalRenotes: this.$store.state.settings.showLocalRenotes
+				}).then(notes => {
+					if (notes.length == fetchLimit + 1) {
+						notes.pop();
+						this.existMore = true;
+					}
+					res(notes);
+					this.fetching = false;
+					this.$emit('loaded');
+				}, rej);
+			}));
+		},
+
+		more() {
+			this.moreFetching = true;
+
+			const promise = this.$root.api('notes/mentions', {
+				limit: fetchLimit + 1,
+				untilId: (this.$refs.timeline as any).tail().id,
+				includeMyRenotes: this.$store.state.settings.showMyRenotes,
+				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
+				includeLocalRenotes: this.$store.state.settings.showLocalRenotes
+			});
+
+			promise.then(notes => {
+				if (notes.length == fetchLimit + 1) {
+					notes.pop();
+				} else {
+					this.existMore = false;
+				}
+				for (const n of notes) {
+					(this.$refs.timeline as any).append(n);
+				}
+				this.moreFetching = false;
+			});
+
+			return promise;
+		},
+
+		onNote(note) {
+			// Prepend a note
+			(this.$refs.timeline as any).prepend(note);
+		},
+
+		focus() {
+			this.$refs.timeline.focus();
+		}
+	}
+});
+</script>
diff --git a/src/client/app/desktop/views/deck/deck.note-column.vue b/src/client/app/desktop/views/deck/deck.note-column.vue
new file mode 100644
index 0000000000..f365573538
--- /dev/null
+++ b/src/client/app/desktop/views/deck/deck.note-column.vue
@@ -0,0 +1,77 @@
+<template>
+<x-column>
+	<span slot="header">
+		<fa :icon="['far', 'comment-alt']"/><mk-user-name :user="note.user" v-if="note"/>
+	</span>
+
+	<div class="rvtscbadixhhbsczoorqoaygovdeecsx" v-if="note">
+		<div class="is-remote" v-if="note.user.host != null">
+			<details>
+				<summary><fa icon="exclamation-triangle"/> {{ $t('@.is-remote-post') }}</summary>
+				<a :href="note.url || note.uri" target="_blank">{{ $t('@.view-on-remote') }}</a>
+			</details>
+		</div>
+		<x-note :note="note" :detail="true" :mini="true"/>
+	</div>
+</x-column>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import XColumn from './deck.column.vue';
+import XNotes from './deck.notes.vue';
+import XNote from '../components/note.vue';
+
+export default Vue.extend({
+	i18n: i18n(),
+	components: {
+		XColumn,
+		XNotes,
+		XNote
+	},
+
+	data() {
+		return {
+			note: null,
+			fetching: true
+		};
+	},
+
+	watch: {
+		$route: 'fetch'
+	},
+
+	created() {
+		this.fetch();
+	},
+
+	methods: {
+		fetch() {
+			this.fetching = true;
+
+			this.$root.api('notes/show', {
+				noteId: this.$route.params.note
+			}).then(note => {
+				this.note = note;
+				this.fetching = false;
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.rvtscbadixhhbsczoorqoaygovdeecsx
+	> .is-remote
+		padding 8px 16px
+		font-size 12px
+
+		&.is-remote
+			color var(--remoteInfoFg)
+			background var(--remoteInfoBg)
+
+		> a
+			font-weight bold
+
+</style>
diff --git a/src/client/app/desktop/views/deck/deck.notes.vue b/src/client/app/desktop/views/deck/deck.notes.vue
new file mode 100644
index 0000000000..260d75a884
--- /dev/null
+++ b/src/client/app/desktop/views/deck/deck.notes.vue
@@ -0,0 +1,245 @@
+<template>
+<div class="eamppglmnmimdhrlzhplwpvyeaqmmhxu">
+	<slot name="empty" v-if="notes.length == 0 && !fetching && requestInitPromise == null"></slot>
+
+	<div class="placeholder" v-if="fetching">
+		<template v-for="i in 10">
+			<mk-note-skeleton :key="i"/>
+		</template>
+	</div>
+
+	<mk-error v-if="!fetching && requestInitPromise != null" @retry="resolveInitPromise"/>
+
+	<!-- トランジションを有効にするとなぜかメモリリークする -->
+	<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notes" class="transition notes" ref="notes" tag="div">
+		<template v-for="(note, i) in _notes">
+			<x-note
+				:note="note"
+				:key="note.id"
+				@update:note="onNoteUpdated(i, $event)"
+				:media-view="mediaView"
+				:compact="true"
+				:mini="true"/>
+			<p class="date" :key="note.id + '_date'" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
+				<span><fa icon="angle-up"/>{{ note._datetext }}</span>
+				<span><fa icon="angle-down"/>{{ _notes[i + 1]._datetext }}</span>
+			</p>
+		</template>
+	</component>
+
+	<footer v-if="more">
+		<button @click="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+			<template v-if="!moreFetching">{{ $t('@.load-more') }}</template>
+			<template v-if="moreFetching"><fa icon="spinner" pulse fixed-width/></template>
+		</button>
+	</footer>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import shouldMuteNote from '../../../common/scripts/should-mute-note';
+
+import XNote from '../components/note.vue';
+
+const displayLimit = 20;
+
+export default Vue.extend({
+	i18n: i18n(),
+	components: {
+		XNote
+	},
+
+	inject: ['column', 'isScrollTop', 'count'],
+
+	props: {
+		more: {
+			type: Function,
+			required: false
+		},
+		mediaView: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+
+	data() {
+		return {
+			rootEl: null,
+			requestInitPromise: null as () => Promise<any[]>,
+			notes: [],
+			queue: [],
+			fetching: true,
+			moreFetching: false
+		};
+	},
+
+	computed: {
+		_notes(): any[] {
+			return (this.notes as any).map(note => {
+				const date = new Date(note.createdAt).getDate();
+				const month = new Date(note.createdAt).getMonth() + 1;
+				note._date = date;
+				note._datetext = this.$t('@.month-and-day').replace('{month}', month.toString()).replace('{day}', date.toString());
+				return note;
+			});
+		}
+	},
+
+	watch: {
+		queue(q) {
+			this.count(q.length);
+		}
+	},
+
+	created() {
+		this.column.$on('top', this.onTop);
+		this.column.$on('bottom', this.onBottom);
+	},
+
+	beforeDestroy() {
+		this.column.$off('top', this.onTop);
+		this.column.$off('bottom', this.onBottom);
+	},
+
+	methods: {
+		focus() {
+			(this.$refs.notes as any).children[0].focus ? (this.$refs.notes as any).children[0].focus() : (this.$refs.notes as any).$el.children[0].focus();
+		},
+
+		onNoteUpdated(i, note) {
+			Vue.set((this as any).notes, i, note);
+		},
+
+		init(promiseGenerator: () => Promise<any[]>) {
+			this.requestInitPromise = promiseGenerator;
+			this.resolveInitPromise();
+		},
+
+		resolveInitPromise() {
+			this.queue = [];
+			this.notes = [];
+			this.fetching = true;
+
+			const promise = this.requestInitPromise();
+
+			promise.then(notes => {
+				this.notes = notes;
+				this.requestInitPromise = null;
+				this.fetching = false;
+			}, e => {
+				this.fetching = false;
+			});
+		},
+
+		prepend(note, silent = false) {
+			// 弾く
+			if (shouldMuteNote(this.$store.state.i, this.$store.state.settings, note)) return;
+
+			// タブが非表示ならタイトルで通知
+			if (document.hidden) {
+				this.$store.commit('pushBehindNote', note);
+			}
+
+			if (this.isScrollTop()) {
+				// Prepend the note
+				this.notes.unshift(note);
+
+				// オーバーフローしたら古い投稿は捨てる
+				if (this.notes.length >= displayLimit) {
+					this.notes = this.notes.slice(0, displayLimit);
+				}
+			} else {
+				this.queue.push(note);
+			}
+		},
+
+		append(note) {
+			this.notes.push(note);
+		},
+
+		tail() {
+			return this.notes[this.notes.length - 1];
+		},
+
+		releaseQueue() {
+			for (const n of this.queue) {
+				this.prepend(n, true);
+			}
+			this.queue = [];
+		},
+
+		async loadMore() {
+			if (this.more == null) return;
+			if (this.moreFetching) return;
+
+			this.moreFetching = true;
+			await this.more();
+			this.moreFetching = false;
+		},
+
+		onTop() {
+			this.releaseQueue();
+		},
+
+		onBottom() {
+			this.loadMore();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.eamppglmnmimdhrlzhplwpvyeaqmmhxu
+	.transition
+		.mk-notes-enter
+		.mk-notes-leave-to
+			opacity 0
+			transform translateY(-30px)
+
+		> *
+			transition transform .3s ease, opacity .3s ease
+
+	> .placeholder
+		padding 16px
+		opacity 0.3
+
+	> .notes
+		> .date
+			display block
+			margin 0
+			line-height 28px
+			font-size 12px
+			text-align center
+			color var(--dateDividerFg)
+			background var(--dateDividerBg)
+			border-bottom solid var(--lineWidth) var(--faceDivider)
+
+			span
+				margin 0 16px
+
+			[data-icon]
+				margin-right 8px
+
+	> footer
+		> button
+			display block
+			margin 0
+			padding 16px
+			width 100%
+			text-align center
+			color #ccc
+			background var(--face)
+			border-top solid var(--lineWidth) var(--faceDivider)
+			border-bottom-left-radius 6px
+			border-bottom-right-radius 6px
+
+			&:hover
+				box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
+
+			&:active
+				box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
+
+</style>
diff --git a/src/client/app/desktop/views/deck/deck.notification.vue b/src/client/app/desktop/views/deck/deck.notification.vue
new file mode 100644
index 0000000000..56915f2d9c
--- /dev/null
+++ b/src/client/app/desktop/views/deck/deck.notification.vue
@@ -0,0 +1,193 @@
+<template>
+<div class="dsfykdcjpuwfvpefwufddclpjhzktmpw">
+	<div class="notification reaction" v-if="notification.type == 'reaction'">
+		<mk-avatar class="avatar" :user="notification.user"/>
+		<div>
+			<header>
+				<mk-reaction-icon :reaction="notification.reaction"/>
+				<router-link :to="notification.user | userPage">
+					<mk-user-name :user="notification.user"/>
+				</router-link>
+				<mk-time :time="notification.createdAt"/>
+			</header>
+			<router-link class="note-ref" :to="notification.note | notePage" :title="getNoteSummary(notification.note)">
+				<fa icon="quote-left"/>
+					<mfm :text="getNoteSummary(notification.note)" :should-break="false" :plain-text="true" :custom-emojis="notification.note.emojis"/>
+				<fa icon="quote-right"/>
+			</router-link>
+		</div>
+	</div>
+
+	<div class="notification renote" v-if="notification.type == 'renote'">
+		<mk-avatar class="avatar" :user="notification.user"/>
+		<div>
+			<header>
+				<fa icon="retweet"/>
+				<router-link :to="notification.user | userPage">
+					<mk-user-name :user="notification.user"/>
+				</router-link>
+				<mk-time :time="notification.createdAt"/>
+			</header>
+			<router-link class="note-ref" :to="notification.note | notePage" :title="getNoteSummary(notification.note.renote)">
+				<fa icon="quote-left"/>
+					<mfm :text="getNoteSummary(notification.note.renote)" :should-break="false" :plain-text="true" :custom-emojis="notification.note.renote.emojis"/>
+				<fa icon="quote-right"/>
+			</router-link>
+		</div>
+	</div>
+
+	<div class="notification follow" v-if="notification.type == 'follow'">
+		<mk-avatar class="avatar" :user="notification.user"/>
+		<div>
+			<header>
+				<fa icon="user-plus"/>
+				<router-link :to="notification.user | userPage">
+					<mk-user-name :user="notification.user"/>
+				</router-link>
+				<mk-time :time="notification.createdAt"/>
+			</header>
+		</div>
+	</div>
+
+	<div class="notification followRequest" v-if="notification.type == 'receiveFollowRequest'">
+		<mk-avatar class="avatar" :user="notification.user"/>
+		<div>
+			<header>
+				<fa icon="user-clock"/>
+				<router-link :to="notification.user | userPage">
+					<mk-user-name :user="notification.user"/>
+				</router-link>
+				<mk-time :time="notification.createdAt"/>
+			</header>
+		</div>
+	</div>
+
+	<div class="notification poll_vote" v-if="notification.type == 'poll_vote'">
+		<mk-avatar class="avatar" :user="notification.user"/>
+		<div>
+			<header>
+				<fa icon="chart-pie"/>
+				<router-link :to="notification.user | userPage">
+					<mk-user-name :user="notification.user"/>
+				</router-link>
+				<mk-time :time="notification.createdAt"/>
+			</header>
+			<router-link class="note-ref" :to="notification.note | notePage" :title="getNoteSummary(notification.note)">
+				<fa icon="quote-left"/>
+					<mfm :text="getNoteSummary(notification.note)" :should-break="false" :plain-text="true" :custom-emojis="notification.note.emojis"/>
+				<fa icon="quote-right"/>
+			</router-link>
+		</div>
+	</div>
+
+	<template v-if="notification.type == 'quote'">
+		<x-note :note="notification.note" @update:note="onNoteUpdated" :mini="true"/>
+	</template>
+
+	<template v-if="notification.type == 'reply'">
+		<x-note :note="notification.note" @update:note="onNoteUpdated" :mini="true"/>
+	</template>
+
+	<template v-if="notification.type == 'mention'">
+		<x-note :note="notification.note" @update:note="onNoteUpdated" :mini="true"/>
+	</template>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import getNoteSummary from '../../../../../misc/get-note-summary';
+import XNote from '../components/note.vue';
+
+export default Vue.extend({
+	components: {
+		XNote
+	},
+	props: ['notification'],
+	data() {
+		return {
+			getNoteSummary
+		};
+	},
+	methods: {
+		onNoteUpdated(note) {
+			switch (this.notification.type) {
+				case 'quote':
+				case 'reply':
+				case 'mention':
+					Vue.set(this.notification, 'note', note);
+					break;
+			}
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.dsfykdcjpuwfvpefwufddclpjhzktmpw
+	> .notification
+		padding 16px
+		font-size 12px
+		overflow-wrap break-word
+
+		&:after
+			content ""
+			display block
+			clear both
+
+		> .avatar
+			display block
+			float left
+			width 36px
+			height 36px
+			border-radius 6px
+
+		> div
+			float right
+			width calc(100% - 36px)
+			padding-left 8px
+
+			> header
+				display flex
+				align-items baseline
+				white-space nowrap
+
+				[data-icon], .mk-reaction-icon
+					margin-right 4px
+
+				> .mk-time
+					margin-left auto
+					color var(--noteHeaderInfo)
+					font-size 0.9em
+
+			> .note-preview
+				color var(--noteText)
+
+			> .note-ref
+				color var(--noteText)
+				display inline-block
+				width: 100%
+				overflow hidden
+				white-space nowrap
+				text-overflow ellipsis
+
+				[data-icon]
+					font-size 1em
+					font-weight normal
+					font-style normal
+					display inline-block
+					margin-right 3px
+
+		&.renote
+			> div > header [data-icon]
+				color #77B255
+
+		&.follow
+			> div > header [data-icon]
+				color #53c7ce
+
+		&.receiveFollowRequest
+			> div > header [data-icon]
+				color #888
+
+</style>
diff --git a/src/client/app/desktop/views/deck/deck.notifications-column.vue b/src/client/app/desktop/views/deck/deck.notifications-column.vue
new file mode 100644
index 0000000000..00bf77cf89
--- /dev/null
+++ b/src/client/app/desktop/views/deck/deck.notifications-column.vue
@@ -0,0 +1,40 @@
+<template>
+<x-column :name="name" :column="column" :is-stacked="isStacked">
+	<span slot="header"><fa :icon="['far', 'bell']"/>{{ name }}</span>
+
+	<x-notifications/>
+</x-column>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import XColumn from './deck.column.vue';
+import XNotifications from './deck.notifications.vue';
+
+export default Vue.extend({
+	i18n: i18n(),
+	components: {
+		XColumn,
+		XNotifications
+	},
+
+	props: {
+		column: {
+			type: Object,
+			required: true
+		},
+		isStacked: {
+			type: Boolean,
+			required: true
+		}
+	},
+
+	computed: {
+		name(): string {
+			if (this.column.name) return this.column.name;
+			return this.$t('@deck.notifications');
+		}
+	},
+});
+</script>
diff --git a/src/client/app/desktop/views/deck/deck.notifications.vue b/src/client/app/desktop/views/deck/deck.notifications.vue
new file mode 100644
index 0000000000..5130140685
--- /dev/null
+++ b/src/client/app/desktop/views/deck/deck.notifications.vue
@@ -0,0 +1,223 @@
+<template>
+<div class="oxynyeqmfvracxnglgulyqfgqxnxmehl">
+	<div class="placeholder" v-if="fetching">
+		<template v-for="i in 10">
+			<mk-note-skeleton :key="i"/>
+		</template>
+	</div>
+
+	<!-- トランジションを有効にするとなぜかメモリリークする -->
+	<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notifications" class="transition notifications" tag="div">
+		<template v-for="(notification, i) in _notifications">
+			<x-notification class="notification" :notification="notification" :key="notification.id"/>
+			<p class="date" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date" :key="notification.id + '-time'">
+				<span><fa icon="angle-up"/>{{ notification._datetext }}</span>
+				<span><fa icon="angle-down"/>{{ _notifications[i + 1]._datetext }}</span>
+			</p>
+		</template>
+	</component>
+	<button class="more" :class="{ fetching: fetchingMoreNotifications }" v-if="moreNotifications" @click="fetchMoreNotifications" :disabled="fetchingMoreNotifications">
+		<template v-if="fetchingMoreNotifications"><fa icon="spinner" pulse fixed-width/></template>{{ fetchingMoreNotifications ? this.$t('@.loading') : this.$t('@.load-more') }}
+	</button>
+	<p class="empty" v-if="notifications.length == 0 && !fetching">{{ $t('empty') }}</p>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import XNotification from './deck.notification.vue';
+
+const displayLimit = 20;
+
+export default Vue.extend({
+	i18n: i18n(),
+	components: {
+		XNotification
+	},
+
+	inject: ['column', 'isScrollTop', 'count'],
+
+	data() {
+		return {
+			fetching: true,
+			fetchingMoreNotifications: false,
+			notifications: [],
+			queue: [],
+			moreNotifications: false,
+			connection: null
+		};
+	},
+
+	computed: {
+		_notifications(): any[] {
+			return (this.notifications as any).map(notification => {
+				const date = new Date(notification.createdAt).getDate();
+				const month = new Date(notification.createdAt).getMonth() + 1;
+				notification._date = date;
+				notification._datetext = this.$t('@.month-and-day').replace('{month}', month.toString()).replace('{day}', date.toString());
+				return notification;
+			});
+		}
+	},
+
+	watch: {
+		queue(q) {
+			this.count(q.length);
+		}
+	},
+
+	mounted() {
+		this.connection = this.$root.stream.useSharedConnection('main');
+
+		this.connection.on('notification', this.onNotification);
+
+		this.column.$on('top', this.onTop);
+		this.column.$on('bottom', this.onBottom);
+
+		const max = 10;
+
+		this.$root.api('i/notifications', {
+			limit: max + 1
+		}).then(notifications => {
+			if (notifications.length == max + 1) {
+				this.moreNotifications = true;
+				notifications.pop();
+			}
+
+			this.notifications = notifications;
+			this.fetching = false;
+		});
+	},
+
+	beforeDestroy() {
+		this.connection.dispose();
+
+		this.column.$off('top', this.onTop);
+		this.column.$off('bottom', this.onBottom);
+	},
+
+	methods: {
+		fetchMoreNotifications() {
+			this.fetchingMoreNotifications = true;
+
+			const max = 20;
+
+			this.$root.api('i/notifications', {
+				limit: max + 1,
+				untilId: this.notifications[this.notifications.length - 1].id
+			}).then(notifications => {
+				if (notifications.length == max + 1) {
+					this.moreNotifications = true;
+					notifications.pop();
+				} else {
+					this.moreNotifications = false;
+				}
+				this.notifications = this.notifications.concat(notifications);
+				this.fetchingMoreNotifications = false;
+			});
+		},
+
+		onNotification(notification) {
+			// TODO: ユーザーが画面を見てないと思われるとき(ブラウザやタブがアクティブじゃないなど)は送信しない
+			this.$root.stream.send('readNotification', {
+				id: notification.id
+			});
+
+			this.prepend(notification);
+		},
+
+		prepend(notification) {
+			if (this.isScrollTop()) {
+				// Prepend the notification
+				this.notifications.unshift(notification);
+
+				// オーバーフローしたら古い通知は捨てる
+				if (this.notifications.length >= displayLimit) {
+					this.notifications = this.notifications.slice(0, displayLimit);
+				}
+			} else {
+				this.queue.push(notification);
+			}
+		},
+
+		releaseQueue() {
+			for (const n of this.queue) {
+				this.prepend(n);
+			}
+			this.queue = [];
+		},
+
+		onTop() {
+			this.releaseQueue();
+		},
+
+		onBottom() {
+			this.fetchMoreNotifications();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.oxynyeqmfvracxnglgulyqfgqxnxmehl
+	.transition
+		.mk-notifications-enter
+		.mk-notifications-leave-to
+			opacity 0
+			transform translateY(-30px)
+
+		> *
+			transition transform .3s ease, opacity .3s ease
+
+	> .placeholder
+		padding 16px
+		opacity 0.3
+
+	> .notifications
+
+		> .notification:not(:last-child)
+			border-bottom solid var(--lineWidth) var(--faceDivider)
+
+		> .date
+			display block
+			margin 0
+			line-height 28px
+			text-align center
+			font-size 12px
+			color var(--dateDividerFg)
+			background var(--dateDividerBg)
+			border-bottom solid var(--lineWidth) var(--faceDivider)
+
+			span
+				margin 0 16px
+
+			[data-icon]
+				margin-right 8px
+
+	> .more
+		display block
+		width 100%
+		padding 16px
+		color #555
+		border-top solid var(--lineWidth) rgba(#000, 0.05)
+
+		&:hover
+			background rgba(#000, 0.025)
+
+		&:active
+			background rgba(#000, 0.05)
+
+		&.fetching
+			cursor wait
+
+		> [data-icon]
+			margin-right 4px
+
+	> .empty
+		margin 0
+		padding 16px
+		text-align center
+		color var(--text)
+
+</style>
diff --git a/src/client/app/desktop/views/deck/deck.tl-column.vue b/src/client/app/desktop/views/deck/deck.tl-column.vue
new file mode 100644
index 0000000000..1dac733718
--- /dev/null
+++ b/src/client/app/desktop/views/deck/deck.tl-column.vue
@@ -0,0 +1,105 @@
+<template>
+<x-column :menu="menu" :name="name" :column="column" :is-stacked="isStacked">
+	<span slot="header">
+		<fa v-if="column.type == 'home'" icon="home"/>
+		<fa v-if="column.type == 'local'" :icon="['far', 'comments']"/>
+		<fa v-if="column.type == 'hybrid'" icon="share-alt"/>
+		<fa v-if="column.type == 'global'" icon="globe"/>
+		<fa v-if="column.type == 'list'" icon="list"/>
+		<fa v-if="column.type == 'hashtag'" icon="hashtag"/>
+		<span>{{ name }}</span>
+	</span>
+
+	<div class="editor" style="padding:12px" v-if="edit">
+		<ui-switch v-model="column.isMediaOnly" @change="onChangeSettings">{{ $t('is-media-only') }}</ui-switch>
+		<ui-switch v-model="column.isMediaView" @change="onChangeSettings">{{ $t('is-media-view') }}</ui-switch>
+	</div>
+
+	<x-list-tl v-if="column.type == 'list'"
+		:list="column.list"
+		:media-only="column.isMediaOnly"
+		:media-view="column.isMediaView"
+		ref="tl"
+	/>
+	<x-hashtag-tl v-else-if="column.type == 'hashtag'"
+		:tag-tl="$store.state.settings.tagTimelines.find(x => x.id == column.tagTlId)"
+		:media-only="column.isMediaOnly"
+		:media-view="column.isMediaView"
+		ref="tl"
+	/>
+	<x-tl v-else
+		:src="column.type"
+		:media-only="column.isMediaOnly"
+		:media-view="column.isMediaView"
+		ref="tl"
+	/>
+</x-column>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import XColumn from './deck.column.vue';
+import XTl from './deck.tl.vue';
+import XListTl from './deck.list-tl.vue';
+import XHashtagTl from './deck.hashtag-tl.vue';
+
+export default Vue.extend({
+	i18n: i18n('deck/deck.tl-column.vue'),
+	components: {
+		XColumn,
+		XTl,
+		XListTl,
+		XHashtagTl
+	},
+
+	props: {
+		column: {
+			type: Object,
+			required: true
+		},
+		isStacked: {
+			type: Boolean,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			edit: false,
+			menu: [{
+				icon: 'cog',
+				text: this.$t('edit'),
+				action: () => {
+					this.edit = !this.edit;
+				}
+			}]
+		}
+	},
+
+	computed: {
+		name(): string {
+			if (this.column.name) return this.column.name;
+
+			switch (this.column.type) {
+				case 'home': return this.$t('@deck.home');
+				case 'local': return this.$t('@deck.local');
+				case 'hybrid': return this.$t('@deck.hybrid');
+				case 'global': return this.$t('@deck.global');
+				case 'list': return this.column.list.title;
+				case 'hashtag': return this.$store.state.settings.tagTimelines.find(x => x.id == this.column.tagTlId).title;
+			}
+		}
+	},
+
+	methods: {
+		onChangeSettings(v) {
+			this.$store.dispatch('settings/saveDeck');
+		},
+
+		focus() {
+			this.$refs.tl.focus();
+		}
+	}
+});
+</script>
diff --git a/src/client/app/desktop/views/deck/deck.tl.vue b/src/client/app/desktop/views/deck/deck.tl.vue
new file mode 100644
index 0000000000..4f5e3af197
--- /dev/null
+++ b/src/client/app/desktop/views/deck/deck.tl.vue
@@ -0,0 +1,151 @@
+<template>
+<x-notes ref="timeline" :more="existMore ? more : null" :media-view="mediaView"/>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XNotes from './deck.notes.vue';
+
+const fetchLimit = 10;
+
+export default Vue.extend({
+	components: {
+		XNotes
+	},
+
+	props: {
+		src: {
+			type: String,
+			required: false,
+			default: 'home'
+		},
+		mediaOnly: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		mediaView: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+
+	data() {
+		return {
+			fetching: true,
+			moreFetching: false,
+			existMore: false,
+			connection: null
+		};
+	},
+
+	computed: {
+		stream(): any {
+			switch (this.src) {
+				case 'home': return this.$root.stream.useSharedConnection('homeTimeline');
+				case 'local': return this.$root.stream.useSharedConnection('localTimeline');
+				case 'hybrid': return this.$root.stream.useSharedConnection('hybridTimeline');
+				case 'global': return this.$root.stream.useSharedConnection('globalTimeline');
+			}
+		},
+
+		endpoint(): string {
+			switch (this.src) {
+				case 'home': return 'notes/timeline';
+				case 'local': return 'notes/local-timeline';
+				case 'hybrid': return 'notes/hybrid-timeline';
+				case 'global': return 'notes/global-timeline';
+			}
+		},
+	},
+
+	watch: {
+		mediaOnly() {
+			this.fetch();
+		}
+	},
+
+	mounted() {
+		this.connection = this.stream;
+
+		this.connection.on('note', this.onNote);
+		if (this.src == 'home') {
+			this.connection.on('follow', this.onChangeFollowing);
+			this.connection.on('unfollow', this.onChangeFollowing);
+		}
+
+		this.fetch();
+	},
+
+	beforeDestroy() {
+		this.connection.dispose();
+	},
+
+	methods: {
+		fetch() {
+			this.fetching = true;
+
+			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
+				this.$root.api(this.endpoint, {
+					limit: fetchLimit + 1,
+					withFiles: this.mediaOnly,
+					includeMyRenotes: this.$store.state.settings.showMyRenotes,
+					includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
+					includeLocalRenotes: this.$store.state.settings.showLocalRenotes
+				}).then(notes => {
+					if (notes.length == fetchLimit + 1) {
+						notes.pop();
+						this.existMore = true;
+					}
+					res(notes);
+					this.fetching = false;
+					this.$emit('loaded');
+				}, rej);
+			}));
+		},
+
+		more() {
+			this.moreFetching = true;
+
+			const promise = this.$root.api(this.endpoint, {
+				limit: fetchLimit + 1,
+				withFiles: this.mediaOnly,
+				untilId: (this.$refs.timeline as any).tail().id,
+				includeMyRenotes: this.$store.state.settings.showMyRenotes,
+				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
+				includeLocalRenotes: this.$store.state.settings.showLocalRenotes
+			});
+
+			promise.then(notes => {
+				if (notes.length == fetchLimit + 1) {
+					notes.pop();
+				} else {
+					this.existMore = false;
+				}
+				for (const n of notes) {
+					(this.$refs.timeline as any).append(n);
+				}
+				this.moreFetching = false;
+			});
+
+			return promise;
+		},
+
+		onNote(note) {
+			if (this.mediaOnly && note.files.length == 0) return;
+
+			// Prepend a note
+			(this.$refs.timeline as any).prepend(note);
+		},
+
+		onChangeFollowing() {
+			this.fetch();
+		},
+
+		focus() {
+			(this.$refs.timeline as any).focus();
+		}
+	}
+});
+</script>
diff --git a/src/client/app/desktop/views/deck/deck.user-column.vue b/src/client/app/desktop/views/deck/deck.user-column.vue
new file mode 100644
index 0000000000..60b3d2f0d5
--- /dev/null
+++ b/src/client/app/desktop/views/deck/deck.user-column.vue
@@ -0,0 +1,507 @@
+<template>
+<x-column>
+	<span slot="header">
+		<fa icon="user"/><mk-user-name :user="user" v-if="user"/>
+	</span>
+
+	<div class="zubukjlciycdsyynicqrnlsmdwmymzqu" v-if="user">
+		<div class="is-remote" v-if="user.host != null">
+			<details>
+				<summary><fa icon="exclamation-triangle"/> {{ $t('@.is-remote-user') }}</summary>
+				<a :href="user.url || user.uri" target="_blank">{{ $t('@.view-on-remote') }}</a>
+			</details>
+		</div>
+		<header :style="bannerStyle">
+			<div>
+				<button class="menu" @click="menu" ref="menu"><fa icon="ellipsis-h"/></button>
+				<mk-follow-button v-if="$store.getters.isSignedIn && user.id != $store.state.i.id" :user="user" class="follow" mini/>
+				<mk-avatar class="avatar" :user="user" :disable-preview="true"/>
+				<span class="name">
+					<mk-user-name :user="user"/>
+				</span>
+				<span class="acct">@{{ user | acct }} <fa v-if="user.isLocked == true" class="locked" icon="lock" fixed-width/></span>
+				<span class="followed" v-if="user.isFollowed">{{ $t('follows-you') }}</span>
+			</div>
+		</header>
+		<div class="info">
+			<div class="description">
+				<mfm v-if="user.description" :text="user.description" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/>
+			</div>
+			<div class="fields" v-if="user.fields">
+				<dl class="field" v-for="(field, i) in user.fields" :key="i">
+					<dt class="name">
+						<mfm :text="field.name" :should-break="false" :plain-text="true" :custom-emojis="user.emojis"/>
+					</dt>
+					<dd class="value">
+						<mfm :text="field.value" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/>
+					</dd>
+				</dl>
+			</div>
+			<div class="counts">
+				<div>
+					<b>{{ user.notesCount | number }}</b>
+					<span>{{ $t('posts') }}</span>
+				</div>
+				<div>
+					<b>{{ user.followingCount | number }}</b>
+					<span>{{ $t('following') }}</span>
+				</div>
+				<div>
+					<b>{{ user.followersCount | number }}</b>
+					<span>{{ $t('followers') }}</span>
+				</div>
+			</div>
+		</div>
+		<div class="pinned" v-if="user.pinnedNotes && user.pinnedNotes.length > 0">
+			<p class="caption" @click="toggleShowPinned"><fa icon="thumbtack"/> {{ $t('pinned-notes') }}</p>
+			<span class="angle" v-if="showPinned"><fa icon="angle-up"/></span>
+			<span class="angle" v-else><fa icon="angle-down"/></span>
+			<div class="notes" v-show="showPinned">
+				<x-note v-for="n in user.pinnedNotes" :key="n.id" :note="n" :mini="true"/>
+			</div>
+		</div>
+		<div class="images" v-if="images.length > 0">
+			<p class="caption" @click="toggleShowImages"><fa :icon="['far', 'images']"/> {{ $t('images') }}</p>
+			<span class="angle" v-if="showImages"><fa icon="angle-up"/></span>
+			<span class="angle" v-else><fa icon="angle-down"/></span>
+			<div v-show="showImages">
+				<router-link v-for="image in images"
+					:style="`background-image: url(${image.thumbnailUrl})`"
+					:key="`${image.id}:${image._note.id}`"
+					:to="image._note | notePage"
+					:title="`${image.name}\n${(new Date(image.createdAt)).toLocaleString()}`"
+				></router-link>
+			</div>
+		</div>
+		<div class="activity">
+			<p class="caption" @click="toggleShowActivity"><fa :icon="['far', 'chart-bar']"/> {{ $t('activity') }}</p>
+			<span class="angle" v-if="showActivity"><fa icon="angle-up"/></span>
+			<span class="angle" v-else><fa icon="angle-down"/></span>
+			<div v-show="showActivity">
+				<div ref="chart"></div>
+			</div>
+		</div>
+		<div class="tl">
+			<p class="caption"><fa :icon="['far', 'comment-alt']"/> {{ $t('timeline') }}</p>
+			<div>
+				<x-notes ref="timeline" :more="existMore ? fetchMoreNotes : null"/>
+			</div>
+		</div>
+	</div>
+</x-column>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import parseAcct from '../../../../../misc/acct/parse';
+import XColumn from './deck.column.vue';
+import XNotes from './deck.notes.vue';
+import XNote from '../components/note.vue';
+import XUserMenu from '../../../common/views/components/user-menu.vue';
+import { concat } from '../../../../../prelude/array';
+import ApexCharts from 'apexcharts';
+
+const fetchLimit = 10;
+
+export default Vue.extend({
+	i18n: i18n('deck/deck.user-column.vue'),
+	components: {
+		XColumn,
+		XNotes,
+		XNote
+	},
+
+	data() {
+		return {
+			user: null,
+			fetching: true,
+			existMore: false,
+			moreFetching: false,
+			withFiles: false,
+			images: [],
+			showPinned: true,
+			showImages: true,
+			showActivity: true
+		};
+	},
+
+	computed: {
+		bannerStyle(): any {
+			if (this.user == null) return {};
+			if (this.user.bannerUrl == null) return {};
+			return {
+				backgroundColor: this.user.bannerColor && this.user.bannerColor.length == 3 ? `rgb(${ this.user.bannerColor.join(',') })` : null,
+				backgroundImage: `url(${ this.user.bannerUrl })`
+			};
+		},
+	},
+
+	watch: {
+		$route: 'fetch'
+	},
+
+	created() {
+		this.fetch();
+	},
+
+	methods: {
+		fetch() {
+			this.fetching = true;
+			this.$root.api('users/show', parseAcct(this.$route.params.user)).then(user => {
+				this.user = user;
+				this.fetching = false;
+
+				this.$nextTick(() => {
+					(this.$refs.timeline as any).init(() => this.initTl());
+				});
+
+				const image = [
+					'image/jpeg',
+					'image/png',
+					'image/gif'
+				];
+
+				this.$root.api('users/notes', {
+					userId: this.user.id,
+					fileType: image,
+					excludeNsfw: !this.$store.state.device.alwaysShowNsfw,
+					limit: 9,
+					untilDate: new Date().getTime() + 1000 * 86400 * 365
+				}).then(notes => {
+					for (const note of notes) {
+						for (const file of note.files) {
+							file._note = note;
+						}
+					}
+					const files = concat(notes.map((n: any): any[] => n.files));
+					this.images = files.filter(f => image.includes(f.type)).slice(0, 9);
+				});
+
+				this.$root.api('charts/user/notes', {
+					userId: this.user.id,
+					span: 'day',
+					limit: 21
+				}).then(stats => {
+					const normal = [];
+					const reply = [];
+					const renote = [];
+
+					const now = new Date();
+					const y = now.getFullYear();
+					const m = now.getMonth();
+					const d = now.getDate();
+
+					for (let i = 0; i < 21; i++) {
+						const x = new Date(y, m, d - i);
+						normal.push([
+							x,
+							stats.diffs.normal[i]
+						]);
+						reply.push([
+							x,
+							stats.diffs.reply[i]
+						]);
+						renote.push([
+							x,
+							stats.diffs.renote[i]
+						]);
+					}
+
+					const chart = new ApexCharts(this.$refs.chart, {
+						chart: {
+							type: 'bar',
+							stacked: true,
+							height: 100,
+							sparkline: {
+								enabled: true
+							},
+						},
+						plotOptions: {
+							bar: {
+								columnWidth: '90%'
+							}
+						},
+						grid: {
+							clipMarkers: false,
+							padding: {
+								top: 16,
+								right: 16,
+								bottom: 16,
+								left: 16
+							}
+						},
+						tooltip: {
+							shared: true,
+							intersect: false
+						},
+						series: [{
+							name: 'Normal',
+							data: normal
+						}, {
+							name: 'Reply',
+							data: reply
+						}, {
+							name: 'Renote',
+							data: renote
+						}],
+						xaxis: {
+							type: 'datetime',
+							crosshairs: {
+								width: 1,
+								opacity: 1
+							}
+						}
+					});
+
+					chart.render();
+				});
+			});
+		},
+
+		initTl() {
+			return new Promise((res, rej) => {
+				this.$root.api('users/notes', {
+					userId: this.user.id,
+					limit: fetchLimit + 1,
+					untilDate: new Date().getTime() + 1000 * 86400 * 365,
+					withFiles: this.withFiles,
+					includeMyRenotes: this.$store.state.settings.showMyRenotes,
+					includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
+					includeLocalRenotes: this.$store.state.settings.showLocalRenotes
+				}).then(notes => {
+					if (notes.length == fetchLimit + 1) {
+						notes.pop();
+						this.existMore = true;
+					}
+					res(notes);
+				}, rej);
+			});
+		},
+
+		fetchMoreNotes() {
+			this.moreFetching = true;
+
+			const promise = this.$root.api('users/notes', {
+				userId: this.user.id,
+				limit: fetchLimit + 1,
+				untilDate: new Date((this.$refs.timeline as any).tail().createdAt).getTime(),
+				withFiles: this.withFiles,
+				includeMyRenotes: this.$store.state.settings.showMyRenotes,
+				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
+				includeLocalRenotes: this.$store.state.settings.showLocalRenotes
+			});
+
+			promise.then(notes => {
+				if (notes.length == fetchLimit + 1) {
+					notes.pop();
+				} else {
+					this.existMore = false;
+				}
+				for (const n of notes) (this.$refs.timeline as any).append(n);
+				this.moreFetching = false;
+			});
+
+			return promise;
+		},
+
+		menu() {
+			this.$root.new(XUserMenu, {
+				source: this.$refs.menu,
+				user: this.user
+			});
+		},
+
+		toggleShowPinned() {
+			this.showPinned = !this.showPinned;
+		},
+
+		toggleShowImages() {
+			this.showImages = !this.showImages;
+		},
+
+		toggleShowActivity() {
+			this.showActivity = !this.showActivity;
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.zubukjlciycdsyynicqrnlsmdwmymzqu
+	background var(--deckColumnBg)
+
+	> .is-remote
+		padding 8px 16px
+		font-size 12px
+
+		&.is-remote
+			color var(--remoteInfoFg)
+			background var(--remoteInfoBg)
+
+		> a
+			font-weight bold
+
+	> header
+		overflow hidden
+		background-size cover
+		background-position center
+
+		> div
+			padding 32px
+			background rgba(#000, 0.5)
+			color #fff
+			text-align center
+
+			> .menu
+				position absolute
+				top 8px
+				left 8px
+				padding 8px
+				font-size 16px
+				text-shadow 0 0 8px #000
+
+			> .follow
+				position absolute
+				top 16px
+				right 16px
+
+			> .avatar
+				display block
+				width 64px
+				height 64px
+				margin 0 auto
+
+			> .name
+				display block
+				margin-top 8px
+				font-weight bold
+				text-shadow 0 0 8px #000
+
+			> .acct
+				display block
+				font-size 14px
+				opacity 0.7
+				text-shadow 0 0 8px #000
+
+				> .locked
+					opacity 0.8
+
+			> .followed
+				display inline-block
+				font-size 12px
+				background rgba(0, 0, 0, 0.5)
+				opacity 0.7
+				margin-top: 2px
+				padding 4px
+				border-radius 4px
+
+	> .info
+		padding 16px
+		font-size 12px
+		color var(--text)
+		text-align center
+		background var(--face)
+
+		&:before
+			content ""
+			display blcok
+			position absolute
+			top -32px
+			left 0
+			right 0
+			width 0px
+			margin 0 auto
+			border-top solid 16px transparent
+			border-left solid 16px transparent
+			border-right solid 16px transparent
+			border-bottom solid 16px var(--face)
+
+		> .fields
+			margin-top 8px
+
+			> .field
+				display flex
+				padding 0
+				margin 0
+				align-items center
+
+				> .name
+					padding 4px
+					margin 4px
+					width 30%
+					overflow hidden
+					white-space nowrap
+					text-overflow ellipsis
+					font-weight bold
+
+				> .value
+					padding 4px
+					margin 4px
+					width 70%
+					overflow hidden
+					white-space nowrap
+					text-overflow ellipsis
+
+		> .counts
+			display grid
+			grid-template-columns 2fr 2fr 2fr
+			margin-top 8px
+			border-top solid var(--lineWidth) var(--faceDivider)
+
+			> div
+				padding 8px 8px 0 8px
+				text-align center
+
+				> b
+					display block
+					font-size 110%
+
+				> span
+					display block
+					font-size 80%
+					opacity 0.7
+
+	> *
+		> p.caption
+			margin 0
+			padding 8px 16px
+			font-size 12px
+			color var(--text)
+
+			& + .angle
+				position absolute
+				top 0
+				right 8px
+				padding 6px
+				font-size 14px
+				color var(--text)
+
+	> .pinned
+		> .notes
+			background var(--face)
+
+	> .images
+		> div
+			display grid
+			grid-template-columns 1fr 1fr 1fr
+			gap 8px
+			padding 16px
+			background var(--face)
+
+			> *
+				height 70px
+				background-position center center
+				background-size cover
+				background-clip content-box
+				border-radius 4px
+
+	> .activity
+		> div
+			background var(--face)
+
+	> .tl
+		> div
+			background var(--face)
+
+</style>
diff --git a/src/client/app/desktop/views/deck/deck.vue b/src/client/app/desktop/views/deck/deck.vue
new file mode 100644
index 0000000000..5af2075e4a
--- /dev/null
+++ b/src/client/app/desktop/views/deck/deck.vue
@@ -0,0 +1,385 @@
+<template>
+<mk-ui :class="$style.root">
+	<div class="qlvquzbjribqcaozciifydkngcwtyzje" ref="body" :style="style" :class="`${$store.state.device.deckColumnAlign} ${$store.state.device.deckColumnWidth}`" v-hotkey.global="keymap">
+		<template v-for="ids in layout">
+			<div v-if="ids.length > 1" class="folder">
+				<template v-for="id, i in ids">
+					<x-column-core :ref="id" :key="id" :column="columns.find(c => c.id == id)" :is-stacked="true" @parentFocus="moveFocus(id, $event)"/>
+				</template>
+			</div>
+			<x-column-core v-else :ref="ids[0]" :key="ids[0]" :column="columns.find(c => c.id == ids[0])" @parentFocus="moveFocus(ids[0], $event)"/>
+		</template>
+		<router-view></router-view>
+		<button ref="add" @click="add" :title="$t('@deck.add-column')"><fa icon="plus"/></button>
+	</div>
+</mk-ui>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import XColumnCore from './deck.column-core.vue';
+import Menu from '../../../common/views/components/menu.vue';
+import MkUserListsWindow from '../components/user-lists-window.vue';
+
+import * as uuid from 'uuid';
+
+export default Vue.extend({
+	i18n: i18n('deck'),
+	components: {
+		XColumnCore
+	},
+
+	computed: {
+		columns(): any[] {
+			if (this.$store.state.settings.deck == null) return [];
+			return this.$store.state.settings.deck.columns;
+		},
+
+		layout(): any[] {
+			if (this.$store.state.settings.deck == null) return [];
+			if (this.$store.state.settings.deck.layout == null) return this.$store.state.settings.deck.columns.map(c => [c.id]);
+			return this.$store.state.settings.deck.layout;
+		},
+
+		style(): any {
+			return {
+				height: `calc(100vh - ${this.$store.state.uiHeaderHeight}px)`
+			};
+		},
+
+		keymap(): any {
+			return {
+				't': this.focus
+			};
+		}
+	},
+
+	watch: {/*
+		temporaryColumn() {
+			if (this.temporaryColumn != null) {
+				this.$nextTick(() => {
+					this.$refs.body.scrollTo({
+						left: this.$refs.body.scrollWidth - this.$refs.body.clientWidth,
+						behavior: 'smooth'
+					});
+				});
+			}
+		}*/
+	},
+
+	provide() {
+		return {
+			getColumnVm: this.getColumnVm
+		};
+	},
+
+	created() {
+		if (this.$store.state.settings.deck == null) {
+			const deck = {
+				columns: [/*{
+					type: 'widgets',
+					widgets: []
+				}, */{
+					id: uuid(),
+					type: 'home'
+				}, {
+					id: uuid(),
+					type: 'notifications'
+				}, {
+					id: uuid(),
+					type: 'local'
+				}, {
+					id: uuid(),
+					type: 'global'
+				}]
+			};
+
+			deck.layout = deck.columns.map(c => [c.id]);
+
+			this.$store.dispatch('settings/set', {
+				key: 'deck',
+				value: deck
+			});
+		}
+
+		// 互換性のため
+		if (this.$store.state.settings.deck != null && this.$store.state.settings.deck.layout == null) {
+			this.$store.dispatch('settings/set', {
+				key: 'deck',
+				value: Object.assign({}, this.$store.state.settings.deck, {
+					layout: this.$store.state.settings.deck.columns.map(c => [c.id])
+				})
+			});
+		}
+	},
+
+	mounted() {
+		document.title = this.$root.instanceName;
+		document.documentElement.style.overflow = 'hidden';
+	},
+
+	beforeDestroy() {
+		document.documentElement.style.overflow = 'auto';
+	},
+
+	methods: {
+		getColumnVm(id) {
+			return this.$refs[id][0];
+		},
+
+		add() {
+			this.$root.new(Menu, {
+				source: this.$refs.add,
+				items: [{
+					icon: 'home',
+					text: this.$t('@deck.home'),
+					action: () => {
+						this.$store.dispatch('settings/addDeckColumn', {
+							id: uuid(),
+							type: 'home'
+						});
+					}
+				}, {
+					icon: ['far', 'comments'],
+					text: this.$t('@deck.local'),
+					action: () => {
+						this.$store.dispatch('settings/addDeckColumn', {
+							id: uuid(),
+							type: 'local'
+						});
+					}
+				}, {
+					icon: 'share-alt',
+					text: this.$t('@deck.hybrid'),
+					action: () => {
+						this.$store.dispatch('settings/addDeckColumn', {
+							id: uuid(),
+							type: 'hybrid'
+						});
+					}
+				}, {
+					icon: 'globe',
+					text: this.$t('@deck.global'),
+					action: () => {
+						this.$store.dispatch('settings/addDeckColumn', {
+							id: uuid(),
+							type: 'global'
+						});
+					}
+				}, {
+					icon: 'at',
+					text: this.$t('@deck.mentions'),
+					action: () => {
+						this.$store.dispatch('settings/addDeckColumn', {
+							id: uuid(),
+							type: 'mentions'
+						});
+					}
+				}, {
+					icon: ['far', 'envelope'],
+					text: this.$t('@deck.direct'),
+					action: () => {
+						this.$store.dispatch('settings/addDeckColumn', {
+							id: uuid(),
+							type: 'direct'
+						});
+					}
+				}, {
+					icon: 'list',
+					text: this.$t('@deck.list'),
+					action: () => {
+						const w = this.$root.new(MkUserListsWindow);
+						w.$once('choosen', list => {
+							this.$store.dispatch('settings/addDeckColumn', {
+								id: uuid(),
+								type: 'list',
+								list: list
+							});
+							w.close();
+						});
+					}
+				}, {
+					icon: 'hashtag',
+					text: this.$t('@deck.hashtag'),
+					action: () => {
+						this.$root.dialog({
+							title: this.$t('enter-hashtag-tl-title'),
+							input: true
+						}).then(({ canceled, result: title }) => {
+							if (canceled) return;
+							this.$store.dispatch('settings/addDeckColumn', {
+								id: uuid(),
+								type: 'hashtag',
+								tagTlId: this.$store.state.settings.tagTimelines.find(x => x.title == title).id
+							});
+						});
+					}
+				}, {
+					icon: ['far', 'bell'],
+					text: this.$t('@deck.notifications'),
+					action: () => {
+						this.$store.dispatch('settings/addDeckColumn', {
+							id: uuid(),
+							type: 'notifications'
+						});
+					}
+				}, {
+					icon: 'calculator',
+					text: this.$t('@deck.widgets'),
+					action: () => {
+						this.$store.dispatch('settings/addDeckColumn', {
+							id: uuid(),
+							type: 'widgets',
+							widgets: []
+						});
+					}
+				}]
+			});
+		},
+
+		focus() {
+			// Flatten array of arrays
+			const ids = [].concat.apply([], this.layout);
+			const firstTl = ids.find(id => this.isTlColumn(id));
+
+			if (firstTl) {
+				this.$refs[firstTl][0].focus();
+			}
+		},
+
+		moveFocus(id, direction) {
+			let targetColumn;
+
+			if (direction == 'right') {
+				const currentColumnIndex = this.layout.findIndex(ids => ids.includes(id));
+				this.layout.some((ids, i) => {
+					if (i <= currentColumnIndex) return false;
+					const tl = ids.find(id => this.isTlColumn(id));
+					if (tl) {
+						targetColumn = tl;
+						return true;
+					}
+				});
+			} else if (direction == 'left') {
+				const currentColumnIndex = [...this.layout].reverse().findIndex(ids => ids.includes(id));
+				[...this.layout].reverse().some((ids, i) => {
+					if (i <= currentColumnIndex) return false;
+					const tl = ids.find(id => this.isTlColumn(id));
+					if (tl) {
+						targetColumn = tl;
+						return true;
+					}
+				});
+			} else if (direction == 'down') {
+				const currentColumn = this.layout.find(ids => ids.includes(id));
+				const currentIndex = currentColumn.indexOf(id);
+				currentColumn.some((_id, i) => {
+					if (i <= currentIndex) return false;
+					if (this.isTlColumn(_id)) {
+						targetColumn = _id;
+						return true;
+					}
+				});
+			} else if (direction == 'up') {
+				const currentColumn = [...this.layout.find(ids => ids.includes(id))].reverse();
+				const currentIndex = currentColumn.indexOf(id);
+				currentColumn.some((_id, i) => {
+					if (i <= currentIndex) return false;
+					if (this.isTlColumn(_id)) {
+						targetColumn = _id;
+						return true;
+					}
+				});
+			}
+
+			if (targetColumn) {
+				this.$refs[targetColumn][0].focus();
+			}
+		},
+
+		isTlColumn(id) {
+			const column = this.columns.find(c => c.id === id);
+			return ['home', 'local', 'hybrid', 'global', 'list', 'hashtag', 'mentions', 'direct'].includes(column.type);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" module>
+.root
+	height 100vh
+</style>
+
+<style lang="stylus" scoped>
+.qlvquzbjribqcaozciifydkngcwtyzje
+	display flex
+	flex 1
+	padding 16px 0 16px 16px
+	overflow auto
+
+	> div
+		margin-right 8px
+		width 330px
+		min-width 330px
+
+		&:last-of-type
+			margin-right 0
+
+		&.folder
+			display flex
+			flex-direction column
+
+			> *:not(:last-child)
+				margin-bottom 8px
+
+	&.narrow
+		> div
+			width 303px
+			min-width 303px
+
+	&.narrower
+		> div
+			width 316.5px
+			min-width 316.5px
+
+	&.wider
+		> div
+			width 343.5px
+			min-width 343.5px
+
+	&.wide
+		> div
+			width 357px
+			min-width 357px
+
+	&.center
+		> *
+			&:first-child
+				margin-left auto
+
+			&:last-child
+				margin-right auto
+
+	&.:not(.flexible)
+		> *
+			flex-grow 0
+			flex-shrink 0
+
+	&.flexible
+		> *
+			flex-grow 1
+			flex-shrink 0
+
+	> button
+		padding 0 16px
+		color var(--faceTextButton)
+		flex-grow 0 !important
+
+		&:hover
+			color var(--faceTextButtonHover)
+
+		&:active
+			color var(--faceTextButtonActive)
+
+</style>
diff --git a/src/client/app/desktop/views/deck/deck.widgets-column.vue b/src/client/app/desktop/views/deck/deck.widgets-column.vue
new file mode 100644
index 0000000000..2af2f1f05c
--- /dev/null
+++ b/src/client/app/desktop/views/deck/deck.widgets-column.vue
@@ -0,0 +1,172 @@
+<template>
+<x-column :menu="menu" :naked="true" :narrow="true" :name="name" :column="column" :is-stacked="isStacked" class="wtdtxvecapixsepjtcupubtsmometobz">
+	<span slot="header"><fa icon="calculator"/>{{ name }}</span>
+
+	<div class="gqpwvtwtprsbmnssnbicggtwqhmylhnq">
+		<template v-if="edit">
+			<header>
+				<select v-model="widgetAdderSelected" @change="addWidget">
+					<option value="profile">{{ $t('@.widgets.profile') }}</option>
+					<option value="analog-clock">{{ $t('@.widgets.analog-clock') }}</option>
+					<option value="calendar">{{ $t('@.widgets.calendar') }}</option>
+					<option value="timemachine">{{ $t('@.widgets.timemachine') }}</option>
+					<option value="activity">{{ $t('@.widgets.activity') }}</option>
+					<option value="rss">{{ $t('@.widgets.rss') }}</option>
+					<option value="trends">{{ $t('@.widgets.trends') }}</option>
+					<option value="photo-stream">{{ $t('@.widgets.photo-stream') }}</option>
+					<option value="slideshow">{{ $t('@.widgets.slideshow') }}</option>
+					<option value="version">{{ $t('@.widgets.version') }}</option>
+					<option value="broadcast">{{ $t('@.widgets.broadcast') }}</option>
+					<option value="notifications">{{ $t('@.widgets.notifications') }}</option>
+					<option value="users">{{ $t('@.widgets.users') }}</option>
+					<option value="polls">{{ $t('@.widgets.polls') }}</option>
+					<option value="post-form">{{ $t('@.widgets.post-form') }}</option>
+					<option value="messaging">{{ $t('@.widgets.messaging') }}</option>
+					<option value="memo">{{ $t('@.widgets.memo') }}</option>
+					<option value="hashtags">{{ $t('@.widgets.hashtags') }}</option>
+					<option value="posts-monitor">{{ $t('@.widgets.posts-monitor') }}</option>
+					<option value="server">{{ $t('@.widgets.server') }}</option>
+					<option value="nav">{{ $t('@.widgets.nav') }}</option>
+					<option value="tips">{{ $t('@.widgets.tips') }}</option>
+				</select>
+			</header>
+			<x-draggable
+				:list="column.widgets"
+				:options="{ animation: 150 }"
+				@sort="onWidgetSort"
+			>
+				<div v-for="widget in column.widgets" class="customize-container" :key="widget.id" @contextmenu.stop.prevent="widgetFunc(widget.id)">
+					<button class="remove" @click="removeWidget(widget)"><fa icon="times"/></button>
+					<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true" platform="deck"/>
+				</div>
+			</x-draggable>
+		</template>
+		<template v-else>
+			<component class="widget" v-for="widget in column.widgets" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" platform="deck"/>
+		</template>
+	</div>
+</x-column>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import XColumn from './deck.column.vue';
+import * as XDraggable from 'vuedraggable';
+import * as uuid from 'uuid';
+
+export default Vue.extend({
+	i18n: i18n(),
+	components: {
+		XColumn,
+		XDraggable
+	},
+
+	props: {
+		column: {
+			type: Object,
+			required: true
+		},
+		isStacked: {
+			type: Boolean,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			edit: false,
+			menu: null,
+			widgetAdderSelected: null
+		}
+	},
+
+	computed: {
+		name(): string {
+			if (this.column.name) return this.column.name;
+			return this.$t('@deck.widgets');
+		}
+	},
+
+	created() {
+		this.menu = [{
+			icon: 'cog',
+			text: this.$t('edit'),
+			action: () => {
+				this.edit = !this.edit;
+			}
+		}];
+	},
+
+	methods: {
+		widgetFunc(id) {
+			const w = this.$refs[id][0];
+			if (w.func) w.func();
+		},
+
+		onWidgetSort() {
+			this.saveWidgets();
+		},
+
+		addWidget() {
+			this.$store.dispatch('settings/addDeckWidget', {
+				id: this.column.id,
+				widget: {
+					name: this.widgetAdderSelected,
+					id: uuid(),
+					data: {}
+				}
+			});
+
+			this.widgetAdderSelected = null;
+		},
+
+		removeWidget(widget) {
+			this.$store.dispatch('settings/removeDeckWidget', {
+				id: this.column.id,
+				widget
+			});
+		},
+
+		saveWidgets() {
+			this.$store.dispatch('settings/saveDeck');
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.wtdtxvecapixsepjtcupubtsmometobz
+	.gqpwvtwtprsbmnssnbicggtwqhmylhnq
+		> header
+			padding 16px
+
+			> *
+				width 100%
+				padding 4px
+
+		.widget, .customize-container
+			margin 8px
+
+			&:first-of-type
+				margin-top 0
+
+		.customize-container
+			cursor move
+
+			> *:not(.remove)
+				pointer-events none
+
+			> .remove
+				position absolute
+				z-index 1
+				top 8px
+				right 8px
+				width 32px
+				height 32px
+				color #fff
+				background rgba(#000, 0.7)
+				border-radius 4px
+
+</style>
+
diff --git a/src/client/app/desktop/views/home/favorites.vue b/src/client/app/desktop/views/home/favorites.vue
new file mode 100644
index 0000000000..4a4fc9ad8f
--- /dev/null
+++ b/src/client/app/desktop/views/home/favorites.vue
@@ -0,0 +1,83 @@
+<template>
+<div class="ecsvsegy" v-if="!fetching">
+	<sequential-entrance animation="entranceFromTop" delay="25">
+		<template v-for="favorite in favorites">
+			<mk-note-detail class="post" :note="favorite.note" :key="favorite.note.id"/>
+		</template>
+	</sequential-entrance>
+	<div class="more" v-if="existMore">
+		<ui-button inline @click="more">{{ $t('@.load-more') }}</ui-button>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import Progress from '../../../common/scripts/loading';
+
+export default Vue.extend({
+	i18n: i18n('.vue'),
+	data() {
+		return {
+			fetching: true,
+			favorites: [],
+			existMore: false,
+			moreFetching: false
+		};
+	},
+	created() {
+		this.fetch();
+	},
+	methods: {
+		fetch() {
+			Progress.start();
+			this.fetching = true;
+
+			this.$root.api('i/favorites', {
+				limit: 11
+			}).then(favorites => {
+				if (favorites.length == 11) {
+					this.existMore = true;
+					favorites.pop();
+				}
+
+				this.favorites = favorites;
+				this.fetching = false;
+
+				Progress.done();
+			});
+		},
+		more() {
+			this.moreFetching = true;
+			this.$root.api('i/favorites', {
+				limit: 11,
+				untilId: this.favorites[this.favorites.length - 1].id
+			}).then(favorites => {
+				if (favorites.length == 11) {
+					this.existMore = true;
+					favorites.pop();
+				} else {
+					this.existMore = false;
+				}
+
+				this.favorites = this.favorites.concat(favorites);
+				this.moreFetching = false;
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.ecsvsegy
+	margin 0 auto
+
+	> * > .post
+		margin-bottom 16px
+
+	> .more
+		margin 32px 16px 16px 16px
+		text-align center
+
+</style>
diff --git a/src/client/app/desktop/views/home/home.vue b/src/client/app/desktop/views/home/home.vue
new file mode 100644
index 0000000000..5e265634fb
--- /dev/null
+++ b/src/client/app/desktop/views/home/home.vue
@@ -0,0 +1,400 @@
+<template>
+<component :is="customize ? 'mk-dummy' : 'mk-ui'" v-hotkey.global="keymap" v-if="$store.getters.isSignedIn || $route.name != 'index'">
+	<div class="wqsofvpm" :data-customize="customize">
+		<div class="customize" v-if="customize">
+			<a @click="done()"><fa icon="check"/>{{ $t('done') }}</a>
+			<div>
+				<div class="adder">
+					<p>{{ $t('add-widget') }}</p>
+					<select v-model="widgetAdderSelected">
+						<option value="profile">{{ $t('@.widgets.profile') }}</option>
+						<option value="analog-clock">{{ $t('@.widgets.analog-clock') }}</option>
+						<option value="calendar">{{ $t('@.widgets.calendar') }}</option>
+						<option value="timemachine">{{ $t('@.widgets.timemachine') }}</option>
+						<option value="activity">{{ $t('@.widgets.activity') }}</option>
+						<option value="rss">{{ $t('@.widgets.rss') }}</option>
+						<option value="trends">{{ $t('@.widgets.trends') }}</option>
+						<option value="photo-stream">{{ $t('@.widgets.photo-stream') }}</option>
+						<option value="slideshow">{{ $t('@.widgets.slideshow') }}</option>
+						<option value="version">{{ $t('@.widgets.version') }}</option>
+						<option value="broadcast">{{ $t('@.widgets.broadcast') }}</option>
+						<option value="notifications">{{ $t('@.widgets.notifications') }}</option>
+						<option value="users">{{ $t('@.widgets.users') }}</option>
+						<option value="polls">{{ $t('@.widgets.polls') }}</option>
+						<option value="post-form">{{ $t('@.widgets.post-form') }}</option>
+						<option value="messaging">{{ $t('@.widgets.messaging') }}</option>
+						<option value="memo">{{ $t('@.widgets.memo') }}</option>
+						<option value="hashtags">{{ $t('@.widgets.hashtags') }}</option>
+						<option value="posts-monitor">{{ $t('@.widgets.posts-monitor') }}</option>
+						<option value="server">{{ $t('@.widgets.server') }}</option>
+						<option value="nav">{{ $t('@.widgets.nav') }}</option>
+						<option value="tips">{{ $t('@.widgets.tips') }}</option>
+					</select>
+					<button @click="addWidget">{{ $t('add') }}</button>
+				</div>
+				<div class="trash">
+					<x-draggable v-model="trash" :options="{ group: 'x' }" @add="onTrash"></x-draggable>
+					<p>{{ $t('@.trash') }}</p>
+				</div>
+			</div>
+		</div>
+		<div class="main" :class="{ side: widgets.left.length == 0 || widgets.right.length == 0 }">
+			<template v-if="customize">
+				<x-draggable v-for="place in ['left', 'right']"
+					:list="widgets[place]"
+					:class="place"
+					:data-place="place"
+					:options="{ group: 'x', animation: 150 }"
+					@sort="onWidgetSort"
+					:key="place"
+				>
+					<div v-for="widget in widgets[place]" class="customize-container" :key="widget.id" @contextmenu.stop.prevent="onWidgetContextmenu(widget.id)">
+						<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true" platform="desktop"/>
+					</div>
+				</x-draggable>
+				<div class="main">
+					<a @click="hint">{{ $t('@.customization-tips.title') }}</a>
+					<div>
+						<x-timeline/>
+					</div>
+				</div>
+			</template>
+			<template v-else>
+				<div v-for="place in ['left', 'right']" :class="place">
+					<component v-for="widget in widgets[place]" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" platform="desktop"/>
+				</div>
+				<div class="main">
+					<router-view ref="content"></router-view>
+				</div>
+			</template>
+		</div>
+	</div>
+</component>
+<x-welcome v-else/>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import * as XDraggable from 'vuedraggable';
+import * as uuid from 'uuid';
+import XWelcome from '../pages/welcome.vue';
+
+export default Vue.extend({
+	i18n: i18n('desktop/views/components/home.vue'),
+	components: {
+		XDraggable,
+		XWelcome
+	},
+
+	data() {
+		return {
+			customize: window.location.search == '?customize',
+			connection: null,
+			widgetAdderSelected: null,
+			trash: [],
+			view: null
+		};
+	},
+
+	computed: {
+		home(): any[] {
+			if (this.$store.getters.isSignedIn) {
+				return this.$store.state.settings.home || [];
+			} else {
+				return [{
+					name: 'instance',
+					place: 'right'
+				}];
+			}
+		},
+		left(): any[] {
+			return this.home.filter(w => w.place == 'left');
+		},
+		right(): any[] {
+			return this.home.filter(w => w.place == 'right');
+		},
+		widgets(): any {
+			return {
+				left: this.left,
+				right: this.right
+			};
+		},
+		keymap(): any {
+			return {
+				't': this.focus
+			};
+		}
+	},
+
+	created() {
+		if (this.$store.getters.isSignedIn) {
+			const defaultDesktopHomeWidgets = {
+				left: [
+					'profile',
+					'calendar',
+					'activity',
+					'rss',
+					'hashtags',
+					'photo-stream',
+					'version'
+				],
+				right: [
+					'customize',
+					'broadcast',
+					'notifications',
+					'users',
+					'polls',
+					'server',
+					'nav',
+					'tips'
+				]
+			};
+
+			//#region Construct home data
+			const _defaultDesktopHomeWidgets = [];
+
+			for (const widget of defaultDesktopHomeWidgets.left) {
+				_defaultDesktopHomeWidgets.push({
+					name: widget,
+					id: uuid(),
+					place: 'left',
+					data: {}
+				});
+			}
+
+			for (const widget of defaultDesktopHomeWidgets.right) {
+				_defaultDesktopHomeWidgets.push({
+					name: widget,
+					id: uuid(),
+					place: 'right',
+					data: {}
+				});
+			}
+			//#endregion
+
+			if (this.$store.state.settings.home == null) {
+				this.$root.api('i/update_home', {
+					home: _defaultDesktopHomeWidgets
+				}).then(() => {
+					this.$store.commit('settings/setHome', _defaultDesktopHomeWidgets);
+				});
+			}
+		}
+	},
+
+	mounted() {
+		this.connection = this.$root.stream.useSharedConnection('main');
+	},
+
+	beforeDestroy() {
+		this.connection.dispose();
+	},
+
+	methods: {
+		hint() {
+			this.$root.dialog({
+				title: this.$t('@.customization-tips.title'),
+				text: this.$t('@.customization-tips.paragraph')
+			});
+		},
+
+		onTlLoaded() {
+			this.$emit('loaded');
+		},
+
+		onWidgetContextmenu(widgetId) {
+			const w = (this.$refs[widgetId] as any)[0];
+			if (w.func) w.func();
+		},
+
+		onWidgetSort() {
+			this.saveHome();
+		},
+
+		onTrash(evt) {
+			this.saveHome();
+		},
+
+		addWidget() {
+			this.$store.dispatch('settings/addHomeWidget', {
+				name: this.widgetAdderSelected,
+				id: uuid(),
+				place: 'left',
+				data: {}
+			});
+		},
+
+		saveHome() {
+			const left = this.widgets.left;
+			const right = this.widgets.right;
+			this.$store.commit('settings/setHome', left.concat(right));
+			for (const w of left) w.place = 'left';
+			for (const w of right) w.place = 'right';
+			this.$root.api('i/update_home', {
+				home: this.home
+			});
+		},
+
+		done() {
+			location.href = '/';
+		},
+
+		focus() {
+			(this.$refs.content as any).focus();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.wqsofvpm
+	display block
+
+	&[data-customize]
+		padding-top 48px
+		background-image url('/assets/desktop/grid.svg')
+
+		> .main > .main
+			> a
+				display block
+				margin-bottom 8px
+				text-align center
+
+			> div
+				cursor not-allowed !important
+
+				> *
+					pointer-events none
+
+	&:not([data-customize])
+		> .main > *:not(.main):empty
+			display none
+
+	> .customize
+		position fixed
+		z-index 1000
+		top 0
+		left 0
+		width 100%
+		height 48px
+		color var(--text)
+		background var(--desktopHeaderBg)
+		box-shadow 0 1px 1px rgba(#000, 0.075)
+
+		> a
+			display block
+			position absolute
+			z-index 1001
+			top 0
+			right 0
+			padding 0 16px
+			line-height 48px
+			text-decoration none
+			color var(--primaryForeground)
+			background var(--primary)
+			transition background 0.1s ease
+
+			&:hover
+				background var(--primaryLighten10)
+
+			&:active
+				background var(--primaryDarken10)
+				transition background 0s ease
+
+			> [data-icon]
+				margin-right 8px
+
+		> div
+			display flex
+			margin 0 auto
+			max-width 1220px - 32px
+
+			> div
+				width 50%
+
+				&.adder
+					> p
+						display inline
+						line-height 48px
+
+				&.trash
+					border-left solid 1px var(--faceDivider)
+
+					> div
+						width 100%
+						height 100%
+
+					> p
+						position absolute
+						top 0
+						left 0
+						width 100%
+						line-height 48px
+						margin 0
+						text-align center
+						pointer-events none
+
+	> .main
+		display flex
+		justify-content center
+		margin 0 auto
+		max-width 1240px
+
+		> *
+			.customize-container
+				cursor move
+				border-radius 6px
+
+				&:hover
+					box-shadow 0 0 8px rgba(64, 120, 200, 0.3)
+
+				> *
+					pointer-events none
+
+		> .main
+			padding 16px
+			width calc(100% - 280px * 2)
+			order 2
+
+		&.side
+			> .main
+				width calc(100% - 280px)
+				max-width 680px
+
+		> *:not(.main)
+			width 280px
+			padding 16px 0 16px 0
+
+			> *:not(:last-child)
+				margin-bottom 16px
+
+		> .left
+			padding-left 16px
+			order 1
+
+		> .right
+			padding-right 16px
+			order 3
+
+		&.side
+			@media (max-width 1000px)
+				> *:not(.main)
+					display none
+
+				> .main
+					width 100%
+					max-width 700px
+					margin 0 auto
+
+		&:not(.side)
+			@media (max-width 1200px)
+				> *:not(.main)
+					display none
+
+				> .main
+					width 100%
+					max-width 700px
+					margin 0 auto
+
+</style>
diff --git a/src/client/app/desktop/views/home/note.vue b/src/client/app/desktop/views/home/note.vue
new file mode 100644
index 0000000000..90d3fd4357
--- /dev/null
+++ b/src/client/app/desktop/views/home/note.vue
@@ -0,0 +1,63 @@
+<template>
+<div v-if="!fetching" class="kcthdwmv">
+	<mk-note-detail :note="note"/>
+	<footer>
+		<router-link v-if="note.next" :to="note.next"><fa icon="angle-left"/> {{ $t('next') }}</router-link>
+		<router-link v-if="note.prev" :to="note.prev">{{ $t('prev') }} <fa icon="angle-right"/></router-link>
+	</footer>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import Progress from '../../../common/scripts/loading';
+
+export default Vue.extend({
+	i18n: i18n('desktop/views/pages/note.vue'),
+	data() {
+		return {
+			fetching: true,
+			note: null
+		};
+	},
+	watch: {
+		$route: 'fetch'
+	},
+	created() {
+		this.fetch();
+	},
+	methods: {
+		fetch() {
+			Progress.start();
+			this.fetching = true;
+
+			this.$root.api('notes/show', {
+				noteId: this.$route.params.note
+			}).then(note => {
+				this.note = note;
+				this.fetching = false;
+
+				Progress.done();
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.kcthdwmv
+	text-align center
+
+	> footer
+		margin-top 16px
+
+		> a
+			display inline-block
+			margin 0 16px
+
+	> .mk-note-detail
+		margin 0 auto
+		width 640px
+
+</style>
diff --git a/src/client/app/desktop/views/home/tag.vue b/src/client/app/desktop/views/home/tag.vue
new file mode 100644
index 0000000000..9e0978fb09
--- /dev/null
+++ b/src/client/app/desktop/views/home/tag.vue
@@ -0,0 +1,117 @@
+<template>
+<div>
+	<p :class="$style.empty" v-if="!fetching && empty"><fa icon="search"/> {{ $t('no-posts-found', { q: $route.params.tag }) }}</p>
+	<mk-notes ref="timeline" :class="$style.notes" :more="existMore ? more : null"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import Progress from '../../../common/scripts/loading';
+
+const limit = 20;
+
+export default Vue.extend({
+	i18n: i18n('desktop/views/pages/tag.vue'),
+	data() {
+		return {
+			fetching: true,
+			moreFetching: false,
+			existMore: false,
+			offset: 0,
+			empty: false
+		};
+	},
+	watch: {
+		$route: 'fetch'
+	},
+	mounted() {
+		document.addEventListener('keydown', this.onDocumentKeydown);
+		window.addEventListener('scroll', this.onScroll, { passive: true });
+
+		this.fetch();
+	},
+	beforeDestroy() {
+		document.removeEventListener('keydown', this.onDocumentKeydown);
+		window.removeEventListener('scroll', this.onScroll);
+	},
+	methods: {
+		onDocumentKeydown(e) {
+			if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
+				if (e.which == 84) { // t
+					(this.$refs.timeline as any).focus();
+				}
+			}
+		},
+		fetch() {
+			this.fetching = true;
+			Progress.start();
+
+			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
+				this.$root.api('notes/search_by_tag', {
+					limit: limit + 1,
+					offset: this.offset,
+					tag: this.$route.params.tag
+				}).then(notes => {
+					if (notes.length == 0) this.empty = true;
+					if (notes.length == limit + 1) {
+						notes.pop();
+						this.existMore = true;
+					}
+					res(notes);
+					this.fetching = false;
+					Progress.done();
+				}, rej);
+			}));
+		},
+		more() {
+			this.offset += limit;
+
+			const promise = this.$root.api('notes/search_by_tag', {
+				limit: limit + 1,
+				offset: this.offset,
+				tag: this.$route.params.tag
+			});
+
+			promise.then(notes => {
+				if (notes.length == limit + 1) {
+					notes.pop();
+				} else {
+					this.existMore = false;
+				}
+				for (const n of notes) {
+					(this.$refs.timeline as any).append(n);
+				}
+				this.moreFetching = false;
+			});
+
+			return promise;
+		}
+	}
+});
+</script>
+
+<style lang="stylus" module>
+.notes
+	background var(--face)
+	box-shadow var(--shadow)
+	border-radius var(--round)
+	overflow hidden
+	overflow hidden
+
+.empty
+	display block
+	margin 0 auto
+	padding 32px
+	max-width 400px
+	text-align center
+	color #999
+
+	> [data-icon]
+		display block
+		margin-bottom 16px
+		font-size 3em
+		color #ccc
+
+</style>
diff --git a/src/client/app/desktop/views/home/timeline.core.vue b/src/client/app/desktop/views/home/timeline.core.vue
new file mode 100644
index 0000000000..63bc20dc28
--- /dev/null
+++ b/src/client/app/desktop/views/home/timeline.core.vue
@@ -0,0 +1,195 @@
+<template>
+<div class="mk-timeline-core">
+	<mk-friends-maker v-if="src == 'home' && alone"/>
+
+	<mk-notes ref="timeline" :more="existMore ? more : null">
+		<p :class="$style.empty" slot="empty">
+			<fa :icon="['far', 'comments']"/>{{ $t('empty') }}
+		</p>
+	</mk-notes>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+
+const fetchLimit = 10;
+
+export default Vue.extend({
+	i18n: i18n('desktop/views/components/timeline.core.vue'),
+	props: {
+		src: {
+			type: String,
+			required: true
+		},
+		tagTl: {
+			required: false
+		}
+	},
+
+	data() {
+		return {
+			fetching: true,
+			moreFetching: false,
+			existMore: false,
+			connection: null,
+			date: null,
+			baseQuery: {
+				includeMyRenotes: this.$store.state.settings.showMyRenotes,
+				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
+				includeLocalRenotes: this.$store.state.settings.showLocalRenotes
+			},
+			query: {},
+			endpoint: null
+		};
+	},
+
+	computed: {
+		alone(): boolean {
+			return this.$store.state.i.followingCount == 0;
+		},
+
+		canFetchMore(): boolean {
+			return !this.moreFetching && !this.fetching && this.existMore;
+		}
+	},
+
+	mounted() {
+		const prepend = note => {
+			(this.$refs.timeline as any).prepend(note);
+		};
+
+		if (this.src == 'tag') {
+			this.endpoint = 'notes/search_by_tag';
+			this.query = {
+				query: this.tagTl.query
+			};
+			this.connection = this.$root.stream.connectToChannel('hashtag', { q: this.tagTl.query });
+			this.connection.on('note', prepend);
+		} else if (this.src == 'home') {
+			this.endpoint = 'notes/timeline';
+			const onChangeFollowing = () => {
+				this.fetch();
+			};
+			this.connection = this.$root.stream.useSharedConnection('homeTimeline');
+			this.connection.on('note', prepend);
+			this.connection.on('follow', onChangeFollowing);
+			this.connection.on('unfollow', onChangeFollowing);
+		} else if (this.src == 'local') {
+			this.endpoint = 'notes/local-timeline';
+			this.connection = this.$root.stream.useSharedConnection('localTimeline');
+			this.connection.on('note', prepend);
+		} else if (this.src == 'hybrid') {
+			this.endpoint = 'notes/hybrid-timeline';
+			this.connection = this.$root.stream.useSharedConnection('hybridTimeline');
+			this.connection.on('note', prepend);
+		} else if (this.src == 'global') {
+			this.endpoint = 'notes/global-timeline';
+			this.connection = this.$root.stream.useSharedConnection('globalTimeline');
+			this.connection.on('note', prepend);
+		} else if (this.src == 'mentions') {
+			this.endpoint = 'notes/mentions';
+			this.connection = this.$root.stream.useSharedConnection('main');
+			this.connection.on('mention', prepend);
+		} else if (this.src == 'messages') {
+			this.endpoint = 'notes/mentions';
+			this.query = {
+				visibility: 'specified'
+			};
+			const onNote = note => {
+				if (note.visibility == 'specified') {
+					prepend(note);
+				}
+			};
+			this.connection = this.$root.stream.useSharedConnection('main');
+			this.connection.on('mention', onNote);
+		}
+
+		this.fetch();
+	},
+
+	beforeDestroy() {
+		this.connection.dispose();
+	},
+
+	methods: {
+		fetch() {
+			this.fetching = true;
+
+			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
+				this.$root.api(this.endpoint, Object.assign({
+					limit: fetchLimit + 1,
+					untilDate: this.date ? this.date.getTime() : undefined
+				}, this.baseQuery, this.query)).then(notes => {
+					if (notes.length == fetchLimit + 1) {
+						notes.pop();
+						this.existMore = true;
+					}
+					res(notes);
+					this.fetching = false;
+					this.$emit('loaded');
+				}, rej);
+			}));
+		},
+
+		more() {
+			if (!this.canFetchMore) return;
+
+			this.moreFetching = true;
+
+			const promise = this.$root.api(this.endpoint, Object.assign({
+				limit: fetchLimit + 1,
+				untilId: (this.$refs.timeline as any).tail().id
+			}, this.baseQuery, this.query));
+
+			promise.then(notes => {
+				if (notes.length == fetchLimit + 1) {
+					notes.pop();
+				} else {
+					this.existMore = false;
+				}
+				for (const n of notes) {
+					(this.$refs.timeline as any).append(n);
+				}
+				this.moreFetching = false;
+			});
+
+			return promise;
+		},
+
+		focus() {
+			(this.$refs.timeline as any).focus();
+		},
+
+		warp(date) {
+			this.date = date;
+			this.fetch();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-timeline-core
+	> .mk-friends-maker
+		border-bottom solid var(--lineWidth) #eee
+
+</style>
+
+<style lang="stylus" module>
+.empty
+	display block
+	margin 0 auto
+	padding 32px
+	max-width 400px
+	text-align center
+	color #999
+
+	> [data-icon]
+		display block
+		margin-bottom 16px
+		font-size 3em
+		color #ccc
+
+</style>
diff --git a/src/client/app/desktop/views/home/timeline.vue b/src/client/app/desktop/views/home/timeline.vue
new file mode 100644
index 0000000000..2f42b9723f
--- /dev/null
+++ b/src/client/app/desktop/views/home/timeline.vue
@@ -0,0 +1,273 @@
+<template>
+<div class="mk-timeline">
+	<mk-post-form class="form" v-if="$store.state.settings.showPostFormOnTopOfTl"/>
+	<div class="main">
+		<header>
+			<span :data-active="src == 'home'" @click="src = 'home'"><fa icon="home"/> {{ $t('home') }}</span>
+			<span :data-active="src == 'local'" @click="src = 'local'" v-if="enableLocalTimeline"><fa :icon="['far', 'comments']"/> {{ $t('local') }}</span>
+			<span :data-active="src == 'hybrid'" @click="src = 'hybrid'" v-if="enableLocalTimeline"><fa icon="share-alt"/> {{ $t('hybrid') }}</span>
+			<span :data-active="src == 'global'" @click="src = 'global'" v-if="enableGlobalTimeline"><fa icon="globe"/> {{ $t('global') }}</span>
+			<span :data-active="src == 'tag'" @click="src = 'tag'" v-if="tagTl"><fa icon="hashtag"/> {{ tagTl.title }}</span>
+			<span :data-active="src == 'list'" @click="src = 'list'" v-if="list"><fa icon="list"/> {{ list.title }}</span>
+			<div class="buttons">
+				<button :data-active="src == 'mentions'" @click="src = 'mentions'" :title="$t('mentions')"><fa icon="at"/><i class="badge" v-if="$store.state.i.hasUnreadMentions"><fa icon="circle"/></i></button>
+				<button :data-active="src == 'messages'" @click="src = 'messages'" :title="$t('messages')"><fa :icon="['far', 'envelope']"/><i class="badge" v-if="$store.state.i.hasUnreadSpecifiedNotes"><fa icon="circle"/></i></button>
+				<button @click="chooseTag" :title="$t('hashtag')" ref="tagButton"><fa icon="hashtag"/></button>
+				<button @click="chooseList" :title="$t('list')" ref="listButton"><fa icon="list"/></button>
+			</div>
+		</header>
+		<x-core v-if="src == 'home'" ref="tl" key="home" src="home"/>
+		<x-core v-if="src == 'local'" ref="tl" key="local" src="local"/>
+		<x-core v-if="src == 'hybrid'" ref="tl" key="hybrid" src="hybrid"/>
+		<x-core v-if="src == 'global'" ref="tl" key="global" src="global"/>
+		<x-core v-if="src == 'mentions'" ref="tl" key="mentions" src="mentions"/>
+		<x-core v-if="src == 'messages'" ref="tl" key="messages" src="messages"/>
+		<x-core v-if="src == 'tag'" ref="tl" key="tag" src="tag" :tag-tl="tagTl"/>
+		<mk-user-list-timeline v-if="src == 'list'" ref="tl" :key="list.id" :list="list"/>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import XCore from './timeline.core.vue';
+import Menu from '../../../common/views/components/menu.vue';
+import MkSettingsWindow from '../components/settings-window.vue';
+
+export default Vue.extend({
+	i18n: i18n('desktop/views/components/timeline.vue'),
+	components: {
+		XCore
+	},
+
+	data() {
+		return {
+			src: 'home',
+			list: null,
+			tagTl: null,
+			enableLocalTimeline: false,
+			enableGlobalTimeline: false,
+		};
+	},
+
+	watch: {
+		src() {
+			this.saveSrc();
+		},
+
+		list(x) {
+			this.saveSrc();
+			if (x != null) this.tagTl = null;
+		},
+
+		tagTl(x) {
+			this.saveSrc();
+			if (x != null) this.list = null;
+		}
+	},
+
+	created() {
+		this.$root.getMeta().then((meta: Record<string, any>) => {
+			if (!(
+				this.enableGlobalTimeline = !meta.disableGlobalTimeline || this.$store.state.i.isModerator || this.$store.state.i.isAdmin
+			) && this.src === 'global') this.src = 'local';
+			if (!(
+				this.enableLocalTimeline = !meta.disableLocalTimeline || this.$store.state.i.isModerator || this.$store.state.i.isAdmin
+			) && ['local', 'hybrid'].includes(this.src)) this.src = 'home';
+		});
+
+		if (this.$store.state.device.tl) {
+			this.src = this.$store.state.device.tl.src;
+			if (this.src == 'list') {
+				this.list = this.$store.state.device.tl.arg;
+			} else if (this.src == 'tag') {
+				this.tagTl = this.$store.state.device.tl.arg;
+			}
+		} else if (this.$store.state.i.followingCount == 0) {
+			this.src = 'hybrid';
+		}
+	},
+
+	mounted() {
+		(this.$refs.tl as any).$once('loaded', () => {
+			this.$emit('loaded');
+		});
+	},
+
+	methods: {
+		saveSrc() {
+			this.$store.commit('device/setTl', {
+				src: this.src,
+				arg: this.src == 'list' ? this.list : this.tagTl
+			});
+		},
+
+		focus() {
+			(this.$refs.tl as any).focus();
+		},
+
+		warp(date) {
+			(this.$refs.tl as any).warp(date);
+		},
+
+		async chooseList() {
+			const lists = await this.$root.api('users/lists/list');
+
+			let menu = [{
+				icon: 'plus',
+				text: this.$t('add-list'),
+				action: () => {
+					this.$root.dialog({
+						title: this.$t('list-name'),
+						input: true
+					}).then(async ({ canceled, result: title }) => {
+						if (canceled) return;
+						const list = await this.$root.api('users/lists/create', {
+							title
+						});
+
+						this.list = list;
+						this.src = 'list';
+					});
+				}
+			}];
+
+			if (lists.length > 0) {
+				menu.push(null);
+			}
+
+			menu = menu.concat(lists.map(list => ({
+				icon: 'list',
+				text: list.title,
+				action: () => {
+					this.list = list;
+					this.src = 'list';
+				}
+			})));
+
+			this.$root.new(Menu, {
+				source: this.$refs.listButton,
+				items: menu
+			});
+		},
+
+		chooseTag() {
+			let menu = [{
+				icon: 'plus',
+				text: this.$t('add-tag-timeline'),
+				action: () => {
+					this.$root.new(MkSettingsWindow, {
+						initialPage: 'hashtags'
+					});
+				}
+			}];
+
+			if (this.$store.state.settings.tagTimelines.length > 0) {
+				menu.push(null);
+			}
+
+			menu = menu.concat(this.$store.state.settings.tagTimelines.map(t => ({
+				icon: 'hashtag',
+				text: t.title,
+				action: () => {
+					this.tagTl = t;
+					this.src = 'tag';
+				}
+			})));
+
+			this.$root.new(Menu, {
+				source: this.$refs.tagButton,
+				items: menu
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-timeline
+	> .form
+		margin-bottom 16px
+		box-shadow var(--shadow)
+		border-radius var(--round)
+
+	> .main
+		background var(--face)
+		box-shadow var(--shadow)
+		border-radius var(--round)
+		overflow hidden
+
+		> header
+			padding 0 8px
+			z-index 10
+			background var(--faceHeader)
+			box-shadow 0 var(--lineWidth) var(--desktopTimelineHeaderShadow)
+
+			> .buttons
+				position absolute
+				z-index 2
+				top 0
+				right 0
+				padding-right 8px
+
+				> button
+					padding 0 8px
+					font-size 0.9em
+					line-height 42px
+					color var(--faceTextButton)
+
+					> .badge
+						position absolute
+						top -4px
+						right 4px
+						font-size 10px
+						color var(--notificationIndicator)
+
+					&:hover
+						color var(--faceTextButtonHover)
+
+					&[data-active]
+						color var(--primary)
+						cursor default
+
+						&:before
+							content ""
+							display block
+							position absolute
+							bottom 0
+							left 0
+							width 100%
+							height 2px
+							background var(--primary)
+
+			> span
+				display inline-block
+				padding 0 10px
+				line-height 42px
+				font-size 12px
+				user-select none
+
+				&[data-active]
+					color var(--primary)
+					cursor default
+					font-weight bold
+
+					&:before
+						content ""
+						display block
+						position absolute
+						bottom 0
+						left -8px
+						width calc(100% + 16px)
+						height 2px
+						background var(--primary)
+
+				&:not([data-active])
+					color var(--desktopTimelineSrc)
+					cursor pointer
+
+					&:hover
+						color var(--desktopTimelineSrcHover)
+
+</style>
diff --git a/src/client/app/desktop/views/home/user/user.followers-you-know.vue b/src/client/app/desktop/views/home/user/user.followers-you-know.vue
new file mode 100644
index 0000000000..53949a7943
--- /dev/null
+++ b/src/client/app/desktop/views/home/user/user.followers-you-know.vue
@@ -0,0 +1,84 @@
+<template>
+<div class="vahgrswmbzfdlmomxnqftuueyvwaafth">
+	<p class="title"><fa icon="users"/>{{ $t('title') }}</p>
+	<p class="initializing" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('loading') }}<mk-ellipsis/></p>
+	<div v-if="!fetching && users.length > 0">
+	<router-link v-for="user in users" :to="user | userPage" :key="user.id">
+		<img :src="user.avatarUrl" :alt="user | userName" v-user-preview="user.id"/>
+	</router-link>
+	</div>
+	<p class="empty" v-if="!fetching && users.length == 0">{{ $t('no-users') }}</p>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../../i18n';
+
+export default Vue.extend({
+	i18n: i18n('desktop/views/pages/user/user.followers-you-know.vue'),
+	props: ['user'],
+	data() {
+		return {
+			users: [],
+			fetching: true
+		};
+	},
+	mounted() {
+		this.$root.api('users/followers', {
+			userId: this.user.id,
+			iknow: true,
+			limit: 16
+		}).then(x => {
+			this.users = x.users;
+			this.fetching = false;
+		});
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.vahgrswmbzfdlmomxnqftuueyvwaafth
+	background var(--face)
+	box-shadow var(--shadow)
+	border-radius var(--round)
+
+	> .title
+		z-index 1
+		margin 0
+		padding 0 16px
+		line-height 42px
+		font-size 0.9em
+		font-weight bold
+		color var(--faceHeaderText)
+		box-shadow 0 1px rgba(#000, 0.07)
+
+		> i
+			margin-right 4px
+
+	> div
+		padding 8px
+
+		> a
+			display inline-block
+			margin 4px
+
+			> img
+				display inline-block
+				text-align center
+				width 48px
+				height 48px
+				vertical-align bottom
+				border-radius 100%
+
+	> .initializing
+	> .empty
+		margin 0
+		padding 16px
+		text-align center
+		color var(--text)
+
+		> i
+			margin-right 4px
+
+</style>
diff --git a/src/client/app/desktop/views/home/user/user.friends.vue b/src/client/app/desktop/views/home/user/user.friends.vue
new file mode 100644
index 0000000000..e3182e91fa
--- /dev/null
+++ b/src/client/app/desktop/views/home/user/user.friends.vue
@@ -0,0 +1,112 @@
+<template>
+<div class="hozptpaliadatkehcmcayizwzwwctpbc">
+	<p class="title"><fa icon="users"/>{{ $t('title') }}</p>
+	<p class="initializing" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('loading') }}<mk-ellipsis/></p>
+	<template v-if="!fetching && users.length != 0">
+		<div class="user" v-for="friend in users">
+			<mk-avatar class="avatar" :user="friend"/>
+			<div class="body">
+				<router-link class="name" :to="friend | userPage" v-user-preview="friend.id"><mk-user-name :user="friend"/></router-link>
+				<p class="username">@{{ friend | acct }}</p>
+			</div>
+		</div>
+	</template>
+	<p class="empty" v-if="!fetching && users.length == 0">{{ $t('no-users') }}</p>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../../i18n';
+
+export default Vue.extend({
+	i18n: i18n('desktop/views/pages/user/user.friends.vue'),
+	props: ['user'],
+	data() {
+		return {
+			users: [],
+			fetching: true
+		};
+	},
+	mounted() {
+		this.$root.api('users/get_frequently_replied_users', {
+			userId: this.user.id,
+			limit: 4
+		}).then(docs => {
+			this.users = docs.map(doc => doc.user);
+			this.fetching = false;
+		});
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.hozptpaliadatkehcmcayizwzwwctpbc
+	background var(--face)
+	box-shadow var(--shadow)
+	border-radius var(--round)
+	overflow hidden
+
+	> .title
+		z-index 1
+		margin 0
+		padding 0 16px
+		line-height 42px
+		font-size 0.9em
+		font-weight bold
+		background var(--faceHeader)
+		color var(--faceHeaderText)
+		box-shadow 0 1px rgba(#000, 0.07)
+
+		> i
+			margin-right 4px
+
+	> .initializing
+	> .empty
+		margin 0
+		padding 16px
+		text-align center
+		color var(--text)
+
+		> i
+			margin-right 4px
+
+	> .user
+		padding 16px
+		border-bottom solid 1px var(--faceDivider)
+
+		&:last-child
+			border-bottom none
+
+		&:after
+			content ""
+			display block
+			clear both
+
+		> .avatar
+			display block
+			float left
+			margin 0 12px 0 0
+			width 42px
+			height 42px
+			border-radius 8px
+
+		> .body
+			float left
+			width calc(100% - 54px)
+
+			> .name
+				margin 0
+				font-size 16px
+				line-height 24px
+				color var(--text)
+
+			> .username
+				display block
+				margin 0
+				font-size 15px
+				line-height 16px
+				color var(--text)
+				opacity 0.7
+
+</style>
diff --git a/src/client/app/desktop/views/home/user/user.header.vue b/src/client/app/desktop/views/home/user/user.header.vue
new file mode 100644
index 0000000000..a0d141fb97
--- /dev/null
+++ b/src/client/app/desktop/views/home/user/user.header.vue
@@ -0,0 +1,272 @@
+<template>
+<div class="header" :data-is-dark-background="user.bannerUrl != null">
+	<div class="banner-container" :style="style">
+		<div class="banner" ref="banner" :style="style" @click="onBannerClick"></div>
+		<div class="fade"></div>
+		<div class="title">
+			<p class="name">
+				<mk-user-name :user="user"/>
+			</p>
+			<div>
+				<span class="username"><mk-acct :user="user" :detail="true" /></span>
+				<span v-if="user.isBot" :title="$t('is-bot')"><fa icon="robot"/></span>
+			</div>
+		</div>
+	</div>
+	<mk-avatar class="avatar" :user="user" :disable-preview="true"/>
+	<div class="body">
+		<div class="actions" v-if="$store.getters.isSignedIn">
+			<template v-if="$store.state.i.id != user.id">
+				<p class="followed" v-if="user.isFollowed">{{ $t('follows-you') }}</p>
+				<mk-follow-button :user="user" :inline="true" class="follow"/>
+			</template>
+			<ui-button @click="menu" ref="menu" :inline="true"><fa icon="ellipsis-h"/></ui-button>
+		</div>
+		<div class="description">
+			<mfm v-if="user.description" :text="user.description" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/>
+		</div>
+		<div class="fields" v-if="user.fields">
+			<dl class="field" v-for="(field, i) in user.fields" :key="i">
+				<dt class="name">
+					<mfm :text="field.name" :should-break="false" :plain-text="true" :custom-emojis="user.emojis"/>
+				</dt>
+				<dd class="value">
+					<mfm :text="field.value" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/>
+				</dd>
+			</dl>
+		</div>
+		<div class="info">
+			<span class="location" v-if="user.host === null && user.profile.location"><fa icon="map-marker"/> {{ user.profile.location }}</span>
+			<span class="birthday" v-if="user.host === null && user.profile.birthday"><fa icon="birthday-cake"/> {{ user.profile.birthday.replace('-', $t('year')).replace('-', $t('month')) + $t('day') }} ({{ $t('years-old', { age }) }})</span>
+		</div>
+		<div class="status">
+			<span class="notes-count"><b>{{ user.notesCount | number }}</b>{{ $t('posts') }}</span>
+			<router-link :to="user | userPage('following')" class="following clickable"><b>{{ user.followingCount | number }}</b>{{ $t('following') }}</router-link>
+			<router-link :to="user | userPage('followers')" class="followers clickable"><b>{{ user.followersCount | number }}</b>{{ $t('followers') }}</router-link>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../../i18n';
+import * as age from 's-age';
+import XUserMenu from '../../../../common/views/components/user-menu.vue';
+
+export default Vue.extend({
+	i18n: i18n('desktop/views/pages/user/user.header.vue'),
+	props: ['user'],
+	computed: {
+		style(): any {
+			if (this.user.bannerUrl == null) return {};
+			return {
+				backgroundColor: this.user.bannerColor && this.user.bannerColor.length == 3 ? `rgb(${ this.user.bannerColor.join(',') })` : null,
+				backgroundImage: `url(${ this.user.bannerUrl })`
+			};
+		},
+
+		age(): number {
+			return age(this.user.profile.birthday);
+		}
+	},
+	mounted() {
+		if (this.user.bannerUrl) {
+			//window.addEventListener('load', this.onScroll);
+			//window.addEventListener('scroll', this.onScroll, { passive: true });
+			//window.addEventListener('resize', this.onScroll);
+		}
+	},
+	beforeDestroy() {
+		if (this.user.bannerUrl) {
+			//window.removeEventListener('load', this.onScroll);
+			//window.removeEventListener('scroll', this.onScroll);
+			//window.removeEventListener('resize', this.onScroll);
+		}
+	},
+	methods: {
+		mention() {
+			this.$post({ mention: this.user });
+		},
+		onScroll() {
+			const banner = this.$refs.banner as any;
+
+			const top = window.scrollY;
+
+			const z = 1.25; // 奥行き(小さいほど奥)
+			const pos = -(top / z);
+			banner.style.backgroundPosition = `center calc(50% - ${pos}px)`;
+
+			const blur = top / 32
+			if (blur <= 10) banner.style.filter = `blur(${blur}px)`;
+		},
+
+		onBannerClick() {
+			if (!this.$store.getters.isSignedIn || this.$store.state.i.id != this.user.id) return;
+
+			this.$updateBanner().then(i => {
+				this.user.bannerUrl = i.bannerUrl;
+			});
+		},
+
+		menu() {
+			this.$root.new(XUserMenu, {
+				source: this.$refs.menu.$el,
+				user: this.user
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.header
+	background var(--face)
+	box-shadow var(--shadow)
+	border-radius var(--round)
+	overflow hidden
+
+	&[data-is-dark-background]
+		> .banner-container
+			> .banner
+				background-color #383838
+
+			> .fade
+				background linear-gradient(transparent, rgba(#000, 0.7))
+
+			> .title
+				color #fff
+
+				> .name
+					text-shadow 0 0 8px #000
+
+	> .banner-container
+		height 250px
+		overflow hidden
+		background-size cover
+		background-position center
+
+		> .banner
+			height 100%
+			background-color #bfccd0
+			background-size cover
+			background-position center
+
+		> .fade
+			position absolute
+			bottom 0
+			left 0
+			width 100%
+			height 78px
+
+		> .title
+			position absolute
+			bottom 0
+			left 0
+			width 100%
+			padding 0 0 8px 154px
+			color #5e6367
+
+			> .name
+				display block
+				margin 0
+				line-height 32px
+				font-weight bold
+				font-size 1.8em
+
+			> div
+				> *
+					display inline-block
+					margin-right 16px
+					line-height 20px
+					opacity 0.8
+
+					&.username
+						font-weight bold
+
+	> .avatar
+		display block
+		position absolute
+		top 170px
+		left 16px
+		z-index 2
+		width 120px
+		height 120px
+		box-shadow 1px 1px 3px rgba(#000, 0.2)
+
+		> &.cat::before,
+		> &.cat::after
+			border-width 8px
+
+	> .body
+		padding 16px 16px 16px 154px
+		color var(--text)
+
+		> .actions
+			> .follow
+				width 200px
+
+		> .fields
+			margin-top 16px
+
+			> .field
+				display flex
+				padding 0
+				margin 0
+				align-items center
+
+				> .name
+					border-right solid 1px var(--faceDivider)
+					padding 4px
+					margin 4px
+					width 30%
+					overflow hidden
+					white-space nowrap
+					text-overflow ellipsis
+					font-weight bold
+					text-align center
+
+				> .value
+					padding 4px
+					margin 4px
+					width 70%
+					overflow hidden
+					white-space nowrap
+					text-overflow ellipsis
+
+		> .info
+			margin-top 16px
+			padding-top 16px
+			border-top solid 1px var(--faceDivider)
+
+			> *
+				margin-right 16px
+
+		> .status
+			margin-top 16px
+			padding-top 16px
+			border-top solid 1px var(--faceDivider)
+			font-size 80%
+
+			> *
+				display inline-block
+				padding-right 16px
+				margin-right 16px
+				color inherit
+
+				&:not(:last-child)
+					border-right solid 1px var(--faceDivider)
+
+				&.clickable
+					cursor pointer
+
+					&:hover
+						color var(--faceTextButtonHover)
+
+				> b
+					margin-right 4px
+					font-size 1rem
+					font-weight bold
+					color var(--primary)
+
+</style>
diff --git a/src/client/app/desktop/views/home/user/user.integrations.integration.vue b/src/client/app/desktop/views/home/user/user.integrations.integration.vue
new file mode 100644
index 0000000000..4791226881
--- /dev/null
+++ b/src/client/app/desktop/views/home/user/user.integrations.integration.vue
@@ -0,0 +1,14 @@
+<template>
+<a :href="url" :class="service" target="_blank">
+	<fa :icon="icon" size="lg" fixed-width />
+	<div>{{ text }}</div>
+</a>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: ['url', 'text', 'icon', 'service']
+});
+</script>
diff --git a/src/client/app/desktop/views/home/user/user.integrations.vue b/src/client/app/desktop/views/home/user/user.integrations.vue
new file mode 100644
index 0000000000..d796ff9321
--- /dev/null
+++ b/src/client/app/desktop/views/home/user/user.integrations.vue
@@ -0,0 +1,63 @@
+<template>
+<div class="usertwitxxxgithxxdiscxxxintegrat" :v-if="user.twitter || user.github || user.discord">
+	<x-integration v-if="user.twitter" service="twitter" :url="`https://twitter.com/${user.twitter.screenName}`" :text="user.twitter.screenName" :icon="['fab', 'twitter']"/>
+	<x-integration v-if="user.github" service="github" :url="`https://github.com/${user.github.login}`" :text="user.github.login" :icon="['fab', 'github']"/>
+	<x-integration v-if="user.discord" service="discord" :url="`https://discordapp.com/users/${user.discord.id}`" :text="`${user.discord.username}#${user.discord.discriminator}`" :icon="['fab', 'discord']"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XIntegration from './user.integrations.integration.vue';
+
+export default Vue.extend({
+	components: {
+		XIntegration
+	},
+	props: ['user']
+});
+</script>
+
+<style lang="stylus" scoped>
+.usertwitxxxgithxxdiscxxxintegrat
+	> a
+		display flex
+		align-items center
+		padding 32px 38px
+		box-shadow var(--shadow)
+		border-radius var(--round)
+
+		&:not(:last-child)
+			margin-bottom 16px
+
+		&:hover
+			text-decoration none
+
+		> div
+			padding-left .2em
+			line-height 1.3em
+			flex 1 0
+			word-wrap anywhere
+
+		&.twitter
+			color #fff
+			background #1da1f3
+
+			&:hover
+				background #0c87cf
+
+		&.github
+			color #fff
+			background #171515
+
+			&:hover
+				background #000
+
+		&.discord
+			color #fff
+			background #7289da
+
+			&:hover
+				background #4968ce
+
+</style>
diff --git a/src/client/app/desktop/views/home/user/user.photos.vue b/src/client/app/desktop/views/home/user/user.photos.vue
new file mode 100644
index 0000000000..005961aaa3
--- /dev/null
+++ b/src/client/app/desktop/views/home/user/user.photos.vue
@@ -0,0 +1,106 @@
+<template>
+<div class="dzsuvbsrrrwobdxifudxuefculdfiaxd">
+	<p class="title"><fa icon="camera"/>{{ $t('title') }}</p>
+	<p class="initializing" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('loading') }}<mk-ellipsis/></p>
+	<div class="stream" v-if="!fetching && images.length > 0">
+		<div v-for="(image, i) in images" :key="i" class="img"
+			:style="`background-image: url(${thumbnail(image)})`"
+		></div>
+	</div>
+	<p class="empty" v-if="!fetching && images.length == 0">{{ $t('no-photos') }}</p>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../../i18n';
+import { getStaticImageUrl } from '../../../../common/scripts/get-static-image-url';
+
+export default Vue.extend({
+	i18n: i18n('desktop/views/pages/user/user.photos.vue'),
+	props: ['user'],
+	data() {
+		return {
+			images: [],
+			fetching: true
+		};
+	},
+	mounted() {
+		const image = [
+			'image/jpeg',
+			'image/png',
+			'image/gif'
+		];
+
+		this.$root.api('users/notes', {
+			userId: this.user.id,
+			fileType: image,
+			excludeNsfw: !this.$store.state.device.alwaysShowNsfw,
+			limit: 9,
+			untilDate: new Date().getTime() + 1000 * 86400 * 365
+		}).then(notes => {
+			for (const note of notes) {
+				for (const file of note.files) {
+					if (this.images.length < 9) this.images.push(file);
+				}
+			}
+			this.fetching = false;
+		});
+	},
+	methods: {
+		thumbnail(image: any): string {
+			return this.$store.state.device.disableShowingAnimatedImages
+				? getStaticImageUrl(image.thumbnailUrl)
+				: image.thumbnailUrl;
+		},
+	},
+});
+</script>
+
+<style lang="stylus" scoped>
+.dzsuvbsrrrwobdxifudxuefculdfiaxd
+	background var(--face)
+	box-shadow var(--shadow)
+	border-radius var(--round)
+	overflow hidden
+
+	> .title
+		z-index 1
+		margin 0
+		padding 0 16px
+		line-height 42px
+		font-size 0.9em
+		font-weight bold
+		background var(--faceHeader)
+		color var(--faceHeaderText)
+		box-shadow 0 1px rgba(#000, 0.07)
+
+		> i
+			margin-right 4px
+
+	> .stream
+		display flex
+		justify-content center
+		flex-wrap wrap
+		padding 8px
+
+		> .img
+			flex 1 1 33%
+			width 33%
+			height 120px
+			background-position center center
+			background-size cover
+			background-clip content-box
+			border solid 2px transparent
+
+	> .initializing
+	> .empty
+		margin 0
+		padding 16px
+		text-align center
+		color var(--text)
+
+		> i
+			margin-right 4px
+
+</style>
diff --git a/src/client/app/desktop/views/home/user/user.timeline.vue b/src/client/app/desktop/views/home/user/user.timeline.vue
new file mode 100644
index 0000000000..0571ce76f1
--- /dev/null
+++ b/src/client/app/desktop/views/home/user/user.timeline.vue
@@ -0,0 +1,175 @@
+<template>
+<div class="oh5y2r7l5lx8j6jj791ykeiwgihheguk">
+	<header>
+		<span :data-active="mode == 'default'" @click="mode = 'default'"><fa :icon="['far', 'comment-alt']"/> {{ $t('default') }}</span>
+		<span :data-active="mode == 'with-replies'" @click="mode = 'with-replies'"><fa icon="comments"/> {{ $t('with-replies') }}</span>
+		<span :data-active="mode == 'with-media'" @click="mode = 'with-media'"><fa :icon="['far', 'images']"/> {{ $t('with-media') }}</span>
+		<span :data-active="mode == 'my-posts'" @click="mode = 'my-posts'"><fa icon="user"/> {{ $t('my-posts') }}</span>
+	</header>
+	<mk-notes ref="timeline" :more="existMore ? more : null">
+		<p class="empty" slot="empty"><fa :icon="['far', 'comments']"/>{{ $t('empty') }}</p>
+	</mk-notes>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../../i18n';
+
+const fetchLimit = 10;
+
+export default Vue.extend({
+	i18n: i18n('desktop/views/pages/user/user.timeline.vue'),
+	props: ['user'],
+
+	data() {
+		return {
+			fetching: true,
+			moreFetching: false,
+			existMore: false,
+			mode: 'default',
+			unreadCount: 0,
+			date: null
+		};
+	},
+
+	watch: {
+		mode() {
+			this.fetch();
+		}
+	},
+
+	mounted() {
+		document.addEventListener('keydown', this.onDocumentKeydown);
+
+		this.fetch(() => this.$emit('loaded'));
+	},
+
+	beforeDestroy() {
+		document.removeEventListener('keydown', this.onDocumentKeydown);
+	},
+
+	methods: {
+		onDocumentKeydown(e) {
+			if (e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA') {
+				if (e.which == 84) { // [t]
+					(this.$refs.timeline as any).focus();
+				}
+			}
+		},
+
+		fetch(cb?) {
+			this.fetching = true;
+			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
+				this.$root.api('users/notes', {
+					userId: this.user.id,
+					limit: fetchLimit + 1,
+					untilDate: this.date ? this.date.getTime() : new Date().getTime() + 1000 * 86400 * 365,
+					includeReplies: this.mode == 'with-replies',
+					includeMyRenotes: this.mode != 'my-posts',
+					withFiles: this.mode == 'with-media'
+				}).then(notes => {
+					if (notes.length == fetchLimit + 1) {
+						notes.pop();
+						this.existMore = true;
+					}
+					res(notes);
+					this.fetching = false;
+					if (cb) cb();
+				}, rej);
+			}));
+		},
+
+		more() {
+			this.moreFetching = true;
+
+			const promise = this.$root.api('users/notes', {
+				userId: this.user.id,
+				limit: fetchLimit + 1,
+				includeReplies: this.mode == 'with-replies',
+				includeMyRenotes: this.mode != 'my-posts',
+				withFiles: this.mode == 'with-media',
+				untilDate: new Date((this.$refs.timeline as any).tail().createdAt).getTime()
+			});
+
+			promise.then(notes => {
+				if (notes.length == fetchLimit + 1) {
+					notes.pop();
+				} else {
+					this.existMore = false;
+				}
+				for (const n of notes) {
+					(this.$refs.timeline as any).append(n);
+				}
+				this.moreFetching = false;
+			});
+
+			return promise;
+		},
+
+		warp(date) {
+			this.date = date;
+			this.fetch();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.oh5y2r7l5lx8j6jj791ykeiwgihheguk
+	background var(--face)
+	border-radius var(--round)
+	overflow hidden
+
+	> header
+		padding 0 8px
+		z-index 10
+		background var(--faceHeader)
+		box-shadow 0 1px var(--desktopTimelineHeaderShadow)
+
+		> span
+			display inline-block
+			padding 0 10px
+			line-height 42px
+			font-size 12px
+			user-select none
+
+			&[data-active]
+				color var(--primary)
+				cursor default
+				font-weight bold
+
+				&:before
+					content ""
+					display block
+					position absolute
+					bottom 0
+					left -8px
+					width calc(100% + 16px)
+					height 2px
+					background var(--primary)
+
+			&:not([data-active])
+				color var(--desktopTimelineSrc)
+				cursor pointer
+
+				&:hover
+					color var(--desktopTimelineSrcHover)
+
+	> .mk-notes
+
+		> .empty
+			display block
+			margin 0 auto
+			padding 32px
+			max-width 400px
+			text-align center
+			color var(--text)
+
+			> [data-icon]
+				display block
+				margin-bottom 16px
+				font-size 3em
+				color var(--faceHeaderText);
+
+</style>
diff --git a/src/client/app/desktop/views/home/user/user.vue b/src/client/app/desktop/views/home/user/user.vue
new file mode 100644
index 0000000000..32b1dc2e45
--- /dev/null
+++ b/src/client/app/desktop/views/home/user/user.vue
@@ -0,0 +1,109 @@
+<template>
+<div class="xygkxeaeontfaokvqmiblezmhvhostak" v-if="!fetching">
+	<div class="is-suspended" v-if="user.isSuspended"><fa icon="exclamation-triangle"/> {{ $t('@.user-suspended') }}</div>
+	<div class="is-remote" v-if="user.host != null"><fa icon="exclamation-triangle"/> {{ $t('@.is-remote-user') }}<a :href="user.url || user.uri" target="_blank">{{ $t('@.view-on-remote') }}</a></div>
+	<div class="main">
+		<x-header :user="user"/>
+		<mk-note-detail v-for="n in user.pinnedNotes" :key="n.id" :note="n" :compact="true"/>
+		<x-integrations :user="user"/>
+		<!--<mk-calendar @chosen="warp" :start="new Date(user.createdAt)"/>-->
+		<div class="activity">
+			<mk-widget-container :show-header="true" :naked="false">
+				<template slot="header"><fa icon="chart-bar"/>{{ $t('activity') }}</template>
+				<x-activity :user="user" :limit="35" style="padding: 16px;"/>
+			</mk-widget-container>
+		</div>
+		<x-photos :user="user"/>
+		<x-friends :user="user"/>
+		<x-followers-you-know v-if="$store.getters.isSignedIn && $store.state.i.id != user.id" :user="user"/>
+		<x-timeline class="timeline" ref="tl" :user="user"/>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../../i18n';
+import parseAcct from '../../../../../../misc/acct/parse';
+import Progress from '../../../../common/scripts/loading';
+import XHeader from './user.header.vue';
+import XTimeline from './user.timeline.vue';
+import XPhotos from './user.photos.vue';
+import XFollowersYouKnow from './user.followers-you-know.vue';
+import XFriends from './user.friends.vue';
+import XIntegrations from './user.integrations.vue';
+import XActivity from '../../../../common/views/components/activity.vue';
+
+export default Vue.extend({
+	i18n: i18n(),
+	components: {
+		XHeader,
+		XTimeline,
+		XPhotos,
+		XFollowersYouKnow,
+		XFriends,
+		XIntegrations,
+		XActivity
+	},
+	data() {
+		return {
+			fetching: true,
+			user: null
+		};
+	},
+	watch: {
+		$route: 'fetch'
+	},
+	created() {
+		this.fetch();
+	},
+	methods: {
+		fetch() {
+			this.fetching = true;
+			Progress.start();
+			this.$root.api('users/show', parseAcct(this.$route.params.user)).then(user => {
+				this.user = user;
+				this.fetching = false;
+				Progress.done();
+			});
+		},
+
+		warp(date) {
+			(this.$refs.tl as any).warp(date);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.xygkxeaeontfaokvqmiblezmhvhostak
+	width 100%
+	margin 0 auto
+
+	> .is-suspended
+	> .is-remote
+		margin-bottom 16px
+		padding 14px 16px
+		font-size 14px
+		box-shadow var(--shadow)
+		border-radius var(--round)
+
+		&.is-suspended
+			color var(--suspendedInfoFg)
+			background var(--suspendedInfoBg)
+
+		&.is-remote
+			color var(--remoteInfoFg)
+			background var(--remoteInfoBg)
+
+		> a
+			font-weight bold
+
+	> .main
+		> *
+			margin-bottom 16px
+
+		> .timeline
+			box-shadow var(--shadow)
+
+</style>
diff --git a/src/client/app/desktop/views/pages/deck/deck.column-core.vue b/src/client/app/desktop/views/pages/deck/deck.column-core.vue
deleted file mode 100644
index 974c58235d..0000000000
--- a/src/client/app/desktop/views/pages/deck/deck.column-core.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-<x-widgets-column v-if="column.type == 'widgets'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
-<x-notifications-column v-else-if="column.type == 'notifications'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
-<x-tl-column v-else-if="column.type == 'home'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
-<x-tl-column v-else-if="column.type == 'local'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
-<x-tl-column v-else-if="column.type == 'hybrid'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
-<x-tl-column v-else-if="column.type == 'global'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
-<x-tl-column v-else-if="column.type == 'list'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
-<x-tl-column v-else-if="column.type == 'hashtag'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
-<x-mentions-column v-else-if="column.type == 'mentions'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
-<x-direct-column v-else-if="column.type == 'direct'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import XTlColumn from './deck.tl-column.vue';
-import XNotificationsColumn from './deck.notifications-column.vue';
-import XWidgetsColumn from './deck.widgets-column.vue';
-import XMentionsColumn from './deck.mentions-column.vue';
-import XDirectColumn from './deck.direct-column.vue';
-
-export default Vue.extend({
-	components: {
-		XTlColumn,
-		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/app/desktop/views/pages/deck/deck.column.vue b/src/client/app/desktop/views/pages/deck/deck.column.vue
deleted file mode 100644
index 2acd2d0eda..0000000000
--- a/src/client/app/desktop/views/pages/deck/deck.column.vue
+++ /dev/null
@@ -1,424 +0,0 @@
-<template>
-<div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs" :class="{ naked, narrow, active, isStacked, draghover, dragging, dropready }"
-		@dragover.prevent.stop="onDragover"
-		@dragleave="onDragleave"
-		@drop.prevent.stop="onDrop"
-		v-hotkey="keymap">
-	<header :class="{ indicate: count > 0 }"
-			draggable="true"
-			@click="goTop"
-			@dragstart="onDragstart"
-			@dragend="onDragend"
-			@contextmenu.prevent.stop="onContextmenu">
-		<button class="toggleActive" @click="toggleActive" v-if="isStacked">
-			<template v-if="active"><fa icon="angle-up"/></template>
-			<template v-else><fa icon="angle-down"/></template>
-		</button>
-		<slot name="header"></slot>
-		<span class="count" v-if="count > 0">({{ count }})</span>
-		<button v-if="!isTemporaryColumn" class="menu" ref="menu" @click.stop="showMenu"><fa icon="caret-down"/></button>
-		<button v-else class="close" @click.stop="close"><fa icon="times"/></button>
-	</header>
-	<div ref="body" v-show="active">
-		<slot></slot>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../../i18n';
-import Menu from '../../../../common/views/components/menu.vue';
-import { countIf } from '../../../../../../prelude/array';
-
-export default Vue.extend({
-	i18n: i18n('deck'),
-	props: {
-		column: {
-			type: Object,
-			required: false,
-			default: null
-		},
-		isStacked: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
-		name: {
-			type: String,
-			required: false
-		},
-		menu: {
-			type: Array,
-			required: false,
-			default: null
-		},
-		naked: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
-		narrow: {
-			type: Boolean,
-			required: false,
-			default: false
-		}
-	},
-
-	computed: {
-		isTemporaryColumn(): boolean {
-			return this.column == null;
-		},
-
-		keymap(): any {
-			return {
-				'shift+up': () => this.$parent.$emit('parentFocus', 'up'),
-				'shift+down': () => this.$parent.$emit('parentFocus', 'down'),
-				'shift+left': () => this.$parent.$emit('parentFocus', 'left'),
-				'shift+right': () => this.$parent.$emit('parentFocus', 'right'),
-			};
-		}
-	},
-
-	inject: {
-		getColumnVm: { from: 'getColumnVm' }
-	},
-
-	data() {
-		return {
-			count: 0,
-			active: true,
-			dragging: false,
-			draghover: false,
-			dropready: false
-		};
-	},
-
-	watch: {
-		active(v) {
-			if (v && this.isScrollTop()) {
-				this.$emit('top');
-			}
-		},
-		dragging(v) {
-			this.$root.$emit(v ? 'deck.column.dragStart' : 'deck.column.dragEnd');
-		}
-	},
-
-	provide() {
-		return {
-			column: this,
-			isScrollTop: this.isScrollTop,
-			count: v => this.count = v
-		};
-	},
-
-	mounted() {
-		this.$refs.body.addEventListener('scroll', this.onScroll, { passive: true });
-
-		if (!this.isTemporaryColumn) {
-			this.$root.$on('deck.column.dragStart', this.onOtherDragStart);
-			this.$root.$on('deck.column.dragEnd', this.onOtherDragEnd);
-		}
-	},
-
-	beforeDestroy() {
-		this.$refs.body.removeEventListener('scroll', this.onScroll);
-
-		if (!this.isTemporaryColumn) {
-			this.$root.$off('deck.column.dragStart', this.onOtherDragStart);
-			this.$root.$off('deck.column.dragEnd', this.onOtherDragEnd);
-		}
-	},
-
-	methods: {
-		onOtherDragStart() {
-			this.dropready = true;
-		},
-
-		onOtherDragEnd() {
-			this.dropready = false;
-		},
-
-		toggleActive() {
-			if (!this.isStacked) return;
-			const vms = this.$store.state.settings.deck.layout.find(ids => ids.indexOf(this.column.id) != -1).map(id => this.getColumnVm(id));
-			if (this.active && countIf(vm => vm.$el.classList.contains('active'), vms) == 1) return;
-			this.active = !this.active;
-		},
-
-		isScrollTop() {
-			return this.active && this.$refs.body.scrollTop == 0;
-		},
-
-		onScroll() {
-			if (this.isScrollTop()) {
-				this.$emit('top');
-			}
-
-			if (this.$store.state.settings.fetchOnScroll !== false) {
-				const current = this.$refs.body.scrollTop + this.$refs.body.clientHeight;
-				if (current > this.$refs.body.scrollHeight - 1) this.$emit('bottom');
-			}
-		},
-
-		getMenu() {
-			const items = [{
-				icon: 'pencil-alt',
-				text: this.$t('rename'),
-				action: () => {
-					this.$root.dialog({
-						title: this.$t('rename'),
-						input: {
-							default: this.name,
-							allowEmpty: false
-						}
-					}).then(({ canceled, result: name }) => {
-						if (canceled) return;
-						this.$store.dispatch('settings/renameDeckColumn', { id: this.column.id, name });
-					});
-				}
-			}, null, {
-				icon: 'arrow-left',
-				text: this.$t('swap-left'),
-				action: () => {
-					this.$store.dispatch('settings/swapLeftDeckColumn', this.column.id);
-				}
-			}, {
-				icon: 'arrow-right',
-				text: this.$t('swap-right'),
-				action: () => {
-					this.$store.dispatch('settings/swapRightDeckColumn', this.column.id);
-				}
-			}, this.isStacked ? {
-				icon: 'arrow-up',
-				text: this.$t('swap-up'),
-				action: () => {
-					this.$store.dispatch('settings/swapUpDeckColumn', this.column.id);
-				}
-			} : undefined, this.isStacked ? {
-				icon: 'arrow-down',
-				text: this.$t('swap-down'),
-				action: () => {
-					this.$store.dispatch('settings/swapDownDeckColumn', this.column.id);
-				}
-			} : undefined, null, {
-				icon: ['far', 'window-restore'],
-				text: this.$t('stack-left'),
-				action: () => {
-					this.$store.dispatch('settings/stackLeftDeckColumn', this.column.id);
-				}
-			}, this.isStacked ? {
-				icon: ['far', 'window-maximize'],
-				text: this.$t('pop-right'),
-				action: () => {
-					this.$store.dispatch('settings/popRightDeckColumn', this.column.id);
-				}
-			} : undefined, null, {
-				icon: ['far', 'trash-alt'],
-				text: this.$t('remove'),
-				action: () => {
-					this.$store.dispatch('settings/removeDeckColumn', this.column.id);
-				}
-			}];
-
-			if (this.menu) {
-				items.unshift(null);
-				for (const i of this.menu.reverse()) {
-					items.unshift(i);
-				}
-			}
-
-			return items;
-		},
-
-		onContextmenu(e) {
-			if (this.isTemporaryColumn) return;
-			this.$contextmenu(e, this.getMenu());
-		},
-
-		showMenu() {
-			this.$root.new(Menu, {
-				source: this.$refs.menu,
-				items: this.getMenu()
-			});
-		},
-
-		close() {
-			this.$store.commit('device/set', {
-				key: 'deckTemporaryColumn',
-				value: null
-			});
-		},
-
-		goTop() {
-			this.$refs.body.scrollTo({
-				top: 0,
-				behavior: 'smooth'
-			});
-		},
-
-		onDragstart(e) {
-			// テンポラリカラムはドラッグさせない
-			if (this.isTemporaryColumn) {
-				e.preventDefault();
-				return;
-			}
-
-			e.dataTransfer.effectAllowed = 'move';
-			e.dataTransfer.setData('mk-deck-column', this.column.id);
-			this.dragging = true;
-		},
-
-		onDragend(e) {
-			this.dragging = false;
-		},
-
-		onDragover(e) {
-			// テンポラリカラムにはドロップさせない
-			if (this.isTemporaryColumn) {
-				e.dataTransfer.dropEffect = 'none';
-				return;
-			}
-
-			// 自分自身がドラッグされている場合
-			if (this.dragging) {
-				// 自分自身にはドロップさせない
-				e.dataTransfer.dropEffect = 'none';
-				return;
-			}
-
-			const isDeckColumn = e.dataTransfer.types[0] == 'mk-deck-column';
-
-			e.dataTransfer.dropEffect = isDeckColumn ? 'move' : 'none';
-
-			if (!this.dragging && isDeckColumn) this.draghover = true;
-		},
-
-		onDragleave() {
-			this.draghover = false;
-		},
-
-		onDrop(e) {
-			this.draghover = false;
-			this.$root.$emit('deck.column.dragEnd');
-
-			const id = e.dataTransfer.getData('mk-deck-column');
-			if (id != null && id != '') {
-				this.$store.dispatch('settings/swapDeckColumn', {
-					a: this.column.id,
-					b: id
-				});
-			}
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.dnpfarvgbnfmyzbdquhhzyxcmstpdqzs
-	$header-height = 42px
-
-	height 100%
-	background var(--face)
-	border-radius var(--round)
-	box-shadow var(--shadow)
-	overflow hidden
-
-	&.draghover
-		box-shadow 0 0 0 2px var(--primaryAlpha08)
-
-		&:after
-			content ""
-			display block
-			position absolute
-			z-index 1000
-			top 0
-			left 0
-			width 100%
-			height 100%
-			background var(--primaryAlpha02)
-
-	&.dragging
-		box-shadow 0 0 0 2px var(--primaryAlpha04)
-
-	&.dropready
-		*
-			pointer-events none
-
-	&:not(.active)
-		flex-basis $header-height
-		min-height $header-height
-
-	&:not(.isStacked).narrow
-		width 285px
-		min-width 285px
-		flex-grow 0 !important
-
-	&.naked
-		background var(--deckAcrylicColumnBg)
-
-		> header
-			background transparent
-			box-shadow none
-
-			> button
-				color var(--text)
-
-	> header
-		display flex
-		z-index 2
-		line-height $header-height
-		padding 0 16px
-		font-size 14px
-		color var(--faceHeaderText)
-		background var(--faceHeader)
-		box-shadow 0 var(--lineWidth) rgba(#000, 0.15)
-		cursor pointer
-
-		&, *
-			user-select none
-
-		*:not(button)
-			pointer-events none
-
-		&.indicate
-			box-shadow 0 3px 0 0 var(--primary)
-
-		> span
-			[data-icon]
-				margin-right 8px
-
-		> .count
-			margin-left 4px
-			opacity 0.5
-
-		> .toggleActive
-		> .menu
-		> .close
-			padding 0
-			width $header-height
-			line-height $header-height
-			font-size 16px
-			color var(--faceTextButton)
-
-			&:hover
-				color var(--faceTextButtonHover)
-
-			&:active
-				color var(--faceTextButtonActive)
-
-		> .toggleActive
-			margin-left -16px
-
-		> .menu
-		> .close
-			margin-left auto
-			margin-right -16px
-
-	> div
-		height "calc(100% - %s)" % $header-height
-		overflow auto
-		overflow-x hidden
-
-</style>
diff --git a/src/client/app/desktop/views/pages/deck/deck.direct-column.vue b/src/client/app/desktop/views/pages/deck/deck.direct-column.vue
deleted file mode 100644
index cdeba95f5f..0000000000
--- a/src/client/app/desktop/views/pages/deck/deck.direct-column.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-<x-column :name="name" :column="column" :is-stacked="isStacked">
-	<span slot="header"><fa :icon="['far', 'envelope']"/>{{ name }}</span>
-
-	<x-direct/>
-</x-column>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../../i18n';
-import XColumn from './deck.column.vue';
-import XDirect from './deck.direct.vue';
-
-export default Vue.extend({
-	i18n: i18n(),
-	components: {
-		XColumn,
-		XDirect
-	},
-
-	props: {
-		column: {
-			type: Object,
-			required: true
-		},
-		isStacked: {
-			type: Boolean,
-			required: true
-		}
-	},
-
-	computed: {
-		name(): string {
-			if (this.column.name) return this.column.name;
-			return this.$t('@deck.direct');
-		}
-	},
-
-	methods: {
-		focus() {
-			this.$refs.tl.focus();
-		}
-	}
-});
-</script>
diff --git a/src/client/app/desktop/views/pages/deck/deck.direct.vue b/src/client/app/desktop/views/pages/deck/deck.direct.vue
deleted file mode 100644
index c6c2b99233..0000000000
--- a/src/client/app/desktop/views/pages/deck/deck.direct.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<template>
-<x-notes ref="timeline" :more="existMore ? more : null"/>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import XNotes from './deck.notes.vue';
-
-const fetchLimit = 10;
-
-export default Vue.extend({
-	components: {
-		XNotes
-	},
-
-	props: {
-	},
-
-	data() {
-		return {
-			fetching: true,
-			moreFetching: false,
-			existMore: false,
-			connection: null
-		};
-	},
-
-	mounted() {
-		this.connection = this.$root.stream.useSharedConnection('main');
-		this.connection.on('mention', this.onNote);
-
-		this.fetch();
-	},
-
-	beforeDestroy() {
-		this.connection.dispose();
-	},
-
-	methods: {
-		fetch() {
-			this.fetching = true;
-
-			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
-				this.$root.api('notes/mentions', {
-					limit: fetchLimit + 1,
-					includeMyRenotes: this.$store.state.settings.showMyRenotes,
-					includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-					includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
-					visibility: 'specified'
-				}).then(notes => {
-					if (notes.length == fetchLimit + 1) {
-						notes.pop();
-						this.existMore = true;
-					}
-					res(notes);
-					this.fetching = false;
-					this.$emit('loaded');
-				}, rej);
-			}));
-		},
-
-		more() {
-			this.moreFetching = true;
-
-			const promise = this.$root.api('notes/mentions', {
-				limit: fetchLimit + 1,
-				untilId: (this.$refs.timeline as any).tail().id,
-				includeMyRenotes: this.$store.state.settings.showMyRenotes,
-				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-				includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
-				visibility: 'specified'
-			});
-
-			promise.then(notes => {
-				if (notes.length == fetchLimit + 1) {
-					notes.pop();
-				} else {
-					this.existMore = false;
-				}
-				for (const n of notes) {
-					(this.$refs.timeline as any).append(n);
-				}
-				this.moreFetching = false;
-			});
-
-			return promise;
-		},
-
-		onNote(note) {
-			// Prepend a note
-			if (note.visibility == 'specified') {
-				(this.$refs.timeline as any).prepend(note);
-			}
-		},
-
-		focus() {
-			this.$refs.timeline.focus();
-		}
-	}
-});
-</script>
diff --git a/src/client/app/desktop/views/pages/deck/deck.hashtag-column.vue b/src/client/app/desktop/views/pages/deck/deck.hashtag-column.vue
deleted file mode 100644
index b2a6cd5837..0000000000
--- a/src/client/app/desktop/views/pages/deck/deck.hashtag-column.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<template>
-<x-column>
-	<span slot="header">
-		<fa icon="hashtag"/><span>{{ tag }}</span>
-	</span>
-
-	<div class="xroyrflcmhhtmlwmyiwpfqiirqokfueb">
-		<div ref="chart" class="chart"></div>
-		<x-hashtag-tl :tag-tl="tagTl" class="tl"/>
-	</div>
-</x-column>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import XColumn from './deck.column.vue';
-import XHashtagTl from './deck.hashtag-tl.vue';
-import ApexCharts from 'apexcharts';
-
-export default Vue.extend({
-	components: {
-		XColumn,
-		XHashtagTl
-	},
-
-	props: {
-		tag: {
-			type: String,
-			required: true
-		}
-	},
-
-	computed: {
-		tagTl(): any {
-			return {
-				query: [[this.tag]]
-			};
-		}
-	},
-
-	mounted() {
-		this.$root.api('charts/hashtag', {
-			tag: this.tag,
-			span: 'hour',
-			limit: 24
-		}).then(stats => {
-			const local = [];
-			const remote = [];
-
-			const now = new Date();
-			const y = now.getFullYear();
-			const m = now.getMonth();
-			const d = now.getDate();
-			const h = now.getHours();
-
-			for (let i = 0; i < 24; i++) {
-				const x = new Date(y, m, d, h - i);
-				local.push([x, stats.local.count[i]]);
-				remote.push([x, stats.remote.count[i]]);
-			}
-
-			const chart = new ApexCharts(this.$refs.chart, {
-				chart: {
-					type: 'area',
-					height: 70,
-					sparkline: {
-						enabled: true
-					},
-				},
-				grid: {
-					clipMarkers: false,
-					padding: {
-						top: 16,
-						right: 16,
-						bottom: 16,
-						left: 16
-					}
-				},
-				stroke: {
-					curve: 'straight',
-					width: 2
-				},
-				series: [{
-					name: 'Local',
-					data: local
-				}, {
-					name: 'Remote',
-					data: remote
-				}],
-				xaxis: {
-					type: 'datetime',
-				}
-			});
-
-			chart.render();
-		});
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.xroyrflcmhhtmlwmyiwpfqiirqokfueb
-	background var(--deckColumnBg)
-
-	> .chart
-		margin-bottom 16px
-		background var(--face)
-
-	> .tl
-		background var(--face)
-
-</style>
diff --git a/src/client/app/desktop/views/pages/deck/deck.hashtag-tl.vue b/src/client/app/desktop/views/pages/deck/deck.hashtag-tl.vue
deleted file mode 100644
index 9a70733fda..0000000000
--- a/src/client/app/desktop/views/pages/deck/deck.hashtag-tl.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<template>
-<x-notes ref="timeline" :more="existMore ? more : null" :media-view="mediaView"/>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import XNotes from './deck.notes.vue';
-
-const fetchLimit = 10;
-
-export default Vue.extend({
-	components: {
-		XNotes
-	},
-
-	props: {
-		tagTl: {
-			type: Object,
-			required: true
-		},
-		mediaOnly: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
-		mediaView: {
-			type: Boolean,
-			required: false,
-			default: false
-		}
-	},
-
-	data() {
-		return {
-			fetching: true,
-			moreFetching: false,
-			existMore: false,
-			connection: null
-		};
-	},
-
-	watch: {
-		mediaOnly() {
-			this.fetch();
-		}
-	},
-
-	mounted() {
-		if (this.connection) this.connection.close();
-		this.connection = this.$root.stream.connectToChannel('hashtag', {
-			q: this.tagTl.query
-		});
-		this.connection.on('note', this.onNote);
-
-		this.fetch();
-	},
-
-	beforeDestroy() {
-		this.connection.dispose();
-	},
-
-	methods: {
-		fetch() {
-			this.fetching = true;
-
-			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
-				this.$root.api('notes/search_by_tag', {
-					limit: fetchLimit + 1,
-					withFiles: this.mediaOnly,
-					includeMyRenotes: this.$store.state.settings.showMyRenotes,
-					includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-					includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
-					query: this.tagTl.query
-				}).then(notes => {
-					if (notes.length == fetchLimit + 1) {
-						notes.pop();
-						this.existMore = true;
-					}
-					res(notes);
-					this.fetching = false;
-					this.$emit('loaded');
-				}, rej);
-			}));
-		},
-
-		more() {
-			this.moreFetching = true;
-
-			const promise = this.$root.api('notes/search_by_tag', {
-				limit: fetchLimit + 1,
-				untilId: (this.$refs.timeline as any).tail().id,
-				withFiles: this.mediaOnly,
-				includeMyRenotes: this.$store.state.settings.showMyRenotes,
-				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-				includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
-				query: this.tagTl.query
-			});
-
-			promise.then(notes => {
-				if (notes.length == fetchLimit + 1) {
-					notes.pop();
-				} else {
-					this.existMore = false;
-				}
-				for (const n of notes) {
-					(this.$refs.timeline as any).append(n);
-				}
-				this.moreFetching = false;
-			});
-
-			return promise;
-		},
-
-		onNote(note) {
-			if (this.mediaOnly && note.files.length == 0) return;
-
-			// Prepend a note
-			(this.$refs.timeline as any).prepend(note);
-		},
-
-		focus() {
-			this.$refs.timeline.focus();
-		}
-	}
-});
-</script>
diff --git a/src/client/app/desktop/views/pages/deck/deck.list-tl.vue b/src/client/app/desktop/views/pages/deck/deck.list-tl.vue
deleted file mode 100644
index 68fbbb3ff9..0000000000
--- a/src/client/app/desktop/views/pages/deck/deck.list-tl.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<template>
-<x-notes ref="timeline" :more="existMore ? more : null" :media-view="mediaView"/>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import XNotes from './deck.notes.vue';
-
-const fetchLimit = 10;
-
-export default Vue.extend({
-	components: {
-		XNotes
-	},
-
-	props: {
-		list: {
-			type: Object,
-			required: true
-		},
-		mediaOnly: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
-		mediaView: {
-			type: Boolean,
-			required: false,
-			default: false
-		}
-	},
-
-	data() {
-		return {
-			fetching: true,
-			moreFetching: false,
-			existMore: false,
-			connection: null
-		};
-	},
-
-	watch: {
-		mediaOnly() {
-			this.fetch();
-		}
-	},
-
-	mounted() {
-		if (this.connection) this.connection.dispose();
-		this.connection = this.$root.stream.connectToChannel('userList', {
-			listId: this.list.id
-		});
-		this.connection.on('note', this.onNote);
-		this.connection.on('userAdded', this.onUserAdded);
-		this.connection.on('userRemoved', this.onUserRemoved);
-
-		this.fetch();
-	},
-
-	beforeDestroy() {
-		this.connection.dispose();
-	},
-
-	methods: {
-		fetch() {
-			this.fetching = true;
-
-			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
-				this.$root.api('notes/user-list-timeline', {
-					listId: this.list.id,
-					limit: fetchLimit + 1,
-					withFiles: this.mediaOnly,
-					includeMyRenotes: this.$store.state.settings.showMyRenotes,
-					includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-					includeLocalRenotes: this.$store.state.settings.showLocalRenotes
-				}).then(notes => {
-					if (notes.length == fetchLimit + 1) {
-						notes.pop();
-						this.existMore = true;
-					}
-					res(notes);
-					this.fetching = false;
-					this.$emit('loaded');
-				}, rej);
-			}));
-		},
-
-		more() {
-			this.moreFetching = true;
-
-			const promise = this.$root.api('notes/user-list-timeline', {
-				listId: this.list.id,
-				limit: fetchLimit + 1,
-				untilId: (this.$refs.timeline as any).tail().id,
-				withFiles: this.mediaOnly,
-				includeMyRenotes: this.$store.state.settings.showMyRenotes,
-				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-				includeLocalRenotes: this.$store.state.settings.showLocalRenotes
-			});
-
-			promise.then(notes => {
-				if (notes.length == fetchLimit + 1) {
-					notes.pop();
-				} else {
-					this.existMore = false;
-				}
-				for (const n of notes) {
-					(this.$refs.timeline as any).append(n);
-				}
-				this.moreFetching = false;
-			});
-
-			return promise;
-		},
-
-		onNote(note) {
-			if (this.mediaOnly && note.files.length == 0) return;
-
-			// Prepend a note
-			(this.$refs.timeline as any).prepend(note);
-		},
-
-		onUserAdded() {
-			this.fetch();
-		},
-
-		onUserRemoved() {
-			this.fetch();
-		},
-
-		focus() {
-			this.$refs.timeline.focus();
-		}
-	}
-});
-</script>
diff --git a/src/client/app/desktop/views/pages/deck/deck.mentions-column.vue b/src/client/app/desktop/views/pages/deck/deck.mentions-column.vue
deleted file mode 100644
index 011a321c3a..0000000000
--- a/src/client/app/desktop/views/pages/deck/deck.mentions-column.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-<x-column :name="name" :column="column" :is-stacked="isStacked">
-	<span slot="header"><fa icon="at"/>{{ name }}</span>
-
-	<x-mentions ref="tl"/>
-</x-column>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../../i18n';
-import XColumn from './deck.column.vue';
-import XMentions from './deck.mentions.vue';
-
-export default Vue.extend({
-	i18n: i18n(),
-	components: {
-		XColumn,
-		XMentions
-	},
-
-	props: {
-		column: {
-			type: Object,
-			required: true
-		},
-		isStacked: {
-			type: Boolean,
-			required: true
-		}
-	},
-
-	computed: {
-		name(): string {
-			if (this.column.name) return this.column.name;
-			return this.$t('@deck.mentions');
-		}
-	},
-
-	methods: {
-		focus() {
-			this.$refs.tl.focus();
-		}
-	}
-});
-</script>
diff --git a/src/client/app/desktop/views/pages/deck/deck.mentions.vue b/src/client/app/desktop/views/pages/deck/deck.mentions.vue
deleted file mode 100644
index 5fcabde5d6..0000000000
--- a/src/client/app/desktop/views/pages/deck/deck.mentions.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<template>
-<x-notes ref="timeline" :more="existMore ? more : null"/>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import XNotes from './deck.notes.vue';
-
-const fetchLimit = 10;
-
-export default Vue.extend({
-	components: {
-		XNotes
-	},
-
-	props: {
-	},
-
-	data() {
-		return {
-			fetching: true,
-			moreFetching: false,
-			existMore: false,
-			connection: null
-		};
-	},
-
-	mounted() {
-		this.connection = this.$root.stream.useSharedConnection('main');
-		this.connection.on('mention', this.onNote);
-
-		this.fetch();
-	},
-
-	beforeDestroy() {
-		this.connection.dispose();
-	},
-
-	methods: {
-		fetch() {
-			this.fetching = true;
-
-			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
-				this.$root.api('notes/mentions', {
-					limit: fetchLimit + 1,
-					includeMyRenotes: this.$store.state.settings.showMyRenotes,
-					includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-					includeLocalRenotes: this.$store.state.settings.showLocalRenotes
-				}).then(notes => {
-					if (notes.length == fetchLimit + 1) {
-						notes.pop();
-						this.existMore = true;
-					}
-					res(notes);
-					this.fetching = false;
-					this.$emit('loaded');
-				}, rej);
-			}));
-		},
-
-		more() {
-			this.moreFetching = true;
-
-			const promise = this.$root.api('notes/mentions', {
-				limit: fetchLimit + 1,
-				untilId: (this.$refs.timeline as any).tail().id,
-				includeMyRenotes: this.$store.state.settings.showMyRenotes,
-				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-				includeLocalRenotes: this.$store.state.settings.showLocalRenotes
-			});
-
-			promise.then(notes => {
-				if (notes.length == fetchLimit + 1) {
-					notes.pop();
-				} else {
-					this.existMore = false;
-				}
-				for (const n of notes) {
-					(this.$refs.timeline as any).append(n);
-				}
-				this.moreFetching = false;
-			});
-
-			return promise;
-		},
-
-		onNote(note) {
-			// Prepend a note
-			(this.$refs.timeline as any).prepend(note);
-		},
-
-		focus() {
-			this.$refs.timeline.focus();
-		}
-	}
-});
-</script>
diff --git a/src/client/app/desktop/views/pages/deck/deck.note-column.vue b/src/client/app/desktop/views/pages/deck/deck.note-column.vue
deleted file mode 100644
index 74da48bffc..0000000000
--- a/src/client/app/desktop/views/pages/deck/deck.note-column.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-<x-column>
-	<span slot="header">
-		<fa :icon="['far', 'comment-alt']"/><mk-user-name :user="note.user" v-if="note"/>
-	</span>
-
-	<div class="rvtscbadixhhbsczoorqoaygovdeecsx" v-if="note">
-		<div class="is-remote" v-if="note.user.host != null">
-			<details>
-				<summary><fa icon="exclamation-triangle"/> {{ $t('@.is-remote-post') }}</summary>
-				<a :href="note.url || note.uri" target="_blank">{{ $t('@.view-on-remote') }}</a>
-			</details>
-		</div>
-		<x-note :note="note" :detail="true" :mini="true"/>
-	</div>
-</x-column>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../../i18n';
-import XColumn from './deck.column.vue';
-import XNotes from './deck.notes.vue';
-import XNote from '../../components/note.vue';
-
-export default Vue.extend({
-	i18n: i18n(),
-	components: {
-		XColumn,
-		XNotes,
-		XNote
-	},
-
-	props: {
-		noteId: {
-			type: String,
-			required: true
-		}
-	},
-
-	data() {
-		return {
-			note: null,
-			fetching: true
-		};
-	},
-
-	created() {
-		this.$root.api('notes/show', { noteId: this.noteId }).then(note => {
-			this.note = note;
-			this.fetching = false;
-		});
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.rvtscbadixhhbsczoorqoaygovdeecsx
-	> .is-remote
-		padding 8px 16px
-		font-size 12px
-
-		&.is-remote
-			color var(--remoteInfoFg)
-			background var(--remoteInfoBg)
-
-		> a
-			font-weight bold
-
-</style>
diff --git a/src/client/app/desktop/views/pages/deck/deck.notes.vue b/src/client/app/desktop/views/pages/deck/deck.notes.vue
deleted file mode 100644
index 54e01a0012..0000000000
--- a/src/client/app/desktop/views/pages/deck/deck.notes.vue
+++ /dev/null
@@ -1,245 +0,0 @@
-<template>
-<div class="eamppglmnmimdhrlzhplwpvyeaqmmhxu">
-	<slot name="empty" v-if="notes.length == 0 && !fetching && requestInitPromise == null"></slot>
-
-	<div class="placeholder" v-if="fetching">
-		<template v-for="i in 10">
-			<mk-note-skeleton :key="i"/>
-		</template>
-	</div>
-
-	<mk-error v-if="!fetching && requestInitPromise != null" @retry="resolveInitPromise"/>
-
-	<!-- トランジションを有効にするとなぜかメモリリークする -->
-	<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notes" class="transition notes" ref="notes" tag="div">
-		<template v-for="(note, i) in _notes">
-			<x-note
-				:note="note"
-				:key="note.id"
-				@update:note="onNoteUpdated(i, $event)"
-				:media-view="mediaView"
-				:compact="true"
-				:mini="true"/>
-			<p class="date" :key="note.id + '_date'" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
-				<span><fa icon="angle-up"/>{{ note._datetext }}</span>
-				<span><fa icon="angle-down"/>{{ _notes[i + 1]._datetext }}</span>
-			</p>
-		</template>
-	</component>
-
-	<footer v-if="more">
-		<button @click="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
-			<template v-if="!moreFetching">{{ $t('@.load-more') }}</template>
-			<template v-if="moreFetching"><fa icon="spinner" pulse fixed-width/></template>
-		</button>
-	</footer>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../../i18n';
-import shouldMuteNote from '../../../../common/scripts/should-mute-note';
-
-import XNote from '../../components/note.vue';
-
-const displayLimit = 20;
-
-export default Vue.extend({
-	i18n: i18n(),
-	components: {
-		XNote
-	},
-
-	inject: ['column', 'isScrollTop', 'count'],
-
-	props: {
-		more: {
-			type: Function,
-			required: false
-		},
-		mediaView: {
-			type: Boolean,
-			required: false,
-			default: false
-		}
-	},
-
-	data() {
-		return {
-			rootEl: null,
-			requestInitPromise: null as () => Promise<any[]>,
-			notes: [],
-			queue: [],
-			fetching: true,
-			moreFetching: false
-		};
-	},
-
-	computed: {
-		_notes(): any[] {
-			return (this.notes as any).map(note => {
-				const date = new Date(note.createdAt).getDate();
-				const month = new Date(note.createdAt).getMonth() + 1;
-				note._date = date;
-				note._datetext = this.$t('@.month-and-day').replace('{month}', month.toString()).replace('{day}', date.toString());
-				return note;
-			});
-		}
-	},
-
-	watch: {
-		queue(q) {
-			this.count(q.length);
-		}
-	},
-
-	created() {
-		this.column.$on('top', this.onTop);
-		this.column.$on('bottom', this.onBottom);
-	},
-
-	beforeDestroy() {
-		this.column.$off('top', this.onTop);
-		this.column.$off('bottom', this.onBottom);
-	},
-
-	methods: {
-		focus() {
-			(this.$refs.notes as any).children[0].focus ? (this.$refs.notes as any).children[0].focus() : (this.$refs.notes as any).$el.children[0].focus();
-		},
-
-		onNoteUpdated(i, note) {
-			Vue.set((this as any).notes, i, note);
-		},
-
-		init(promiseGenerator: () => Promise<any[]>) {
-			this.requestInitPromise = promiseGenerator;
-			this.resolveInitPromise();
-		},
-
-		resolveInitPromise() {
-			this.queue = [];
-			this.notes = [];
-			this.fetching = true;
-
-			const promise = this.requestInitPromise();
-
-			promise.then(notes => {
-				this.notes = notes;
-				this.requestInitPromise = null;
-				this.fetching = false;
-			}, e => {
-				this.fetching = false;
-			});
-		},
-
-		prepend(note, silent = false) {
-			// 弾く
-			if (shouldMuteNote(this.$store.state.i, this.$store.state.settings, note)) return;
-
-			// タブが非表示ならタイトルで通知
-			if (document.hidden) {
-				this.$store.commit('pushBehindNote', note);
-			}
-
-			if (this.isScrollTop()) {
-				// Prepend the note
-				this.notes.unshift(note);
-
-				// オーバーフローしたら古い投稿は捨てる
-				if (this.notes.length >= displayLimit) {
-					this.notes = this.notes.slice(0, displayLimit);
-				}
-			} else {
-				this.queue.push(note);
-			}
-		},
-
-		append(note) {
-			this.notes.push(note);
-		},
-
-		tail() {
-			return this.notes[this.notes.length - 1];
-		},
-
-		releaseQueue() {
-			for (const n of this.queue) {
-				this.prepend(n, true);
-			}
-			this.queue = [];
-		},
-
-		async loadMore() {
-			if (this.more == null) return;
-			if (this.moreFetching) return;
-
-			this.moreFetching = true;
-			await this.more();
-			this.moreFetching = false;
-		},
-
-		onTop() {
-			this.releaseQueue();
-		},
-
-		onBottom() {
-			this.loadMore();
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.eamppglmnmimdhrlzhplwpvyeaqmmhxu
-	.transition
-		.mk-notes-enter
-		.mk-notes-leave-to
-			opacity 0
-			transform translateY(-30px)
-
-		> *
-			transition transform .3s ease, opacity .3s ease
-
-	> .placeholder
-		padding 16px
-		opacity 0.3
-
-	> .notes
-		> .date
-			display block
-			margin 0
-			line-height 28px
-			font-size 12px
-			text-align center
-			color var(--dateDividerFg)
-			background var(--dateDividerBg)
-			border-bottom solid var(--lineWidth) var(--faceDivider)
-
-			span
-				margin 0 16px
-
-			[data-icon]
-				margin-right 8px
-
-	> footer
-		> button
-			display block
-			margin 0
-			padding 16px
-			width 100%
-			text-align center
-			color #ccc
-			background var(--face)
-			border-top solid var(--lineWidth) var(--faceDivider)
-			border-bottom-left-radius 6px
-			border-bottom-right-radius 6px
-
-			&:hover
-				box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
-
-			&:active
-				box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
-
-</style>
diff --git a/src/client/app/desktop/views/pages/deck/deck.notification.vue b/src/client/app/desktop/views/pages/deck/deck.notification.vue
deleted file mode 100644
index c20fe87a4f..0000000000
--- a/src/client/app/desktop/views/pages/deck/deck.notification.vue
+++ /dev/null
@@ -1,193 +0,0 @@
-<template>
-<div class="dsfykdcjpuwfvpefwufddclpjhzktmpw">
-	<div class="notification reaction" v-if="notification.type == 'reaction'">
-		<mk-avatar class="avatar" :user="notification.user"/>
-		<div>
-			<header>
-				<mk-reaction-icon :reaction="notification.reaction"/>
-				<router-link :to="notification.user | userPage">
-					<mk-user-name :user="notification.user"/>
-				</router-link>
-				<mk-time :time="notification.createdAt"/>
-			</header>
-			<router-link class="note-ref" :to="notification.note | notePage" :title="getNoteSummary(notification.note)">
-				<fa icon="quote-left"/>
-					<mfm :text="getNoteSummary(notification.note)" :should-break="false" :plain-text="true" :custom-emojis="notification.note.emojis"/>
-				<fa icon="quote-right"/>
-			</router-link>
-		</div>
-	</div>
-
-	<div class="notification renote" v-if="notification.type == 'renote'">
-		<mk-avatar class="avatar" :user="notification.user"/>
-		<div>
-			<header>
-				<fa icon="retweet"/>
-				<router-link :to="notification.user | userPage">
-					<mk-user-name :user="notification.user"/>
-				</router-link>
-				<mk-time :time="notification.createdAt"/>
-			</header>
-			<router-link class="note-ref" :to="notification.note | notePage" :title="getNoteSummary(notification.note.renote)">
-				<fa icon="quote-left"/>
-					<mfm :text="getNoteSummary(notification.note.renote)" :should-break="false" :plain-text="true" :custom-emojis="notification.note.renote.emojis"/>
-				<fa icon="quote-right"/>
-			</router-link>
-		</div>
-	</div>
-
-	<div class="notification follow" v-if="notification.type == 'follow'">
-		<mk-avatar class="avatar" :user="notification.user"/>
-		<div>
-			<header>
-				<fa icon="user-plus"/>
-				<router-link :to="notification.user | userPage">
-					<mk-user-name :user="notification.user"/>
-				</router-link>
-				<mk-time :time="notification.createdAt"/>
-			</header>
-		</div>
-	</div>
-
-	<div class="notification followRequest" v-if="notification.type == 'receiveFollowRequest'">
-		<mk-avatar class="avatar" :user="notification.user"/>
-		<div>
-			<header>
-				<fa icon="user-clock"/>
-				<router-link :to="notification.user | userPage">
-					<mk-user-name :user="notification.user"/>
-				</router-link>
-				<mk-time :time="notification.createdAt"/>
-			</header>
-		</div>
-	</div>
-
-	<div class="notification poll_vote" v-if="notification.type == 'poll_vote'">
-		<mk-avatar class="avatar" :user="notification.user"/>
-		<div>
-			<header>
-				<fa icon="chart-pie"/>
-				<router-link :to="notification.user | userPage">
-					<mk-user-name :user="notification.user"/>
-				</router-link>
-				<mk-time :time="notification.createdAt"/>
-			</header>
-			<router-link class="note-ref" :to="notification.note | notePage" :title="getNoteSummary(notification.note)">
-				<fa icon="quote-left"/>
-					<mfm :text="getNoteSummary(notification.note)" :should-break="false" :plain-text="true" :custom-emojis="notification.note.emojis"/>
-				<fa icon="quote-right"/>
-			</router-link>
-		</div>
-	</div>
-
-	<template v-if="notification.type == 'quote'">
-		<x-note :note="notification.note" @update:note="onNoteUpdated" :mini="true"/>
-	</template>
-
-	<template v-if="notification.type == 'reply'">
-		<x-note :note="notification.note" @update:note="onNoteUpdated" :mini="true"/>
-	</template>
-
-	<template v-if="notification.type == 'mention'">
-		<x-note :note="notification.note" @update:note="onNoteUpdated" :mini="true"/>
-	</template>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import getNoteSummary from '../../../../../../misc/get-note-summary';
-import XNote from '../../components/note.vue';
-
-export default Vue.extend({
-	components: {
-		XNote
-	},
-	props: ['notification'],
-	data() {
-		return {
-			getNoteSummary
-		};
-	},
-	methods: {
-		onNoteUpdated(note) {
-			switch (this.notification.type) {
-				case 'quote':
-				case 'reply':
-				case 'mention':
-					Vue.set(this.notification, 'note', note);
-					break;
-			}
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.dsfykdcjpuwfvpefwufddclpjhzktmpw
-	> .notification
-		padding 16px
-		font-size 12px
-		overflow-wrap break-word
-
-		&:after
-			content ""
-			display block
-			clear both
-
-		> .avatar
-			display block
-			float left
-			width 36px
-			height 36px
-			border-radius 6px
-
-		> div
-			float right
-			width calc(100% - 36px)
-			padding-left 8px
-
-			> header
-				display flex
-				align-items baseline
-				white-space nowrap
-
-				[data-icon], .mk-reaction-icon
-					margin-right 4px
-
-				> .mk-time
-					margin-left auto
-					color var(--noteHeaderInfo)
-					font-size 0.9em
-
-			> .note-preview
-				color var(--noteText)
-
-			> .note-ref
-				color var(--noteText)
-				display inline-block
-				width: 100%
-				overflow hidden
-				white-space nowrap
-				text-overflow ellipsis
-
-				[data-icon]
-					font-size 1em
-					font-weight normal
-					font-style normal
-					display inline-block
-					margin-right 3px
-
-		&.renote
-			> div > header [data-icon]
-				color #77B255
-
-		&.follow
-			> div > header [data-icon]
-				color #53c7ce
-
-		&.receiveFollowRequest
-			> div > header [data-icon]
-				color #888
-
-</style>
diff --git a/src/client/app/desktop/views/pages/deck/deck.notifications-column.vue b/src/client/app/desktop/views/pages/deck/deck.notifications-column.vue
deleted file mode 100644
index 69da7919b6..0000000000
--- a/src/client/app/desktop/views/pages/deck/deck.notifications-column.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-<x-column :name="name" :column="column" :is-stacked="isStacked">
-	<span slot="header"><fa :icon="['far', 'bell']"/>{{ name }}</span>
-
-	<x-notifications/>
-</x-column>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../../i18n';
-import XColumn from './deck.column.vue';
-import XNotifications from './deck.notifications.vue';
-
-export default Vue.extend({
-	i18n: i18n(),
-	components: {
-		XColumn,
-		XNotifications
-	},
-
-	props: {
-		column: {
-			type: Object,
-			required: true
-		},
-		isStacked: {
-			type: Boolean,
-			required: true
-		}
-	},
-
-	computed: {
-		name(): string {
-			if (this.column.name) return this.column.name;
-			return this.$t('@deck.notifications');
-		}
-	},
-});
-</script>
diff --git a/src/client/app/desktop/views/pages/deck/deck.notifications.vue b/src/client/app/desktop/views/pages/deck/deck.notifications.vue
deleted file mode 100644
index 5b556b31c8..0000000000
--- a/src/client/app/desktop/views/pages/deck/deck.notifications.vue
+++ /dev/null
@@ -1,223 +0,0 @@
-<template>
-<div class="oxynyeqmfvracxnglgulyqfgqxnxmehl">
-	<div class="placeholder" v-if="fetching">
-		<template v-for="i in 10">
-			<mk-note-skeleton :key="i"/>
-		</template>
-	</div>
-
-	<!-- トランジションを有効にするとなぜかメモリリークする -->
-	<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notifications" class="transition notifications" tag="div">
-		<template v-for="(notification, i) in _notifications">
-			<x-notification class="notification" :notification="notification" :key="notification.id"/>
-			<p class="date" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date" :key="notification.id + '-time'">
-				<span><fa icon="angle-up"/>{{ notification._datetext }}</span>
-				<span><fa icon="angle-down"/>{{ _notifications[i + 1]._datetext }}</span>
-			</p>
-		</template>
-	</component>
-	<button class="more" :class="{ fetching: fetchingMoreNotifications }" v-if="moreNotifications" @click="fetchMoreNotifications" :disabled="fetchingMoreNotifications">
-		<template v-if="fetchingMoreNotifications"><fa icon="spinner" pulse fixed-width/></template>{{ fetchingMoreNotifications ? this.$t('@.loading') : this.$t('@.load-more') }}
-	</button>
-	<p class="empty" v-if="notifications.length == 0 && !fetching">{{ $t('empty') }}</p>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../../i18n';
-import XNotification from './deck.notification.vue';
-
-const displayLimit = 20;
-
-export default Vue.extend({
-	i18n: i18n(),
-	components: {
-		XNotification
-	},
-
-	inject: ['column', 'isScrollTop', 'count'],
-
-	data() {
-		return {
-			fetching: true,
-			fetchingMoreNotifications: false,
-			notifications: [],
-			queue: [],
-			moreNotifications: false,
-			connection: null
-		};
-	},
-
-	computed: {
-		_notifications(): any[] {
-			return (this.notifications as any).map(notification => {
-				const date = new Date(notification.createdAt).getDate();
-				const month = new Date(notification.createdAt).getMonth() + 1;
-				notification._date = date;
-				notification._datetext = this.$t('@.month-and-day').replace('{month}', month.toString()).replace('{day}', date.toString());
-				return notification;
-			});
-		}
-	},
-
-	watch: {
-		queue(q) {
-			this.count(q.length);
-		}
-	},
-
-	mounted() {
-		this.connection = this.$root.stream.useSharedConnection('main');
-
-		this.connection.on('notification', this.onNotification);
-
-		this.column.$on('top', this.onTop);
-		this.column.$on('bottom', this.onBottom);
-
-		const max = 10;
-
-		this.$root.api('i/notifications', {
-			limit: max + 1
-		}).then(notifications => {
-			if (notifications.length == max + 1) {
-				this.moreNotifications = true;
-				notifications.pop();
-			}
-
-			this.notifications = notifications;
-			this.fetching = false;
-		});
-	},
-
-	beforeDestroy() {
-		this.connection.dispose();
-
-		this.column.$off('top', this.onTop);
-		this.column.$off('bottom', this.onBottom);
-	},
-
-	methods: {
-		fetchMoreNotifications() {
-			this.fetchingMoreNotifications = true;
-
-			const max = 20;
-
-			this.$root.api('i/notifications', {
-				limit: max + 1,
-				untilId: this.notifications[this.notifications.length - 1].id
-			}).then(notifications => {
-				if (notifications.length == max + 1) {
-					this.moreNotifications = true;
-					notifications.pop();
-				} else {
-					this.moreNotifications = false;
-				}
-				this.notifications = this.notifications.concat(notifications);
-				this.fetchingMoreNotifications = false;
-			});
-		},
-
-		onNotification(notification) {
-			// TODO: ユーザーが画面を見てないと思われるとき(ブラウザやタブがアクティブじゃないなど)は送信しない
-			this.$root.stream.send('readNotification', {
-				id: notification.id
-			});
-
-			this.prepend(notification);
-		},
-
-		prepend(notification) {
-			if (this.isScrollTop()) {
-				// Prepend the notification
-				this.notifications.unshift(notification);
-
-				// オーバーフローしたら古い通知は捨てる
-				if (this.notifications.length >= displayLimit) {
-					this.notifications = this.notifications.slice(0, displayLimit);
-				}
-			} else {
-				this.queue.push(notification);
-			}
-		},
-
-		releaseQueue() {
-			for (const n of this.queue) {
-				this.prepend(n);
-			}
-			this.queue = [];
-		},
-
-		onTop() {
-			this.releaseQueue();
-		},
-
-		onBottom() {
-			this.fetchMoreNotifications();
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.oxynyeqmfvracxnglgulyqfgqxnxmehl
-	.transition
-		.mk-notifications-enter
-		.mk-notifications-leave-to
-			opacity 0
-			transform translateY(-30px)
-
-		> *
-			transition transform .3s ease, opacity .3s ease
-
-	> .placeholder
-		padding 16px
-		opacity 0.3
-
-	> .notifications
-
-		> .notification:not(:last-child)
-			border-bottom solid var(--lineWidth) var(--faceDivider)
-
-		> .date
-			display block
-			margin 0
-			line-height 28px
-			text-align center
-			font-size 12px
-			color var(--dateDividerFg)
-			background var(--dateDividerBg)
-			border-bottom solid var(--lineWidth) var(--faceDivider)
-
-			span
-				margin 0 16px
-
-			[data-icon]
-				margin-right 8px
-
-	> .more
-		display block
-		width 100%
-		padding 16px
-		color #555
-		border-top solid var(--lineWidth) rgba(#000, 0.05)
-
-		&:hover
-			background rgba(#000, 0.025)
-
-		&:active
-			background rgba(#000, 0.05)
-
-		&.fetching
-			cursor wait
-
-		> [data-icon]
-			margin-right 4px
-
-	> .empty
-		margin 0
-		padding 16px
-		text-align center
-		color var(--text)
-
-</style>
diff --git a/src/client/app/desktop/views/pages/deck/deck.tl-column.vue b/src/client/app/desktop/views/pages/deck/deck.tl-column.vue
deleted file mode 100644
index bc5e045373..0000000000
--- a/src/client/app/desktop/views/pages/deck/deck.tl-column.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<template>
-<x-column :menu="menu" :name="name" :column="column" :is-stacked="isStacked">
-	<span slot="header">
-		<fa v-if="column.type == 'home'" icon="home"/>
-		<fa v-if="column.type == 'local'" :icon="['far', 'comments']"/>
-		<fa v-if="column.type == 'hybrid'" icon="share-alt"/>
-		<fa v-if="column.type == 'global'" icon="globe"/>
-		<fa v-if="column.type == 'list'" icon="list"/>
-		<fa v-if="column.type == 'hashtag'" icon="hashtag"/>
-		<span>{{ name }}</span>
-	</span>
-
-	<div class="editor" style="padding:12px" v-if="edit">
-		<ui-switch v-model="column.isMediaOnly" @change="onChangeSettings">{{ $t('is-media-only') }}</ui-switch>
-		<ui-switch v-model="column.isMediaView" @change="onChangeSettings">{{ $t('is-media-view') }}</ui-switch>
-	</div>
-
-	<x-list-tl v-if="column.type == 'list'"
-		:list="column.list"
-		:media-only="column.isMediaOnly"
-		:media-view="column.isMediaView"
-		ref="tl"
-	/>
-	<x-hashtag-tl v-else-if="column.type == 'hashtag'"
-		:tag-tl="$store.state.settings.tagTimelines.find(x => x.id == column.tagTlId)"
-		:media-only="column.isMediaOnly"
-		:media-view="column.isMediaView"
-		ref="tl"
-	/>
-	<x-tl v-else
-		:src="column.type"
-		:media-only="column.isMediaOnly"
-		:media-view="column.isMediaView"
-		ref="tl"
-	/>
-</x-column>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../../i18n';
-import XColumn from './deck.column.vue';
-import XTl from './deck.tl.vue';
-import XListTl from './deck.list-tl.vue';
-import XHashtagTl from './deck.hashtag-tl.vue';
-
-export default Vue.extend({
-	i18n: i18n('deck/deck.tl-column.vue'),
-	components: {
-		XColumn,
-		XTl,
-		XListTl,
-		XHashtagTl
-	},
-
-	props: {
-		column: {
-			type: Object,
-			required: true
-		},
-		isStacked: {
-			type: Boolean,
-			required: true
-		}
-	},
-
-	data() {
-		return {
-			edit: false,
-			menu: [{
-				icon: 'cog',
-				text: this.$t('edit'),
-				action: () => {
-					this.edit = !this.edit;
-				}
-			}]
-		}
-	},
-
-	computed: {
-		name(): string {
-			if (this.column.name) return this.column.name;
-
-			switch (this.column.type) {
-				case 'home': return this.$t('@deck.home');
-				case 'local': return this.$t('@deck.local');
-				case 'hybrid': return this.$t('@deck.hybrid');
-				case 'global': return this.$t('@deck.global');
-				case 'list': return this.column.list.title;
-				case 'hashtag': return this.$store.state.settings.tagTimelines.find(x => x.id == this.column.tagTlId).title;
-			}
-		}
-	},
-
-	methods: {
-		onChangeSettings(v) {
-			this.$store.dispatch('settings/saveDeck');
-		},
-
-		focus() {
-			this.$refs.tl.focus();
-		}
-	}
-});
-</script>
diff --git a/src/client/app/desktop/views/pages/deck/deck.tl.vue b/src/client/app/desktop/views/pages/deck/deck.tl.vue
deleted file mode 100644
index 4f5e3af197..0000000000
--- a/src/client/app/desktop/views/pages/deck/deck.tl.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-<x-notes ref="timeline" :more="existMore ? more : null" :media-view="mediaView"/>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import XNotes from './deck.notes.vue';
-
-const fetchLimit = 10;
-
-export default Vue.extend({
-	components: {
-		XNotes
-	},
-
-	props: {
-		src: {
-			type: String,
-			required: false,
-			default: 'home'
-		},
-		mediaOnly: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
-		mediaView: {
-			type: Boolean,
-			required: false,
-			default: false
-		}
-	},
-
-	data() {
-		return {
-			fetching: true,
-			moreFetching: false,
-			existMore: false,
-			connection: null
-		};
-	},
-
-	computed: {
-		stream(): any {
-			switch (this.src) {
-				case 'home': return this.$root.stream.useSharedConnection('homeTimeline');
-				case 'local': return this.$root.stream.useSharedConnection('localTimeline');
-				case 'hybrid': return this.$root.stream.useSharedConnection('hybridTimeline');
-				case 'global': return this.$root.stream.useSharedConnection('globalTimeline');
-			}
-		},
-
-		endpoint(): string {
-			switch (this.src) {
-				case 'home': return 'notes/timeline';
-				case 'local': return 'notes/local-timeline';
-				case 'hybrid': return 'notes/hybrid-timeline';
-				case 'global': return 'notes/global-timeline';
-			}
-		},
-	},
-
-	watch: {
-		mediaOnly() {
-			this.fetch();
-		}
-	},
-
-	mounted() {
-		this.connection = this.stream;
-
-		this.connection.on('note', this.onNote);
-		if (this.src == 'home') {
-			this.connection.on('follow', this.onChangeFollowing);
-			this.connection.on('unfollow', this.onChangeFollowing);
-		}
-
-		this.fetch();
-	},
-
-	beforeDestroy() {
-		this.connection.dispose();
-	},
-
-	methods: {
-		fetch() {
-			this.fetching = true;
-
-			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
-				this.$root.api(this.endpoint, {
-					limit: fetchLimit + 1,
-					withFiles: this.mediaOnly,
-					includeMyRenotes: this.$store.state.settings.showMyRenotes,
-					includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-					includeLocalRenotes: this.$store.state.settings.showLocalRenotes
-				}).then(notes => {
-					if (notes.length == fetchLimit + 1) {
-						notes.pop();
-						this.existMore = true;
-					}
-					res(notes);
-					this.fetching = false;
-					this.$emit('loaded');
-				}, rej);
-			}));
-		},
-
-		more() {
-			this.moreFetching = true;
-
-			const promise = this.$root.api(this.endpoint, {
-				limit: fetchLimit + 1,
-				withFiles: this.mediaOnly,
-				untilId: (this.$refs.timeline as any).tail().id,
-				includeMyRenotes: this.$store.state.settings.showMyRenotes,
-				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-				includeLocalRenotes: this.$store.state.settings.showLocalRenotes
-			});
-
-			promise.then(notes => {
-				if (notes.length == fetchLimit + 1) {
-					notes.pop();
-				} else {
-					this.existMore = false;
-				}
-				for (const n of notes) {
-					(this.$refs.timeline as any).append(n);
-				}
-				this.moreFetching = false;
-			});
-
-			return promise;
-		},
-
-		onNote(note) {
-			if (this.mediaOnly && note.files.length == 0) return;
-
-			// Prepend a note
-			(this.$refs.timeline as any).prepend(note);
-		},
-
-		onChangeFollowing() {
-			this.fetch();
-		},
-
-		focus() {
-			(this.$refs.timeline as any).focus();
-		}
-	}
-});
-</script>
diff --git a/src/client/app/desktop/views/pages/deck/deck.user-column.vue b/src/client/app/desktop/views/pages/deck/deck.user-column.vue
deleted file mode 100644
index b3e92f3e8a..0000000000
--- a/src/client/app/desktop/views/pages/deck/deck.user-column.vue
+++ /dev/null
@@ -1,505 +0,0 @@
-<template>
-<x-column>
-	<span slot="header">
-		<fa icon="user"/><mk-user-name :user="user" v-if="user"/>
-	</span>
-
-	<div class="zubukjlciycdsyynicqrnlsmdwmymzqu" v-if="user">
-		<div class="is-remote" v-if="user.host != null">
-			<details>
-				<summary><fa icon="exclamation-triangle"/> {{ $t('@.is-remote-user') }}</summary>
-				<a :href="user.url || user.uri" target="_blank">{{ $t('@.view-on-remote') }}</a>
-			</details>
-		</div>
-		<header :style="bannerStyle">
-			<div>
-				<button class="menu" @click="menu" ref="menu"><fa icon="ellipsis-h"/></button>
-				<mk-follow-button v-if="$store.getters.isSignedIn && user.id != $store.state.i.id" :user="user" class="follow" mini/>
-				<mk-avatar class="avatar" :user="user" :disable-preview="true"/>
-				<span class="name">
-					<mk-user-name :user="user"/>
-				</span>
-				<span class="acct">@{{ user | acct }} <fa v-if="user.isLocked == true" class="locked" icon="lock" fixed-width/></span>
-				<span class="followed" v-if="user.isFollowed">{{ $t('follows-you') }}</span>
-			</div>
-		</header>
-		<div class="info">
-			<div class="description">
-				<mfm v-if="user.description" :text="user.description" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/>
-			</div>
-			<div class="fields" v-if="user.fields">
-				<dl class="field" v-for="(field, i) in user.fields" :key="i">
-					<dt class="name">
-						<mfm :text="field.name" :should-break="false" :plain-text="true" :custom-emojis="user.emojis"/>
-					</dt>
-					<dd class="value">
-						<mfm :text="field.value" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/>
-					</dd>
-				</dl>
-			</div>
-			<div class="counts">
-				<div>
-					<b>{{ user.notesCount | number }}</b>
-					<span>{{ $t('posts') }}</span>
-				</div>
-				<div>
-					<b>{{ user.followingCount | number }}</b>
-					<span>{{ $t('following') }}</span>
-				</div>
-				<div>
-					<b>{{ user.followersCount | number }}</b>
-					<span>{{ $t('followers') }}</span>
-				</div>
-			</div>
-		</div>
-		<div class="pinned" v-if="user.pinnedNotes && user.pinnedNotes.length > 0">
-			<p class="caption" @click="toggleShowPinned"><fa icon="thumbtack"/> {{ $t('pinned-notes') }}</p>
-			<span class="angle" v-if="showPinned"><fa icon="angle-up"/></span>
-			<span class="angle" v-else><fa icon="angle-down"/></span>
-			<div class="notes" v-show="showPinned">
-				<x-note v-for="n in user.pinnedNotes" :key="n.id" :note="n" :mini="true"/>
-			</div>
-		</div>
-		<div class="images" v-if="images.length > 0">
-			<p class="caption" @click="toggleShowImages"><fa :icon="['far', 'images']"/> {{ $t('images') }}</p>
-			<span class="angle" v-if="showImages"><fa icon="angle-up"/></span>
-			<span class="angle" v-else><fa icon="angle-down"/></span>
-			<div v-show="showImages">
-				<router-link v-for="image in images"
-					:style="`background-image: url(${image.thumbnailUrl})`"
-					:key="`${image.id}:${image._note.id}`"
-					:to="image._note | notePage"
-					:title="`${image.name}\n${(new Date(image.createdAt)).toLocaleString()}`"
-				></router-link>
-			</div>
-		</div>
-		<div class="activity">
-			<p class="caption" @click="toggleShowActivity"><fa :icon="['far', 'chart-bar']"/> {{ $t('activity') }}</p>
-			<span class="angle" v-if="showActivity"><fa icon="angle-up"/></span>
-			<span class="angle" v-else><fa icon="angle-down"/></span>
-			<div v-show="showActivity">
-				<div ref="chart"></div>
-			</div>
-		</div>
-		<div class="tl">
-			<p class="caption"><fa :icon="['far', 'comment-alt']"/> {{ $t('timeline') }}</p>
-			<div>
-				<x-notes ref="timeline" :more="existMore ? fetchMoreNotes : null"/>
-			</div>
-		</div>
-	</div>
-</x-column>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../../i18n';
-import parseAcct from '../../../../../../misc/acct/parse';
-import XColumn from './deck.column.vue';
-import XNotes from './deck.notes.vue';
-import XNote from '../../components/note.vue';
-import XUserMenu from '../../../../common/views/components/user-menu.vue';
-import { concat } from '../../../../../../prelude/array';
-import ApexCharts from 'apexcharts';
-
-const fetchLimit = 10;
-
-export default Vue.extend({
-	i18n: i18n('deck/deck.user-column.vue'),
-	components: {
-		XColumn,
-		XNotes,
-		XNote
-	},
-
-	props: {
-		acct: {
-			type: String,
-			required: true
-		}
-	},
-
-	data() {
-		return {
-			user: null,
-			fetching: true,
-			existMore: false,
-			moreFetching: false,
-			withFiles: false,
-			images: [],
-			showPinned: true,
-			showImages: true,
-			showActivity: true
-		};
-	},
-
-	computed: {
-		bannerStyle(): any {
-			if (this.user == null) return {};
-			if (this.user.bannerUrl == null) return {};
-			return {
-				backgroundColor: this.user.bannerColor && this.user.bannerColor.length == 3 ? `rgb(${ this.user.bannerColor.join(',') })` : null,
-				backgroundImage: `url(${ this.user.bannerUrl })`
-			};
-		},
-	},
-
-	created() {
-		this.$root.api('users/show', parseAcct(this.acct)).then(user => {
-			this.user = user;
-			this.fetching = false;
-
-			this.$nextTick(() => {
-				(this.$refs.timeline as any).init(() => this.initTl());
-			});
-
-			const image = [
-				'image/jpeg',
-				'image/png',
-				'image/gif'
-			];
-
-			this.$root.api('users/notes', {
-				userId: this.user.id,
-				fileType: image,
-				excludeNsfw: !this.$store.state.device.alwaysShowNsfw,
-				limit: 9,
-				untilDate: new Date().getTime() + 1000 * 86400 * 365
-			}).then(notes => {
-				for (const note of notes) {
-					for (const file of note.files) {
-						file._note = note;
-					}
-				}
-				const files = concat(notes.map((n: any): any[] => n.files));
-				this.images = files.filter(f => image.includes(f.type)).slice(0, 9);
-			});
-
-			this.$root.api('charts/user/notes', {
-				userId: this.user.id,
-				span: 'day',
-				limit: 21
-			}).then(stats => {
-				const normal = [];
-				const reply = [];
-				const renote = [];
-
-				const now = new Date();
-				const y = now.getFullYear();
-				const m = now.getMonth();
-				const d = now.getDate();
-
-				for (let i = 0; i < 21; i++) {
-					const x = new Date(y, m, d - i);
-					normal.push([
-						x,
-						stats.diffs.normal[i]
-					]);
-					reply.push([
-						x,
-						stats.diffs.reply[i]
-					]);
-					renote.push([
-						x,
-						stats.diffs.renote[i]
-					]);
-				}
-
-				const chart = new ApexCharts(this.$refs.chart, {
-					chart: {
-						type: 'bar',
-						stacked: true,
-						height: 100,
-						sparkline: {
-							enabled: true
-						},
-					},
-					plotOptions: {
-						bar: {
-							columnWidth: '90%'
-						}
-					},
-					grid: {
-						clipMarkers: false,
-						padding: {
-							top: 16,
-							right: 16,
-							bottom: 16,
-							left: 16
-						}
-					},
-					tooltip: {
-						shared: true,
-						intersect: false
-					},
-					series: [{
-						name: 'Normal',
-						data: normal
-					}, {
-						name: 'Reply',
-						data: reply
-					}, {
-						name: 'Renote',
-						data: renote
-					}],
-					xaxis: {
-						type: 'datetime',
-						crosshairs: {
-							width: 1,
-							opacity: 1
-						}
-					}
-				});
-
-				chart.render();
-			});
-		});
-	},
-
-	methods: {
-		initTl() {
-			return new Promise((res, rej) => {
-				this.$root.api('users/notes', {
-					userId: this.user.id,
-					limit: fetchLimit + 1,
-					untilDate: new Date().getTime() + 1000 * 86400 * 365,
-					withFiles: this.withFiles,
-					includeMyRenotes: this.$store.state.settings.showMyRenotes,
-					includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-					includeLocalRenotes: this.$store.state.settings.showLocalRenotes
-				}).then(notes => {
-					if (notes.length == fetchLimit + 1) {
-						notes.pop();
-						this.existMore = true;
-					}
-					res(notes);
-				}, rej);
-			});
-		},
-
-		fetchMoreNotes() {
-			this.moreFetching = true;
-
-			const promise = this.$root.api('users/notes', {
-				userId: this.user.id,
-				limit: fetchLimit + 1,
-				untilDate: new Date((this.$refs.timeline as any).tail().createdAt).getTime(),
-				withFiles: this.withFiles,
-				includeMyRenotes: this.$store.state.settings.showMyRenotes,
-				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-				includeLocalRenotes: this.$store.state.settings.showLocalRenotes
-			});
-
-			promise.then(notes => {
-				if (notes.length == fetchLimit + 1) {
-					notes.pop();
-				} else {
-					this.existMore = false;
-				}
-				for (const n of notes) (this.$refs.timeline as any).append(n);
-				this.moreFetching = false;
-			});
-
-			return promise;
-		},
-
-		menu() {
-			this.$root.new(XUserMenu, {
-				source: this.$refs.menu,
-				user: this.user
-			});
-		},
-
-		toggleShowPinned() {
-			this.showPinned = !this.showPinned;
-		},
-
-		toggleShowImages() {
-			this.showImages = !this.showImages;
-		},
-
-		toggleShowActivity() {
-			this.showActivity = !this.showActivity;
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.zubukjlciycdsyynicqrnlsmdwmymzqu
-	background var(--deckColumnBg)
-
-	> .is-remote
-		padding 8px 16px
-		font-size 12px
-
-		&.is-remote
-			color var(--remoteInfoFg)
-			background var(--remoteInfoBg)
-
-		> a
-			font-weight bold
-
-	> header
-		overflow hidden
-		background-size cover
-		background-position center
-
-		> div
-			padding 32px
-			background rgba(#000, 0.5)
-			color #fff
-			text-align center
-
-			> .menu
-				position absolute
-				top 8px
-				left 8px
-				padding 8px
-				font-size 16px
-				text-shadow 0 0 8px #000
-
-			> .follow
-				position absolute
-				top 16px
-				right 16px
-
-			> .avatar
-				display block
-				width 64px
-				height 64px
-				margin 0 auto
-
-			> .name
-				display block
-				margin-top 8px
-				font-weight bold
-				text-shadow 0 0 8px #000
-
-			> .acct
-				display block
-				font-size 14px
-				opacity 0.7
-				text-shadow 0 0 8px #000
-
-				> .locked
-					opacity 0.8
-
-			> .followed
-				display inline-block
-				font-size 12px
-				background rgba(0, 0, 0, 0.5)
-				opacity 0.7
-				margin-top: 2px
-				padding 4px
-				border-radius 4px
-
-	> .info
-		padding 16px
-		font-size 12px
-		color var(--text)
-		text-align center
-		background var(--face)
-
-		&:before
-			content ""
-			display blcok
-			position absolute
-			top -32px
-			left 0
-			right 0
-			width 0px
-			margin 0 auto
-			border-top solid 16px transparent
-			border-left solid 16px transparent
-			border-right solid 16px transparent
-			border-bottom solid 16px var(--face)
-
-		> .fields
-			margin-top 8px
-
-			> .field
-				display flex
-				padding 0
-				margin 0
-				align-items center
-
-				> .name
-					padding 4px
-					margin 4px
-					width 30%
-					overflow hidden
-					white-space nowrap
-					text-overflow ellipsis
-					font-weight bold
-
-				> .value
-					padding 4px
-					margin 4px
-					width 70%
-					overflow hidden
-					white-space nowrap
-					text-overflow ellipsis
-
-		> .counts
-			display grid
-			grid-template-columns 2fr 2fr 2fr
-			margin-top 8px
-			border-top solid var(--lineWidth) var(--faceDivider)
-
-			> div
-				padding 8px 8px 0 8px
-				text-align center
-
-				> b
-					display block
-					font-size 110%
-
-				> span
-					display block
-					font-size 80%
-					opacity 0.7
-
-	> *
-		> p.caption
-			margin 0
-			padding 8px 16px
-			font-size 12px
-			color var(--text)
-
-			& + .angle
-				position absolute
-				top 0
-				right 8px
-				padding 6px
-				font-size 14px
-				color var(--text)
-
-	> .pinned
-		> .notes
-			background var(--face)
-
-	> .images
-		> div
-			display grid
-			grid-template-columns 1fr 1fr 1fr
-			gap 8px
-			padding 16px
-			background var(--face)
-
-			> *
-				height 70px
-				background-position center center
-				background-size cover
-				background-clip content-box
-				border-radius 4px
-
-	> .activity
-		> div
-			background var(--face)
-
-	> .tl
-		> div
-			background var(--face)
-
-</style>
diff --git a/src/client/app/desktop/views/pages/deck/deck.vue b/src/client/app/desktop/views/pages/deck/deck.vue
deleted file mode 100644
index 30b985e7e4..0000000000
--- a/src/client/app/desktop/views/pages/deck/deck.vue
+++ /dev/null
@@ -1,433 +0,0 @@
-<template>
-<mk-ui :class="$style.root">
-	<div class="qlvquzbjribqcaozciifydkngcwtyzje" ref="body" :style="style" :class="`${$store.state.device.deckColumnAlign} ${$store.state.device.deckColumnWidth}`" v-hotkey.global="keymap">
-		<template v-for="ids in layout">
-			<div v-if="ids.length > 1" class="folder">
-				<template v-for="id, i in ids">
-					<x-column-core :ref="id" :key="id" :column="columns.find(c => c.id == id)" :is-stacked="true" @parentFocus="moveFocus(id, $event)"/>
-				</template>
-			</div>
-			<x-column-core v-else :ref="ids[0]" :key="ids[0]" :column="columns.find(c => c.id == ids[0])" @parentFocus="moveFocus(ids[0], $event)"/>
-		</template>
-		<template v-if="temporaryColumn">
-			<x-user-column v-if="temporaryColumn.type == 'user'" :acct="temporaryColumn.acct" :key="temporaryColumn.acct"/>
-			<x-note-column v-else-if="temporaryColumn.type == 'note'" :note-id="temporaryColumn.noteId" :key="temporaryColumn.noteId"/>
-			<x-hashtag-column v-else-if="temporaryColumn.type == 'tag'" :tag="temporaryColumn.tag" :key="temporaryColumn.tag"/>
-		</template>
-		<button ref="add" @click="add" :title="$t('@deck.add-column')"><fa icon="plus"/></button>
-	</div>
-</mk-ui>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../../i18n';
-import XColumnCore from './deck.column-core.vue';
-import Menu from '../../../../common/views/components/menu.vue';
-import MkUserListsWindow from '../../components/user-lists-window.vue';
-
-import * as uuid from 'uuid';
-
-export default Vue.extend({
-	i18n: i18n('deck'),
-	components: {
-		XColumnCore,
-		XUserColumn: () => import('./deck.user-column.vue').then(m => m.default),
-		XNoteColumn: () => import('./deck.note-column.vue').then(m => m.default),
-		XHashtagColumn: () => import('./deck.hashtag-column.vue').then(m => m.default)
-	},
-
-	computed: {
-		columns(): any[] {
-			if (this.$store.state.settings.deck == null) return [];
-			return this.$store.state.settings.deck.columns;
-		},
-
-		layout(): any[] {
-			if (this.$store.state.settings.deck == null) return [];
-			if (this.$store.state.settings.deck.layout == null) return this.$store.state.settings.deck.columns.map(c => [c.id]);
-			return this.$store.state.settings.deck.layout;
-		},
-
-		style(): any {
-			return {
-				height: `calc(100vh - ${this.$store.state.uiHeaderHeight}px)`
-			};
-		},
-
-		temporaryColumn(): any {
-			return this.$store.state.device.deckTemporaryColumn;
-		},
-
-		keymap(): any {
-			return {
-				't': this.focus
-			};
-		}
-	},
-
-	watch: {
-		temporaryColumn() {
-			if (this.temporaryColumn != null) {
-				this.$nextTick(() => {
-					this.$refs.body.scrollTo({
-						left: this.$refs.body.scrollWidth - this.$refs.body.clientWidth,
-						behavior: 'smooth'
-					});
-				});
-			}
-		}
-	},
-
-	provide() {
-		return {
-			getColumnVm: this.getColumnVm
-		};
-	},
-
-	created() {
-		this.$store.commit('navHook', this.onNav);
-
-		if (this.$store.state.settings.deck == null) {
-			const deck = {
-				columns: [/*{
-					type: 'widgets',
-					widgets: []
-				}, */{
-					id: uuid(),
-					type: 'home'
-				}, {
-					id: uuid(),
-					type: 'notifications'
-				}, {
-					id: uuid(),
-					type: 'local'
-				}, {
-					id: uuid(),
-					type: 'global'
-				}]
-			};
-
-			deck.layout = deck.columns.map(c => [c.id]);
-
-			this.$store.dispatch('settings/set', {
-				key: 'deck',
-				value: deck
-			});
-		}
-
-		// 互換性のため
-		if (this.$store.state.settings.deck != null && this.$store.state.settings.deck.layout == null) {
-			this.$store.dispatch('settings/set', {
-				key: 'deck',
-				value: Object.assign({}, this.$store.state.settings.deck, {
-					layout: this.$store.state.settings.deck.columns.map(c => [c.id])
-				})
-			});
-		}
-	},
-
-	mounted() {
-		document.title = this.$root.instanceName;
-		document.documentElement.style.overflow = 'hidden';
-	},
-
-	beforeDestroy() {
-		this.$store.commit('navHook', null);
-
-		document.documentElement.style.overflow = 'auto';
-	},
-
-	methods: {
-		getColumnVm(id) {
-			return this.$refs[id][0];
-		},
-
-		onNav(to) {
-			if (!this.$store.state.settings.deckNav) return false;
-
-			if (to.name == 'user') {
-				this.$store.commit('device/set', {
-					key: 'deckTemporaryColumn',
-					value: {
-						type: 'user',
-						acct: to.params.user
-					}
-				});
-				return true;
-			} else if (to.name == 'note') {
-				this.$store.commit('device/set', {
-					key: 'deckTemporaryColumn',
-					value: {
-						type: 'note',
-						noteId: to.params.note
-					}
-				});
-				return true;
-			} else if (to.name == 'tag') {
-				this.$store.commit('device/set', {
-					key: 'deckTemporaryColumn',
-					value: {
-						type: 'tag',
-						tag: to.params.tag
-					}
-				});
-				return true;
-			}
-		},
-
-		add() {
-			this.$root.new(Menu, {
-				source: this.$refs.add,
-				items: [{
-					icon: 'home',
-					text: this.$t('@deck.home'),
-					action: () => {
-						this.$store.dispatch('settings/addDeckColumn', {
-							id: uuid(),
-							type: 'home'
-						});
-					}
-				}, {
-					icon: ['far', 'comments'],
-					text: this.$t('@deck.local'),
-					action: () => {
-						this.$store.dispatch('settings/addDeckColumn', {
-							id: uuid(),
-							type: 'local'
-						});
-					}
-				}, {
-					icon: 'share-alt',
-					text: this.$t('@deck.hybrid'),
-					action: () => {
-						this.$store.dispatch('settings/addDeckColumn', {
-							id: uuid(),
-							type: 'hybrid'
-						});
-					}
-				}, {
-					icon: 'globe',
-					text: this.$t('@deck.global'),
-					action: () => {
-						this.$store.dispatch('settings/addDeckColumn', {
-							id: uuid(),
-							type: 'global'
-						});
-					}
-				}, {
-					icon: 'at',
-					text: this.$t('@deck.mentions'),
-					action: () => {
-						this.$store.dispatch('settings/addDeckColumn', {
-							id: uuid(),
-							type: 'mentions'
-						});
-					}
-				}, {
-					icon: ['far', 'envelope'],
-					text: this.$t('@deck.direct'),
-					action: () => {
-						this.$store.dispatch('settings/addDeckColumn', {
-							id: uuid(),
-							type: 'direct'
-						});
-					}
-				}, {
-					icon: 'list',
-					text: this.$t('@deck.list'),
-					action: () => {
-						const w = this.$root.new(MkUserListsWindow);
-						w.$once('choosen', list => {
-							this.$store.dispatch('settings/addDeckColumn', {
-								id: uuid(),
-								type: 'list',
-								list: list
-							});
-							w.close();
-						});
-					}
-				}, {
-					icon: 'hashtag',
-					text: this.$t('@deck.hashtag'),
-					action: () => {
-						this.$root.dialog({
-							title: this.$t('enter-hashtag-tl-title'),
-							input: true
-						}).then(({ canceled, result: title }) => {
-							if (canceled) return;
-							this.$store.dispatch('settings/addDeckColumn', {
-								id: uuid(),
-								type: 'hashtag',
-								tagTlId: this.$store.state.settings.tagTimelines.find(x => x.title == title).id
-							});
-						});
-					}
-				}, {
-					icon: ['far', 'bell'],
-					text: this.$t('@deck.notifications'),
-					action: () => {
-						this.$store.dispatch('settings/addDeckColumn', {
-							id: uuid(),
-							type: 'notifications'
-						});
-					}
-				}, {
-					icon: 'calculator',
-					text: this.$t('@deck.widgets'),
-					action: () => {
-						this.$store.dispatch('settings/addDeckColumn', {
-							id: uuid(),
-							type: 'widgets',
-							widgets: []
-						});
-					}
-				}]
-			});
-		},
-
-		focus() {
-			// Flatten array of arrays
-			const ids = [].concat.apply([], this.layout);
-			const firstTl = ids.find(id => this.isTlColumn(id));
-
-			if (firstTl) {
-				this.$refs[firstTl][0].focus();
-			}
-		},
-
-		moveFocus(id, direction) {
-			let targetColumn;
-
-			if (direction == 'right') {
-				const currentColumnIndex = this.layout.findIndex(ids => ids.includes(id));
-				this.layout.some((ids, i) => {
-					if (i <= currentColumnIndex) return false;
-					const tl = ids.find(id => this.isTlColumn(id));
-					if (tl) {
-						targetColumn = tl;
-						return true;
-					}
-				});
-			} else if (direction == 'left') {
-				const currentColumnIndex = [...this.layout].reverse().findIndex(ids => ids.includes(id));
-				[...this.layout].reverse().some((ids, i) => {
-					if (i <= currentColumnIndex) return false;
-					const tl = ids.find(id => this.isTlColumn(id));
-					if (tl) {
-						targetColumn = tl;
-						return true;
-					}
-				});
-			} else if (direction == 'down') {
-				const currentColumn = this.layout.find(ids => ids.includes(id));
-				const currentIndex = currentColumn.indexOf(id);
-				currentColumn.some((_id, i) => {
-					if (i <= currentIndex) return false;
-					if (this.isTlColumn(_id)) {
-						targetColumn = _id;
-						return true;
-					}
-				});
-			} else if (direction == 'up') {
-				const currentColumn = [...this.layout.find(ids => ids.includes(id))].reverse();
-				const currentIndex = currentColumn.indexOf(id);
-				currentColumn.some((_id, i) => {
-					if (i <= currentIndex) return false;
-					if (this.isTlColumn(_id)) {
-						targetColumn = _id;
-						return true;
-					}
-				});
-			}
-
-			if (targetColumn) {
-				this.$refs[targetColumn][0].focus();
-			}
-		},
-
-		isTlColumn(id) {
-			const column = this.columns.find(c => c.id === id);
-			return ['home', 'local', 'hybrid', 'global', 'list', 'hashtag', 'mentions', 'direct'].includes(column.type);
-		}
-	}
-});
-</script>
-
-<style lang="stylus" module>
-.root
-	height 100vh
-</style>
-
-<style lang="stylus" scoped>
-.qlvquzbjribqcaozciifydkngcwtyzje
-	display flex
-	flex 1
-	padding 16px 0 16px 16px
-	overflow auto
-
-	> div
-		margin-right 8px
-		width 330px
-		min-width 330px
-
-		&:last-of-type
-			margin-right 0
-
-		&.folder
-			display flex
-			flex-direction column
-
-			> *:not(:last-child)
-				margin-bottom 8px
-
-	&.narrow
-		> div
-			width 303px
-			min-width 303px
-
-	&.narrower
-		> div
-			width 316.5px
-			min-width 316.5px
-
-	&.wider
-		> div
-			width 343.5px
-			min-width 343.5px
-
-	&.wide
-		> div
-			width 357px
-			min-width 357px
-
-	&.center
-		> *
-			&:first-child
-				margin-left auto
-
-			&:last-child
-				margin-right auto
-
-	&.:not(.flexible)
-		> *
-			flex-grow 0
-			flex-shrink 0
-
-	&.flexible
-		> *
-			flex-grow 1
-			flex-shrink 0
-
-	> button
-		padding 0 16px
-		color var(--faceTextButton)
-		flex-grow 0 !important
-
-		&:hover
-			color var(--faceTextButtonHover)
-
-		&:active
-			color var(--faceTextButtonActive)
-
-</style>
diff --git a/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue b/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
deleted file mode 100644
index 0798e2ccc7..0000000000
--- a/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
+++ /dev/null
@@ -1,172 +0,0 @@
-<template>
-<x-column :menu="menu" :naked="true" :narrow="true" :name="name" :column="column" :is-stacked="isStacked" class="wtdtxvecapixsepjtcupubtsmometobz">
-	<span slot="header"><fa icon="calculator"/>{{ name }}</span>
-
-	<div class="gqpwvtwtprsbmnssnbicggtwqhmylhnq">
-		<template v-if="edit">
-			<header>
-				<select v-model="widgetAdderSelected" @change="addWidget">
-					<option value="profile">{{ $t('@.widgets.profile') }}</option>
-					<option value="analog-clock">{{ $t('@.widgets.analog-clock') }}</option>
-					<option value="calendar">{{ $t('@.widgets.calendar') }}</option>
-					<option value="timemachine">{{ $t('@.widgets.timemachine') }}</option>
-					<option value="activity">{{ $t('@.widgets.activity') }}</option>
-					<option value="rss">{{ $t('@.widgets.rss') }}</option>
-					<option value="trends">{{ $t('@.widgets.trends') }}</option>
-					<option value="photo-stream">{{ $t('@.widgets.photo-stream') }}</option>
-					<option value="slideshow">{{ $t('@.widgets.slideshow') }}</option>
-					<option value="version">{{ $t('@.widgets.version') }}</option>
-					<option value="broadcast">{{ $t('@.widgets.broadcast') }}</option>
-					<option value="notifications">{{ $t('@.widgets.notifications') }}</option>
-					<option value="users">{{ $t('@.widgets.users') }}</option>
-					<option value="polls">{{ $t('@.widgets.polls') }}</option>
-					<option value="post-form">{{ $t('@.widgets.post-form') }}</option>
-					<option value="messaging">{{ $t('@.widgets.messaging') }}</option>
-					<option value="memo">{{ $t('@.widgets.memo') }}</option>
-					<option value="hashtags">{{ $t('@.widgets.hashtags') }}</option>
-					<option value="posts-monitor">{{ $t('@.widgets.posts-monitor') }}</option>
-					<option value="server">{{ $t('@.widgets.server') }}</option>
-					<option value="nav">{{ $t('@.widgets.nav') }}</option>
-					<option value="tips">{{ $t('@.widgets.tips') }}</option>
-				</select>
-			</header>
-			<x-draggable
-				:list="column.widgets"
-				:options="{ animation: 150 }"
-				@sort="onWidgetSort"
-			>
-				<div v-for="widget in column.widgets" class="customize-container" :key="widget.id" @contextmenu.stop.prevent="widgetFunc(widget.id)">
-					<button class="remove" @click="removeWidget(widget)"><fa icon="times"/></button>
-					<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true" platform="deck"/>
-				</div>
-			</x-draggable>
-		</template>
-		<template v-else>
-			<component class="widget" v-for="widget in column.widgets" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" platform="deck"/>
-		</template>
-	</div>
-</x-column>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../../i18n';
-import XColumn from './deck.column.vue';
-import * as XDraggable from 'vuedraggable';
-import * as uuid from 'uuid';
-
-export default Vue.extend({
-	i18n: i18n(),
-	components: {
-		XColumn,
-		XDraggable
-	},
-
-	props: {
-		column: {
-			type: Object,
-			required: true
-		},
-		isStacked: {
-			type: Boolean,
-			required: true
-		}
-	},
-
-	data() {
-		return {
-			edit: false,
-			menu: null,
-			widgetAdderSelected: null
-		}
-	},
-
-	computed: {
-		name(): string {
-			if (this.column.name) return this.column.name;
-			return this.$t('@deck.widgets');
-		}
-	},
-
-	created() {
-		this.menu = [{
-			icon: 'cog',
-			text: this.$t('edit'),
-			action: () => {
-				this.edit = !this.edit;
-			}
-		}];
-	},
-
-	methods: {
-		widgetFunc(id) {
-			const w = this.$refs[id][0];
-			if (w.func) w.func();
-		},
-
-		onWidgetSort() {
-			this.saveWidgets();
-		},
-
-		addWidget() {
-			this.$store.dispatch('settings/addDeckWidget', {
-				id: this.column.id,
-				widget: {
-					name: this.widgetAdderSelected,
-					id: uuid(),
-					data: {}
-				}
-			});
-
-			this.widgetAdderSelected = null;
-		},
-
-		removeWidget(widget) {
-			this.$store.dispatch('settings/removeDeckWidget', {
-				id: this.column.id,
-				widget
-			});
-		},
-
-		saveWidgets() {
-			this.$store.dispatch('settings/saveDeck');
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.wtdtxvecapixsepjtcupubtsmometobz
-	.gqpwvtwtprsbmnssnbicggtwqhmylhnq
-		> header
-			padding 16px
-
-			> *
-				width 100%
-				padding 4px
-
-		.widget, .customize-container
-			margin 8px
-
-			&:first-of-type
-				margin-top 0
-
-		.customize-container
-			cursor move
-
-			> *:not(.remove)
-				pointer-events none
-
-			> .remove
-				position absolute
-				z-index 1
-				top 8px
-				right 8px
-				width 32px
-				height 32px
-				color #fff
-				background rgba(#000, 0.7)
-				border-radius 4px
-
-</style>
-
diff --git a/src/client/app/desktop/views/pages/favorites.vue b/src/client/app/desktop/views/pages/favorites.vue
deleted file mode 100644
index 066ce3f53c..0000000000
--- a/src/client/app/desktop/views/pages/favorites.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<template>
-<mk-ui>
-	<main v-if="!fetching">
-		<sequential-entrance animation="entranceFromTop" delay="25">
-			<template v-for="favorite in favorites">
-				<mk-note-detail class="post" :note="favorite.note" :key="favorite.note.id"/>
-			</template>
-		</sequential-entrance>
-		<div class="more" v-if="existMore">
-			<ui-button inline @click="more">{{ $t('@.load-more') }}</ui-button>
-		</div>
-	</main>
-</mk-ui>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../i18n';
-import Progress from '../../../common/scripts/loading';
-
-export default Vue.extend({
-	i18n: i18n('.vue'),
-	data() {
-		return {
-			fetching: true,
-			favorites: [],
-			existMore: false,
-			moreFetching: false
-		};
-	},
-	created() {
-		this.fetch();
-	},
-	methods: {
-		fetch() {
-			Progress.start();
-			this.fetching = true;
-
-			this.$root.api('i/favorites', {
-				limit: 11
-			}).then(favorites => {
-				if (favorites.length == 11) {
-					this.existMore = true;
-					favorites.pop();
-				}
-
-				this.favorites = favorites;
-				this.fetching = false;
-
-				Progress.done();
-			});
-		},
-		more() {
-			this.moreFetching = true;
-			this.$root.api('i/favorites', {
-				limit: 11,
-				untilId: this.favorites[this.favorites.length - 1].id
-			}).then(favorites => {
-				if (favorites.length == 11) {
-					this.existMore = true;
-					favorites.pop();
-				} else {
-					this.existMore = false;
-				}
-
-				this.favorites = this.favorites.concat(favorites);
-				this.moreFetching = false;
-			});
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-main
-	margin 0 auto
-	padding 16px
-	max-width 700px
-
-	> * > .post
-		margin-bottom 16px
-
-	> .more
-		margin 32px 16px 16px 16px
-		text-align center
-
-</style>
diff --git a/src/client/app/desktop/views/pages/home-customize.vue b/src/client/app/desktop/views/pages/home-customize.vue
deleted file mode 100644
index e0460abcd0..0000000000
--- a/src/client/app/desktop/views/pages/home-customize.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-<mk-home customize/>
-</template>
diff --git a/src/client/app/desktop/views/pages/home.vue b/src/client/app/desktop/views/pages/home.vue
deleted file mode 100644
index 19e00880af..0000000000
--- a/src/client/app/desktop/views/pages/home.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-<mk-ui>
-	<mk-home :mode="mode" @loaded="loaded" ref="home" v-hotkey.global="keymap"/>
-</mk-ui>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import Progress from '../../../common/scripts/loading';
-
-export default Vue.extend({
-	props: {
-		mode: {
-			type: String,
-			default: 'timeline'
-		}
-	},
-	computed: {
-		keymap(): any {
-			return {
-				't': this.focus
-			};
-		}
-	},
-	mounted() {
-		document.title = this.$root.instanceName;
-
-		Progress.start();
-	},
-	methods: {
-		loaded() {
-			Progress.done();
-		},
-		focus() {
-			this.$refs.home.focus();
-		}
-	}
-});
-</script>
diff --git a/src/client/app/desktop/views/pages/index.vue b/src/client/app/desktop/views/pages/index.vue
deleted file mode 100644
index c531e00e4f..0000000000
--- a/src/client/app/desktop/views/pages/index.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-<component :is="page"></component>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import Home from './home.vue';
-import Welcome from './welcome.vue';
-import Deck from './deck/deck.vue';
-
-export default Vue.extend({
-	components: {
-		Home,
-		Deck,
-		Welcome
-	},
-
-	computed: {
-		page(): string {
-			if (!this.$store.getters.isSignedIn) return 'welcome';
-			return this.$store.state.device.deckDefault ? 'deck' : 'home';
-		}
-	}
-});
-</script>
diff --git a/src/client/app/desktop/views/pages/note.vue b/src/client/app/desktop/views/pages/note.vue
deleted file mode 100644
index 46d39d0b4a..0000000000
--- a/src/client/app/desktop/views/pages/note.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-<mk-ui>
-	<main v-if="!fetching">
-		<mk-note-detail :note="note"/>
-		<footer>
-			<router-link v-if="note.next" :to="note.next"><fa icon="angle-left"/> {{ $t('next') }}</router-link>
-			<router-link v-if="note.prev" :to="note.prev">{{ $t('prev') }} <fa icon="angle-right"/></router-link>
-		</footer>
-	</main>
-</mk-ui>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../i18n';
-import Progress from '../../../common/scripts/loading';
-
-export default Vue.extend({
-	i18n: i18n('desktop/views/pages/note.vue'),
-	data() {
-		return {
-			fetching: true,
-			note: null
-		};
-	},
-	watch: {
-		$route: 'fetch'
-	},
-	created() {
-		this.fetch();
-	},
-	methods: {
-		fetch() {
-			Progress.start();
-			this.fetching = true;
-
-			this.$root.api('notes/show', {
-				noteId: this.$route.params.note
-			}).then(note => {
-				this.note = note;
-				this.fetching = false;
-
-				Progress.done();
-			});
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-main
-	padding 16px
-	text-align center
-
-	> footer
-		margin-top 16px
-
-		> a
-			display inline-block
-			margin 0 16px
-
-	> .mk-note-detail
-		margin 0 auto
-		width 640px
-
-</style>
diff --git a/src/client/app/desktop/views/pages/tag.vue b/src/client/app/desktop/views/pages/tag.vue
deleted file mode 100644
index 6e5db18af0..0000000000
--- a/src/client/app/desktop/views/pages/tag.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<template>
-<mk-ui>
-	<header :class="$style.header">
-		<h1>#{{ $route.params.tag }}</h1>
-	</header>
-	<p :class="$style.empty" v-if="!fetching && empty"><fa icon="search"/> {{ $t('no-posts-found', { q: $route.params.tag }) }}</p>
-	<mk-notes ref="timeline" :class="$style.notes" :more="existMore ? more : null"/>
-</mk-ui>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../i18n';
-import Progress from '../../../common/scripts/loading';
-
-const limit = 20;
-
-export default Vue.extend({
-	i18n: i18n('desktop/views/pages/tag.vue'),
-	data() {
-		return {
-			fetching: true,
-			moreFetching: false,
-			existMore: false,
-			offset: 0,
-			empty: false
-		};
-	},
-	watch: {
-		$route: 'fetch'
-	},
-	mounted() {
-		document.addEventListener('keydown', this.onDocumentKeydown);
-		window.addEventListener('scroll', this.onScroll, { passive: true });
-
-		this.fetch();
-	},
-	beforeDestroy() {
-		document.removeEventListener('keydown', this.onDocumentKeydown);
-		window.removeEventListener('scroll', this.onScroll);
-	},
-	methods: {
-		onDocumentKeydown(e) {
-			if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
-				if (e.which == 84) { // t
-					(this.$refs.timeline as any).focus();
-				}
-			}
-		},
-		fetch() {
-			this.fetching = true;
-			Progress.start();
-
-			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
-				this.$root.api('notes/search_by_tag', {
-					limit: limit + 1,
-					offset: this.offset,
-					tag: this.$route.params.tag
-				}).then(notes => {
-					if (notes.length == 0) this.empty = true;
-					if (notes.length == limit + 1) {
-						notes.pop();
-						this.existMore = true;
-					}
-					res(notes);
-					this.fetching = false;
-					Progress.done();
-				}, rej);
-			}));
-		},
-		more() {
-			this.offset += limit;
-
-			const promise = this.$root.api('notes/search_by_tag', {
-				limit: limit + 1,
-				offset: this.offset,
-				tag: this.$route.params.tag
-			});
-
-			promise.then(notes => {
-				if (notes.length == limit + 1) {
-					notes.pop();
-				} else {
-					this.existMore = false;
-				}
-				for (const n of notes) {
-					(this.$refs.timeline as any).append(n);
-				}
-				this.moreFetching = false;
-			});
-
-			return promise;
-		}
-	}
-});
-</script>
-
-<style lang="stylus" module>
-.header
-	width 100%
-	max-width 600px
-	margin 0 auto
-	color #555
-
-.notes
-	width 600px
-	margin 0 auto
-	border solid 1px rgba(#000, 0.075)
-	border-radius 6px
-	overflow hidden
-
-.empty
-	display block
-	margin 0 auto
-	padding 32px
-	max-width 400px
-	text-align center
-	color #999
-
-	> [data-icon]
-		display block
-		margin-bottom 16px
-		font-size 3em
-		color #ccc
-
-</style>
diff --git a/src/client/app/desktop/views/pages/user/user.followers-you-know.vue b/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
deleted file mode 100644
index 53949a7943..0000000000
--- a/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-<div class="vahgrswmbzfdlmomxnqftuueyvwaafth">
-	<p class="title"><fa icon="users"/>{{ $t('title') }}</p>
-	<p class="initializing" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('loading') }}<mk-ellipsis/></p>
-	<div v-if="!fetching && users.length > 0">
-	<router-link v-for="user in users" :to="user | userPage" :key="user.id">
-		<img :src="user.avatarUrl" :alt="user | userName" v-user-preview="user.id"/>
-	</router-link>
-	</div>
-	<p class="empty" v-if="!fetching && users.length == 0">{{ $t('no-users') }}</p>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../../i18n';
-
-export default Vue.extend({
-	i18n: i18n('desktop/views/pages/user/user.followers-you-know.vue'),
-	props: ['user'],
-	data() {
-		return {
-			users: [],
-			fetching: true
-		};
-	},
-	mounted() {
-		this.$root.api('users/followers', {
-			userId: this.user.id,
-			iknow: true,
-			limit: 16
-		}).then(x => {
-			this.users = x.users;
-			this.fetching = false;
-		});
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.vahgrswmbzfdlmomxnqftuueyvwaafth
-	background var(--face)
-	box-shadow var(--shadow)
-	border-radius var(--round)
-
-	> .title
-		z-index 1
-		margin 0
-		padding 0 16px
-		line-height 42px
-		font-size 0.9em
-		font-weight bold
-		color var(--faceHeaderText)
-		box-shadow 0 1px rgba(#000, 0.07)
-
-		> i
-			margin-right 4px
-
-	> div
-		padding 8px
-
-		> a
-			display inline-block
-			margin 4px
-
-			> img
-				display inline-block
-				text-align center
-				width 48px
-				height 48px
-				vertical-align bottom
-				border-radius 100%
-
-	> .initializing
-	> .empty
-		margin 0
-		padding 16px
-		text-align center
-		color var(--text)
-
-		> i
-			margin-right 4px
-
-</style>
diff --git a/src/client/app/desktop/views/pages/user/user.friends.vue b/src/client/app/desktop/views/pages/user/user.friends.vue
deleted file mode 100644
index e3182e91fa..0000000000
--- a/src/client/app/desktop/views/pages/user/user.friends.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<template>
-<div class="hozptpaliadatkehcmcayizwzwwctpbc">
-	<p class="title"><fa icon="users"/>{{ $t('title') }}</p>
-	<p class="initializing" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('loading') }}<mk-ellipsis/></p>
-	<template v-if="!fetching && users.length != 0">
-		<div class="user" v-for="friend in users">
-			<mk-avatar class="avatar" :user="friend"/>
-			<div class="body">
-				<router-link class="name" :to="friend | userPage" v-user-preview="friend.id"><mk-user-name :user="friend"/></router-link>
-				<p class="username">@{{ friend | acct }}</p>
-			</div>
-		</div>
-	</template>
-	<p class="empty" v-if="!fetching && users.length == 0">{{ $t('no-users') }}</p>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../../i18n';
-
-export default Vue.extend({
-	i18n: i18n('desktop/views/pages/user/user.friends.vue'),
-	props: ['user'],
-	data() {
-		return {
-			users: [],
-			fetching: true
-		};
-	},
-	mounted() {
-		this.$root.api('users/get_frequently_replied_users', {
-			userId: this.user.id,
-			limit: 4
-		}).then(docs => {
-			this.users = docs.map(doc => doc.user);
-			this.fetching = false;
-		});
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.hozptpaliadatkehcmcayizwzwwctpbc
-	background var(--face)
-	box-shadow var(--shadow)
-	border-radius var(--round)
-	overflow hidden
-
-	> .title
-		z-index 1
-		margin 0
-		padding 0 16px
-		line-height 42px
-		font-size 0.9em
-		font-weight bold
-		background var(--faceHeader)
-		color var(--faceHeaderText)
-		box-shadow 0 1px rgba(#000, 0.07)
-
-		> i
-			margin-right 4px
-
-	> .initializing
-	> .empty
-		margin 0
-		padding 16px
-		text-align center
-		color var(--text)
-
-		> i
-			margin-right 4px
-
-	> .user
-		padding 16px
-		border-bottom solid 1px var(--faceDivider)
-
-		&:last-child
-			border-bottom none
-
-		&:after
-			content ""
-			display block
-			clear both
-
-		> .avatar
-			display block
-			float left
-			margin 0 12px 0 0
-			width 42px
-			height 42px
-			border-radius 8px
-
-		> .body
-			float left
-			width calc(100% - 54px)
-
-			> .name
-				margin 0
-				font-size 16px
-				line-height 24px
-				color var(--text)
-
-			> .username
-				display block
-				margin 0
-				font-size 15px
-				line-height 16px
-				color var(--text)
-				opacity 0.7
-
-</style>
diff --git a/src/client/app/desktop/views/pages/user/user.header.vue b/src/client/app/desktop/views/pages/user/user.header.vue
deleted file mode 100644
index 8352f662c0..0000000000
--- a/src/client/app/desktop/views/pages/user/user.header.vue
+++ /dev/null
@@ -1,253 +0,0 @@
-<template>
-<div class="header" :data-is-dark-background="user.bannerUrl != null">
-	<div class="banner-container" :style="style">
-		<div class="banner" ref="banner" :style="style" @click="onBannerClick"></div>
-		<div class="fade"></div>
-		<div class="title">
-			<p class="name">
-				<mk-user-name :user="user"/>
-			</p>
-			<div>
-				<span class="username"><mk-acct :user="user" :detail="true" /></span>
-				<span v-if="user.isBot" :title="$t('is-bot')"><fa icon="robot"/></span>
-			</div>
-		</div>
-	</div>
-	<mk-avatar class="avatar" :user="user" :disable-preview="true"/>
-	<div class="body">
-		<div class="description">
-			<mfm v-if="user.description" :text="user.description" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/>
-		</div>
-		<div class="fields" v-if="user.fields">
-			<dl class="field" v-for="(field, i) in user.fields" :key="i">
-				<dt class="name">
-					<mfm :text="field.name" :should-break="false" :plain-text="true" :custom-emojis="user.emojis"/>
-				</dt>
-				<dd class="value">
-					<mfm :text="field.value" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/>
-				</dd>
-			</dl>
-		</div>
-		<div class="info">
-			<span class="location" v-if="user.host === null && user.profile.location"><fa icon="map-marker"/> {{ user.profile.location }}</span>
-			<span class="birthday" v-if="user.host === null && user.profile.birthday"><fa icon="birthday-cake"/> {{ user.profile.birthday.replace('-', $t('year')).replace('-', $t('month')) + $t('day') }} ({{ $t('years-old', { age }) }})</span>
-		</div>
-		<div class="status">
-			<span class="notes-count"><b>{{ user.notesCount | number }}</b>{{ $t('posts') }}</span>
-			<router-link :to="user | userPage('following')" class="following clickable"><b>{{ user.followingCount | number }}</b>{{ $t('following') }}</router-link>
-			<router-link :to="user | userPage('followers')" class="followers clickable"><b>{{ user.followersCount | number }}</b>{{ $t('followers') }}</router-link>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../../i18n';
-import * as age from 's-age';
-
-export default Vue.extend({
-	i18n: i18n('desktop/views/pages/user/user.header.vue'),
-	props: ['user'],
-	computed: {
-		style(): any {
-			if (this.user.bannerUrl == null) return {};
-			return {
-				backgroundColor: this.user.bannerColor && this.user.bannerColor.length == 3 ? `rgb(${ this.user.bannerColor.join(',') })` : null,
-				backgroundImage: `url(${ this.user.bannerUrl })`
-			};
-		},
-
-		age(): number {
-			return age(this.user.profile.birthday);
-		}
-	},
-	mounted() {
-		if (this.user.bannerUrl) {
-			//window.addEventListener('load', this.onScroll);
-			//window.addEventListener('scroll', this.onScroll, { passive: true });
-			//window.addEventListener('resize', this.onScroll);
-		}
-	},
-	beforeDestroy() {
-		if (this.user.bannerUrl) {
-			//window.removeEventListener('load', this.onScroll);
-			//window.removeEventListener('scroll', this.onScroll);
-			//window.removeEventListener('resize', this.onScroll);
-		}
-	},
-	methods: {
-		mention() {
-			this.$post({ mention: this.user });
-		},
-		onScroll() {
-			const banner = this.$refs.banner as any;
-
-			const top = window.scrollY;
-
-			const z = 1.25; // 奥行き(小さいほど奥)
-			const pos = -(top / z);
-			banner.style.backgroundPosition = `center calc(50% - ${pos}px)`;
-
-			const blur = top / 32
-			if (blur <= 10) banner.style.filter = `blur(${blur}px)`;
-		},
-
-		onBannerClick() {
-			if (!this.$store.getters.isSignedIn || this.$store.state.i.id != this.user.id) return;
-
-			this.$updateBanner().then(i => {
-				this.user.bannerUrl = i.bannerUrl;
-			});
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.header
-	background var(--face)
-	box-shadow var(--shadow)
-	border-radius var(--round)
-	overflow hidden
-
-	&[data-is-dark-background]
-		> .banner-container
-			> .banner
-				background-color #383838
-
-			> .fade
-				background linear-gradient(transparent, rgba(#000, 0.7))
-
-			> .title
-				color #fff
-
-				> .name
-					text-shadow 0 0 8px #000
-
-	> .banner-container
-		height 250px
-		overflow hidden
-		background-size cover
-		background-position center
-
-		> .banner
-			height 100%
-			background-color #bfccd0
-			background-size cover
-			background-position center
-
-		> .fade
-			position absolute
-			bottom 0
-			left 0
-			width 100%
-			height 78px
-
-		> .title
-			position absolute
-			bottom 0
-			left 0
-			width 100%
-			padding 0 0 8px 154px
-			color #5e6367
-
-			> .name
-				display block
-				margin 0
-				line-height 32px
-				font-weight bold
-				font-size 1.8em
-
-			> div
-				> *
-					display inline-block
-					margin-right 16px
-					line-height 20px
-					opacity 0.8
-
-					&.username
-						font-weight bold
-
-	> .avatar
-		display block
-		position absolute
-		top 170px
-		left 16px
-		z-index 2
-		width 120px
-		height 120px
-		box-shadow 1px 1px 3px rgba(#000, 0.2)
-
-		> &.cat::before,
-		> &.cat::after
-			border-width 8px
-
-	> .body
-		padding 16px 16px 16px 154px
-		color var(--text)
-
-		> .fields
-			margin-top 16px
-
-			> .field
-				display flex
-				padding 0
-				margin 0
-				align-items center
-
-				> .name
-					border-right solid 1px var(--faceDivider)
-					padding 4px
-					margin 4px
-					width 30%
-					overflow hidden
-					white-space nowrap
-					text-overflow ellipsis
-					font-weight bold
-					text-align center
-
-				> .value
-					padding 4px
-					margin 4px
-					width 70%
-					overflow hidden
-					white-space nowrap
-					text-overflow ellipsis
-
-		> .info
-			margin-top 16px
-			padding-top 16px
-			border-top solid 1px var(--faceDivider)
-
-			> *
-				margin-right 16px
-
-		> .status
-			margin-top 16px
-			padding-top 16px
-			border-top solid 1px var(--faceDivider)
-			font-size 80%
-
-			> *
-				display inline-block
-				padding-right 16px
-				margin-right 16px
-				color inherit
-
-				&:not(:last-child)
-					border-right solid 1px var(--faceDivider)
-
-				&.clickable
-					cursor pointer
-
-					&:hover
-						color var(--faceTextButtonHover)
-
-				> b
-					margin-right 4px
-					font-size 1rem
-					font-weight bold
-					color var(--primary)
-
-</style>
diff --git a/src/client/app/desktop/views/pages/user/user.integrations.integration.vue b/src/client/app/desktop/views/pages/user/user.integrations.integration.vue
deleted file mode 100644
index 4791226881..0000000000
--- a/src/client/app/desktop/views/pages/user/user.integrations.integration.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-<a :href="url" :class="service" target="_blank">
-	<fa :icon="icon" size="lg" fixed-width />
-	<div>{{ text }}</div>
-</a>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	props: ['url', 'text', 'icon', 'service']
-});
-</script>
diff --git a/src/client/app/desktop/views/pages/user/user.integrations.vue b/src/client/app/desktop/views/pages/user/user.integrations.vue
deleted file mode 100644
index d796ff9321..0000000000
--- a/src/client/app/desktop/views/pages/user/user.integrations.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-<div class="usertwitxxxgithxxdiscxxxintegrat" :v-if="user.twitter || user.github || user.discord">
-	<x-integration v-if="user.twitter" service="twitter" :url="`https://twitter.com/${user.twitter.screenName}`" :text="user.twitter.screenName" :icon="['fab', 'twitter']"/>
-	<x-integration v-if="user.github" service="github" :url="`https://github.com/${user.github.login}`" :text="user.github.login" :icon="['fab', 'github']"/>
-	<x-integration v-if="user.discord" service="discord" :url="`https://discordapp.com/users/${user.discord.id}`" :text="`${user.discord.username}#${user.discord.discriminator}`" :icon="['fab', 'discord']"/>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import XIntegration from './user.integrations.integration.vue';
-
-export default Vue.extend({
-	components: {
-		XIntegration
-	},
-	props: ['user']
-});
-</script>
-
-<style lang="stylus" scoped>
-.usertwitxxxgithxxdiscxxxintegrat
-	> a
-		display flex
-		align-items center
-		padding 32px 38px
-		box-shadow var(--shadow)
-		border-radius var(--round)
-
-		&:not(:last-child)
-			margin-bottom 16px
-
-		&:hover
-			text-decoration none
-
-		> div
-			padding-left .2em
-			line-height 1.3em
-			flex 1 0
-			word-wrap anywhere
-
-		&.twitter
-			color #fff
-			background #1da1f3
-
-			&:hover
-				background #0c87cf
-
-		&.github
-			color #fff
-			background #171515
-
-			&:hover
-				background #000
-
-		&.discord
-			color #fff
-			background #7289da
-
-			&:hover
-				background #4968ce
-
-</style>
diff --git a/src/client/app/desktop/views/pages/user/user.photos.vue b/src/client/app/desktop/views/pages/user/user.photos.vue
deleted file mode 100644
index 13645b9314..0000000000
--- a/src/client/app/desktop/views/pages/user/user.photos.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<template>
-<div class="dzsuvbsrrrwobdxifudxuefculdfiaxd">
-	<p class="title"><fa icon="camera"/>{{ $t('title') }}</p>
-	<p class="initializing" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('loading') }}<mk-ellipsis/></p>
-	<div class="stream" v-if="!fetching && images.length > 0">
-		<div v-for="(image, i) in images" :key="i" class="img"
-			:style="`background-image: url(${thumbnail(image)})`"
-		></div>
-	</div>
-	<p class="empty" v-if="!fetching && images.length == 0">{{ $t('no-photos') }}</p>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../../i18n';
-import { getStaticImageUrl } from '../../../../common/scripts/get-static-image-url';
-
-export default Vue.extend({
-	i18n: i18n('desktop/views/pages/user/user.photos.vue'),
-	props: ['user'],
-	data() {
-		return {
-			images: [],
-			fetching: true
-		};
-	},
-	mounted() {
-		const image = [
-			'image/jpeg',
-			'image/png',
-			'image/gif'
-		];
-
-		this.$root.api('users/notes', {
-			userId: this.user.id,
-			fileType: image,
-			excludeNsfw: !this.$store.state.device.alwaysShowNsfw,
-			limit: 9,
-			untilDate: new Date().getTime() + 1000 * 86400 * 365
-		}).then(notes => {
-			for (const note of notes) {
-				for (const file of note.files) {
-					if (this.images.length < 9) this.images.push(file);
-				}
-			}
-			this.fetching = false;
-		});
-	},
-	methods: {
-		thumbnail(image: any): string {
-			return this.$store.state.device.disableShowingAnimatedImages
-				? getStaticImageUrl(image.thumbnailUrl)
-				: image.thumbnailUrl;
-		},
-	},
-});
-</script>
-
-<style lang="stylus" scoped>
-.dzsuvbsrrrwobdxifudxuefculdfiaxd
-	background var(--face)
-	box-shadow var(--shadow)
-	border-radius var(--round)
-	overflow hidden
-
-	> .title
-		z-index 1
-		margin 0
-		padding 0 16px
-		line-height 42px
-		font-size 0.9em
-		font-weight bold
-		background var(--faceHeader)
-		color var(--faceHeaderText)
-		box-shadow 0 1px rgba(#000, 0.07)
-
-		> i
-			margin-right 4px
-
-	> .stream
-		display flex
-		justify-content center
-		flex-wrap wrap
-		padding 8px
-
-		> .img
-			flex 1 1 33%
-			width 33%
-			height 80px
-			background-position center center
-			background-size cover
-			background-clip content-box
-			border solid 2px transparent
-
-	> .initializing
-	> .empty
-		margin 0
-		padding 16px
-		text-align center
-		color var(--text)
-
-		> i
-			margin-right 4px
-
-</style>
diff --git a/src/client/app/desktop/views/pages/user/user.profile.vue b/src/client/app/desktop/views/pages/user/user.profile.vue
deleted file mode 100644
index 026f84dc8a..0000000000
--- a/src/client/app/desktop/views/pages/user/user.profile.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-<div class="profile" v-if="$store.getters.isSignedIn">
-	<div class="friend-form" v-if="$store.state.i.id != user.id">
-		<mk-follow-button :user="user" block/>
-		<p class="followed" v-if="user.isFollowed">{{ $t('follows-you') }}</p>
-	</div>
-	<div class="action-form">
-		<ui-button @click="menu" ref="menu">{{ $t('menu') }}</ui-button>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../../i18n';
-import XUserMenu from '../../../../common/views/components/user-menu.vue';
-
-export default Vue.extend({
-	i18n: i18n('desktop/views/pages/user/user.profile.vue'),
-	props: ['user'],
-
-	methods: {
-		menu() {
-			this.$root.new(XUserMenu, {
-				source: this.$refs.menu.$el,
-				user: this.user
-			});
-		},
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.profile
-	background var(--face)
-	box-shadow var(--shadow)
-	border-radius var(--round)
-
-	> *:first-child
-		border-top none !important
-
-	> .friend-form
-		padding 16px
-		text-align center
-		border-bottom solid 1px var(--faceDivider)
-
-		> .followed
-			margin 12px 0 0 0
-			padding 0
-			text-align center
-			line-height 24px
-			font-size 0.8em
-			color var(--text)
-			border-radius 4px
-
-	> .action-form
-		padding 16px
-		text-align center
-
-		> *
-			width 100%
-
-			&:not(:last-child)
-				margin-bottom 12px
-
-</style>
diff --git a/src/client/app/desktop/views/pages/user/user.timeline.vue b/src/client/app/desktop/views/pages/user/user.timeline.vue
deleted file mode 100644
index 0571ce76f1..0000000000
--- a/src/client/app/desktop/views/pages/user/user.timeline.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<template>
-<div class="oh5y2r7l5lx8j6jj791ykeiwgihheguk">
-	<header>
-		<span :data-active="mode == 'default'" @click="mode = 'default'"><fa :icon="['far', 'comment-alt']"/> {{ $t('default') }}</span>
-		<span :data-active="mode == 'with-replies'" @click="mode = 'with-replies'"><fa icon="comments"/> {{ $t('with-replies') }}</span>
-		<span :data-active="mode == 'with-media'" @click="mode = 'with-media'"><fa :icon="['far', 'images']"/> {{ $t('with-media') }}</span>
-		<span :data-active="mode == 'my-posts'" @click="mode = 'my-posts'"><fa icon="user"/> {{ $t('my-posts') }}</span>
-	</header>
-	<mk-notes ref="timeline" :more="existMore ? more : null">
-		<p class="empty" slot="empty"><fa :icon="['far', 'comments']"/>{{ $t('empty') }}</p>
-	</mk-notes>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../../i18n';
-
-const fetchLimit = 10;
-
-export default Vue.extend({
-	i18n: i18n('desktop/views/pages/user/user.timeline.vue'),
-	props: ['user'],
-
-	data() {
-		return {
-			fetching: true,
-			moreFetching: false,
-			existMore: false,
-			mode: 'default',
-			unreadCount: 0,
-			date: null
-		};
-	},
-
-	watch: {
-		mode() {
-			this.fetch();
-		}
-	},
-
-	mounted() {
-		document.addEventListener('keydown', this.onDocumentKeydown);
-
-		this.fetch(() => this.$emit('loaded'));
-	},
-
-	beforeDestroy() {
-		document.removeEventListener('keydown', this.onDocumentKeydown);
-	},
-
-	methods: {
-		onDocumentKeydown(e) {
-			if (e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA') {
-				if (e.which == 84) { // [t]
-					(this.$refs.timeline as any).focus();
-				}
-			}
-		},
-
-		fetch(cb?) {
-			this.fetching = true;
-			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
-				this.$root.api('users/notes', {
-					userId: this.user.id,
-					limit: fetchLimit + 1,
-					untilDate: this.date ? this.date.getTime() : new Date().getTime() + 1000 * 86400 * 365,
-					includeReplies: this.mode == 'with-replies',
-					includeMyRenotes: this.mode != 'my-posts',
-					withFiles: this.mode == 'with-media'
-				}).then(notes => {
-					if (notes.length == fetchLimit + 1) {
-						notes.pop();
-						this.existMore = true;
-					}
-					res(notes);
-					this.fetching = false;
-					if (cb) cb();
-				}, rej);
-			}));
-		},
-
-		more() {
-			this.moreFetching = true;
-
-			const promise = this.$root.api('users/notes', {
-				userId: this.user.id,
-				limit: fetchLimit + 1,
-				includeReplies: this.mode == 'with-replies',
-				includeMyRenotes: this.mode != 'my-posts',
-				withFiles: this.mode == 'with-media',
-				untilDate: new Date((this.$refs.timeline as any).tail().createdAt).getTime()
-			});
-
-			promise.then(notes => {
-				if (notes.length == fetchLimit + 1) {
-					notes.pop();
-				} else {
-					this.existMore = false;
-				}
-				for (const n of notes) {
-					(this.$refs.timeline as any).append(n);
-				}
-				this.moreFetching = false;
-			});
-
-			return promise;
-		},
-
-		warp(date) {
-			this.date = date;
-			this.fetch();
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.oh5y2r7l5lx8j6jj791ykeiwgihheguk
-	background var(--face)
-	border-radius var(--round)
-	overflow hidden
-
-	> header
-		padding 0 8px
-		z-index 10
-		background var(--faceHeader)
-		box-shadow 0 1px var(--desktopTimelineHeaderShadow)
-
-		> span
-			display inline-block
-			padding 0 10px
-			line-height 42px
-			font-size 12px
-			user-select none
-
-			&[data-active]
-				color var(--primary)
-				cursor default
-				font-weight bold
-
-				&:before
-					content ""
-					display block
-					position absolute
-					bottom 0
-					left -8px
-					width calc(100% + 16px)
-					height 2px
-					background var(--primary)
-
-			&:not([data-active])
-				color var(--desktopTimelineSrc)
-				cursor pointer
-
-				&:hover
-					color var(--desktopTimelineSrcHover)
-
-	> .mk-notes
-
-		> .empty
-			display block
-			margin 0 auto
-			padding 32px
-			max-width 400px
-			text-align center
-			color var(--text)
-
-			> [data-icon]
-				display block
-				margin-bottom 16px
-				font-size 3em
-				color var(--faceHeaderText);
-
-</style>
diff --git a/src/client/app/desktop/views/pages/user/user.vue b/src/client/app/desktop/views/pages/user/user.vue
deleted file mode 100644
index 19f646927b..0000000000
--- a/src/client/app/desktop/views/pages/user/user.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<template>
-<mk-ui>
-	<div class="xygkxeaeontfaokvqmiblezmhvhostak" v-if="!fetching">
-		<div class="is-suspended" v-if="user.isSuspended"><fa icon="exclamation-triangle"/> {{ $t('@.user-suspended') }}</div>
-		<div class="is-remote" v-if="user.host != null"><fa icon="exclamation-triangle"/> {{ $t('@.is-remote-user') }}<a :href="user.url || user.uri" target="_blank">{{ $t('@.view-on-remote') }}</a></div>
-		<main>
-			<div class="main">
-				<x-header :user="user"/>
-				<mk-note-detail v-for="n in user.pinnedNotes" :key="n.id" :note="n" :compact="true"/>
-				<x-timeline class="timeline" ref="tl" :user="user"/>
-			</div>
-			<div class="side">
-				<div class="instance" v-if="!$store.getters.isSignedIn"><mk-instance/></div>
-				<x-profile :user="user"/>
-				<x-integrations :user="user"/>
-				<mk-calendar @chosen="warp" :start="new Date(user.createdAt)"/>
-				<mk-activity :user="user"/>
-				<x-photos :user="user"/>
-				<x-friends :user="user"/>
-				<x-followers-you-know v-if="$store.getters.isSignedIn && $store.state.i.id != user.id" :user="user"/>
-				<div class="nav"><mk-nav/></div>
-			</div>
-		</main>
-	</div>
-</mk-ui>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../../i18n';
-import parseAcct from '../../../../../../misc/acct/parse';
-import Progress from '../../../../common/scripts/loading';
-import XHeader from './user.header.vue';
-import XTimeline from './user.timeline.vue';
-import XProfile from './user.profile.vue';
-import XPhotos from './user.photos.vue';
-import XFollowersYouKnow from './user.followers-you-know.vue';
-import XFriends from './user.friends.vue';
-import XIntegrations from './user.integrations.vue';
-
-export default Vue.extend({
-	i18n: i18n(),
-	components: {
-		XHeader,
-		XTimeline,
-		XProfile,
-		XPhotos,
-		XFollowersYouKnow,
-		XFriends,
-		XIntegrations
-	},
-	data() {
-		return {
-			fetching: true,
-			user: null
-		};
-	},
-	watch: {
-		$route: 'fetch'
-	},
-	created() {
-		this.fetch();
-	},
-	methods: {
-		fetch() {
-			this.fetching = true;
-			Progress.start();
-			this.$root.api('users/show', parseAcct(this.$route.params.user)).then(user => {
-				this.user = user;
-				this.fetching = false;
-				Progress.done();
-			});
-		},
-
-		warp(date) {
-			(this.$refs.tl as any).warp(date);
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.xygkxeaeontfaokvqmiblezmhvhostak
-	max-width 980px
-	min-width 720px
-	padding 16px
-	margin 0 auto
-
-	> .is-suspended
-	> .is-remote
-		margin-bottom 16px
-		padding 14px 16px
-		font-size 14px
-		box-shadow var(--shadow)
-		border-radius var(--round)
-
-		&.is-suspended
-			color var(--suspendedInfoFg)
-			background var(--suspendedInfoBg)
-
-		&.is-remote
-			color var(--remoteInfoFg)
-			background var(--remoteInfoBg)
-
-		> a
-			font-weight bold
-
-	> main
-		display flex
-		justify-content center
-
-		> .main
-		> .side
-			> *:not(:last-child)
-				margin-bottom 16px
-
-		> .main
-			flex 1
-			min-width 0 // SEE: http://kudakurage.hatenadiary.com/entry/2016/04/01/232722
-			margin-right 16px
-
-			> .timeline
-				box-shadow var(--shadow)
-
-		> .side
-			width 275px
-			flex-shrink 0
-
-			> p
-				display block
-				margin 0
-				padding 0 12px
-				text-align center
-				font-size 0.8em
-				color var(--text)
-
-			> .instance
-				box-shadow var(--shadow)
-				border-radius var(--round)
-
-			> .nav
-				padding 16px
-				font-size 12px
-				color var(--text)
-				background var(--face)
-				box-shadow var(--shadow)
-				border-radius var(--round)
-
-				a
-					color var(--text)99
-
-				i
-					color var(--text)
-
-</style>
diff --git a/src/client/app/desktop/views/widgets/customize.vue b/src/client/app/desktop/views/widgets/customize.vue
new file mode 100644
index 0000000000..eb71910382
--- /dev/null
+++ b/src/client/app/desktop/views/widgets/customize.vue
@@ -0,0 +1,21 @@
+<template>
+<div class="mkw-customize">
+	<ui-button @click="customize()">{{ $t('@.customize-home') }}</ui-button>
+</div>
+</template>
+
+<script lang="ts">
+import define from '../../../common/define-widget';
+import i18n from '../../../i18n';
+
+export default define({
+	name: 'customize',
+}).extend({
+	i18n: i18n(),
+	methods: {
+		customize(date) {
+			location.href = '/?customize';
+		}
+	}
+});
+</script>
diff --git a/src/client/app/desktop/views/widgets/index.ts b/src/client/app/desktop/views/widgets/index.ts
index 7c074080c1..38a661671f 100644
--- a/src/client/app/desktop/views/widgets/index.ts
+++ b/src/client/app/desktop/views/widgets/index.ts
@@ -9,6 +9,7 @@ import wPolls from './polls.vue';
 import wPostForm from './post-form.vue';
 import wMessaging from './messaging.vue';
 import wProfile from './profile.vue';
+import wCustomize from './customize.vue';
 
 Vue.component('mkw-notifications', wNotifications);
 Vue.component('mkw-timemachine', wTimemachine);
@@ -19,3 +20,4 @@ Vue.component('mkw-polls', wPolls);
 Vue.component('mkw-post-form', wPostForm);
 Vue.component('mkw-messaging', wMessaging);
 Vue.component('mkw-profile', wProfile);
+Vue.component('mkw-customize', wCustomize);
-- 
cgit v1.2.3-freya