From b2a6257f93612ed59a00548feff4712a5136faab Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 21 Feb 2018 01:39:51 +0900
Subject: wip

---
 src/web/app/auth/views/index.vue                   |   6 +-
 src/web/app/common/views/components/index.ts       |   4 -
 .../app/common/views/components/messaging-form.vue | 186 ----------------
 .../common/views/components/messaging-message.vue  | 238 ---------------------
 .../views/components/messaging-room.form.vue       | 186 ++++++++++++++++
 .../views/components/messaging-room.message.vue    | 238 +++++++++++++++++++++
 .../app/common/views/components/messaging-room.vue |  14 +-
 src/web/app/desktop/views/components/activity.vue  |  12 +-
 .../desktop/views/components/context-menu.menu.vue |   2 +-
 .../app/desktop/views/components/context-menu.vue  |   6 +-
 src/web/app/desktop/views/components/drive.vue     |   6 +-
 .../app/desktop/views/components/post-detail.vue   |   2 +-
 .../app/desktop/views/components/posts.post.vue    |   2 +-
 src/web/app/desktop/views/components/posts.vue     |   7 +-
 src/web/app/desktop/views/components/settings.vue  |   2 +-
 src/web/app/desktop/views/components/ui.header.vue |  12 +-
 src/web/app/desktop/views/components/ui.vue        |   2 +-
 .../views/components/widgets/server.cpu.vue        |   2 +-
 .../views/components/widgets/server.disk.vue       |   2 +-
 .../views/components/widgets/server.memory.vue     |   2 +-
 .../desktop/views/components/widgets/server.vue    |  12 +-
 src/web/app/desktop/views/pages/index.vue          |  10 +-
 .../views/pages/user/user-followers-you-know.vue   |  79 -------
 .../app/desktop/views/pages/user/user-friends.vue  | 119 -----------
 .../app/desktop/views/pages/user/user-header.vue   | 189 ----------------
 src/web/app/desktop/views/pages/user/user-home.vue | 103 ---------
 .../app/desktop/views/pages/user/user-photos.vue   |  88 --------
 .../app/desktop/views/pages/user/user-profile.vue  | 142 ------------
 .../app/desktop/views/pages/user/user-timeline.vue | 133 ------------
 .../views/pages/user/user.followers-you-know.vue   |  79 +++++++
 .../app/desktop/views/pages/user/user.friends.vue  | 119 +++++++++++
 .../app/desktop/views/pages/user/user.header.vue   | 189 ++++++++++++++++
 src/web/app/desktop/views/pages/user/user.home.vue | 103 +++++++++
 .../app/desktop/views/pages/user/user.photos.vue   |  88 ++++++++
 .../app/desktop/views/pages/user/user.profile.vue  | 142 ++++++++++++
 .../app/desktop/views/pages/user/user.timeline.vue | 133 ++++++++++++
 src/web/app/desktop/views/pages/user/user.vue      |  13 +-
 .../app/mobile/views/components/notifications.vue  |   2 +-
 src/web/app/mobile/views/components/posts.vue      |   2 +-
 .../app/mobile/views/pages/user/home-activity.vue  |   2 +-
 40 files changed, 1342 insertions(+), 1336 deletions(-)
 delete mode 100644 src/web/app/common/views/components/messaging-form.vue
 delete mode 100644 src/web/app/common/views/components/messaging-message.vue
 create mode 100644 src/web/app/common/views/components/messaging-room.form.vue
 create mode 100644 src/web/app/common/views/components/messaging-room.message.vue
 delete mode 100644 src/web/app/desktop/views/pages/user/user-followers-you-know.vue
 delete mode 100644 src/web/app/desktop/views/pages/user/user-friends.vue
 delete mode 100644 src/web/app/desktop/views/pages/user/user-header.vue
 delete mode 100644 src/web/app/desktop/views/pages/user/user-home.vue
 delete mode 100644 src/web/app/desktop/views/pages/user/user-photos.vue
 delete mode 100644 src/web/app/desktop/views/pages/user/user-profile.vue
 delete mode 100644 src/web/app/desktop/views/pages/user/user-timeline.vue
 create mode 100644 src/web/app/desktop/views/pages/user/user.followers-you-know.vue
 create mode 100644 src/web/app/desktop/views/pages/user/user.friends.vue
 create mode 100644 src/web/app/desktop/views/pages/user/user.header.vue
 create mode 100644 src/web/app/desktop/views/pages/user/user.home.vue
 create mode 100644 src/web/app/desktop/views/pages/user/user.photos.vue
 create mode 100644 src/web/app/desktop/views/pages/user/user.profile.vue
 create mode 100644 src/web/app/desktop/views/pages/user/user.timeline.vue

(limited to 'src/web')

diff --git a/src/web/app/auth/views/index.vue b/src/web/app/auth/views/index.vue
index 56a7bac7a3..1e372c0bde 100644
--- a/src/web/app/auth/views/index.vue
+++ b/src/web/app/auth/views/index.vue
@@ -2,7 +2,7 @@
 <div class="index">
 	<main v-if="os.isSignedIn">
 		<p class="fetching" v-if="fetching">読み込み中<mk-ellipsis/></p>
-		<fo-rm
+		<x-form
 			ref="form"
 			v-if="state == 'waiting'"
 			:session="session"
@@ -32,11 +32,11 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import Form from './form.vue';
+import XForm from './form.vue';
 
 export default Vue.extend({
 	components: {
-		'fo-rm': Form
+		XForm
 	},
 	data() {
 		return {
diff --git a/src/web/app/common/views/components/index.ts b/src/web/app/common/views/components/index.ts
index 021e45a8dc..a61022dbe0 100644
--- a/src/web/app/common/views/components/index.ts
+++ b/src/web/app/common/views/components/index.ts
@@ -15,9 +15,7 @@ import specialMessage from './special-message.vue';
 import streamIndicator from './stream-indicator.vue';
 import ellipsis from './ellipsis.vue';
 import messaging from './messaging.vue';
-import messagingForm from './messaging-form.vue';
 import messagingRoom from './messaging-room.vue';
-import messagingMessage from './messaging-message.vue';
 import urlPreview from './url-preview.vue';
 
 Vue.component('mk-signin', signin);
@@ -35,7 +33,5 @@ Vue.component('mk-special-message', specialMessage);
 Vue.component('mk-stream-indicator', streamIndicator);
 Vue.component('mk-ellipsis', ellipsis);
 Vue.component('mk-messaging', messaging);
-Vue.component('mk-messaging-form', messagingForm);
 Vue.component('mk-messaging-room', messagingRoom);
-Vue.component('mk-messaging-message', messagingMessage);
 Vue.component('mk-url-preview', urlPreview);
diff --git a/src/web/app/common/views/components/messaging-form.vue b/src/web/app/common/views/components/messaging-form.vue
deleted file mode 100644
index 470606b77f..0000000000
--- a/src/web/app/common/views/components/messaging-form.vue
+++ /dev/null
@@ -1,186 +0,0 @@
-<template>
-<div class="mk-messaging-form">
-	<textarea v-model="text" @keypress="onKeypress" @paste="onPaste" placeholder="%i18n:common.input-message-here%"></textarea>
-	<div class="files"></div>
-	<mk-uploader ref="uploader"/>
-	<button class="send" @click="send" :disabled="sending" title="%i18n:common.send%">
-		<template v-if="!sending">%fa:paper-plane%</template><template v-if="sending">%fa:spinner .spin%</template>
-	</button>
-	<button class="attach-from-local" type="button" title="%i18n:common.tags.mk-messaging-form.attach-from-local%">
-		%fa:upload%
-	</button>
-	<button class="attach-from-drive" type="button" title="%i18n:common.tags.mk-messaging-form.attach-from-drive%">
-		%fa:R folder-open%
-	</button>
-	<input name="file" type="file" accept="image/*"/>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
-	props: ['user'],
-	data() {
-		return {
-			text: null,
-			file: null,
-			sending: false
-		};
-	},
-	methods: {
-		onPaste(e) {
-			const data = e.clipboardData;
-			const items = data.items;
-			for (const item of items) {
-				if (item.kind == 'file') {
-					//this.upload(item.getAsFile());
-				}
-			}
-		},
-
-		onKeypress(e) {
-			if ((e.which == 10 || e.which == 13) && e.ctrlKey) {
-				this.send();
-			}
-		},
-
-		chooseFile() {
-			(this.$refs.file as any).click();
-		},
-
-		chooseFileFromDrive() {
-			(this as any).apis.chooseDriveFile({
-				multiple: false
-			}).then(file => {
-				this.file = file;
-			});
-		},
-
-		upload() {
-			// TODO
-		},
-
-		send() {
-			this.sending = true;
-			(this as any).api('messaging/messages/create', {
-				user_id: this.user.id,
-				text: this.text
-			}).then(message => {
-				this.clear();
-			}).catch(err => {
-				console.error(err);
-			}).then(() => {
-				this.sending = false;
-			});
-		},
-
-		clear() {
-			this.text = '';
-			this.file = null;
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-messaging-form
-	> textarea
-		cursor auto
-		display block
-		width 100%
-		min-width 100%
-		max-width 100%
-		height 64px
-		margin 0
-		padding 8px
-		font-size 1em
-		color #000
-		outline none
-		border none
-		border-top solid 1px #eee
-		border-radius 0
-		box-shadow none
-		background transparent
-
-	> .send
-		position absolute
-		bottom 0
-		right 0
-		margin 0
-		padding 10px 14px
-		line-height 1em
-		font-size 1em
-		color #aaa
-		transition color 0.1s ease
-
-		&:hover
-			color $theme-color
-
-		&:active
-			color darken($theme-color, 10%)
-			transition color 0s ease
-
-	.files
-		display block
-		margin 0
-		padding 0 8px
-		list-style none
-
-		&:after
-			content ''
-			display block
-			clear both
-
-		> li
-			display block
-			float left
-			margin 4px
-			padding 0
-			width 64px
-			height 64px
-			background-color #eee
-			background-repeat no-repeat
-			background-position center center
-			background-size cover
-			cursor move
-
-			&:hover
-				> .remove
-					display block
-
-			> .remove
-				display none
-				position absolute
-				right -6px
-				top -6px
-				margin 0
-				padding 0
-				background transparent
-				outline none
-				border none
-				border-radius 0
-				box-shadow none
-				cursor pointer
-
-	.attach-from-local
-	.attach-from-drive
-		margin 0
-		padding 10px 14px
-		line-height 1em
-		font-size 1em
-		font-weight normal
-		text-decoration none
-		color #aaa
-		transition color 0.1s ease
-
-		&:hover
-			color $theme-color
-
-		&:active
-			color darken($theme-color, 10%)
-			transition color 0s ease
-
-	input[type=file]
-		display none
-
-</style>
diff --git a/src/web/app/common/views/components/messaging-message.vue b/src/web/app/common/views/components/messaging-message.vue
deleted file mode 100644
index d2e3dacb56..0000000000
--- a/src/web/app/common/views/components/messaging-message.vue
+++ /dev/null
@@ -1,238 +0,0 @@
-<template>
-<div class="mk-messaging-message" :data-is-me="isMe">
-	<a class="avatar-anchor" :href="`/${message.user.username}`" :title="message.user.username" target="_blank">
-		<img class="avatar" :src="`${message.user.avatar_url}?thumbnail&size=80`" alt=""/>
-	</a>
-	<div class="content-container">
-		<div class="balloon">
-			<p class="read" v-if="message.is_me && message.is_read">%i18n:common.tags.mk-messaging-message.is-read%</p>
-			<button class="delete-button" v-if="message.is_me" title="%i18n:common.delete%">
-				<img src="/assets/desktop/messaging/delete.png" alt="Delete"/>
-			</button>
-			<div class="content" v-if="!message.is_deleted">
-				<mk-post-html class="text" v-if="message.ast" :ast="message.ast" :i="os.i"/>
-				<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
-				<div class="image" v-if="message.file">
-					<img :src="message.file.url" alt="image" :title="message.file.name"/>
-				</div>
-			</div>
-			<div class="content" v-if="message.is_deleted">
-				<p class="is-deleted">%i18n:common.tags.mk-messaging-message.deleted%</p>
-			</div>
-		</div>
-		<footer>
-			<mk-time :time="message.created_at"/>
-			<template v-if="message.is_edited">%fa:pencil-alt%</template>
-		</footer>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	props: ['message'],
-	computed: {
-		isMe(): boolean {
-			return this.message.user_id == (this as any).os.i.id;
-		},
-		urls(): string[] {
-			if (this.message.ast) {
-				return this.message.ast
-					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
-					.map(t => t.url);
-			} else {
-				return null;
-			}
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-messaging-message
-	$me-balloon-color = #23A7B6
-
-	padding 10px 12px 10px 12px
-	background-color transparent
-
-	&:after
-		content ""
-		display block
-		clear both
-
-	> .avatar-anchor
-		display block
-
-		> .avatar
-			display block
-			min-width 54px
-			min-height 54px
-			max-width 54px
-			max-height 54px
-			margin 0
-			border-radius 8px
-			transition all 0.1s ease
-
-	> .content-container
-		display block
-		margin 0 12px
-		padding 0
-		max-width calc(100% - 78px)
-
-		> .balloon
-			display block
-			float inherit
-			margin 0
-			padding 0
-			max-width 100%
-			min-height 38px
-			border-radius 16px
-
-			&:before
-				content ""
-				pointer-events none
-				display block
-				position absolute
-				top 12px
-
-			&:hover
-				> .delete-button
-					display block
-
-			> .delete-button
-				display none
-				position absolute
-				z-index 1
-				top -4px
-				right -4px
-				margin 0
-				padding 0
-				cursor pointer
-				outline none
-				border none
-				border-radius 0
-				box-shadow none
-				background transparent
-
-				> img
-					vertical-align bottom
-					width 16px
-					height 16px
-					cursor pointer
-
-			> .read
-				user-select none
-				display block
-				position absolute
-				z-index 1
-				bottom -4px
-				left -12px
-				margin 0
-				color rgba(0, 0, 0, 0.5)
-				font-size 11px
-
-			> .content
-
-				> .is-deleted
-					display block
-					margin 0
-					padding 0
-					overflow hidden
-					overflow-wrap break-word
-					font-size 1em
-					color rgba(0, 0, 0, 0.5)
-
-				> .text
-					display block
-					margin 0
-					padding 8px 16px
-					overflow hidden
-					overflow-wrap break-word
-					font-size 1em
-					color rgba(0, 0, 0, 0.8)
-
-					&, *
-						user-select text
-						cursor auto
-
-					& + .file
-						&.image
-							> img
-								border-radius 0 0 16px 16px
-
-				> .file
-					&.image
-						> img
-							display block
-							max-width 100%
-							max-height 512px
-							border-radius 16px
-
-		> footer
-			display block
-			clear both
-			margin 0
-			padding 2px
-			font-size 10px
-			color rgba(0, 0, 0, 0.4)
-
-			> [data-fa]
-				margin-left 4px
-
-	&:not([data-is-me='true'])
-		> .avatar-anchor
-			float left
-
-		> .content-container
-			float left
-
-			> .balloon
-				background #eee
-
-				&:before
-					left -14px
-					border-top solid 8px transparent
-					border-right solid 8px #eee
-					border-bottom solid 8px transparent
-					border-left solid 8px transparent
-
-			> footer
-				text-align left
-
-	&[data-is-me='true']
-		> .avatar-anchor
-			float right
-
-		> .content-container
-			float right
-
-			> .balloon
-				background $me-balloon-color
-
-				&:before
-					right -14px
-					left auto
-					border-top solid 8px transparent
-					border-right solid 8px transparent
-					border-bottom solid 8px transparent
-					border-left solid 8px $me-balloon-color
-
-				> .content
-
-					> p.is-deleted
-						color rgba(255, 255, 255, 0.5)
-
-					> [ref='text']
-						&, *
-							color #fff !important
-
-			> footer
-				text-align right
-
-	&[data-is-deleted='true']
-			> .content-container
-				opacity 0.5
-
-</style>
diff --git a/src/web/app/common/views/components/messaging-room.form.vue b/src/web/app/common/views/components/messaging-room.form.vue
new file mode 100644
index 0000000000..470606b77f
--- /dev/null
+++ b/src/web/app/common/views/components/messaging-room.form.vue
@@ -0,0 +1,186 @@
+<template>
+<div class="mk-messaging-form">
+	<textarea v-model="text" @keypress="onKeypress" @paste="onPaste" placeholder="%i18n:common.input-message-here%"></textarea>
+	<div class="files"></div>
+	<mk-uploader ref="uploader"/>
+	<button class="send" @click="send" :disabled="sending" title="%i18n:common.send%">
+		<template v-if="!sending">%fa:paper-plane%</template><template v-if="sending">%fa:spinner .spin%</template>
+	</button>
+	<button class="attach-from-local" type="button" title="%i18n:common.tags.mk-messaging-form.attach-from-local%">
+		%fa:upload%
+	</button>
+	<button class="attach-from-drive" type="button" title="%i18n:common.tags.mk-messaging-form.attach-from-drive%">
+		%fa:R folder-open%
+	</button>
+	<input name="file" type="file" accept="image/*"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: ['user'],
+	data() {
+		return {
+			text: null,
+			file: null,
+			sending: false
+		};
+	},
+	methods: {
+		onPaste(e) {
+			const data = e.clipboardData;
+			const items = data.items;
+			for (const item of items) {
+				if (item.kind == 'file') {
+					//this.upload(item.getAsFile());
+				}
+			}
+		},
+
+		onKeypress(e) {
+			if ((e.which == 10 || e.which == 13) && e.ctrlKey) {
+				this.send();
+			}
+		},
+
+		chooseFile() {
+			(this.$refs.file as any).click();
+		},
+
+		chooseFileFromDrive() {
+			(this as any).apis.chooseDriveFile({
+				multiple: false
+			}).then(file => {
+				this.file = file;
+			});
+		},
+
+		upload() {
+			// TODO
+		},
+
+		send() {
+			this.sending = true;
+			(this as any).api('messaging/messages/create', {
+				user_id: this.user.id,
+				text: this.text
+			}).then(message => {
+				this.clear();
+			}).catch(err => {
+				console.error(err);
+			}).then(() => {
+				this.sending = false;
+			});
+		},
+
+		clear() {
+			this.text = '';
+			this.file = null;
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-messaging-form
+	> textarea
+		cursor auto
+		display block
+		width 100%
+		min-width 100%
+		max-width 100%
+		height 64px
+		margin 0
+		padding 8px
+		font-size 1em
+		color #000
+		outline none
+		border none
+		border-top solid 1px #eee
+		border-radius 0
+		box-shadow none
+		background transparent
+
+	> .send
+		position absolute
+		bottom 0
+		right 0
+		margin 0
+		padding 10px 14px
+		line-height 1em
+		font-size 1em
+		color #aaa
+		transition color 0.1s ease
+
+		&:hover
+			color $theme-color
+
+		&:active
+			color darken($theme-color, 10%)
+			transition color 0s ease
+
+	.files
+		display block
+		margin 0
+		padding 0 8px
+		list-style none
+
+		&:after
+			content ''
+			display block
+			clear both
+
+		> li
+			display block
+			float left
+			margin 4px
+			padding 0
+			width 64px
+			height 64px
+			background-color #eee
+			background-repeat no-repeat
+			background-position center center
+			background-size cover
+			cursor move
+
+			&:hover
+				> .remove
+					display block
+
+			> .remove
+				display none
+				position absolute
+				right -6px
+				top -6px
+				margin 0
+				padding 0
+				background transparent
+				outline none
+				border none
+				border-radius 0
+				box-shadow none
+				cursor pointer
+
+	.attach-from-local
+	.attach-from-drive
+		margin 0
+		padding 10px 14px
+		line-height 1em
+		font-size 1em
+		font-weight normal
+		text-decoration none
+		color #aaa
+		transition color 0.1s ease
+
+		&:hover
+			color $theme-color
+
+		&:active
+			color darken($theme-color, 10%)
+			transition color 0s ease
+
+	input[type=file]
+		display none
+
+</style>
diff --git a/src/web/app/common/views/components/messaging-room.message.vue b/src/web/app/common/views/components/messaging-room.message.vue
new file mode 100644
index 0000000000..95a6efa28b
--- /dev/null
+++ b/src/web/app/common/views/components/messaging-room.message.vue
@@ -0,0 +1,238 @@
+<template>
+<div class="message" :data-is-me="isMe">
+	<a class="avatar-anchor" :href="`/${message.user.username}`" :title="message.user.username" target="_blank">
+		<img class="avatar" :src="`${message.user.avatar_url}?thumbnail&size=80`" alt=""/>
+	</a>
+	<div class="content-container">
+		<div class="balloon">
+			<p class="read" v-if="message.is_me && message.is_read">%i18n:common.tags.mk-messaging-message.is-read%</p>
+			<button class="delete-button" v-if="message.is_me" title="%i18n:common.delete%">
+				<img src="/assets/desktop/messaging/delete.png" alt="Delete"/>
+			</button>
+			<div class="content" v-if="!message.is_deleted">
+				<mk-post-html class="text" v-if="message.ast" :ast="message.ast" :i="os.i"/>
+				<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
+				<div class="image" v-if="message.file">
+					<img :src="message.file.url" alt="image" :title="message.file.name"/>
+				</div>
+			</div>
+			<div class="content" v-if="message.is_deleted">
+				<p class="is-deleted">%i18n:common.tags.mk-messaging-message.deleted%</p>
+			</div>
+		</div>
+		<footer>
+			<mk-time :time="message.created_at"/>
+			<template v-if="message.is_edited">%fa:pencil-alt%</template>
+		</footer>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: ['message'],
+	computed: {
+		isMe(): boolean {
+			return this.message.user_id == (this as any).os.i.id;
+		},
+		urls(): string[] {
+			if (this.message.ast) {
+				return this.message.ast
+					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
+					.map(t => t.url);
+			} else {
+				return null;
+			}
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.message
+	$me-balloon-color = #23A7B6
+
+	padding 10px 12px 10px 12px
+	background-color transparent
+
+	&:after
+		content ""
+		display block
+		clear both
+
+	> .avatar-anchor
+		display block
+
+		> .avatar
+			display block
+			min-width 54px
+			min-height 54px
+			max-width 54px
+			max-height 54px
+			margin 0
+			border-radius 8px
+			transition all 0.1s ease
+
+	> .content-container
+		display block
+		margin 0 12px
+		padding 0
+		max-width calc(100% - 78px)
+
+		> .balloon
+			display block
+			float inherit
+			margin 0
+			padding 0
+			max-width 100%
+			min-height 38px
+			border-radius 16px
+
+			&:before
+				content ""
+				pointer-events none
+				display block
+				position absolute
+				top 12px
+
+			&:hover
+				> .delete-button
+					display block
+
+			> .delete-button
+				display none
+				position absolute
+				z-index 1
+				top -4px
+				right -4px
+				margin 0
+				padding 0
+				cursor pointer
+				outline none
+				border none
+				border-radius 0
+				box-shadow none
+				background transparent
+
+				> img
+					vertical-align bottom
+					width 16px
+					height 16px
+					cursor pointer
+
+			> .read
+				user-select none
+				display block
+				position absolute
+				z-index 1
+				bottom -4px
+				left -12px
+				margin 0
+				color rgba(0, 0, 0, 0.5)
+				font-size 11px
+
+			> .content
+
+				> .is-deleted
+					display block
+					margin 0
+					padding 0
+					overflow hidden
+					overflow-wrap break-word
+					font-size 1em
+					color rgba(0, 0, 0, 0.5)
+
+				> .text
+					display block
+					margin 0
+					padding 8px 16px
+					overflow hidden
+					overflow-wrap break-word
+					font-size 1em
+					color rgba(0, 0, 0, 0.8)
+
+					&, *
+						user-select text
+						cursor auto
+
+					& + .file
+						&.image
+							> img
+								border-radius 0 0 16px 16px
+
+				> .file
+					&.image
+						> img
+							display block
+							max-width 100%
+							max-height 512px
+							border-radius 16px
+
+		> footer
+			display block
+			clear both
+			margin 0
+			padding 2px
+			font-size 10px
+			color rgba(0, 0, 0, 0.4)
+
+			> [data-fa]
+				margin-left 4px
+
+	&:not([data-is-me])
+		> .avatar-anchor
+			float left
+
+		> .content-container
+			float left
+
+			> .balloon
+				background #eee
+
+				&:before
+					left -14px
+					border-top solid 8px transparent
+					border-right solid 8px #eee
+					border-bottom solid 8px transparent
+					border-left solid 8px transparent
+
+			> footer
+				text-align left
+
+	&[data-is-me]
+		> .avatar-anchor
+			float right
+
+		> .content-container
+			float right
+
+			> .balloon
+				background $me-balloon-color
+
+				&:before
+					right -14px
+					left auto
+					border-top solid 8px transparent
+					border-right solid 8px transparent
+					border-bottom solid 8px transparent
+					border-left solid 8px $me-balloon-color
+
+				> .content
+
+					> p.is-deleted
+						color rgba(255, 255, 255, 0.5)
+
+					> .text
+						&, *
+							color #fff !important
+
+			> footer
+				text-align right
+
+	&[data-is-deleted]
+			> .content-container
+				opacity 0.5
+
+</style>
diff --git a/src/web/app/common/views/components/messaging-room.vue b/src/web/app/common/views/components/messaging-room.vue
index d03799563e..5022655a25 100644
--- a/src/web/app/common/views/components/messaging-room.vue
+++ b/src/web/app/common/views/components/messaging-room.vue
@@ -8,14 +8,16 @@
 			<template v-if="fetchingMoreMessages">%fa:spinner .pulse .fw%</template>{{ fetchingMoreMessages ? '%i18n:common.loading%' : '%i18n:common.tags.mk-messaging-room.more%' }}
 		</button>
 		<template v-for="(message, i) in _messages">
-			<mk-messaging-message :message="message" :key="message.id"/>
-			<p class="date" :key="message.id + '-time'" v-if="i != messages.length - 1 && message._date != _messages[i + 1]._date"><span>{{ _messages[i + 1]._datetext }}</span></p>
+			<x-message :message="message" :key="message.id"/>
+			<p class="date" v-if="i != messages.length - 1 && message._date != _messages[i + 1]._date">
+				<span>{{ _messages[i + 1]._datetext }}</span>
+			</p>
 		</template>
 	</div>
 	<footer>
 		<div ref="notifications"></div>
 		<div class="grippie" title="%i18n:common.tags.mk-messaging-room.resize-form%"></div>
-		<mk-messaging-form :user="user"/>
+		<x-form :user="user"/>
 	</footer>
 </div>
 </template>
@@ -23,8 +25,14 @@
 <script lang="ts">
 import Vue from 'vue';
 import MessagingStreamConnection from '../../scripts/streaming/messaging-stream';
+import XMessage from './messaging-room.message.vue';
+import XForm from './messaging-room.form.vue';
 
 export default Vue.extend({
+	components: {
+		XMessage,
+		XForm
+	},
 	props: ['user', 'isNaked'],
 	data() {
 		return {
diff --git a/src/web/app/desktop/views/components/activity.vue b/src/web/app/desktop/views/components/activity.vue
index d1c44f0f5d..1b2cc9afd4 100644
--- a/src/web/app/desktop/views/components/activity.vue
+++ b/src/web/app/desktop/views/components/activity.vue
@@ -6,21 +6,21 @@
 	</template>
 	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
 	<template v-else>
-		<mk-activity-widget-calender v-show="view == 0" :data="[].concat(activity)"/>
-		<mk-activity-widget-chart v-show="view == 1" :data="[].concat(activity)"/>
+		<x-calender v-show="view == 0" :data="[].concat(activity)"/>
+		<x-chart v-show="view == 1" :data="[].concat(activity)"/>
 	</template>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import Calendar from './activity.calendar.vue';
-import Chart from './activity.chart.vue';
+import XCalendar from './activity.calendar.vue';
+import XChart from './activity.chart.vue';
 
 export default Vue.extend({
 	components: {
-		'mk-activity-widget-calender': Calendar,
-		'mk-activity-widget-chart': Chart
+		XCalendar,
+		XChart
 	},
 	props: {
 		design: {
diff --git a/src/web/app/desktop/views/components/context-menu.menu.vue b/src/web/app/desktop/views/components/context-menu.menu.vue
index 317833d9a8..e2c34a5915 100644
--- a/src/web/app/desktop/views/components/context-menu.menu.vue
+++ b/src/web/app/desktop/views/components/context-menu.menu.vue
@@ -1,6 +1,6 @@
 <template>
 <ul class="menu">
-	<li v-for="(item, i) in menu" :key="i" :class="item.type">
+	<li v-for="(item, i) in menu" :class="item.type">
 		<template v-if="item.type == 'item'">
 			<p @click="click(item)"><span :class="$style.icon" v-if="item.icon" v-html="item.icon"></span>{{ item.text }}</p>
 		</template>
diff --git a/src/web/app/desktop/views/components/context-menu.vue b/src/web/app/desktop/views/components/context-menu.vue
index 6076cdeb95..8bd9945840 100644
--- a/src/web/app/desktop/views/components/context-menu.vue
+++ b/src/web/app/desktop/views/components/context-menu.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="context-menu" :style="{ left: `${x}px`, top: `${y}px` }" @contextmenu.prevent="() => {}">
-	<me-nu :menu="menu" @x="click"/>
+	<x-menu :menu="menu" @x="click"/>
 </div>
 </template>
 
@@ -8,11 +8,11 @@
 import Vue from 'vue';
 import * as anime from 'animejs';
 import contains from '../../../common/scripts/contains';
-import meNu from './context-menu.menu.vue';
+import XMenu from './context-menu.menu.vue';
 
 export default Vue.extend({
 	components: {
-		'me-nu': meNu
+		XMenu
 	},
 	props: ['x', 'y', 'menu'],
 	mounted() {
diff --git a/src/web/app/desktop/views/components/drive.vue b/src/web/app/desktop/views/components/drive.vue
index fd30e13592..064e4de661 100644
--- a/src/web/app/desktop/views/components/drive.vue
+++ b/src/web/app/desktop/views/components/drive.vue
@@ -4,7 +4,7 @@
 		<div class="path" @contextmenu.prevent.stop="() => {}">
 			<mk-drive-nav-folder :class="{ current: folder == null }"/>
 			<template v-for="folder in hierarchyFolders">
-				<span class="separator" :key="folder.id + '>'">%fa:angle-right%</span>
+				<span class="separator">%fa:angle-right%</span>
 				<mk-drive-nav-folder :folder="folder" :key="folder.id"/>
 			</template>
 			<span class="separator" v-if="folder != null">%fa:angle-right%</span>
@@ -26,13 +26,13 @@
 			<div class="folders" ref="foldersContainer" v-if="folders.length > 0">
 				<mk-drive-folder v-for="folder in folders" :key="folder.id" class="folder" :folder="folder"/>
 				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
-				<div class="padding" v-for="n in 16" :key="n"></div>
+				<div class="padding" v-for="n in 16"></div>
 				<button v-if="moreFolders">%i18n:desktop.tags.mk-drive-browser.load-more%</button>
 			</div>
 			<div class="files" ref="filesContainer" v-if="files.length > 0">
 				<mk-drive-file v-for="file in files" :key="file.id" class="file" :file="file"/>
 				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
-				<div class="padding" v-for="n in 16" :key="n"></div>
+				<div class="padding" v-for="n in 16"></div>
 				<button v-if="moreFiles" @click="fetchMoreFiles">%i18n:desktop.tags.mk-drive-browser.load-more%</button>
 			</div>
 			<div class="empty" v-if="files.length == 0 && folders.length == 0 && !fetching">
diff --git a/src/web/app/desktop/views/components/post-detail.vue b/src/web/app/desktop/views/components/post-detail.vue
index c9fe00fca1..6eca035209 100644
--- a/src/web/app/desktop/views/components/post-detail.vue
+++ b/src/web/app/desktop/views/components/post-detail.vue
@@ -79,7 +79,7 @@ import XSub from './post-detail.sub.vue';
 
 export default Vue.extend({
 	components: {
-		'x-sub': XSub
+		XSub
 	},
 	props: {
 		post: {
diff --git a/src/web/app/desktop/views/components/posts.post.vue b/src/web/app/desktop/views/components/posts.post.vue
index 05934571a3..92218ead35 100644
--- a/src/web/app/desktop/views/components/posts.post.vue
+++ b/src/web/app/desktop/views/components/posts.post.vue
@@ -95,7 +95,7 @@ function focus(el, fn) {
 
 export default Vue.extend({
 	components: {
-		'x-sub': XSub
+		XSub
 	},
 	props: ['post'],
 	data() {
diff --git a/src/web/app/desktop/views/components/posts.vue b/src/web/app/desktop/views/components/posts.vue
index bda24e143c..7576fd31bd 100644
--- a/src/web/app/desktop/views/components/posts.vue
+++ b/src/web/app/desktop/views/components/posts.vue
@@ -2,7 +2,10 @@
 <div class="mk-posts">
 	<template v-for="(post, i) in _posts">
 		<x-post :post.sync="post" :key="post.id"/>
-		<p class="date" :key="post.id + '-time'" v-if="i != posts.length - 1 && post._date != _posts[i + 1]._date"><span>%fa:angle-up%{{ post._datetext }}</span><span>%fa:angle-down%{{ _posts[i + 1]._datetext }}</span></p>
+		<p class="date" v-if="i != posts.length - 1 && post._date != _posts[i + 1]._date">
+			<span>%fa:angle-up%{{ post._datetext }}</span>
+			<span>%fa:angle-down%{{ _posts[i + 1]._datetext }}</span>
+		</p>
 	</template>
 	<footer>
 		<slot name="footer"></slot>
@@ -16,7 +19,7 @@ import XPost from './posts.post.vue';
 
 export default Vue.extend({
 	components: {
-		'x-post': XPost
+		XPost
 	},
 	props: {
 		posts: {
diff --git a/src/web/app/desktop/views/components/settings.vue b/src/web/app/desktop/views/components/settings.vue
index 681e373ed1..148e11ed2a 100644
--- a/src/web/app/desktop/views/components/settings.vue
+++ b/src/web/app/desktop/views/components/settings.vue
@@ -77,7 +77,7 @@ import XProfile from './settings.profile.vue';
 
 export default Vue.extend({
 	components: {
-		'x-profile': XProfile
+		XProfile
 	},
 	data() {
 		return {
diff --git a/src/web/app/desktop/views/components/ui.header.vue b/src/web/app/desktop/views/components/ui.header.vue
index ef5e3a95d1..99de05facb 100644
--- a/src/web/app/desktop/views/components/ui.header.vue
+++ b/src/web/app/desktop/views/components/ui.header.vue
@@ -33,12 +33,12 @@ 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,
+		XNav,
+		XSearch,
+		XAccount,
+		XNotifications,
+		XPost,
+		XClock,
 	}
 });
 </script>
diff --git a/src/web/app/desktop/views/components/ui.vue b/src/web/app/desktop/views/components/ui.vue
index 9cd12f9648..87f932ff14 100644
--- a/src/web/app/desktop/views/components/ui.vue
+++ b/src/web/app/desktop/views/components/ui.vue
@@ -14,7 +14,7 @@ import XHeader from './ui.header.vue';
 
 export default Vue.extend({
 	components: {
-		'x-header': XHeader
+		XHeader
 	},
 	mounted() {
 		document.addEventListener('keydown', this.onKeydown);
diff --git a/src/web/app/desktop/views/components/widgets/server.cpu.vue b/src/web/app/desktop/views/components/widgets/server.cpu.vue
index 337ff62cec..96184d188d 100644
--- a/src/web/app/desktop/views/components/widgets/server.cpu.vue
+++ b/src/web/app/desktop/views/components/widgets/server.cpu.vue
@@ -15,7 +15,7 @@ import XPie from './server.pie.vue';
 
 export default Vue.extend({
 	components: {
-		'x-pie': XPie
+		XPie
 	},
 	props: ['connection', 'meta'],
 	data() {
diff --git a/src/web/app/desktop/views/components/widgets/server.disk.vue b/src/web/app/desktop/views/components/widgets/server.disk.vue
index c21c56290e..2af1982a96 100644
--- a/src/web/app/desktop/views/components/widgets/server.disk.vue
+++ b/src/web/app/desktop/views/components/widgets/server.disk.vue
@@ -16,7 +16,7 @@ import XPie from './server.pie.vue';
 
 export default Vue.extend({
 	components: {
-		'x-pie': XPie
+		XPie
 	},
 	props: ['connection'],
 	data() {
diff --git a/src/web/app/desktop/views/components/widgets/server.memory.vue b/src/web/app/desktop/views/components/widgets/server.memory.vue
index 2afc627fd5..834a62671d 100644
--- a/src/web/app/desktop/views/components/widgets/server.memory.vue
+++ b/src/web/app/desktop/views/components/widgets/server.memory.vue
@@ -16,7 +16,7 @@ import XPie from './server.pie.vue';
 
 export default Vue.extend({
 	components: {
-		'x-pie': XPie
+		XPie
 	},
 	props: ['connection'],
 	data() {
diff --git a/src/web/app/desktop/views/components/widgets/server.vue b/src/web/app/desktop/views/components/widgets/server.vue
index 5aa01fd4e8..00e2f8f186 100644
--- a/src/web/app/desktop/views/components/widgets/server.vue
+++ b/src/web/app/desktop/views/components/widgets/server.vue
@@ -33,12 +33,12 @@ export default define({
 	}
 }).extend({
 	components: {
-		'x-cpu-and-memory': XCpuMemory,
-		'x-cpu': XCpu,
-		'x-memory': XMemory,
-		'x-disk': XDisk,
-		'x-uptimes': XUptimes,
-		'x-info': XInfo
+		XCpuMemory,
+		XCpu,
+		XMemory,
+		XDisk,
+		XUptimes,
+		XInfo
 	},
 	data() {
 		return {
diff --git a/src/web/app/desktop/views/pages/index.vue b/src/web/app/desktop/views/pages/index.vue
index bd32c17b3b..6b8739e30f 100644
--- a/src/web/app/desktop/views/pages/index.vue
+++ b/src/web/app/desktop/views/pages/index.vue
@@ -1,16 +1,16 @@
 <template>
-	<component v-bind:is="os.isSignedIn ? 'home' : 'welcome'"></component>
+	<component :is="os.isSignedIn ? 'home' : 'welcome'"></component>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import HomeView from './home.vue';
-import WelcomeView from './welcome.vue';
+import Home from './home.vue';
+import Welcome from './welcome.vue';
 
 export default Vue.extend({
 	components: {
-		home: HomeView,
-		welcome: WelcomeView
+		Home,
+		Welcome
 	}
 });
 </script>
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
deleted file mode 100644
index 6f6673a7aa..0000000000
--- a/src/web/app/desktop/views/pages/user/user-followers-you-know.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-<div class="mk-user-followers-you-know">
-	<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">
-		<img :src="`${user.avatar_url}?thumbnail&size=64`" :alt="user.name" v-user-preview="user.id"/>
-	</router-link>
-	</div>
-	<p class="empty" v-if="!fetching && users.length == 0">%i18n:desktop.tags.mk-user.followers-you-know.no-users%</p>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
-	props: ['user'],
-	data() {
-		return {
-			users: [],
-			fetching: true
-		};
-	},
-	mounted() {
-		(this as any).api('users/followers', {
-			user_id: this.user.id,
-			iknow: true,
-			limit: 16
-		}).then(x => {
-			this.users = x.users;
-			this.fetching = false;
-		});
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-user-followers-you-know
-	background #fff
-	border solid 1px rgba(0, 0, 0, 0.075)
-	border-radius 6px
-
-	> .title
-		z-index 1
-		margin 0
-		padding 0 16px
-		line-height 42px
-		font-size 0.9em
-		font-weight bold
-		color #888
-		box-shadow 0 1px rgba(0, 0, 0, 0.07)
-
-		> i
-			margin-right 4px
-
-	> div
-		padding 8px
-
-		> a
-			display inline-block
-			margin 4px
-
-			> img
-				width 48px
-				height 48px
-				vertical-align bottom
-				border-radius 100%
-
-	> .initializing
-	> .empty
-		margin 0
-		padding 16px
-		text-align center
-		color #aaa
-
-		> i
-			margin-right 4px
-
-</style>
diff --git a/src/web/app/desktop/views/pages/user/user-friends.vue b/src/web/app/desktop/views/pages/user/user-friends.vue
deleted file mode 100644
index b173e42967..0000000000
--- a/src/web/app/desktop/views/pages/user/user-friends.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<template>
-<div class="mk-user-friends">
-	<p class="title">%fa:users%%i18n:desktop.tags.mk-user.frequently-replied-users.title%</p>
-	<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}`">
-				<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>
-				<p class="username">@{{ friend.username }}</p>
-			</div>
-			<mk-follow-button :user="friend"/>
-		</div>
-	</template>
-	<p class="empty" v-if="!fetching && users.length == 0">%i18n:desktop.tags.mk-user.frequently-replied-users.no-users%</p>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
-	props: ['user'],
-	data() {
-		return {
-			users: [],
-			fetching: true
-		};
-	},
-	mounted() {
-		(this as any).api('users/get_frequently_replied_users', {
-			user_id: this.user.id,
-			limit: 4
-		}).then(docs => {
-			this.users = docs.map(doc => doc.user);
-			this.fetching = false;
-		});
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-user-friends
-	background #fff
-	border solid 1px rgba(0, 0, 0, 0.075)
-	border-radius 6px
-
-	> .title
-		z-index 1
-		margin 0
-		padding 0 16px
-		line-height 42px
-		font-size 0.9em
-		font-weight bold
-		color #888
-		box-shadow 0 1px rgba(0, 0, 0, 0.07)
-
-		> i
-			margin-right 4px
-
-	> .initializing
-	> .empty
-		margin 0
-		padding 16px
-		text-align center
-		color #aaa
-
-		> i
-			margin-right 4px
-
-	> .user
-		padding 16px
-		border-bottom solid 1px #eee
-
-		&:last-child
-			border-bottom none
-
-		&:after
-			content ""
-			display block
-			clear both
-
-		> .avatar-anchor
-			display block
-			float left
-			margin 0 12px 0 0
-
-			> .avatar
-				display block
-				width 42px
-				height 42px
-				margin 0
-				border-radius 8px
-				vertical-align bottom
-
-		> .body
-			float left
-			width calc(100% - 54px)
-
-			> .name
-				margin 0
-				font-size 16px
-				line-height 24px
-				color #555
-
-			> .username
-				display block
-				margin 0
-				font-size 15px
-				line-height 16px
-				color #ccc
-
-		> .mk-follow-button
-			position absolute
-			top 16px
-			right 16px
-
-</style>
diff --git a/src/web/app/desktop/views/pages/user/user-header.vue b/src/web/app/desktop/views/pages/user/user-header.vue
deleted file mode 100644
index b4a24459ce..0000000000
--- a/src/web/app/desktop/views/pages/user/user-header.vue
+++ /dev/null
@@ -1,189 +0,0 @@
-<template>
-<div class="mk-user-header" :data-is-dark-background="user.banner_url != null">
-	<div class="banner-container" :style="user.banner_url ? `background-image: url(${user.banner_url}?thumbnail&size=2048)` : ''">
-		<div class="banner" ref="banner" :style="user.banner_url ? `background-image: url(${user.banner_url}?thumbnail&size=2048)` : ''" @click="onBannerClick"></div>
-	</div>
-	<div class="fade"></div>
-	<div class="container">
-		<img class="avatar" :src="`${user.avatar_url}?thumbnail&size=150`" alt="avatar"/>
-		<div class="title">
-			<p class="name">{{ user.name }}</p>
-			<p class="username">@{{ user.username }}</p>
-			<p class="location" v-if="user.profile.location">%fa:map-marker%{{ user.profile.location }}</p>
-		</div>
-		<footer>
-			<a :href="`/${user.username}`" :data-active="$parent.page == 'home'">%fa:home%概要</a>
-			<a :href="`/${user.username}/media`" :data-active="$parent.page == 'media'">%fa:image%メディア</a>
-			<a :href="`/${user.username}/graphs`" :data-active="$parent.page == 'graphs'">%fa:chart-bar%グラフ</a>
-		</footer>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import updateBanner from '../../../scripts/update-banner';
-
-export default Vue.extend({
-	props: ['user'],
-	mounted() {
-		window.addEventListener('load', this.onScroll);
-		window.addEventListener('scroll', this.onScroll);
-		window.addEventListener('resize', this.onScroll);
-	},
-	beforeDestroy() {
-		window.removeEventListener('load', this.onScroll);
-		window.removeEventListener('scroll', this.onScroll);
-		window.removeEventListener('resize', this.onScroll);
-	},
-	methods: {
-		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 as any).os.isSignedIn || (this as any).os.i.id != this.user.id) return;
-
-			updateBanner((this as any).os.i, i => {
-				this.user.banner_url = i.banner_url;
-			});
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-user-header
-	$banner-height = 320px
-	$footer-height = 58px
-
-	overflow hidden
-	background #f7f7f7
-	box-shadow 0 1px 1px rgba(0, 0, 0, 0.075)
-
-	&[data-is-dark-background]
-		> .banner-container
-			> .banner
-				background-color #383838
-
-		> .fade
-			background linear-gradient(transparent, rgba(0, 0, 0, 0.7))
-
-		> .container
-			> .title
-				color #fff
-
-				> .name
-					text-shadow 0 0 8px #000
-
-	> .banner-container
-		height $banner-height
-		overflow hidden
-		background-size cover
-		background-position center
-
-		> .banner
-			height 100%
-			background-color #f5f5f5
-			background-size cover
-			background-position center
-
-	> .fade
-		$fade-hight = 78px
-
-		position absolute
-		top ($banner-height - $fade-hight)
-		left 0
-		width 100%
-		height $fade-hight
-
-	> .container
-		max-width 1200px
-		margin 0 auto
-
-		> .avatar
-			display block
-			position absolute
-			bottom 16px
-			left 16px
-			z-index 2
-			width 160px
-			height 160px
-			margin 0
-			border solid 3px #fff
-			border-radius 8px
-			box-shadow 1px 1px 3px rgba(0, 0, 0, 0.2)
-
-		> .title
-			position absolute
-			bottom $footer-height
-			left 0
-			width 100%
-			padding 0 0 8px 195px
-			color #656565
-			font-family '游ゴシック', 'YuGothic', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'Meiryo', 'メイリオ', sans-serif
-
-			> .name
-				display block
-				margin 0
-				line-height 40px
-				font-weight bold
-				font-size 2em
-
-			> .username
-			> .location
-				display inline-block
-				margin 0 16px 0 0
-				line-height 20px
-				opacity 0.8
-
-				> i
-					margin-right 4px
-
-		> footer
-			z-index 1
-			height $footer-height
-			padding-left 195px
-
-			> a
-				display inline-block
-				margin 0
-				padding 0 16px
-				height $footer-height
-				line-height $footer-height
-				color #555
-
-				&[data-active]
-					border-bottom solid 4px $theme-color
-
-				> i
-					margin-right 6px
-
-			> button
-				display block
-				position absolute
-				top 0
-				right 0
-				margin 8px
-				padding 0
-				width $footer-height - 16px
-				line-height $footer-height - 16px - 2px
-				font-size 1.2em
-				color #777
-				border solid 1px #eee
-				border-radius 4px
-
-				&:hover
-					color #555
-					border solid 1px #ddd
-
-</style>
diff --git a/src/web/app/desktop/views/pages/user/user-home.vue b/src/web/app/desktop/views/pages/user/user-home.vue
deleted file mode 100644
index 5ed901579e..0000000000
--- a/src/web/app/desktop/views/pages/user/user-home.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<template>
-<div class="mk-user-home">
-	<div>
-		<div ref="left">
-			<mk-user-profile :user="user"/>
-			<mk-user-photos :user="user"/>
-			<mk-user-followers-you-know v-if="os.isSignedIn && os.i.id != user.id" :user="user"/>
-			<p>%i18n:desktop.tags.mk-user.last-used-at%: <b><mk-time :time="user.last_used_at"/></b></p>
-		</div>
-	</div>
-	<main>
-		<mk-post-detail v-if="user.pinned_post" :post="user.pinned_post" compact/>
-		<mk-user-timeline ref="tl" :user="user"/>
-	</main>
-	<div>
-		<div ref="right">
-			<mk-calendar @chosen="warp" :start="new Date(user.created_at)"/>
-			<mk-activity :user="user"/>
-			<mk-user-friends :user="user"/>
-			<div class="nav"><mk-nav/></div>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import MkUserTimeline from './user-timeline.vue';
-import MkUserProfile from './user-profile.vue';
-import MkUserPhotos from './user-photos.vue';
-import MkUserFollowersYouKnow from './user-followers-you-know.vue';
-import MkUserFriends from './user-friends.vue';
-
-export default Vue.extend({
-	components: {
-		'mk-user-timeline': MkUserTimeline,
-		'mk-user-profile': MkUserProfile,
-		'mk-user-photos': MkUserPhotos,
-		'mk-user-followers-you-know': MkUserFollowersYouKnow,
-		'mk-user-friends': MkUserFriends
-	},
-	props: ['user'],
-	methods: {
-		warp(date) {
-			(this.$refs.tl as any).warp(date);
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-user-home
-	display flex
-	justify-content center
-	margin 0 auto
-	max-width 1200px
-
-	> main
-	> div > div
-		> *:not(:last-child)
-			margin-bottom 16px
-
-	> main
-		padding 16px
-		width calc(100% - 275px * 2)
-
-		> .mk-user-timeline
-			border solid 1px rgba(0, 0, 0, 0.075)
-			border-radius 6px
-
-	> div
-		width 275px
-		margin 0
-
-		&:first-child > div
-			padding 16px 0 16px 16px
-
-			> p
-				display block
-				margin 0
-				padding 0 12px
-				text-align center
-				font-size 0.8em
-				color #aaa
-
-		&:last-child > div
-			padding 16px 16px 16px 0
-
-			> .nav
-				padding 16px
-				font-size 12px
-				color #aaa
-				background #fff
-				border solid 1px rgba(0, 0, 0, 0.075)
-				border-radius 6px
-
-				a
-					color #999
-
-				i
-					color #ccc
-
-</style>
diff --git a/src/web/app/desktop/views/pages/user/user-photos.vue b/src/web/app/desktop/views/pages/user/user-photos.vue
deleted file mode 100644
index 4029a95cc8..0000000000
--- a/src/web/app/desktop/views/pages/user/user-photos.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-<div class="mk-user-photos">
-	<p class="title">%fa:camera%%i18n:desktop.tags.mk-user.photos.title%</p>
-	<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:desktop.tags.mk-user.photos.loading%<mk-ellipsis/></p>
-	<div class="stream" v-if="!fetching && images.length > 0">
-		<div v-for="image in images" class="img"
-			:style="`background-image: url(${image.url}?thumbnail&size=256)`"
-		></div>
-	</div>
-	<p class="empty" v-if="!fetching && images.length == 0">%i18n:desktop.tags.mk-user.photos.no-photos%</p>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
-	props: ['user'],
-	data() {
-		return {
-			images: [],
-			fetching: true
-		};
-	},
-	mounted() {
-		(this as any).api('users/posts', {
-			user_id: this.user.id,
-			with_media: true,
-			limit: 9
-		}).then(posts => {
-			posts.forEach(post => {
-				post.media.forEach(media => {
-					if (this.images.length < 9) this.images.push(media);
-				});
-			});
-			this.fetching = false;
-		});
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-user-photos
-	background #fff
-	border solid 1px rgba(0, 0, 0, 0.075)
-	border-radius 6px
-
-	> .title
-		z-index 1
-		margin 0
-		padding 0 16px
-		line-height 42px
-		font-size 0.9em
-		font-weight bold
-		color #888
-		box-shadow 0 1px rgba(0, 0, 0, 0.07)
-
-		> i
-			margin-right 4px
-
-	> .stream
-		display -webkit-flex
-		display -moz-flex
-		display -ms-flex
-		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 #aaa
-
-		> i
-			margin-right 4px
-
-</style>
diff --git a/src/web/app/desktop/views/pages/user/user-profile.vue b/src/web/app/desktop/views/pages/user/user-profile.vue
deleted file mode 100644
index 32c28595e9..0000000000
--- a/src/web/app/desktop/views/pages/user/user-profile.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<template>
-<div class="mk-user-profile">
-	<div class="friend-form" v-if="os.isSignedIn && os.i.id != user.id">
-		<mk-follow-button :user="user" size="big"/>
-		<p class="followed" v-if="user.is_followed">%i18n:desktop.tags.mk-user.follows-you%</p>
-		<p v-if="user.is_muted">%i18n:desktop.tags.mk-user.muted% <a @click="unmute">%i18n:desktop.tags.mk-user.unmute%</a></p>
-		<p v-if="!user.is_muted"><a @click="mute">%i18n:desktop.tags.mk-user.mute%</a></p>
-	</div>
-	<div class="description" v-if="user.description">{{ user.description }}</div>
-	<div class="birthday" v-if="user.profile.birthday">
-		<p>%fa:birthday-cake%{{ user.profile.birthday.replace('-', '年').replace('-', '月') + '日' }} ({{ age }}歳)</p>
-	</div>
-	<div class="twitter" v-if="user.twitter">
-		<p>%fa:B twitter%<a :href="`https://twitter.com/${user.twitter.screen_name}`" target="_blank">@{{ user.twitter.screen_name }}</a></p>
-	</div>
-	<div class="status">
-		<p class="posts-count">%fa:angle-right%<a>{{ user.posts_count }}</a><b>投稿</b></p>
-		<p class="following">%fa:angle-right%<a @click="showFollowing">{{ user.following_count }}</a>人を<b>フォロー</b></p>
-		<p class="followers">%fa:angle-right%<a @click="showFollowers">{{ user.followers_count }}</a>人の<b>フォロワー</b></p>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import age from 's-age';
-import MkFollowingWindow from '../../components/following-window.vue';
-import MkFollowersWindow from '../../components/followers-window.vue';
-
-export default Vue.extend({
-	props: ['user'],
-	computed: {
-		age(): number {
-			return age(this.user.profile.birthday);
-		}
-	},
-	methods: {
-		showFollowing() {
-			document.body.appendChild(new MkFollowingWindow({
-				propsData: {
-					user: this.user
-				}
-			}).$mount().$el);
-		},
-
-		showFollowers() {
-			document.body.appendChild(new MkFollowersWindow({
-				propsData: {
-					user: this.user
-				}
-			}).$mount().$el);
-		},
-
-		mute() {
-			(this as any).api('mute/create', {
-				user_id: this.user.id
-			}).then(() => {
-				this.user.is_muted = true;
-			}, () => {
-				alert('error');
-			});
-		},
-
-		unmute() {
-			(this as any).api('mute/delete', {
-				user_id: this.user.id
-			}).then(() => {
-				this.user.is_muted = false;
-			}, () => {
-				alert('error');
-			});
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-user-profile
-	background #fff
-	border solid 1px rgba(0, 0, 0, 0.075)
-	border-radius 6px
-
-	> *:first-child
-		border-top none !important
-
-	> .friend-form
-		padding 16px
-		border-top solid 1px #eee
-
-		> .mk-big-follow-button
-			width 100%
-
-		> .followed
-			margin 12px 0 0 0
-			padding 0
-			text-align center
-			line-height 24px
-			font-size 0.8em
-			color #71afc7
-			background #eefaff
-			border-radius 4px
-
-	> .description
-		padding 16px
-		color #555
-		border-top solid 1px #eee
-
-	> .birthday
-		padding 16px
-		color #555
-		border-top solid 1px #eee
-
-		> p
-			margin 0
-
-			> i
-				margin-right 8px
-
-	> .twitter
-		padding 16px
-		color #555
-		border-top solid 1px #eee
-
-		> p
-			margin 0
-
-			> i
-				margin-right 8px
-
-	> .status
-		padding 16px
-		color #555
-		border-top solid 1px #eee
-
-		> p
-			margin 8px 0
-
-			> i
-				margin-left 8px
-				margin-right 8px
-
-</style>
diff --git a/src/web/app/desktop/views/pages/user/user-timeline.vue b/src/web/app/desktop/views/pages/user/user-timeline.vue
deleted file mode 100644
index 9dd07653c4..0000000000
--- a/src/web/app/desktop/views/pages/user/user-timeline.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<template>
-<div class="mk-user-timeline">
-	<header>
-		<span :data-is-active="mode == 'default'" @click="mode = 'default'">投稿</span>
-		<span :data-is-active="mode == 'with-replies'" @click="mode = 'with-replies'">投稿と返信</span>
-	</header>
-	<div class="loading" v-if="fetching">
-		<mk-ellipsis-icon/>
-	</div>
-	<p class="empty" v-if="empty">%fa:R comments%このユーザーはまだ何も投稿していないようです。</p>
-	<mk-posts ref="timeline" :posts="posts">
-		<div slot="footer">
-			<template v-if="!moreFetching">%fa:moon%</template>
-			<template v-if="moreFetching">%fa:spinner .pulse .fw%</template>
-		</div>
-	</mk-posts>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
-	props: ['user'],
-	data() {
-		return {
-			fetching: true,
-			moreFetching: false,
-			mode: 'default',
-			unreadCount: 0,
-			posts: [],
-			date: null
-		};
-	},
-	watch: {
-		mode() {
-			this.fetch();
-		}
-	},
-	computed: {
-		empty(): boolean {
-			return this.posts.length == 0;
-		}
-	},
-	mounted() {
-		document.addEventListener('keydown', this.onDocumentKeydown);
-		window.addEventListener('scroll', this.onScroll);
-
-		this.fetch(() => this.$emit('loaded'));
-	},
-	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(cb?) {
-			(this as any).api('users/posts', {
-				user_id: this.user.id,
-				until_date: this.date ? this.date.getTime() : undefined,
-				with_replies: this.mode == 'with-replies'
-			}).then(posts => {
-				this.posts = posts;
-				this.fetching = false;
-				if (cb) cb();
-			});
-		},
-		more() {
-			if (this.moreFetching || this.fetching || this.posts.length == 0) return;
-			this.moreFetching = true;
-			(this as any).api('users/posts', {
-				user_id: this.user.id,
-				with_replies: this.mode == 'with-replies',
-				until_id: this.posts[this.posts.length - 1].id
-			}).then(posts => {
-				this.moreFetching = false;
-				this.posts = this.posts.concat(posts);
-			});
-		},
-		onScroll() {
-			const current = window.scrollY + window.innerHeight;
-			if (current > document.body.offsetHeight - 16/*遊び*/) {
-				this.more();
-			}
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-user-timeline
-	background #fff
-
-	> header
-		padding 8px 16px
-		border-bottom solid 1px #eee
-
-		> span
-			margin-right 16px
-			line-height 27px
-			font-size 18px
-			color #555
-
-			&:not([data-is-active])
-				color $theme-color
-				cursor pointer
-
-				&:hover
-					text-decoration underline
-
-	> .loading
-		padding 64px 0
-
-	> .empty
-		display block
-		margin 0 auto
-		padding 32px
-		max-width 400px
-		text-align center
-		color #999
-
-		> [data-fa]
-			display block
-			margin-bottom 16px
-			font-size 3em
-			color #ccc
-
-</style>
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
new file mode 100644
index 0000000000..015b12d3d4
--- /dev/null
+++ b/src/web/app/desktop/views/pages/user/user.followers-you-know.vue
@@ -0,0 +1,79 @@
+<template>
+<div class="followers-you-know">
+	<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">
+		<img :src="`${user.avatar_url}?thumbnail&size=64`" :alt="user.name" v-user-preview="user.id"/>
+	</router-link>
+	</div>
+	<p class="empty" v-if="!fetching && users.length == 0">%i18n:desktop.tags.mk-user.followers-you-know.no-users%</p>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: ['user'],
+	data() {
+		return {
+			users: [],
+			fetching: true
+		};
+	},
+	mounted() {
+		(this as any).api('users/followers', {
+			user_id: this.user.id,
+			iknow: true,
+			limit: 16
+		}).then(x => {
+			this.users = x.users;
+			this.fetching = false;
+		});
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.followers-you-know
+	background #fff
+	border solid 1px rgba(0, 0, 0, 0.075)
+	border-radius 6px
+
+	> .title
+		z-index 1
+		margin 0
+		padding 0 16px
+		line-height 42px
+		font-size 0.9em
+		font-weight bold
+		color #888
+		box-shadow 0 1px rgba(0, 0, 0, 0.07)
+
+		> i
+			margin-right 4px
+
+	> div
+		padding 8px
+
+		> a
+			display inline-block
+			margin 4px
+
+			> img
+				width 48px
+				height 48px
+				vertical-align bottom
+				border-radius 100%
+
+	> .initializing
+	> .empty
+		margin 0
+		padding 16px
+		text-align center
+		color #aaa
+
+		> i
+			margin-right 4px
+
+</style>
diff --git a/src/web/app/desktop/views/pages/user/user.friends.vue b/src/web/app/desktop/views/pages/user/user.friends.vue
new file mode 100644
index 0000000000..d27009a82d
--- /dev/null
+++ b/src/web/app/desktop/views/pages/user/user.friends.vue
@@ -0,0 +1,119 @@
+<template>
+<div class="friends">
+	<p class="title">%fa:users%%i18n:desktop.tags.mk-user.frequently-replied-users.title%</p>
+	<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}`">
+				<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>
+				<p class="username">@{{ friend.username }}</p>
+			</div>
+			<mk-follow-button :user="friend"/>
+		</div>
+	</template>
+	<p class="empty" v-if="!fetching && users.length == 0">%i18n:desktop.tags.mk-user.frequently-replied-users.no-users%</p>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: ['user'],
+	data() {
+		return {
+			users: [],
+			fetching: true
+		};
+	},
+	mounted() {
+		(this as any).api('users/get_frequently_replied_users', {
+			user_id: this.user.id,
+			limit: 4
+		}).then(docs => {
+			this.users = docs.map(doc => doc.user);
+			this.fetching = false;
+		});
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.friends
+	background #fff
+	border solid 1px rgba(0, 0, 0, 0.075)
+	border-radius 6px
+
+	> .title
+		z-index 1
+		margin 0
+		padding 0 16px
+		line-height 42px
+		font-size 0.9em
+		font-weight bold
+		color #888
+		box-shadow 0 1px rgba(0, 0, 0, 0.07)
+
+		> i
+			margin-right 4px
+
+	> .initializing
+	> .empty
+		margin 0
+		padding 16px
+		text-align center
+		color #aaa
+
+		> i
+			margin-right 4px
+
+	> .user
+		padding 16px
+		border-bottom solid 1px #eee
+
+		&:last-child
+			border-bottom none
+
+		&:after
+			content ""
+			display block
+			clear both
+
+		> .avatar-anchor
+			display block
+			float left
+			margin 0 12px 0 0
+
+			> .avatar
+				display block
+				width 42px
+				height 42px
+				margin 0
+				border-radius 8px
+				vertical-align bottom
+
+		> .body
+			float left
+			width calc(100% - 54px)
+
+			> .name
+				margin 0
+				font-size 16px
+				line-height 24px
+				color #555
+
+			> .username
+				display block
+				margin 0
+				font-size 15px
+				line-height 16px
+				color #ccc
+
+		> .mk-follow-button
+			position absolute
+			top 16px
+			right 16px
+
+</style>
diff --git a/src/web/app/desktop/views/pages/user/user.header.vue b/src/web/app/desktop/views/pages/user/user.header.vue
new file mode 100644
index 0000000000..81174f6570
--- /dev/null
+++ b/src/web/app/desktop/views/pages/user/user.header.vue
@@ -0,0 +1,189 @@
+<template>
+<div class="header" :data-is-dark-background="user.banner_url != null">
+	<div class="banner-container" :style="user.banner_url ? `background-image: url(${user.banner_url}?thumbnail&size=2048)` : ''">
+		<div class="banner" ref="banner" :style="user.banner_url ? `background-image: url(${user.banner_url}?thumbnail&size=2048)` : ''" @click="onBannerClick"></div>
+	</div>
+	<div class="fade"></div>
+	<div class="container">
+		<img class="avatar" :src="`${user.avatar_url}?thumbnail&size=150`" alt="avatar"/>
+		<div class="title">
+			<p class="name">{{ user.name }}</p>
+			<p class="username">@{{ user.username }}</p>
+			<p class="location" v-if="user.profile.location">%fa:map-marker%{{ user.profile.location }}</p>
+		</div>
+		<footer>
+			<a :href="`/${user.username}`" :data-active="$parent.page == 'home'">%fa:home%概要</a>
+			<a :href="`/${user.username}/media`" :data-active="$parent.page == 'media'">%fa:image%メディア</a>
+			<a :href="`/${user.username}/graphs`" :data-active="$parent.page == 'graphs'">%fa:chart-bar%グラフ</a>
+		</footer>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import updateBanner from '../../../scripts/update-banner';
+
+export default Vue.extend({
+	props: ['user'],
+	mounted() {
+		window.addEventListener('load', this.onScroll);
+		window.addEventListener('scroll', this.onScroll);
+		window.addEventListener('resize', this.onScroll);
+	},
+	beforeDestroy() {
+		window.removeEventListener('load', this.onScroll);
+		window.removeEventListener('scroll', this.onScroll);
+		window.removeEventListener('resize', this.onScroll);
+	},
+	methods: {
+		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 as any).os.isSignedIn || (this as any).os.i.id != this.user.id) return;
+
+			updateBanner((this as any).os.i, i => {
+				this.user.banner_url = i.banner_url;
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.header
+	$banner-height = 320px
+	$footer-height = 58px
+
+	overflow hidden
+	background #f7f7f7
+	box-shadow 0 1px 1px rgba(0, 0, 0, 0.075)
+
+	&[data-is-dark-background]
+		> .banner-container
+			> .banner
+				background-color #383838
+
+		> .fade
+			background linear-gradient(transparent, rgba(0, 0, 0, 0.7))
+
+		> .container
+			> .title
+				color #fff
+
+				> .name
+					text-shadow 0 0 8px #000
+
+	> .banner-container
+		height $banner-height
+		overflow hidden
+		background-size cover
+		background-position center
+
+		> .banner
+			height 100%
+			background-color #f5f5f5
+			background-size cover
+			background-position center
+
+	> .fade
+		$fade-hight = 78px
+
+		position absolute
+		top ($banner-height - $fade-hight)
+		left 0
+		width 100%
+		height $fade-hight
+
+	> .container
+		max-width 1200px
+		margin 0 auto
+
+		> .avatar
+			display block
+			position absolute
+			bottom 16px
+			left 16px
+			z-index 2
+			width 160px
+			height 160px
+			margin 0
+			border solid 3px #fff
+			border-radius 8px
+			box-shadow 1px 1px 3px rgba(0, 0, 0, 0.2)
+
+		> .title
+			position absolute
+			bottom $footer-height
+			left 0
+			width 100%
+			padding 0 0 8px 195px
+			color #656565
+			font-family '游ゴシック', 'YuGothic', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'Meiryo', 'メイリオ', sans-serif
+
+			> .name
+				display block
+				margin 0
+				line-height 40px
+				font-weight bold
+				font-size 2em
+
+			> .username
+			> .location
+				display inline-block
+				margin 0 16px 0 0
+				line-height 20px
+				opacity 0.8
+
+				> i
+					margin-right 4px
+
+		> footer
+			z-index 1
+			height $footer-height
+			padding-left 195px
+
+			> a
+				display inline-block
+				margin 0
+				padding 0 16px
+				height $footer-height
+				line-height $footer-height
+				color #555
+
+				&[data-active]
+					border-bottom solid 4px $theme-color
+
+				> i
+					margin-right 6px
+
+			> button
+				display block
+				position absolute
+				top 0
+				right 0
+				margin 8px
+				padding 0
+				width $footer-height - 16px
+				line-height $footer-height - 16px - 2px
+				font-size 1.2em
+				color #777
+				border solid 1px #eee
+				border-radius 4px
+
+				&:hover
+					color #555
+					border solid 1px #ddd
+
+</style>
diff --git a/src/web/app/desktop/views/pages/user/user.home.vue b/src/web/app/desktop/views/pages/user/user.home.vue
new file mode 100644
index 0000000000..bf96741cb8
--- /dev/null
+++ b/src/web/app/desktop/views/pages/user/user.home.vue
@@ -0,0 +1,103 @@
+<template>
+<div class="home">
+	<div>
+		<div ref="left">
+			<x-profile :user="user"/>
+			<x-photos :user="user"/>
+			<x-followers-you-know v-if="os.isSignedIn && os.i.id != user.id" :user="user"/>
+			<p>%i18n:desktop.tags.mk-user.last-used-at%: <b><mk-time :time="user.last_used_at"/></b></p>
+		</div>
+	</div>
+	<main>
+		<mk-post-detail v-if="user.pinned_post" :post="user.pinned_post" compact/>
+		<x-timeline ref="tl" :user="user"/>
+	</main>
+	<div>
+		<div ref="right">
+			<mk-calendar @chosen="warp" :start="new Date(user.created_at)"/>
+			<mk-activity :user="user"/>
+			<x-friends :user="user"/>
+			<div class="nav"><mk-nav/></div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XUserTimeline from './user.timeline.vue';
+import XUserProfile from './user.profile.vue';
+import XUserPhotos from './user.photos.vue';
+import XUserFollowersYouKnow from './user.followers-you-know.vue';
+import XUserFriends from './user.friends.vue';
+
+export default Vue.extend({
+	components: {
+		XUserTimeline,
+		XUserProfile,
+		XUserPhotos,
+		XUserFollowersYouKnow,
+		XUserFriends
+	},
+	props: ['user'],
+	methods: {
+		warp(date) {
+			(this.$refs.tl as any).warp(date);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.home
+	display flex
+	justify-content center
+	margin 0 auto
+	max-width 1200px
+
+	> main
+	> div > div
+		> *:not(:last-child)
+			margin-bottom 16px
+
+	> main
+		padding 16px
+		width calc(100% - 275px * 2)
+
+		> .mk-user-timeline
+			border solid 1px rgba(0, 0, 0, 0.075)
+			border-radius 6px
+
+	> div
+		width 275px
+		margin 0
+
+		&:first-child > div
+			padding 16px 0 16px 16px
+
+			> p
+				display block
+				margin 0
+				padding 0 12px
+				text-align center
+				font-size 0.8em
+				color #aaa
+
+		&:last-child > div
+			padding 16px 16px 16px 0
+
+			> .nav
+				padding 16px
+				font-size 12px
+				color #aaa
+				background #fff
+				border solid 1px rgba(0, 0, 0, 0.075)
+				border-radius 6px
+
+				a
+					color #999
+
+				i
+					color #ccc
+
+</style>
diff --git a/src/web/app/desktop/views/pages/user/user.photos.vue b/src/web/app/desktop/views/pages/user/user.photos.vue
new file mode 100644
index 0000000000..db29a9945a
--- /dev/null
+++ b/src/web/app/desktop/views/pages/user/user.photos.vue
@@ -0,0 +1,88 @@
+<template>
+<div class="photos">
+	<p class="title">%fa:camera%%i18n:desktop.tags.mk-user.photos.title%</p>
+	<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:desktop.tags.mk-user.photos.loading%<mk-ellipsis/></p>
+	<div class="stream" v-if="!fetching && images.length > 0">
+		<div v-for="image in images" class="img"
+			:style="`background-image: url(${image.url}?thumbnail&size=256)`"
+		></div>
+	</div>
+	<p class="empty" v-if="!fetching && images.length == 0">%i18n:desktop.tags.mk-user.photos.no-photos%</p>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: ['user'],
+	data() {
+		return {
+			images: [],
+			fetching: true
+		};
+	},
+	mounted() {
+		(this as any).api('users/posts', {
+			user_id: this.user.id,
+			with_media: true,
+			limit: 9
+		}).then(posts => {
+			posts.forEach(post => {
+				post.media.forEach(media => {
+					if (this.images.length < 9) this.images.push(media);
+				});
+			});
+			this.fetching = false;
+		});
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.photos
+	background #fff
+	border solid 1px rgba(0, 0, 0, 0.075)
+	border-radius 6px
+
+	> .title
+		z-index 1
+		margin 0
+		padding 0 16px
+		line-height 42px
+		font-size 0.9em
+		font-weight bold
+		color #888
+		box-shadow 0 1px rgba(0, 0, 0, 0.07)
+
+		> i
+			margin-right 4px
+
+	> .stream
+		display -webkit-flex
+		display -moz-flex
+		display -ms-flex
+		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 #aaa
+
+		> i
+			margin-right 4px
+
+</style>
diff --git a/src/web/app/desktop/views/pages/user/user.profile.vue b/src/web/app/desktop/views/pages/user/user.profile.vue
new file mode 100644
index 0000000000..db2e32e808
--- /dev/null
+++ b/src/web/app/desktop/views/pages/user/user.profile.vue
@@ -0,0 +1,142 @@
+<template>
+<div class="profile">
+	<div class="friend-form" v-if="os.isSignedIn && os.i.id != user.id">
+		<mk-follow-button :user="user" size="big"/>
+		<p class="followed" v-if="user.is_followed">%i18n:desktop.tags.mk-user.follows-you%</p>
+		<p v-if="user.is_muted">%i18n:desktop.tags.mk-user.muted% <a @click="unmute">%i18n:desktop.tags.mk-user.unmute%</a></p>
+		<p v-if="!user.is_muted"><a @click="mute">%i18n:desktop.tags.mk-user.mute%</a></p>
+	</div>
+	<div class="description" v-if="user.description">{{ user.description }}</div>
+	<div class="birthday" v-if="user.profile.birthday">
+		<p>%fa:birthday-cake%{{ user.profile.birthday.replace('-', '年').replace('-', '月') + '日' }} ({{ age }}歳)</p>
+	</div>
+	<div class="twitter" v-if="user.twitter">
+		<p>%fa:B twitter%<a :href="`https://twitter.com/${user.twitter.screen_name}`" target="_blank">@{{ user.twitter.screen_name }}</a></p>
+	</div>
+	<div class="status">
+		<p class="posts-count">%fa:angle-right%<a>{{ user.posts_count }}</a><b>投稿</b></p>
+		<p class="following">%fa:angle-right%<a @click="showFollowing">{{ user.following_count }}</a>人を<b>フォロー</b></p>
+		<p class="followers">%fa:angle-right%<a @click="showFollowers">{{ user.followers_count }}</a>人の<b>フォロワー</b></p>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import age from 's-age';
+import MkFollowingWindow from '../../components/following-window.vue';
+import MkFollowersWindow from '../../components/followers-window.vue';
+
+export default Vue.extend({
+	props: ['user'],
+	computed: {
+		age(): number {
+			return age(this.user.profile.birthday);
+		}
+	},
+	methods: {
+		showFollowing() {
+			document.body.appendChild(new MkFollowingWindow({
+				propsData: {
+					user: this.user
+				}
+			}).$mount().$el);
+		},
+
+		showFollowers() {
+			document.body.appendChild(new MkFollowersWindow({
+				propsData: {
+					user: this.user
+				}
+			}).$mount().$el);
+		},
+
+		mute() {
+			(this as any).api('mute/create', {
+				user_id: this.user.id
+			}).then(() => {
+				this.user.is_muted = true;
+			}, () => {
+				alert('error');
+			});
+		},
+
+		unmute() {
+			(this as any).api('mute/delete', {
+				user_id: this.user.id
+			}).then(() => {
+				this.user.is_muted = false;
+			}, () => {
+				alert('error');
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.profile
+	background #fff
+	border solid 1px rgba(0, 0, 0, 0.075)
+	border-radius 6px
+
+	> *:first-child
+		border-top none !important
+
+	> .friend-form
+		padding 16px
+		border-top solid 1px #eee
+
+		> .mk-big-follow-button
+			width 100%
+
+		> .followed
+			margin 12px 0 0 0
+			padding 0
+			text-align center
+			line-height 24px
+			font-size 0.8em
+			color #71afc7
+			background #eefaff
+			border-radius 4px
+
+	> .description
+		padding 16px
+		color #555
+		border-top solid 1px #eee
+
+	> .birthday
+		padding 16px
+		color #555
+		border-top solid 1px #eee
+
+		> p
+			margin 0
+
+			> i
+				margin-right 8px
+
+	> .twitter
+		padding 16px
+		color #555
+		border-top solid 1px #eee
+
+		> p
+			margin 0
+
+			> i
+				margin-right 8px
+
+	> .status
+		padding 16px
+		color #555
+		border-top solid 1px #eee
+
+		> p
+			margin 8px 0
+
+			> i
+				margin-left 8px
+				margin-right 8px
+
+</style>
diff --git a/src/web/app/desktop/views/pages/user/user.timeline.vue b/src/web/app/desktop/views/pages/user/user.timeline.vue
new file mode 100644
index 0000000000..51c7589fd6
--- /dev/null
+++ b/src/web/app/desktop/views/pages/user/user.timeline.vue
@@ -0,0 +1,133 @@
+<template>
+<div class="timeline">
+	<header>
+		<span :data-is-active="mode == 'default'" @click="mode = 'default'">投稿</span>
+		<span :data-is-active="mode == 'with-replies'" @click="mode = 'with-replies'">投稿と返信</span>
+	</header>
+	<div class="loading" v-if="fetching">
+		<mk-ellipsis-icon/>
+	</div>
+	<p class="empty" v-if="empty">%fa:R comments%このユーザーはまだ何も投稿していないようです。</p>
+	<mk-posts ref="timeline" :posts="posts">
+		<div slot="footer">
+			<template v-if="!moreFetching">%fa:moon%</template>
+			<template v-if="moreFetching">%fa:spinner .pulse .fw%</template>
+		</div>
+	</mk-posts>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: ['user'],
+	data() {
+		return {
+			fetching: true,
+			moreFetching: false,
+			mode: 'default',
+			unreadCount: 0,
+			posts: [],
+			date: null
+		};
+	},
+	watch: {
+		mode() {
+			this.fetch();
+		}
+	},
+	computed: {
+		empty(): boolean {
+			return this.posts.length == 0;
+		}
+	},
+	mounted() {
+		document.addEventListener('keydown', this.onDocumentKeydown);
+		window.addEventListener('scroll', this.onScroll);
+
+		this.fetch(() => this.$emit('loaded'));
+	},
+	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(cb?) {
+			(this as any).api('users/posts', {
+				user_id: this.user.id,
+				until_date: this.date ? this.date.getTime() : undefined,
+				with_replies: this.mode == 'with-replies'
+			}).then(posts => {
+				this.posts = posts;
+				this.fetching = false;
+				if (cb) cb();
+			});
+		},
+		more() {
+			if (this.moreFetching || this.fetching || this.posts.length == 0) return;
+			this.moreFetching = true;
+			(this as any).api('users/posts', {
+				user_id: this.user.id,
+				with_replies: this.mode == 'with-replies',
+				until_id: this.posts[this.posts.length - 1].id
+			}).then(posts => {
+				this.moreFetching = false;
+				this.posts = this.posts.concat(posts);
+			});
+		},
+		onScroll() {
+			const current = window.scrollY + window.innerHeight;
+			if (current > document.body.offsetHeight - 16/*遊び*/) {
+				this.more();
+			}
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.timeline
+	background #fff
+
+	> header
+		padding 8px 16px
+		border-bottom solid 1px #eee
+
+		> span
+			margin-right 16px
+			line-height 27px
+			font-size 18px
+			color #555
+
+			&:not([data-is-active])
+				color $theme-color
+				cursor pointer
+
+				&:hover
+					text-decoration underline
+
+	> .loading
+		padding 64px 0
+
+	> .empty
+		display block
+		margin 0 auto
+		padding 32px
+		max-width 400px
+		text-align center
+		color #999
+
+		> [data-fa]
+			display block
+			margin-bottom 16px
+			font-size 3em
+			color #ccc
+
+</style>
diff --git a/src/web/app/desktop/views/pages/user/user.vue b/src/web/app/desktop/views/pages/user/user.vue
index 84f31e8548..095df0e489 100644
--- a/src/web/app/desktop/views/pages/user/user.vue
+++ b/src/web/app/desktop/views/pages/user/user.vue
@@ -1,9 +1,8 @@
 <template>
 <mk-ui>
 	<div class="user" v-if="!fetching">
-		<mk-user-header :user="user"/>
-		<mk-user-home v-if="page == 'home'" :user="user"/>
-		<mk-user-graphs v-if="page == 'graphs'" :user="user"/>
+		<x-header :user="user"/>
+		<x-home v-if="page == 'home'" :user="user"/>
 	</div>
 </mk-ui>
 </template>
@@ -11,13 +10,13 @@
 <script lang="ts">
 import Vue from 'vue';
 import Progress from '../../../../common/scripts/loading';
-import MkUserHeader from './user-header.vue';
-import MkUserHome from './user-home.vue';
+import XHeader from './user.header.vue';
+import XHome from './user.home.vue';
 
 export default Vue.extend({
 	components: {
-		'mk-user-header': MkUserHeader,
-		'mk-user-home': MkUserHome
+		XHeader,
+		XHome
 	},
 	props: {
 		page: {
diff --git a/src/web/app/mobile/views/components/notifications.vue b/src/web/app/mobile/views/components/notifications.vue
index 999dba4042..cc4b743aca 100644
--- a/src/web/app/mobile/views/components/notifications.vue
+++ b/src/web/app/mobile/views/components/notifications.vue
@@ -3,7 +3,7 @@
 	<div class="notifications" v-if="notifications.length != 0">
 		<template v-for="(notification, i) in _notifications">
 			<mk-notification :notification="notification" :key="notification.id"/>
-			<p class="date" :key="notification.id + '-time'" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date">
+			<p class="date" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date">
 				<span>%fa:angle-up%{ notification._datetext }</span>
 				<span>%fa:angle-down%{ _notifications[i + 1]._datetext }</span>
 			</p>
diff --git a/src/web/app/mobile/views/components/posts.vue b/src/web/app/mobile/views/components/posts.vue
index 0edda5e94c..e3abd9ca61 100644
--- a/src/web/app/mobile/views/components/posts.vue
+++ b/src/web/app/mobile/views/components/posts.vue
@@ -3,7 +3,7 @@
 	<slot name="head"></slot>
 	<template v-for="(post, i) in _posts">
 		<mk-posts-post :post="post" :key="post.id"/>
-		<p class="date" :key="post._datetext" v-if="i != posts.length - 1 && post._date != _posts[i + 1]._date">
+		<p class="date" v-if="i != posts.length - 1 && post._date != _posts[i + 1]._date">
 			<span>%fa:angle-up%{{ post._datetext }}</span>
 			<span>%fa:angle-down%{{ _posts[i + 1]._datetext }}</span>
 		</p>
diff --git a/src/web/app/mobile/views/pages/user/home-activity.vue b/src/web/app/mobile/views/pages/user/home-activity.vue
index f38c5568ea..87c1dca891 100644
--- a/src/web/app/mobile/views/pages/user/home-activity.vue
+++ b/src/web/app/mobile/views/pages/user/home-activity.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="mk-user-home-activity">
 	<svg v-if="data" ref="canvas" viewBox="0 0 30 1" preserveAspectRatio="none">
-		<g v-for="(d, i) in data.reverse()" :key="i">
+		<g v-for="(d, i) in data.reverse()">
 			<rect width="0.8" :height="d.postsH"
 				:x="i + 0.1" :y="1 - d.postsH - d.repliesH - d.repostsH"
 				fill="#41ddde"/>
-- 
cgit v1.2.3-freya