Improve drive information

src/client/app/desktop/views/components/drive-window.vue

@@ -2,7 +2,7 @@
 <mk-window ref="window" @closed="destroyDom" width="800px" height="500px" :popout-url="popout">
 	<template slot="header">
 		<p v-if="usage" :class="$style.info"><b>{{ usage.toFixed(1) }}%</b> %i18n:@used%</p>
-		<span :class="$style.title">%fa:cloud%%i18n:@drive%</span>
+		<span :class="$style.title">%fa:cloud%%i18n:common.drive%</span>
 	</template>
 	<mk-drive :class="$style.browser" multiple :init-folder="folder" ref="browser"/>
 </mk-window>

src/client/app/desktop/views/components/drive.nav-folder.vue

@@ -8,7 +8,7 @@
 	@drop.stop="onDrop"
 >
 	<template v-if="folder == null">%fa:cloud%</template>
-	<span>{{ folder == null ? '%i18n:@drive%' : folder.name }}</span>
+	<span>{{ folder == null ? '%i18n:common.drive%' : folder.name }}</span>
 </div>
 </template>
 

src/client/app/desktop/views/components/settings.drive.vue

@@ -1,34 +0,0 @@
-<template>
-<div class="root">
-	<template v-if="!fetching">
-		<p><b>{{ capacity | bytes }}</b>%i18n:@max%<b>{{ usage | bytes }}</b>%i18n:@in-use%</p>
-	</template>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
-	data() {
-		return {
-			fetching: true,
-			usage: null,
-			capacity: null
-		};
-	},
-	mounted() {
-		(this as any).api('drive').then(info => {
-			this.capacity = info.capacity;
-			this.usage = info.usage;
-			this.fetching = false;
-		});
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.root
-	> p
-		> b
-			margin 0 8px
-</style>

src/client/app/desktop/views/components/settings.vue

@@ -5,7 +5,7 @@
 		<p :class="{ active: page == 'theme' }" @mousedown="page = 'theme'">%fa:palette .fw%%i18n:@theme%</p>
 		<p :class="{ active: page == 'web' }" @mousedown="page = 'web'">%fa:desktop .fw%Web</p>
 		<p :class="{ active: page == 'notification' }" @mousedown="page = 'notification'">%fa:R bell .fw%%i18n:@notification%</p>
-		<p :class="{ active: page == 'drive' }" @mousedown="page = 'drive'">%fa:cloud .fw%%i18n:@drive%</p>
+		<p :class="{ active: page == 'drive' }" @mousedown="page = 'drive'">%fa:cloud .fw%%i18n:common.drive%</p>
 		<p :class="{ active: page == 'hashtags' }" @mousedown="page = 'hashtags'">%fa:hashtag .fw%%i18n:@tags%</p>
 		<p :class="{ active: page == 'mute' }" @mousedown="page = 'mute'">%fa:ban .fw%%i18n:@mute%</p>
 		<p :class="{ active: page == 'apps' }" @mousedown="page = 'apps'">%fa:puzzle-piece .fw%%i18n:@apps%</p>
@@ -189,12 +189,9 @@
 			</section>
 		</ui-card>
 
-		<ui-card class="drive" v-show="page == 'drive'">
-			<div slot="title">%fa:cloud% %i18n:@drive%</div>
-			<section>
-				<x-drive/>
-			</section>
-		</ui-card>
+		<div class="drive" v-if="page == 'drive'">
+			<mk-drive-settings/>
+		</div>
 
 		<ui-card class="hashtags" v-show="page == 'hashtags'">
 			<div slot="title">%fa:hashtag% %i18n:@tags%</div>
@@ -301,7 +298,6 @@ import X2fa from './settings.2fa.vue';
 import XApi from './settings.api.vue';
 import XApps from './settings.apps.vue';
 import XSignins from './settings.signins.vue';
-import XDrive from './settings.drive.vue';
 import XTags from './settings.tags.vue';
 import { url, langs, version } from '../../../config';
 import checkForUpdate from '../../../common/scripts/check-for-update';
@@ -314,7 +310,6 @@ export default Vue.extend({
 		XApi,
 		XApps,
 		XSignins,
-		XDrive,
 		XTags
 	},
 	props: {

src/client/app/desktop/views/components/ui.header.account.vue

@@ -11,7 +11,7 @@
 					<router-link :to="`/@${ $store.state.i.username }`">%fa:user%<span>%i18n:@profile%</span>%fa:angle-right%</router-link>
 				</li>
 				<li @click="drive">
-					<p>%fa:cloud%<span>%i18n:@drive%</span>%fa:angle-right%</p>
+					<p>%fa:cloud%<span>%i18n:common.drive%</span>%fa:angle-right%</p>
 				</li>
 				<li>
 					<router-link to="/i/favorites">%fa:star%<span>%i18n:@favorites%</span>%fa:angle-right%</router-link>