v12 (#5712)

Co-authored-by: MeiMei <30769358+mei23@users.noreply.github.com>
Co-authored-by: Satsuki Yanagi <17376330+u1-liquid@users.noreply.github.com>

src/client/pages/messages.vue

@@ -0,0 +1,49 @@
+<template>
+<div>
+	<portal to="icon"><fa :icon="faEnvelope"/></portal>
+	<portal to="title">{{ $t('directNotes') }}</portal>
+	<x-notes :pagination="pagination" :detail="true" @before="before()" @after="after()"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
+import Progress from '../scripts/loading';
+import XNotes from '../components/notes.vue';
+
+export default Vue.extend({
+	metaInfo() {
+		return {
+			title: this.$t('directNotes') as string
+		};
+	},
+
+	components: {
+		XNotes
+	},
+
+	data() {
+		return {
+			pagination: {
+				endpoint: 'notes/mentions',
+				limit: 10,
+				params: () => ({
+					visibility: 'specified'
+				})
+			},
+			faEnvelope
+		};
+	},
+
+	methods: {
+		before() {
+			Progress.start();
+		},
+
+		after() {
+			Progress.done();
+		}
+	}
+});
+</script>