Improve desktop UX (#4262)

* wip

* wip

* wip

* wip

* wip

* wip

* Merge

* wip

* wip

* wip

* wip

* wip

* wip

src/client/app/desktop/views/home/note.vue

@@ -0,0 +1,63 @@
+<template>
+<div v-if="!fetching" class="kcthdwmv">
+	<mk-note-detail :note="note"/>
+	<footer>
+		<router-link v-if="note.next" :to="note.next"><fa icon="angle-left"/> {{ $t('next') }}</router-link>
+		<router-link v-if="note.prev" :to="note.prev">{{ $t('prev') }} <fa icon="angle-right"/></router-link>
+	</footer>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import Progress from '../../../common/scripts/loading';
+
+export default Vue.extend({
+	i18n: i18n('desktop/views/pages/note.vue'),
+	data() {
+		return {
+			fetching: true,
+			note: null
+		};
+	},
+	watch: {
+		$route: 'fetch'
+	},
+	created() {
+		this.fetch();
+	},
+	methods: {
+		fetch() {
+			Progress.start();
+			this.fetching = true;
+
+			this.$root.api('notes/show', {
+				noteId: this.$route.params.note
+			}).then(note => {
+				this.note = note;
+				this.fetching = false;
+
+				Progress.done();
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.kcthdwmv
+	text-align center
+
+	> footer
+		margin-top 16px
+
+		> a
+			display inline-block
+			margin 0 16px
+
+	> .mk-note-detail
+		margin 0 auto
+		width 640px
+
+</style>