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: [PATCH] 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 -------
 ...ader-account.vue => ui.header.account.vue} |  4 +-
 ...i-header-clock.vue => ui.header.clock.vue} |  4 +-
 .../{ui-header-nav.vue => ui.header.nav.vue}  | 10 +++--
 ...ations.vue => ui.header.notifications.vue} |  8 ++--
 ...der-post-button.vue => ui.header.post.vue} |  4 +-
 ...header-search.vue => ui.header.search.vue} |  4 +-
 .../{ui-header.vue => ui.header.vue}          | 39 ++++++++++++++-----
 src/web/app/desktop/views/components/ui.vue   | 14 +++----
 .../pages/user/user-followers-you-know.vue    |  2 +-
 .../desktop/views/pages/user/user-friends.vue |  4 +-
 src/web/app/desktop/views/pages/user/user.vue | 29 +++++++++-----
 src/web/app/init.ts                           |  2 +
 16 files changed, 89 insertions(+), 61 deletions(-)
 create mode 100644 src/web/app/desktop/api/post.ts
 rename src/web/app/desktop/views/components/{ui-header-account.vue => ui.header.account.vue} (98%)
 rename src/web/app/desktop/views/components/{ui-header-clock.vue => ui.header.clock.vue} (96%)
 rename src/web/app/desktop/views/components/{ui-header-nav.vue => ui.header.nav.vue} (95%)
 rename src/web/app/desktop/views/components/{ui-header-notifications.vue => ui.header.notifications.vue} (96%)
 rename src/web/app/desktop/views/components/{ui-header-post-button.vue => ui.header.post.vue} (93%)
 rename src/web/app/desktop/views/components/{ui-header-search.vue => ui.header.search.vue} (92%)
 rename src/web/app/desktop/views/components/{ui-header.vue => ui.header.vue} (63%)

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
similarity index 98%
rename from src/web/app/desktop/views/components/ui-header-account.vue
rename to src/web/app/desktop/views/components/ui.header.account.vue
index 337c47674e..3728f94be8 100644
--- a/src/web/app/desktop/views/components/ui-header-account.vue
+++ b/src/web/app/desktop/views/components/ui.header.account.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="mk-ui-header-account">
+<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"/>
@@ -81,7 +81,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-ui-header-account
+.account
 	> .header
 		display block
 		margin 0
diff --git a/src/web/app/desktop/views/components/ui-header-clock.vue b/src/web/app/desktop/views/components/ui.header.clock.vue
similarity index 96%
rename from src/web/app/desktop/views/components/ui-header-clock.vue
rename to src/web/app/desktop/views/components/ui.header.clock.vue
index cfed1e84a6..cd23a67506 100644
--- a/src/web/app/desktop/views/components/ui-header-clock.vue
+++ b/src/web/app/desktop/views/components/ui.header.clock.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="mk-ui-header-clock">
+<div class="clock">
 	<div class="header">
 		<time ref="time">
 			<span class="yyyymmdd">{{ yyyy }}/{{ mm }}/{{ dd }}</span>
@@ -56,7 +56,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-ui-header-clock
+.clock
 	display inline-block
 	overflow visible
 
diff --git a/src/web/app/desktop/views/components/ui-header-nav.vue b/src/web/app/desktop/views/components/ui.header.nav.vue
similarity index 95%
rename from src/web/app/desktop/views/components/ui-header-nav.vue
rename to src/web/app/desktop/views/components/ui.header.nav.vue
index cf276dc5c1..5895255ff9 100644
--- a/src/web/app/desktop/views/components/ui-header-nav.vue
+++ b/src/web/app/desktop/views/components/ui.header.nav.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="mk-ui-header-nav">
+<div class="nav">
 	<ul>
 		<template v-if="os.isSignedIn">
 			<li class="home" :class="{ active: page == 'home' }">
@@ -17,7 +17,7 @@
 			</li>
 		</template>
 		<li class="ch">
-			<a :href="_CH_URL_" target="_blank">
+			<a :href="chUrl" target="_blank">
 				%fa:tv%
 				<p>%i18n:desktop.tags.mk-ui-header-nav.ch%</p>
 			</a>
@@ -34,6 +34,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import { chUrl } from '../../../config';
 import MkMessagingWindow from './messaging-window.vue';
 
 export default Vue.extend({
@@ -41,7 +42,8 @@ export default Vue.extend({
 		return {
 			hasUnreadMessagingMessages: false,
 			connection: null,
-			connectionId: null
+			connectionId: null,
+			chUrl
 		};
 	},
 	mounted() {
@@ -84,7 +86,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-ui-header-nav
+.nav
 	display inline-block
 	margin 0
 	padding 0
diff --git a/src/web/app/desktop/views/components/ui-header-notifications.vue b/src/web/app/desktop/views/components/ui.header.notifications.vue
similarity index 96%
rename from src/web/app/desktop/views/components/ui-header-notifications.vue
rename to src/web/app/desktop/views/components/ui.header.notifications.vue
index d4dc553c53..5467dda856 100644
--- a/src/web/app/desktop/views/components/ui-header-notifications.vue
+++ b/src/web/app/desktop/views/components/ui.header.notifications.vue
@@ -1,9 +1,9 @@
 <template>
-<div class="mk-ui-header-notifications">
+<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="notifications" v-if="isOpen">
+	<div class="pop" v-if="isOpen">
 		<mk-notifications/>
 	</div>
 </div>
@@ -82,7 +82,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-ui-header-notifications
+.notifications
 
 	> button
 		display block
@@ -114,7 +114,7 @@ export default Vue.extend({
 			font-size 10px
 			color $theme-color
 
-	> .notifications
+	> .pop
 		display block
 		position absolute
 		top 56px
diff --git a/src/web/app/desktop/views/components/ui-header-post-button.vue b/src/web/app/desktop/views/components/ui.header.post.vue
similarity index 93%
rename from src/web/app/desktop/views/components/ui-header-post-button.vue
rename to src/web/app/desktop/views/components/ui.header.post.vue
index 754e05b23f..10bce0622c 100644
--- a/src/web/app/desktop/views/components/ui-header-post-button.vue
+++ b/src/web/app/desktop/views/components/ui.header.post.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="mk-ui-header-post-button">
+<div class="post">
 	<button @click="post" title="%i18n:desktop.tags.mk-ui-header-post-button.post%">%fa:pencil-alt%</button>
 </div>
 </template>
@@ -17,7 +17,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-ui-header-post-button
+.post
 	display inline-block
 	padding 8px
 	height 100%
diff --git a/src/web/app/desktop/views/components/ui-header-search.vue b/src/web/app/desktop/views/components/ui.header.search.vue
similarity index 92%
rename from src/web/app/desktop/views/components/ui-header-search.vue
rename to src/web/app/desktop/views/components/ui.header.search.vue
index 84ca9848cc..c063de6bb0 100644
--- a/src/web/app/desktop/views/components/ui-header-search.vue
+++ b/src/web/app/desktop/views/components/ui.header.search.vue
@@ -1,5 +1,5 @@
 <template>
-<form class="mk-ui-header-search" @submit.prevent="onSubmit">
+<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>
@@ -24,7 +24,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-ui-header-search
+.search
 
 	> [data-fa]
 		display block
diff --git a/src/web/app/desktop/views/components/ui-header.vue b/src/web/app/desktop/views/components/ui.header.vue
similarity index 63%
rename from src/web/app/desktop/views/components/ui-header.vue
rename to src/web/app/desktop/views/components/ui.header.vue
index 6b89985adf..ef5e3a95d1 100644
--- a/src/web/app/desktop/views/components/ui-header.vue
+++ b/src/web/app/desktop/views/components/ui.header.vue
@@ -1,19 +1,19 @@
 <template>
-<div class="mk-ui-header">
+<div class="header">
 	<mk-special-message/>
 	<div class="main">
 		<div class="backdrop"></div>
 		<div class="main">
 			<div class="container">
 				<div class="left">
-					<mk-ui-header-nav/>
+					<x-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/>
+					<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>
@@ -21,9 +21,30 @@
 </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>
-.mk-ui-header
-	display block
+.header
 	position -webkit-sticky
 	position sticky
 	top 0
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を初期化してコールバックする