wip

src/web/app/desktop/views/pages/home.vue

 <template>
-	<mk-ui>
-		<mk-home ref="home" :mode="mode"/>
-	</mk-ui>
+<mk-ui>
+	<mk-home :mode="mode"/>
+</mk-ui>
 </template>
 
 <script lang="ts">

src/web/app/mobile/tags/page/home.tag

-<mk-home-page>
-	<mk-ui ref="ui">
-		<mk-home ref="home"/>
-	</mk-ui>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-	</style>
-	<script lang="typescript">
-		import ui from '../../scripts/ui-event';
-		import Progress from '../../../common/scripts/loading';
-		import getPostSummary from '../../../../../common/get-post-summary.ts';
-		import openPostForm from '../../scripts/open-post-form';
-
-		this.mixin('i');
-
-		this.mixin('stream');
-		this.connection = this.stream.getConnection();
-		this.connectionId = this.stream.use();
-
-		this.unreadCount = 0;
-
-		this.on('mount', () => {
-			document.title = 'Misskey'
-			ui.trigger('title', '%fa:home%%i18n:mobile.tags.mk-home.home%');
-			document.documentElement.style.background = '#313a42';
-
-			ui.trigger('func', () => {
-				openPostForm();
-			}, '%fa:pencil-alt%');
-
-			Progress.start();
-
-			this.connection.on('post', this.onStreamPost);
-			document.addEventListener('visibilitychange', this.onVisibilitychange, false);
-
-			this.$refs.ui.refs.home.on('loaded', () => {
-				Progress.done();
-			});
-		});
-
-		this.on('unmount', () => {
-			this.connection.off('post', this.onStreamPost);
-			this.stream.dispose(this.connectionId);
-			document.removeEventListener('visibilitychange', this.onVisibilitychange);
-		});
-
-		this.onStreamPost = post => {
-			if (document.hidden && post.user_id !== this.$root.$data.os.i.id) {
-				this.unreadCount++;
-				document.title = `(${this.unreadCount}) ${getPostSummary(post)}`;
-			}
-		};
-
-		this.onVisibilitychange = () => {
-			if (!document.hidden) {
-				this.unreadCount = 0;
-				document.title = 'Misskey';
-			}
-		};
-	</script>
-</mk-home-page>

src/web/app/mobile/views/components/ui-header.vue

@@ -6,8 +6,10 @@
 		<div class="content">
 			<button class="nav" @click="parent.toggleDrawer">%fa:bars%</button>
 			<template v-if="hasUnreadNotifications || hasUnreadMessagingMessages">%fa:circle%</template>
-			<h1 ref="title">Misskey</h1>
-			<button v-if="func" @click="func"><mk-raw content={ funcIcon }/></button>
+			<h1>
+				<slot>Misskey</slot>
+			</h1>
+			<button v-if="func" @click="func" v-html="funcIcon"></button>
 		</div>
 	</div>
 </div>
@@ -17,6 +19,7 @@
 import Vue from 'vue';
 
 export default Vue.extend({
+	props: ['func', 'funcIcon'],
 	data() {
 		return {
 			func: null,
@@ -62,10 +65,6 @@ export default Vue.extend({
 		}
 	},
 	methods: {
-		setFunc(fn, icon) {
-			this.func = fn;
-			this.funcIcon = icon;
-		},
 		onReadAllNotifications() {
 			this.hasUnreadNotifications = false;
 		},

src/web/app/mobile/views/components/ui.vue

 <template>
 <div class="mk-ui">
-	<mk-ui-header/>
+	<mk-ui-header :func="func" :func-icon="funcIcon">
+		<slot name="header"></slot>
+	</mk-ui-header>
 	<mk-ui-nav :is-open="isDrawerOpening"/>
 	<div class="content">
 		<slot></slot>
@@ -12,6 +14,7 @@
 <script lang="ts">
 import Vue from 'vue';
 export default Vue.extend({
+	props: ['title', 'func', 'funcIcon'],
 	data() {
 		return {
 			isDrawerOpening: false,

src/web/app/mobile/views/pages/home.vue

+<template>
+<mk-ui :func="fn" func-icon="%fa:pencil-alt%">
+	<span slot="header">%fa:home%%i18n:mobile.tags.mk-home.home%</span>
+	<mk-home @loaded="onHomeLoaded"/>
+</mk-ui>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Progress from '../../../common/scripts/loading';
+import getPostSummary from '../../../../../common/get-post-summary';
+import openPostForm from '../../scripts/open-post-form';
+
+export default Vue.extend({
+	data() {
+		return {
+			connection: null,
+			connectionId: null,
+			unreadCount: 0
+		};
+	},
+	mounted() {
+		document.title = 'Misskey';
+		document.documentElement.style.background = '#313a42';
+
+		this.connection = this.$root.$data.os.stream.getConnection();
+		this.connectionId = this.$root.$data.os.stream.use();
+
+		this.connection.on('post', this.onStreamPost);
+		document.addEventListener('visibilitychange', this.onVisibilitychange, false);
+
+		Progress.start();
+	},
+	beforeDestroy() {
+		this.connection.off('post', this.onStreamPost);
+		this.$root.$data.os.stream.dispose(this.connectionId);
+		document.removeEventListener('visibilitychange', this.onVisibilitychange);
+	},
+	methods: {
+		fn() {
+			openPostForm();
+		},
+		onHomeLoaded() {
+			Progress.done();
+		},
+		onStreamPost(post) {
+			if (document.hidden && post.user_id !== this.$root.$data.os.i.id) {
+				this.unreadCount++;
+				document.title = `(${this.unreadCount}) ${getPostSummary(post)}`;
+			}
+		},
+		onVisibilitychange() {
+			if (!document.hidden) {
+				this.unreadCount = 0;
+				document.title = 'Misskey';
+			}
+		}
+	}
+});
+</script>