From e1259409e914baaa399e2866feb887b3beddbdf7 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 20 Feb 2018 22:53:34 +0900
Subject: wip

---
 src/web/app/config.ts                              |   2 +
 src/web/app/desktop/api/post.ts                    |   6 +
 src/web/app/desktop/script.ts                      |   4 +-
 src/web/app/desktop/views/components/index.ts      |  14 --
 .../desktop/views/components/ui-header-account.vue | 212 ---------------------
 .../desktop/views/components/ui-header-clock.vue   | 109 -----------
 .../app/desktop/views/components/ui-header-nav.vue | 152 ---------------
 .../views/components/ui-header-notifications.vue   | 156 ---------------
 .../views/components/ui-header-post-button.vue     |  52 -----
 .../desktop/views/components/ui-header-search.vue  |  68 -------
 src/web/app/desktop/views/components/ui-header.vue |  86 ---------
 .../desktop/views/components/ui.header.account.vue | 212 +++++++++++++++++++++
 .../desktop/views/components/ui.header.clock.vue   | 109 +++++++++++
 .../app/desktop/views/components/ui.header.nav.vue | 154 +++++++++++++++
 .../views/components/ui.header.notifications.vue   | 156 +++++++++++++++
 .../desktop/views/components/ui.header.post.vue    |  52 +++++
 .../desktop/views/components/ui.header.search.vue  |  68 +++++++
 src/web/app/desktop/views/components/ui.header.vue | 107 +++++++++++
 src/web/app/desktop/views/components/ui.vue        |  14 +-
 .../views/pages/user/user-followers-you-know.vue   |   2 +-
 .../app/desktop/views/pages/user/user-friends.vue  |   4 +-
 src/web/app/desktop/views/pages/user/user.vue      |  29 ++-
 src/web/app/init.ts                                |   2 +
 23 files changed, 899 insertions(+), 871 deletions(-)
 create mode 100644 src/web/app/desktop/api/post.ts
 delete mode 100644 src/web/app/desktop/views/components/ui-header-account.vue
 delete mode 100644 src/web/app/desktop/views/components/ui-header-clock.vue
 delete mode 100644 src/web/app/desktop/views/components/ui-header-nav.vue
 delete mode 100644 src/web/app/desktop/views/components/ui-header-notifications.vue
 delete mode 100644 src/web/app/desktop/views/components/ui-header-post-button.vue
 delete mode 100644 src/web/app/desktop/views/components/ui-header-search.vue
 delete mode 100644 src/web/app/desktop/views/components/ui-header.vue
 create mode 100644 src/web/app/desktop/views/components/ui.header.account.vue
 create mode 100644 src/web/app/desktop/views/components/ui.header.clock.vue
 create mode 100644 src/web/app/desktop/views/components/ui.header.nav.vue
 create mode 100644 src/web/app/desktop/views/components/ui.header.notifications.vue
 create mode 100644 src/web/app/desktop/views/components/ui.header.post.vue
 create mode 100644 src/web/app/desktop/views/components/ui.header.search.vue
 create mode 100644 src/web/app/desktop/views/components/ui.header.vue

(limited to 'src/web/app')

diff --git a/src/web/app/config.ts b/src/web/app/config.ts
index 25381ecce7..2461b22158 100644
--- a/src/web/app/config.ts
+++ b/src/web/app/config.ts
@@ -5,6 +5,7 @@ declare const _DOCS_URL_: string;
 declare const _STATS_URL_: string;
 declare const _STATUS_URL_: string;
 declare const _DEV_URL_: string;
+declare const _CH_URL_: string;
 declare const _LANG_: string;
 declare const _RECAPTCHA_SITEKEY_: string;
 declare const _SW_PUBLICKEY_: string;
@@ -19,6 +20,7 @@ export const docsUrl = _DOCS_URL_;
 export const statsUrl = _STATS_URL_;
 export const statusUrl = _STATUS_URL_;
 export const devUrl = _DEV_URL_;
+export const chUrl = _CH_URL_;
 export const lang = _LANG_;
 export const recaptchaSitekey = _RECAPTCHA_SITEKEY_;
 export const swPublickey = _SW_PUBLICKEY_;
diff --git a/src/web/app/desktop/api/post.ts b/src/web/app/desktop/api/post.ts
new file mode 100644
index 0000000000..4eebd747fb
--- /dev/null
+++ b/src/web/app/desktop/api/post.ts
@@ -0,0 +1,6 @@
+import PostFormWindow from '../views/components/post-form-window.vue';
+
+export default function() {
+	const vm = new PostFormWindow().$mount();
+	document.body.appendChild(vm.$el);
+}
diff --git a/src/web/app/desktop/script.ts b/src/web/app/desktop/script.ts
index 7278c9af17..251a2a1619 100644
--- a/src/web/app/desktop/script.ts
+++ b/src/web/app/desktop/script.ts
@@ -14,6 +14,7 @@ import chooseDriveFolder from './api/choose-drive-folder';
 import chooseDriveFile from './api/choose-drive-file';
 import dialog from './api/dialog';
 import input from './api/input';
+import post from './api/post';
 
 import MkIndex from './views/pages/index.vue';
 import MkUser from './views/pages/user/user.vue';
@@ -37,7 +38,8 @@ init(async (launch) => {
 		chooseDriveFolder,
 		chooseDriveFile,
 		dialog,
-		input
+		input,
+		post
 	});
 
 	/**
diff --git a/src/web/app/desktop/views/components/index.ts b/src/web/app/desktop/views/components/index.ts
index 8e48d67b98..fb8ded9c04 100644
--- a/src/web/app/desktop/views/components/index.ts
+++ b/src/web/app/desktop/views/components/index.ts
@@ -1,13 +1,6 @@
 import Vue from 'vue';
 
 import ui from './ui.vue';
-import uiHeader from './ui-header.vue';
-import uiHeaderAccount from './ui-header-account.vue';
-import uiHeaderClock from './ui-header-clock.vue';
-import uiHeaderNav from './ui-header-nav.vue';
-import uiHeaderNotifications from './ui-header-notifications.vue';
-import uiHeaderPostButton from './ui-header-post-button.vue';
-import uiHeaderSearch from './ui-header-search.vue';
 import uiNotification from './ui-notification.vue';
 import home from './home.vue';
 import timeline from './timeline.vue';
@@ -46,13 +39,6 @@ import wBroadcast from './widgets/broadcast.vue';
 import wTimemachine from './widgets/timemachine.vue';
 
 Vue.component('mk-ui', ui);
-Vue.component('mk-ui-header', uiHeader);
-Vue.component('mk-ui-header-account', uiHeaderAccount);
-Vue.component('mk-ui-header-clock', uiHeaderClock);
-Vue.component('mk-ui-header-nav', uiHeaderNav);
-Vue.component('mk-ui-header-notifications', uiHeaderNotifications);
-Vue.component('mk-ui-header-post-button', uiHeaderPostButton);
-Vue.component('mk-ui-header-search', uiHeaderSearch);
 Vue.component('mk-ui-notification', uiNotification);
 Vue.component('mk-home', home);
 Vue.component('mk-timeline', timeline);
diff --git a/src/web/app/desktop/views/components/ui-header-account.vue b/src/web/app/desktop/views/components/ui-header-account.vue
deleted file mode 100644
index 337c47674e..0000000000
--- a/src/web/app/desktop/views/components/ui-header-account.vue
+++ /dev/null
@@ -1,212 +0,0 @@
-<template>
-<div class="mk-ui-header-account">
-	<button class="header" :data-active="isOpen" @click="toggle">
-		<span class="username">{{ os.i.username }}<template v-if="!isOpen">%fa:angle-down%</template><template v-if="isOpen">%fa:angle-up%</template></span>
-		<img class="avatar" :src="`${ os.i.avatar_url }?thumbnail&size=64`" alt="avatar"/>
-	</button>
-	<div class="menu" v-if="isOpen">
-		<ul>
-			<li>
-				<a :href="`/${ os.i.username }`">%fa:user%%i18n:desktop.tags.mk-ui-header-account.profile%%fa:angle-right%</a>
-			</li>
-			<li @click="drive">
-				<p>%fa:cloud%%i18n:desktop.tags.mk-ui-header-account.drive%%fa:angle-right%</p>
-			</li>
-			<li>
-				<a href="/i/mentions">%fa:at%%i18n:desktop.tags.mk-ui-header-account.mentions%%fa:angle-right%</a>
-			</li>
-		</ul>
-		<ul>
-			<li @click="settings">
-				<p>%fa:cog%%i18n:desktop.tags.mk-ui-header-account.settings%%fa:angle-right%</p>
-			</li>
-		</ul>
-		<ul>
-			<li @click="signout">
-				<p>%fa:power-off%%i18n:desktop.tags.mk-ui-header-account.signout%%fa:angle-right%</p>
-			</li>
-		</ul>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import MkSettingsWindow from './settings-window.vue';
-import MkDriveWindow from './drive-window.vue';
-import contains from '../../../common/scripts/contains';
-import signout from '../../../common/scripts/signout';
-
-export default Vue.extend({
-	data() {
-		return {
-			isOpen: false,
-			signout
-		};
-	},
-	beforeDestroy() {
-		this.close();
-	},
-	methods: {
-		toggle() {
-			this.isOpen ? this.close() : this.open();
-		},
-		open() {
-			this.isOpen = true;
-			Array.from(document.querySelectorAll('body *')).forEach(el => {
-				el.addEventListener('mousedown', this.onMousedown);
-			});
-		},
-		close() {
-			this.isOpen = false;
-			Array.from(document.querySelectorAll('body *')).forEach(el => {
-				el.removeEventListener('mousedown', this.onMousedown);
-			});
-		},
-		onMousedown(e) {
-			e.preventDefault();
-			if (!contains(this.$el, e.target) && this.$el != e.target) this.close();
-			return false;
-		},
-		drive() {
-			this.close();
-			document.body.appendChild(new MkDriveWindow().$mount().$el);
-		},
-		settings() {
-			this.close();
-			document.body.appendChild(new MkSettingsWindow().$mount().$el);
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-ui-header-account
-	> .header
-		display block
-		margin 0
-		padding 0
-		color #9eaba8
-		border none
-		background transparent
-		cursor pointer
-
-		*
-			pointer-events none
-
-		&:hover
-		&[data-active='true']
-			color darken(#9eaba8, 20%)
-
-			> .avatar
-				filter saturate(150%)
-
-		&:active
-			color darken(#9eaba8, 30%)
-
-		> .username
-			display block
-			float left
-			margin 0 12px 0 16px
-			max-width 16em
-			line-height 48px
-			font-weight bold
-			font-family Meiryo, sans-serif
-			text-decoration none
-
-			[data-fa]
-				margin-left 8px
-
-		> .avatar
-			display block
-			float left
-			min-width 32px
-			max-width 32px
-			min-height 32px
-			max-height 32px
-			margin 8px 8px 8px 0
-			border-radius 4px
-			transition filter 100ms ease
-
-	> .menu
-		display block
-		position absolute
-		top 56px
-		right -2px
-		width 230px
-		font-size 0.8em
-		background #fff
-		border-radius 4px
-		box-shadow 0 1px 4px rgba(0, 0, 0, 0.25)
-
-		&:before
-			content ""
-			pointer-events none
-			display block
-			position absolute
-			top -28px
-			right 12px
-			border-top solid 14px transparent
-			border-right solid 14px transparent
-			border-bottom solid 14px rgba(0, 0, 0, 0.1)
-			border-left solid 14px transparent
-
-		&:after
-			content ""
-			pointer-events none
-			display block
-			position absolute
-			top -27px
-			right 12px
-			border-top solid 14px transparent
-			border-right solid 14px transparent
-			border-bottom solid 14px #fff
-			border-left solid 14px transparent
-
-		ul
-			display block
-			margin 10px 0
-			padding 0
-			list-style none
-
-			& + ul
-				padding-top 10px
-				border-top solid 1px #eee
-
-			> li
-				display block
-				margin 0
-				padding 0
-
-				> a
-				> p
-					display block
-					z-index 1
-					padding 0 28px
-					margin 0
-					line-height 40px
-					color #868C8C
-					cursor pointer
-
-					*
-						pointer-events none
-
-					> [data-fa]:first-of-type
-						margin-right 6px
-
-					> [data-fa]:last-of-type
-						display block
-						position absolute
-						top 0
-						right 8px
-						z-index 1
-						padding 0 20px
-						font-size 1.2em
-						line-height 40px
-
-					&:hover, &:active
-						text-decoration none
-						background $theme-color
-						color $theme-color-foreground
-
-</style>
diff --git a/src/web/app/desktop/views/components/ui-header-clock.vue b/src/web/app/desktop/views/components/ui-header-clock.vue
deleted file mode 100644
index cfed1e84a6..0000000000
--- a/src/web/app/desktop/views/components/ui-header-clock.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-<div class="mk-ui-header-clock">
-	<div class="header">
-		<time ref="time">
-			<span class="yyyymmdd">{{ yyyy }}/{{ mm }}/{{ dd }}</span>
-			<br>
-			<span class="hhnn">{{ hh }}<span :style="{ visibility: now.getSeconds() % 2 == 0 ? 'visible' : 'hidden' }">:</span>{{ nn }}</span>
-		</time>
-	</div>
-	<div class="content">
-		<mk-analog-clock/>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	data() {
-		return {
-			now: new Date(),
-			clock: null
-		};
-	},
-	computed: {
-		yyyy(): number {
-			return this.now.getFullYear();
-		},
-		mm(): string {
-			return ('0' + (this.now.getMonth() + 1)).slice(-2);
-		},
-		dd(): string {
-			return ('0' + this.now.getDate()).slice(-2);
-		},
-		hh(): string {
-			return ('0' + this.now.getHours()).slice(-2);
-		},
-		nn(): string {
-			return ('0' + this.now.getMinutes()).slice(-2);
-		}
-	},
-	mounted() {
-		this.tick();
-		this.clock = setInterval(this.tick, 1000);
-	},
-	beforeDestroy() {
-		clearInterval(this.clock);
-	},
-	methods: {
-		tick() {
-			this.now = new Date();
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-ui-header-clock
-	display inline-block
-	overflow visible
-
-	> .header
-		padding 0 12px
-		text-align center
-		font-size 10px
-
-		&, *
-			cursor: default
-
-		&:hover
-			background #899492
-
-			& + .content
-				visibility visible
-
-			> time
-				color #fff !important
-
-				*
-					color #fff !important
-
-		&:after
-			content ""
-			display block
-			clear both
-
-		> time
-			display table-cell
-			vertical-align middle
-			height 48px
-			color #9eaba8
-
-			> .yyyymmdd
-				opacity 0.7
-
-	> .content
-		visibility hidden
-		display block
-		position absolute
-		top auto
-		right 0
-		z-index 3
-		margin 0
-		padding 0
-		width 256px
-		background #899492
-
-</style>
diff --git a/src/web/app/desktop/views/components/ui-header-nav.vue b/src/web/app/desktop/views/components/ui-header-nav.vue
deleted file mode 100644
index cf276dc5c1..0000000000
--- a/src/web/app/desktop/views/components/ui-header-nav.vue
+++ /dev/null
@@ -1,152 +0,0 @@
-<template>
-<div class="mk-ui-header-nav">
-	<ul>
-		<template v-if="os.isSignedIn">
-			<li class="home" :class="{ active: page == 'home' }">
-				<router-link to="/">
-					%fa:home%
-					<p>%i18n:desktop.tags.mk-ui-header-nav.home%</p>
-				</router-link>
-			</li>
-			<li class="messaging">
-				<a @click="messaging">
-					%fa:comments%
-					<p>%i18n:desktop.tags.mk-ui-header-nav.messaging%</p>
-					<template v-if="hasUnreadMessagingMessages">%fa:circle%</template>
-				</a>
-			</li>
-		</template>
-		<li class="ch">
-			<a :href="_CH_URL_" target="_blank">
-				%fa:tv%
-				<p>%i18n:desktop.tags.mk-ui-header-nav.ch%</p>
-			</a>
-		</li>
-		<li class="info">
-			<a href="https://twitter.com/misskey_xyz" target="_blank">
-				%fa:info%
-				<p>%i18n:desktop.tags.mk-ui-header-nav.info%</p>
-			</a>
-		</li>
-	</ul>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import MkMessagingWindow from './messaging-window.vue';
-
-export default Vue.extend({
-	data() {
-		return {
-			hasUnreadMessagingMessages: false,
-			connection: null,
-			connectionId: null
-		};
-	},
-	mounted() {
-		if ((this as any).os.isSignedIn) {
-			this.connection = (this as any).os.stream.getConnection();
-			this.connectionId = (this as any).os.stream.use();
-
-			this.connection.on('read_all_messaging_messages', this.onReadAllMessagingMessages);
-			this.connection.on('unread_messaging_message', this.onUnreadMessagingMessage);
-
-			// Fetch count of unread messaging messages
-			(this as any).api('messaging/unread').then(res => {
-				if (res.count > 0) {
-					this.hasUnreadMessagingMessages = true;
-				}
-			});
-		}
-	},
-	beforeDestroy() {
-		if ((this as any).os.isSignedIn) {
-			this.connection.off('read_all_messaging_messages', this.onReadAllMessagingMessages);
-			this.connection.off('unread_messaging_message', this.onUnreadMessagingMessage);
-			(this as any).os.stream.dispose(this.connectionId);
-		}
-	},
-	methods: {
-		onReadAllMessagingMessages() {
-			this.hasUnreadMessagingMessages = false;
-		},
-
-		onUnreadMessagingMessage() {
-			this.hasUnreadMessagingMessages = true;
-		},
-
-		messaging() {
-			document.body.appendChild(new MkMessagingWindow().$mount().$el);
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-ui-header-nav
-	display inline-block
-	margin 0
-	padding 0
-	line-height 3rem
-	vertical-align top
-
-	> ul
-		display inline-block
-		margin 0
-		padding 0
-		vertical-align top
-		line-height 3rem
-		list-style none
-
-		> li
-			display inline-block
-			vertical-align top
-			height 48px
-			line-height 48px
-
-			&.active
-				> a
-					border-bottom solid 3px $theme-color
-
-			> a
-				display inline-block
-				z-index 1
-				height 100%
-				padding 0 24px
-				font-size 13px
-				font-variant small-caps
-				color #9eaba8
-				text-decoration none
-				transition none
-				cursor pointer
-
-				*
-					pointer-events none
-
-				&:hover
-					color darken(#9eaba8, 20%)
-					text-decoration none
-
-				> [data-fa]:first-child
-					margin-right 8px
-
-				> [data-fa]:last-child
-					margin-left 5px
-					font-size 10px
-					color $theme-color
-
-					@media (max-width 1100px)
-						margin-left -5px
-
-				> p
-					display inline
-					margin 0
-
-					@media (max-width 1100px)
-						display none
-
-				@media (max-width 700px)
-					padding 0 12px
-
-</style>
diff --git a/src/web/app/desktop/views/components/ui-header-notifications.vue b/src/web/app/desktop/views/components/ui-header-notifications.vue
deleted file mode 100644
index d4dc553c53..0000000000
--- a/src/web/app/desktop/views/components/ui-header-notifications.vue
+++ /dev/null
@@ -1,156 +0,0 @@
-<template>
-<div class="mk-ui-header-notifications">
-	<button :data-active="isOpen" @click="toggle" title="%i18n:desktop.tags.mk-ui-header-notifications.title%">
-		%fa:R bell%<template v-if="hasUnreadNotifications">%fa:circle%</template>
-	</button>
-	<div class="notifications" v-if="isOpen">
-		<mk-notifications/>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import contains from '../../../common/scripts/contains';
-
-export default Vue.extend({
-	data() {
-		return {
-			isOpen: false,
-			hasUnreadNotifications: false,
-			connection: null,
-			connectionId: null
-		};
-	},
-	mounted() {
-		if ((this as any).os.isSignedIn) {
-			this.connection = (this as any).os.stream.getConnection();
-			this.connectionId = (this as any).os.stream.use();
-
-			this.connection.on('read_all_notifications', this.onReadAllNotifications);
-			this.connection.on('unread_notification', this.onUnreadNotification);
-
-			// Fetch count of unread notifications
-			(this as any).api('notifications/get_unread_count').then(res => {
-				if (res.count > 0) {
-					this.hasUnreadNotifications = true;
-				}
-			});
-		}
-	},
-	beforeDestroy() {
-		if ((this as any).os.isSignedIn) {
-			this.connection.off('read_all_notifications', this.onReadAllNotifications);
-			this.connection.off('unread_notification', this.onUnreadNotification);
-			(this as any).os.stream.dispose(this.connectionId);
-		}
-	},
-	methods: {
-		onReadAllNotifications() {
-			this.hasUnreadNotifications = false;
-		},
-
-		onUnreadNotification() {
-			this.hasUnreadNotifications = true;
-		},
-
-		toggle() {
-			this.isOpen ? this.close() : this.open();
-		},
-
-		open() {
-			this.isOpen = true;
-			Array.from(document.querySelectorAll('body *')).forEach(el => {
-				el.addEventListener('mousedown', this.onMousedown);
-			});
-		},
-
-		close() {
-			this.isOpen = false;
-			Array.from(document.querySelectorAll('body *')).forEach(el => {
-				el.removeEventListener('mousedown', this.onMousedown);
-			});
-		},
-
-		onMousedown(e) {
-			e.preventDefault();
-			if (!contains(this.$el, e.target) && this.$el != e.target) this.close();
-			return false;
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-ui-header-notifications
-
-	> button
-		display block
-		margin 0
-		padding 0
-		width 32px
-		color #9eaba8
-		border none
-		background transparent
-		cursor pointer
-
-		*
-			pointer-events none
-
-		&:hover
-		&[data-active='true']
-			color darken(#9eaba8, 20%)
-
-		&:active
-			color darken(#9eaba8, 30%)
-
-		> [data-fa].bell
-			font-size 1.2em
-			line-height 48px
-
-		> [data-fa].circle
-			margin-left -5px
-			vertical-align super
-			font-size 10px
-			color $theme-color
-
-	> .notifications
-		display block
-		position absolute
-		top 56px
-		right -72px
-		width 300px
-		background #fff
-		border-radius 4px
-		box-shadow 0 1px 4px rgba(0, 0, 0, 0.25)
-
-		&:before
-			content ""
-			pointer-events none
-			display block
-			position absolute
-			top -28px
-			right 74px
-			border-top solid 14px transparent
-			border-right solid 14px transparent
-			border-bottom solid 14px rgba(0, 0, 0, 0.1)
-			border-left solid 14px transparent
-
-		&:after
-			content ""
-			pointer-events none
-			display block
-			position absolute
-			top -27px
-			right 74px
-			border-top solid 14px transparent
-			border-right solid 14px transparent
-			border-bottom solid 14px #fff
-			border-left solid 14px transparent
-
-		> .mk-notifications
-			max-height 350px
-			font-size 1rem
-			overflow auto
-
-</style>
diff --git a/src/web/app/desktop/views/components/ui-header-post-button.vue b/src/web/app/desktop/views/components/ui-header-post-button.vue
deleted file mode 100644
index 754e05b23f..0000000000
--- a/src/web/app/desktop/views/components/ui-header-post-button.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-<div class="mk-ui-header-post-button">
-	<button @click="post" title="%i18n:desktop.tags.mk-ui-header-post-button.post%">%fa:pencil-alt%</button>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	methods: {
-		post() {
-			(this.$parent.$parent as any).openPostForm();
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-ui-header-post-button
-	display inline-block
-	padding 8px
-	height 100%
-	vertical-align top
-
-	> button
-		display inline-block
-		margin 0
-		padding 0 10px
-		height 100%
-		font-size 1.2em
-		font-weight normal
-		text-decoration none
-		color $theme-color-foreground
-		background $theme-color !important
-		outline none
-		border none
-		border-radius 4px
-		transition background 0.1s ease
-		cursor pointer
-
-		*
-			pointer-events none
-
-		&:hover
-			background lighten($theme-color, 10%) !important
-
-		&:active
-			background darken($theme-color, 10%) !important
-			transition background 0s ease
-
-</style>
diff --git a/src/web/app/desktop/views/components/ui-header-search.vue b/src/web/app/desktop/views/components/ui-header-search.vue
deleted file mode 100644
index 84ca9848cc..0000000000
--- a/src/web/app/desktop/views/components/ui-header-search.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-<form class="mk-ui-header-search" @submit.prevent="onSubmit">
-	%fa:search%
-	<input v-model="q" type="search" placeholder="%i18n:desktop.tags.mk-ui-header-search.placeholder%"/>
-	<div class="result"></div>
-</form>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	data() {
-		return {
-			q: ''
-		};
-	},
-	methods: {
-		onSubmit() {
-			location.href = `/search?q=${encodeURIComponent(this.q)}`;
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-ui-header-search
-
-	> [data-fa]
-		display block
-		position absolute
-		top 0
-		left 0
-		width 48px
-		text-align center
-		line-height 48px
-		color #9eaba8
-		pointer-events none
-
-		> *
-			vertical-align middle
-
-	> input
-		user-select text
-		cursor auto
-		margin 8px 0 0 0
-		padding 6px 18px 6px 36px
-		width 14em
-		height 32px
-		font-size 1em
-		background rgba(0, 0, 0, 0.05)
-		outline none
-		//border solid 1px #ddd
-		border none
-		border-radius 16px
-		transition color 0.5s ease, border 0.5s ease
-		font-family FontAwesome, sans-serif
-
-		&::placeholder
-			color #9eaba8
-
-		&:hover
-			background rgba(0, 0, 0, 0.08)
-
-		&:focus
-			box-shadow 0 0 0 2px rgba($theme-color, 0.5) !important
-
-</style>
diff --git a/src/web/app/desktop/views/components/ui-header.vue b/src/web/app/desktop/views/components/ui-header.vue
deleted file mode 100644
index 6b89985adf..0000000000
--- a/src/web/app/desktop/views/components/ui-header.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<template>
-<div class="mk-ui-header">
-	<mk-special-message/>
-	<div class="main">
-		<div class="backdrop"></div>
-		<div class="main">
-			<div class="container">
-				<div class="left">
-					<mk-ui-header-nav/>
-				</div>
-				<div class="right">
-					<mk-ui-header-search/>
-					<mk-ui-header-account v-if="os.isSignedIn"/>
-					<mk-ui-header-notifications v-if="os.isSignedIn"/>
-					<mk-ui-header-post-button v-if="os.isSignedIn"/>
-					<mk-ui-header-clock/>
-				</div>
-			</div>
-		</div>
-	</div>
-</div>
-</template>
-
-<style lang="stylus" scoped>
-.mk-ui-header
-	display block
-	position -webkit-sticky
-	position sticky
-	top 0
-	z-index 1024
-	width 100%
-	box-shadow 0 1px 1px rgba(0, 0, 0, 0.075)
-
-	> .main
-
-		> .backdrop
-			position absolute
-			top 0
-			z-index 1023
-			width 100%
-			height 48px
-			backdrop-filter blur(12px)
-			background #f7f7f7
-
-			&:after
-				content ""
-				display block
-				width 100%
-				height 48px
-				background-image url(/assets/desktop/header-logo.svg)
-				background-size 46px
-				background-position center
-				background-repeat no-repeat
-				opacity 0.3
-
-		> .main
-			z-index 1024
-			margin 0
-			padding 0
-			background-clip content-box
-			font-size 0.9rem
-			user-select none
-
-			> .container
-				display flex
-				width 100%
-				max-width 1300px
-				margin 0 auto
-
-				> .left
-					margin 0 auto 0 0
-					height 48px
-
-				> .right
-					margin 0 0 0 auto
-					height 48px
-
-					> *
-						display inline-block
-						vertical-align top
-
-					@media (max-width 1100px)
-						> .mk-ui-header-search
-							display none
-
-</style>
diff --git a/src/web/app/desktop/views/components/ui.header.account.vue b/src/web/app/desktop/views/components/ui.header.account.vue
new file mode 100644
index 0000000000..3728f94be8
--- /dev/null
+++ b/src/web/app/desktop/views/components/ui.header.account.vue
@@ -0,0 +1,212 @@
+<template>
+<div class="account">
+	<button class="header" :data-active="isOpen" @click="toggle">
+		<span class="username">{{ os.i.username }}<template v-if="!isOpen">%fa:angle-down%</template><template v-if="isOpen">%fa:angle-up%</template></span>
+		<img class="avatar" :src="`${ os.i.avatar_url }?thumbnail&size=64`" alt="avatar"/>
+	</button>
+	<div class="menu" v-if="isOpen">
+		<ul>
+			<li>
+				<a :href="`/${ os.i.username }`">%fa:user%%i18n:desktop.tags.mk-ui-header-account.profile%%fa:angle-right%</a>
+			</li>
+			<li @click="drive">
+				<p>%fa:cloud%%i18n:desktop.tags.mk-ui-header-account.drive%%fa:angle-right%</p>
+			</li>
+			<li>
+				<a href="/i/mentions">%fa:at%%i18n:desktop.tags.mk-ui-header-account.mentions%%fa:angle-right%</a>
+			</li>
+		</ul>
+		<ul>
+			<li @click="settings">
+				<p>%fa:cog%%i18n:desktop.tags.mk-ui-header-account.settings%%fa:angle-right%</p>
+			</li>
+		</ul>
+		<ul>
+			<li @click="signout">
+				<p>%fa:power-off%%i18n:desktop.tags.mk-ui-header-account.signout%%fa:angle-right%</p>
+			</li>
+		</ul>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import MkSettingsWindow from './settings-window.vue';
+import MkDriveWindow from './drive-window.vue';
+import contains from '../../../common/scripts/contains';
+import signout from '../../../common/scripts/signout';
+
+export default Vue.extend({
+	data() {
+		return {
+			isOpen: false,
+			signout
+		};
+	},
+	beforeDestroy() {
+		this.close();
+	},
+	methods: {
+		toggle() {
+			this.isOpen ? this.close() : this.open();
+		},
+		open() {
+			this.isOpen = true;
+			Array.from(document.querySelectorAll('body *')).forEach(el => {
+				el.addEventListener('mousedown', this.onMousedown);
+			});
+		},
+		close() {
+			this.isOpen = false;
+			Array.from(document.querySelectorAll('body *')).forEach(el => {
+				el.removeEventListener('mousedown', this.onMousedown);
+			});
+		},
+		onMousedown(e) {
+			e.preventDefault();
+			if (!contains(this.$el, e.target) && this.$el != e.target) this.close();
+			return false;
+		},
+		drive() {
+			this.close();
+			document.body.appendChild(new MkDriveWindow().$mount().$el);
+		},
+		settings() {
+			this.close();
+			document.body.appendChild(new MkSettingsWindow().$mount().$el);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.account
+	> .header
+		display block
+		margin 0
+		padding 0
+		color #9eaba8
+		border none
+		background transparent
+		cursor pointer
+
+		*
+			pointer-events none
+
+		&:hover
+		&[data-active='true']
+			color darken(#9eaba8, 20%)
+
+			> .avatar
+				filter saturate(150%)
+
+		&:active
+			color darken(#9eaba8, 30%)
+
+		> .username
+			display block
+			float left
+			margin 0 12px 0 16px
+			max-width 16em
+			line-height 48px
+			font-weight bold
+			font-family Meiryo, sans-serif
+			text-decoration none
+
+			[data-fa]
+				margin-left 8px
+
+		> .avatar
+			display block
+			float left
+			min-width 32px
+			max-width 32px
+			min-height 32px
+			max-height 32px
+			margin 8px 8px 8px 0
+			border-radius 4px
+			transition filter 100ms ease
+
+	> .menu
+		display block
+		position absolute
+		top 56px
+		right -2px
+		width 230px
+		font-size 0.8em
+		background #fff
+		border-radius 4px
+		box-shadow 0 1px 4px rgba(0, 0, 0, 0.25)
+
+		&:before
+			content ""
+			pointer-events none
+			display block
+			position absolute
+			top -28px
+			right 12px
+			border-top solid 14px transparent
+			border-right solid 14px transparent
+			border-bottom solid 14px rgba(0, 0, 0, 0.1)
+			border-left solid 14px transparent
+
+		&:after
+			content ""
+			pointer-events none
+			display block
+			position absolute
+			top -27px
+			right 12px
+			border-top solid 14px transparent
+			border-right solid 14px transparent
+			border-bottom solid 14px #fff
+			border-left solid 14px transparent
+
+		ul
+			display block
+			margin 10px 0
+			padding 0
+			list-style none
+
+			& + ul
+				padding-top 10px
+				border-top solid 1px #eee
+
+			> li
+				display block
+				margin 0
+				padding 0
+
+				> a
+				> p
+					display block
+					z-index 1
+					padding 0 28px
+					margin 0
+					line-height 40px
+					color #868C8C
+					cursor pointer
+
+					*
+						pointer-events none
+
+					> [data-fa]:first-of-type
+						margin-right 6px
+
+					> [data-fa]:last-of-type
+						display block
+						position absolute
+						top 0
+						right 8px
+						z-index 1
+						padding 0 20px
+						font-size 1.2em
+						line-height 40px
+
+					&:hover, &:active
+						text-decoration none
+						background $theme-color
+						color $theme-color-foreground
+
+</style>
diff --git a/src/web/app/desktop/views/components/ui.header.clock.vue b/src/web/app/desktop/views/components/ui.header.clock.vue
new file mode 100644
index 0000000000..cd23a67506
--- /dev/null
+++ b/src/web/app/desktop/views/components/ui.header.clock.vue
@@ -0,0 +1,109 @@
+<template>
+<div class="clock">
+	<div class="header">
+		<time ref="time">
+			<span class="yyyymmdd">{{ yyyy }}/{{ mm }}/{{ dd }}</span>
+			<br>
+			<span class="hhnn">{{ hh }}<span :style="{ visibility: now.getSeconds() % 2 == 0 ? 'visible' : 'hidden' }">:</span>{{ nn }}</span>
+		</time>
+	</div>
+	<div class="content">
+		<mk-analog-clock/>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	data() {
+		return {
+			now: new Date(),
+			clock: null
+		};
+	},
+	computed: {
+		yyyy(): number {
+			return this.now.getFullYear();
+		},
+		mm(): string {
+			return ('0' + (this.now.getMonth() + 1)).slice(-2);
+		},
+		dd(): string {
+			return ('0' + this.now.getDate()).slice(-2);
+		},
+		hh(): string {
+			return ('0' + this.now.getHours()).slice(-2);
+		},
+		nn(): string {
+			return ('0' + this.now.getMinutes()).slice(-2);
+		}
+	},
+	mounted() {
+		this.tick();
+		this.clock = setInterval(this.tick, 1000);
+	},
+	beforeDestroy() {
+		clearInterval(this.clock);
+	},
+	methods: {
+		tick() {
+			this.now = new Date();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.clock
+	display inline-block
+	overflow visible
+
+	> .header
+		padding 0 12px
+		text-align center
+		font-size 10px
+
+		&, *
+			cursor: default
+
+		&:hover
+			background #899492
+
+			& + .content
+				visibility visible
+
+			> time
+				color #fff !important
+
+				*
+					color #fff !important
+
+		&:after
+			content ""
+			display block
+			clear both
+
+		> time
+			display table-cell
+			vertical-align middle
+			height 48px
+			color #9eaba8
+
+			> .yyyymmdd
+				opacity 0.7
+
+	> .content
+		visibility hidden
+		display block
+		position absolute
+		top auto
+		right 0
+		z-index 3
+		margin 0
+		padding 0
+		width 256px
+		background #899492
+
+</style>
diff --git a/src/web/app/desktop/views/components/ui.header.nav.vue b/src/web/app/desktop/views/components/ui.header.nav.vue
new file mode 100644
index 0000000000..5895255ff9
--- /dev/null
+++ b/src/web/app/desktop/views/components/ui.header.nav.vue
@@ -0,0 +1,154 @@
+<template>
+<div class="nav">
+	<ul>
+		<template v-if="os.isSignedIn">
+			<li class="home" :class="{ active: page == 'home' }">
+				<router-link to="/">
+					%fa:home%
+					<p>%i18n:desktop.tags.mk-ui-header-nav.home%</p>
+				</router-link>
+			</li>
+			<li class="messaging">
+				<a @click="messaging">
+					%fa:comments%
+					<p>%i18n:desktop.tags.mk-ui-header-nav.messaging%</p>
+					<template v-if="hasUnreadMessagingMessages">%fa:circle%</template>
+				</a>
+			</li>
+		</template>
+		<li class="ch">
+			<a :href="chUrl" target="_blank">
+				%fa:tv%
+				<p>%i18n:desktop.tags.mk-ui-header-nav.ch%</p>
+			</a>
+		</li>
+		<li class="info">
+			<a href="https://twitter.com/misskey_xyz" target="_blank">
+				%fa:info%
+				<p>%i18n:desktop.tags.mk-ui-header-nav.info%</p>
+			</a>
+		</li>
+	</ul>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { chUrl } from '../../../config';
+import MkMessagingWindow from './messaging-window.vue';
+
+export default Vue.extend({
+	data() {
+		return {
+			hasUnreadMessagingMessages: false,
+			connection: null,
+			connectionId: null,
+			chUrl
+		};
+	},
+	mounted() {
+		if ((this as any).os.isSignedIn) {
+			this.connection = (this as any).os.stream.getConnection();
+			this.connectionId = (this as any).os.stream.use();
+
+			this.connection.on('read_all_messaging_messages', this.onReadAllMessagingMessages);
+			this.connection.on('unread_messaging_message', this.onUnreadMessagingMessage);
+
+			// Fetch count of unread messaging messages
+			(this as any).api('messaging/unread').then(res => {
+				if (res.count > 0) {
+					this.hasUnreadMessagingMessages = true;
+				}
+			});
+		}
+	},
+	beforeDestroy() {
+		if ((this as any).os.isSignedIn) {
+			this.connection.off('read_all_messaging_messages', this.onReadAllMessagingMessages);
+			this.connection.off('unread_messaging_message', this.onUnreadMessagingMessage);
+			(this as any).os.stream.dispose(this.connectionId);
+		}
+	},
+	methods: {
+		onReadAllMessagingMessages() {
+			this.hasUnreadMessagingMessages = false;
+		},
+
+		onUnreadMessagingMessage() {
+			this.hasUnreadMessagingMessages = true;
+		},
+
+		messaging() {
+			document.body.appendChild(new MkMessagingWindow().$mount().$el);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.nav
+	display inline-block
+	margin 0
+	padding 0
+	line-height 3rem
+	vertical-align top
+
+	> ul
+		display inline-block
+		margin 0
+		padding 0
+		vertical-align top
+		line-height 3rem
+		list-style none
+
+		> li
+			display inline-block
+			vertical-align top
+			height 48px
+			line-height 48px
+
+			&.active
+				> a
+					border-bottom solid 3px $theme-color
+
+			> a
+				display inline-block
+				z-index 1
+				height 100%
+				padding 0 24px
+				font-size 13px
+				font-variant small-caps
+				color #9eaba8
+				text-decoration none
+				transition none
+				cursor pointer
+
+				*
+					pointer-events none
+
+				&:hover
+					color darken(#9eaba8, 20%)
+					text-decoration none
+
+				> [data-fa]:first-child
+					margin-right 8px
+
+				> [data-fa]:last-child
+					margin-left 5px
+					font-size 10px
+					color $theme-color
+
+					@media (max-width 1100px)
+						margin-left -5px
+
+				> p
+					display inline
+					margin 0
+
+					@media (max-width 1100px)
+						display none
+
+				@media (max-width 700px)
+					padding 0 12px
+
+</style>
diff --git a/src/web/app/desktop/views/components/ui.header.notifications.vue b/src/web/app/desktop/views/components/ui.header.notifications.vue
new file mode 100644
index 0000000000..5467dda856
--- /dev/null
+++ b/src/web/app/desktop/views/components/ui.header.notifications.vue
@@ -0,0 +1,156 @@
+<template>
+<div class="notifications">
+	<button :data-active="isOpen" @click="toggle" title="%i18n:desktop.tags.mk-ui-header-notifications.title%">
+		%fa:R bell%<template v-if="hasUnreadNotifications">%fa:circle%</template>
+	</button>
+	<div class="pop" v-if="isOpen">
+		<mk-notifications/>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import contains from '../../../common/scripts/contains';
+
+export default Vue.extend({
+	data() {
+		return {
+			isOpen: false,
+			hasUnreadNotifications: false,
+			connection: null,
+			connectionId: null
+		};
+	},
+	mounted() {
+		if ((this as any).os.isSignedIn) {
+			this.connection = (this as any).os.stream.getConnection();
+			this.connectionId = (this as any).os.stream.use();
+
+			this.connection.on('read_all_notifications', this.onReadAllNotifications);
+			this.connection.on('unread_notification', this.onUnreadNotification);
+
+			// Fetch count of unread notifications
+			(this as any).api('notifications/get_unread_count').then(res => {
+				if (res.count > 0) {
+					this.hasUnreadNotifications = true;
+				}
+			});
+		}
+	},
+	beforeDestroy() {
+		if ((this as any).os.isSignedIn) {
+			this.connection.off('read_all_notifications', this.onReadAllNotifications);
+			this.connection.off('unread_notification', this.onUnreadNotification);
+			(this as any).os.stream.dispose(this.connectionId);
+		}
+	},
+	methods: {
+		onReadAllNotifications() {
+			this.hasUnreadNotifications = false;
+		},
+
+		onUnreadNotification() {
+			this.hasUnreadNotifications = true;
+		},
+
+		toggle() {
+			this.isOpen ? this.close() : this.open();
+		},
+
+		open() {
+			this.isOpen = true;
+			Array.from(document.querySelectorAll('body *')).forEach(el => {
+				el.addEventListener('mousedown', this.onMousedown);
+			});
+		},
+
+		close() {
+			this.isOpen = false;
+			Array.from(document.querySelectorAll('body *')).forEach(el => {
+				el.removeEventListener('mousedown', this.onMousedown);
+			});
+		},
+
+		onMousedown(e) {
+			e.preventDefault();
+			if (!contains(this.$el, e.target) && this.$el != e.target) this.close();
+			return false;
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.notifications
+
+	> button
+		display block
+		margin 0
+		padding 0
+		width 32px
+		color #9eaba8
+		border none
+		background transparent
+		cursor pointer
+
+		*
+			pointer-events none
+
+		&:hover
+		&[data-active='true']
+			color darken(#9eaba8, 20%)
+
+		&:active
+			color darken(#9eaba8, 30%)
+
+		> [data-fa].bell
+			font-size 1.2em
+			line-height 48px
+
+		> [data-fa].circle
+			margin-left -5px
+			vertical-align super
+			font-size 10px
+			color $theme-color
+
+	> .pop
+		display block
+		position absolute
+		top 56px
+		right -72px
+		width 300px
+		background #fff
+		border-radius 4px
+		box-shadow 0 1px 4px rgba(0, 0, 0, 0.25)
+
+		&:before
+			content ""
+			pointer-events none
+			display block
+			position absolute
+			top -28px
+			right 74px
+			border-top solid 14px transparent
+			border-right solid 14px transparent
+			border-bottom solid 14px rgba(0, 0, 0, 0.1)
+			border-left solid 14px transparent
+
+		&:after
+			content ""
+			pointer-events none
+			display block
+			position absolute
+			top -27px
+			right 74px
+			border-top solid 14px transparent
+			border-right solid 14px transparent
+			border-bottom solid 14px #fff
+			border-left solid 14px transparent
+
+		> .mk-notifications
+			max-height 350px
+			font-size 1rem
+			overflow auto
+
+</style>
diff --git a/src/web/app/desktop/views/components/ui.header.post.vue b/src/web/app/desktop/views/components/ui.header.post.vue
new file mode 100644
index 0000000000..10bce0622c
--- /dev/null
+++ b/src/web/app/desktop/views/components/ui.header.post.vue
@@ -0,0 +1,52 @@
+<template>
+<div class="post">
+	<button @click="post" title="%i18n:desktop.tags.mk-ui-header-post-button.post%">%fa:pencil-alt%</button>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	methods: {
+		post() {
+			(this.$parent.$parent as any).openPostForm();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.post
+	display inline-block
+	padding 8px
+	height 100%
+	vertical-align top
+
+	> button
+		display inline-block
+		margin 0
+		padding 0 10px
+		height 100%
+		font-size 1.2em
+		font-weight normal
+		text-decoration none
+		color $theme-color-foreground
+		background $theme-color !important
+		outline none
+		border none
+		border-radius 4px
+		transition background 0.1s ease
+		cursor pointer
+
+		*
+			pointer-events none
+
+		&:hover
+			background lighten($theme-color, 10%) !important
+
+		&:active
+			background darken($theme-color, 10%) !important
+			transition background 0s ease
+
+</style>
diff --git a/src/web/app/desktop/views/components/ui.header.search.vue b/src/web/app/desktop/views/components/ui.header.search.vue
new file mode 100644
index 0000000000..c063de6bb0
--- /dev/null
+++ b/src/web/app/desktop/views/components/ui.header.search.vue
@@ -0,0 +1,68 @@
+<template>
+<form class="search" @submit.prevent="onSubmit">
+	%fa:search%
+	<input v-model="q" type="search" placeholder="%i18n:desktop.tags.mk-ui-header-search.placeholder%"/>
+	<div class="result"></div>
+</form>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	data() {
+		return {
+			q: ''
+		};
+	},
+	methods: {
+		onSubmit() {
+			location.href = `/search?q=${encodeURIComponent(this.q)}`;
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.search
+
+	> [data-fa]
+		display block
+		position absolute
+		top 0
+		left 0
+		width 48px
+		text-align center
+		line-height 48px
+		color #9eaba8
+		pointer-events none
+
+		> *
+			vertical-align middle
+
+	> input
+		user-select text
+		cursor auto
+		margin 8px 0 0 0
+		padding 6px 18px 6px 36px
+		width 14em
+		height 32px
+		font-size 1em
+		background rgba(0, 0, 0, 0.05)
+		outline none
+		//border solid 1px #ddd
+		border none
+		border-radius 16px
+		transition color 0.5s ease, border 0.5s ease
+		font-family FontAwesome, sans-serif
+
+		&::placeholder
+			color #9eaba8
+
+		&:hover
+			background rgba(0, 0, 0, 0.08)
+
+		&:focus
+			box-shadow 0 0 0 2px rgba($theme-color, 0.5) !important
+
+</style>
diff --git a/src/web/app/desktop/views/components/ui.header.vue b/src/web/app/desktop/views/components/ui.header.vue
new file mode 100644
index 0000000000..ef5e3a95d1
--- /dev/null
+++ b/src/web/app/desktop/views/components/ui.header.vue
@@ -0,0 +1,107 @@
+<template>
+<div class="header">
+	<mk-special-message/>
+	<div class="main">
+		<div class="backdrop"></div>
+		<div class="main">
+			<div class="container">
+				<div class="left">
+					<x-nav/>
+				</div>
+				<div class="right">
+					<x-search/>
+					<x-account v-if="os.isSignedIn"/>
+					<x-notifications v-if="os.isSignedIn"/>
+					<x-post v-if="os.isSignedIn"/>
+					<x-clock/>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+import XNav from './ui.header.nav.vue';
+import XSearch from './ui.header.search.vue';
+import XAccount from './ui.header.account.vue';
+import XNotifications from './ui.header.notifications.vue';
+import XPost from './ui.header.post.vue';
+import XClock from './ui.header.clock.vue';
+
+export default Vue.extend({
+	components: {
+		'x-nav': XNav,
+		'x-search': XSearch,
+		'x-account': XAccount,
+		'x-notifications': XNotifications,
+		'x-post': XPost,
+		'x-clock': XClock,
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.header
+	position -webkit-sticky
+	position sticky
+	top 0
+	z-index 1024
+	width 100%
+	box-shadow 0 1px 1px rgba(0, 0, 0, 0.075)
+
+	> .main
+
+		> .backdrop
+			position absolute
+			top 0
+			z-index 1023
+			width 100%
+			height 48px
+			backdrop-filter blur(12px)
+			background #f7f7f7
+
+			&:after
+				content ""
+				display block
+				width 100%
+				height 48px
+				background-image url(/assets/desktop/header-logo.svg)
+				background-size 46px
+				background-position center
+				background-repeat no-repeat
+				opacity 0.3
+
+		> .main
+			z-index 1024
+			margin 0
+			padding 0
+			background-clip content-box
+			font-size 0.9rem
+			user-select none
+
+			> .container
+				display flex
+				width 100%
+				max-width 1300px
+				margin 0 auto
+
+				> .left
+					margin 0 auto 0 0
+					height 48px
+
+				> .right
+					margin 0 0 0 auto
+					height 48px
+
+					> *
+						display inline-block
+						vertical-align top
+
+					@media (max-width 1100px)
+						> .mk-ui-header-search
+							display none
+
+</style>
diff --git a/src/web/app/desktop/views/components/ui.vue b/src/web/app/desktop/views/components/ui.vue
index af39dff7a5..9cd12f9648 100644
--- a/src/web/app/desktop/views/components/ui.vue
+++ b/src/web/app/desktop/views/components/ui.vue
@@ -1,6 +1,6 @@
 <template>
 <div>
-	<mk-ui-header/>
+	<x-header/>
 	<div class="content">
 		<slot></slot>
 	</div>
@@ -10,9 +10,12 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import MkPostFormWindow from './post-form-window.vue';
+import XHeader from './ui.header.vue';
 
 export default Vue.extend({
+	components: {
+		'x-header': XHeader
+	},
 	mounted() {
 		document.addEventListener('keydown', this.onKeydown);
 	},
@@ -20,17 +23,12 @@ export default Vue.extend({
 		document.removeEventListener('keydown', this.onKeydown);
 	},
 	methods: {
-		openPostForm() {
-			document.body.appendChild(new MkPostFormWindow({
-				parent: this
-			}).$mount().$el);
-		},
 		onKeydown(e) {
 			if (e.target.tagName == 'INPUT' || e.target.tagName == 'TEXTAREA') return;
 
 			if (e.which == 80 || e.which == 78) { // p or n
 				e.preventDefault();
-				this.openPostForm();
+				(this as any).apis.post();
 			}
 		}
 	}
diff --git a/src/web/app/desktop/views/pages/user/user-followers-you-know.vue b/src/web/app/desktop/views/pages/user/user-followers-you-know.vue
index 181d5824de..6f6673a7aa 100644
--- a/src/web/app/desktop/views/pages/user/user-followers-you-know.vue
+++ b/src/web/app/desktop/views/pages/user/user-followers-you-know.vue
@@ -3,7 +3,7 @@
 	<p class="title">%fa:users%%i18n:desktop.tags.mk-user.followers-you-know.title%</p>
 	<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:desktop.tags.mk-user.followers-you-know.loading%<mk-ellipsis/></p>
 	<div v-if="!fetching && users.length > 0">
-	<router-link v-for="user in users" to="`/${user.username}`" :key="user.id">
+	<router-link v-for="user in users" :to="`/${user.username}`" :key="user.id">
 		<img :src="`${user.avatar_url}?thumbnail&size=64`" :alt="user.name" v-user-preview="user.id"/>
 	</router-link>
 	</div>
diff --git a/src/web/app/desktop/views/pages/user/user-friends.vue b/src/web/app/desktop/views/pages/user/user-friends.vue
index a144ca2ad1..b173e42967 100644
--- a/src/web/app/desktop/views/pages/user/user-friends.vue
+++ b/src/web/app/desktop/views/pages/user/user-friends.vue
@@ -4,11 +4,11 @@
 	<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:desktop.tags.mk-user.frequently-replied-users.loading%<mk-ellipsis/></p>
 	<template v-if="!fetching && users.length != 0">
 		<div class="user" v-for="friend in users">
-			<router-link class="avatar-anchor" to="`/${friend.username}`">
+			<router-link class="avatar-anchor" :to="`/${friend.username}`">
 				<img class="avatar" :src="`${friend.avatar_url}?thumbnail&size=42`" alt="" v-user-preview="friend.id"/>
 			</router-link>
 			<div class="body">
-				<router-link class="name" to="`/${friend.username}`" v-user-preview="friend.id">{{ friend.name }}</router-link>
+				<router-link class="name" :to="`/${friend.username}`" v-user-preview="friend.id">{{ friend.name }}</router-link>
 				<p class="username">@{{ friend.username }}</p>
 			</div>
 			<mk-follow-button :user="friend"/>
diff --git a/src/web/app/desktop/views/pages/user/user.vue b/src/web/app/desktop/views/pages/user/user.vue
index def9ced362..84f31e8548 100644
--- a/src/web/app/desktop/views/pages/user/user.vue
+++ b/src/web/app/desktop/views/pages/user/user.vue
@@ -30,16 +30,25 @@ export default Vue.extend({
 			user: null
 		};
 	},
-	mounted() {
-		Progress.start();
-		(this as any).api('users/show', {
-			username: this.$route.params.user
-		}).then(user => {
-			this.user = user;
-			this.fetching = false;
-			Progress.done();
-			document.title = user.name + ' | Misskey';
-		});
+	created() {
+		this.fetch();
+	},
+	watch: {
+		$route: 'fetch'
+	},
+	methods: {
+		fetch() {
+			this.fetching = true;
+			Progress.start();
+			(this as any).api('users/show', {
+				username: this.$route.params.user
+			}).then(user => {
+				this.user = user;
+				this.fetching = false;
+				Progress.done();
+				document.title = user.name + ' | Misskey';
+			});
+		}
 	}
 });
 </script>
diff --git a/src/web/app/init.ts b/src/web/app/init.ts
index e8ca789272..9e49c4f0fb 100644
--- a/src/web/app/init.ts
+++ b/src/web/app/init.ts
@@ -105,6 +105,8 @@ type API = {
 		placeholder?: string;
 		default?: string;
 	}) => Promise<string>;
+
+	post: () => void;
 };
 
 // MiOSを初期化してコールバックする
-- 
cgit v1.2.3-freya