Add featured page

src/client/app/desktop/script.ts

@@ -134,6 +134,7 @@ init(async (launch, os) => {
 					{ path: '/@:user', name: 'user', component: () => import('./views/deck/deck.user-column.vue').then(m => m.default) },
 					{ path: '/notes/:note', name: 'note', component: () => import('./views/deck/deck.note-column.vue').then(m => m.default) },
 					{ path: '/tags/:tag', name: 'tag', component: () => import('./views/deck/deck.hashtag-column.vue').then(m => m.default) },
+					{ path: '/featured', component: () => import('./views/deck/deck.featured-column.vue').then(m => m.default) },
 					{ path: '/i/favorites', component: () => import('./views/deck/deck.favorites-column.vue').then(m => m.default) }
 				]}
 				: { path: '/', component: MkHome, children: [
@@ -141,6 +142,7 @@ init(async (launch, os) => {
 					{ path: '/@:user', name: 'user', component: () => import('./views/home/user/user.vue').then(m => m.default) },
 					{ path: '/notes/:note', name: 'note', component: () => import('./views/home/note.vue').then(m => m.default) },
 					{ path: '/tags/:tag', name: 'tag', component: () => import('./views/home/tag.vue').then(m => m.default) },
+					{ path: '/featured', component: () => import('./views/home/featured.vue').then(m => m.default) },
 					{ path: '/i/favorites', component: () => import('./views/home/favorites.vue').then(m => m.default) }
 				]},
 			{ path: '/i/messaging/:user', component: MkMessagingRoom },

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

@@ -25,14 +25,17 @@
 					<template v-if="hasUnreadMessagingMessage"><fa icon="circle"/></template>
 				</a>
 			</li>
-			<li class="game">
-				<a @click="game">
-					<fa icon="gamepad"/>
-					<p>{{ $t('game') }}</p>
-					<template v-if="hasGameInvitations"><fa icon="circle"/></template>
-				</a>
-			</li>
 		</template>
+		<li class="featured">
+			<router-link to="/featured"><fa :icon="faNewspaper"/><p>{{ $t('@.featured-notes') }}</p></router-link>
+		</li>
+		<li class="game">
+			<a @click="game">
+				<fa icon="gamepad"/>
+				<p>{{ $t('game') }}</p>
+				<template v-if="hasGameInvitations"><fa icon="circle"/></template>
+			</a>
+		</li>
 	</ul>
 </div>
 </template>
@@ -42,13 +45,15 @@ import Vue from 'vue';
 import i18n from '../../../i18n';
 import MkMessagingWindow from './messaging-window.vue';
 import MkGameWindow from './game-window.vue';
+import { faNewspaper } from '@fortawesome/free-solid-svg-icons';
 
 export default Vue.extend({
 	i18n: i18n('desktop/views/components/ui.header.nav.vue'),
 	data() {
 		return {
 			hasGameInvitations: false,
-			connection: null
+			connection: null,
+			faNewspaper
 		};
 	},
 	computed: {

src/client/app/desktop/views/deck/deck.featured-column.vue

@@ -0,0 +1,59 @@
+<template>
+<x-column>
+	<span slot="header">
+		<fa :icon="faNewspaper"/>{{ $t('@.featured-notes') }}
+	</span>
+
+	<div>
+		<x-notes ref="timeline" :more="null"/>
+	</div>
+</x-column>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import XColumn from './deck.column.vue';
+import XNotes from './deck.notes.vue';
+import { faNewspaper } from '@fortawesome/free-solid-svg-icons';
+
+export default Vue.extend({
+	i18n: i18n(),
+
+	components: {
+		XColumn,
+		XNotes,
+	},
+
+	data() {
+		return {
+			fetching: true,
+			faNewspaper
+		};
+	},
+
+	mounted() {
+		this.fetch();
+	},
+
+	methods: {
+		fetch() {
+			this.fetching = true;
+
+			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
+				this.$root.api('notes/featured', {
+					limit: 15,
+				}).then(notes => {
+					res(notes);
+					this.fetching = false;
+					this.$emit('loaded');
+				}, rej);
+			}));
+		},
+
+		focus() {
+			this.$refs.timeline.focus();
+		}
+	}
+});
+</script>

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

@@ -0,0 +1,54 @@
+<template>
+<div class="glowckho" v-if="!fetching">
+	<sequential-entrance animation="entranceFromTop" delay="25">
+		<template v-for="note in notes">
+			<mk-note-detail class="post" :note="note" :key="note.id"/>
+		</template>
+	</sequential-entrance>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Progress from '../../../common/scripts/loading';
+
+export default Vue.extend({
+	data() {
+		return {
+			fetching: true,
+			notes: [],
+		};
+	},
+	created() {
+		this.fetch();
+	},
+	methods: {
+		fetch() {
+			Progress.start();
+			this.fetching = true;
+
+			this.$root.api('notes/featured', {
+				limit: 10
+			}).then(notes => {
+				this.notes = notes;
+				this.fetching = false;
+
+				Progress.done();
+			});
+		},
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.glowckho
+	margin 0 auto
+
+	> * > .post
+		margin-bottom 16px
+
+	> .more
+		margin 32px 16px 16px 16px
+		text-align center
+
+</style>