Merge branch 'develop' into vue3

src/client/components/avatar.vue

@@ -40,7 +40,24 @@ export default defineComponent({
 				: this.user.avatarUrl;
 		},
 	},
+	watch: {
+		'user.avatarBlurhash'() {
+			this.$el.style.color = this.getBlurhashAvgColor(this.user.avatarBlurhash);
+		}
+	},
+	mounted() {
+		this.$el.style.color = this.getBlurhashAvgColor(this.user.avatarBlurhash);
+	},
 	methods: {
+		getBlurhashAvgColor(s) {
+			return typeof s == 'string'
+				? '#' + [...s.slice(2, 6)]
+						.map(x => '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~'.indexOf(x))
+						.reduce((a, c) => a * 83 + c, 0)
+						.toString(16)
+						.padStart(6, '0')
+				: undefined;
+		},
 		onClick(e) {
 			this.$emit('click', e);
 		}

src/client/components/deck/direct-column.vue

@@ -2,20 +2,21 @@
 <x-column :name="name" :column="column" :is-stacked="isStacked" :menu="menu">
 	<template #header><fa :icon="faEnvelope" style="margin-right: 8px;"/>{{ column.name }}</template>
 
-	<x-direct/>
+	<x-notes :pagination="pagination" @before="before()" @after="after()"/>
 </x-column>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
+import Progress from '../../scripts/loading';
 import XColumn from './column.vue';
-import XDirect from '../../pages/messages.vue';
+import XNotes from '../notes.vue';
 
 export default defineComponent({
 	components: {
 		XColumn,
-		XDirect
+		XNotes
 	},
 
 	props: {
@@ -32,8 +33,25 @@ export default defineComponent({
 	data() {
 		return {
 			menu: null,
+			pagination: {
+				endpoint: 'notes/mentions',
+				limit: 10,
+				params: () => ({
+					visibility: 'specified'
+				})
+			},
 			faEnvelope
 		}
 	},
+
+	methods: {
+		before() {
+			Progress.start();
+		},
+
+		after() {
+			Progress.done();
+		}
+	}
 });
 </script>

src/client/components/deck/mentions-column.vue

@@ -2,20 +2,21 @@
 <x-column :column="column" :is-stacked="isStacked" :menu="menu">
 	<template #header><fa :icon="faAt" style="margin-right: 8px;"/>{{ column.name }}</template>
 
-	<x-mentions/>
+	<x-notes :pagination="pagination" @before="before()" @after="after()"/>
 </x-column>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faAt } from '@fortawesome/free-solid-svg-icons';
+import Progress from '../../scripts/loading';
 import XColumn from './column.vue';
-import XMentions from '../../pages/mentions.vue';
+import XNotes from '../notes.vue';
 
 export default defineComponent({
 	components: {
 		XColumn,
-		XMentions
+		XNotes
 	},
 
 	props: {
@@ -32,8 +33,22 @@ export default defineComponent({
 	data() {
 		return {
 			menu: null,
+			pagination: {
+				endpoint: 'notes/mentions',
+				limit: 10,
+			},
 			faAt
 		}
 	},
+
+	methods: {
+		before() {
+			Progress.start();
+		},
+
+		after() {
+			Progress.done();
+		}
+	}
 });
 </script>

src/client/components/note.vue

@@ -34,19 +34,19 @@
 		</div>
 	</div>
 	<article class="article">
-		<mk-avatar class="avatar" :user="appearNote.user"/>
+		<mk-avatar class="avatar" :user="appearNote.user" v-once/>
 		<div class="main">
 			<x-note-header class="header" :note="appearNote" :mini="true"/>
 			<div class="body" v-if="appearNote.deletedAt == null" ref="noteBody">
 				<p v-if="appearNote.cw != null" class="cw">
-				<mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis" />
+				<mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis" v-once/>
 					<x-cw-button v-model="showContent" :note="appearNote"/>
 				</p>
 				<div class="content" v-show="appearNote.cw == null || showContent">
 					<div class="text">
 						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ $t('private') }})</span>
 						<router-link class="reply" v-if="appearNote.replyId" :to="`/notes/${appearNote.replyId}`"><fa :icon="faReply"/></router-link>
-						<mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis"/>
+						<mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis" v-once/>
 						<a class="rp" v-if="appearNote.renote != null">RN:</a>
 					</div>
 					<div class="files" v-if="appearNote.files.length > 0">