[Client] Some optimizations

4 files changed, 22 insertions, 73 deletions

diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index fa497cc605..eb2bc5aefb 100644
--- a/src/client/app/common/views/components/index.ts
+++ b/src/client/app/common/views/components/index.ts
@@ -1,13 +1,8 @@
 import Vue from 'vue';
 
 import followButton from './follow-button.vue';
-import muteAndBlock from './mute-and-block.vue';
 import error from './error.vue';
-import apiSettings from './api-settings.vue';
-import passwordSettings from './password-settings.vue';
-import profileEditor from './profile-editor.vue';
 import noteSkeleton from './note-skeleton.vue';
-import theme from './theme.vue';
 import instance from './instance.vue';
 import cwButton from './cw-button.vue';
 import tagCloud from './tag-cloud.vue';
@@ -27,7 +22,6 @@ import pollEditor from './poll-editor.vue';
 import reactionIcon from './reaction-icon.vue';
 import reactionsViewer from './reactions-viewer.vue';
 import time from './time.vue';
-import timer from './timer.vue';
 import mediaList from './media-list.vue';
 import uploader from './uploader.vue';
 import streamIndicator from './stream-indicator.vue';
@@ -52,13 +46,8 @@ import formButton from './ui/form/button.vue';
 import formRadio from './ui/form/radio.vue';
 
 Vue.component('mk-follow-button', followButton);
-Vue.component('mk-mute-and-block', muteAndBlock);
 Vue.component('mk-error', error);
-Vue.component('mk-api-settings', apiSettings);
-Vue.component('mk-password-settings', passwordSettings);
-Vue.component('mk-profile-editor', profileEditor);
 Vue.component('mk-note-skeleton', noteSkeleton);
-Vue.component('mk-theme', theme);
 Vue.component('mk-instance', instance);
 Vue.component('mk-cw-button', cwButton);
 Vue.component('mk-tag-cloud', tagCloud);
@@ -78,7 +67,6 @@ Vue.component('mk-poll-editor', pollEditor);
 Vue.component('mk-reaction-icon', reactionIcon);
 Vue.component('mk-reactions-viewer', reactionsViewer);
 Vue.component('mk-time', time);
-Vue.component('mk-timer', timer);
 Vue.component('mk-media-list', mediaList);
 Vue.component('mk-uploader', uploader);
 Vue.component('mk-stream-indicator', streamIndicator);
diff --git a/src/client/app/common/views/components/timer.vue b/src/client/app/common/views/components/timer.vue
deleted file mode 100644
index a3c4f01b77..0000000000
--- a/src/client/app/common/views/components/timer.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-<time class="mk-time">
-	{{ hh }}:{{ mm }}:{{ ss }}
-</time>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	props: {
-		time: {
-			type: [Date, String],
-			required: true
-		}
-	},
-	data() {
-		return {
-			tickId: null,
-			hh: null,
-			mm: null,
-			ss: null
-		};
-	},
-	computed: {
-		_time(): Date {
-			return typeof this.time == 'string' ? new Date(this.time) : this.time;
-		}
-	},
-	created() {
-		this.tick();
-		this.tickId = setInterval(this.tick, 1000);
-	},
-	destroyed() {
-		clearInterval(this.tickId);
-	},
-	methods: {
-		tick() {
-			const now = new Date().getTime();
-			const start = this._time.getTime();
-			const ago = Math.floor((now - start) / 1000);
-
-			this.hh = Math.floor(ago / (60 * 60)).toString().padStart(2, '0');
-			this.mm = Math.floor(ago / 60).toString().padStart(2, '0');
-			this.ss = (ago % 60).toString().padStart(2, '0');
-		}
-	}
-});
-</script>
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index 833de3f256..92ef3a389c 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -15,7 +15,7 @@
 	</div>
 	<div class="pages">
 		<div class="profile" v-show="page == 'profile'">
-			<mk-profile-editor/>
+			<x-profile-editor/>
 
 			<ui-card>
 				<div slot="title"><fa :icon="['fab', 'twitter']"/> {{ $t('twitter') }}</div>
@@ -36,7 +36,7 @@
 			<div slot="title"><fa icon="palette"/> {{ $t('theme') }}</div>
 
 			<section>
-				<mk-theme/>
+				<x-theme/>
 			</section>
 		</ui-card>
 
@@ -205,7 +205,7 @@
 		</ui-card>
 
 		<div class="muteAndBlock" v-show="page == 'muteAndBlock'">
-			<mk-mute-and-block/>
+			<x-mute-and-block/>
 		</div>
 
 		<ui-card class="apps" v-show="page == 'apps'">
@@ -218,7 +218,7 @@
 		<ui-card class="password" v-show="page == 'security'">
 			<div slot="title"><fa icon="unlock-alt"/> {{ $t('password') }}</div>
 			<section>
-				<mk-password-settings/>
+				<x-password-settings/>
 			</section>
 		</ui-card>
 
@@ -237,7 +237,7 @@
 		</ui-card>
 
 		<div class="api" v-show="page == 'api'">
-			<mk-api-settings/>
+			<x-api-settings/>
 		</div>
 
 		<ui-card class="other" v-show="page == 'other'">
@@ -302,7 +302,12 @@ export default Vue.extend({
 		XApps,
 		XSignins,
 		XTags,
-		XDriveSettings: () => import('../../../common/views/components/drive-settings.vue')
+		XTheme: () => import('../../../common/views/components/theme.vue'),
+		XDriveSettings: () => import('../../../common/views/components/drive-settings.vue'),
+		XMuteAndBlock: () => import('../../../common/views/components/mute-and-block.vue'),
+		XPasswordSettings: () => import('../../../common/views/components/password-settings.vue'),
+		XProfileEditor: () => import('../../../common/views/components/profile-editor.vue'),
+		XApiSettings: () => import('../../../common/views/components/api-settings.vue'),
 	},
 	props: {
 		initialPage: {
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index 3006ae7db5..65278540b2 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -5,12 +5,12 @@
 		<div class="signin-as" v-html="this.$t('signed-in-as').replace('{}', `<b>${name}</b>`)"></div>
 
 		<div>
-			<mk-profile-editor/>
+			<x-profile-editor/>
 
 			<ui-card>
 				<div slot="title"><fa icon="palette"/> {{ $t('theme') }}</div>
 				<section>
-					<mk-theme/>
+					<x-theme/>
 				</section>
 			</ui-card>
 
@@ -87,7 +87,7 @@
 
 			<x-drive-settings/>
 
-			<mk-mute-and-block/>
+			<x-mute-and-block/>
 
 			<ui-card>
 				<div slot="title"><fa icon="volume-up"/> {{ $t('sound') }}</div>
@@ -140,12 +140,12 @@
 				</section>
 			</ui-card>
 
-			<mk-api-settings />
+			<x-api-settings />
 
 			<ui-card>
 				<div slot="title"><fa icon="unlock-alt"/> {{ $t('password') }}</div>
 				<section>
-					<mk-password-settings/>
+					<x-password-settings/>
 				</section>
 			</ui-card>
 
@@ -184,7 +184,12 @@ export default Vue.extend({
 	i18n: i18n('mobile/views/pages/settings.vue'),
 
 	components: {
-		XDriveSettings: () => import('../../../common/views/components/drive-settings.vue')
+		XTheme: () => import('../../../common/views/components/theme.vue'),
+		XDriveSettings: () => import('../../../common/views/components/drive-settings.vue'),
+		XMuteAndBlock: () => import('../../../common/views/components/mute-and-block.vue'),
+		XPasswordSettings: () => import('../../../common/views/components/password-settings.vue'),
+		XProfileEditor: () => import('../../../common/views/components/profile-editor.vue'),
+		XApiSettings: () => import('../../../common/views/components/api-settings.vue'),
 	},
 
 	data() {