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">

src/client/pages/instance/federation.instance.vue

@@ -1,5 +1,5 @@
 <template>
-<x-window @closed="() => { $emit('closed'); destroyDom(); }" :no-padding="true">
+<x-window @closed="() => { $emit('closed'); destroyDom(); }" :no-padding="true" :width="520" :height="500">
 	<template #header>{{ instance.host }}</template>
 	<div class="mk-instance-info">
 		<div class="table info">

src/client/widgets/federation.vue

@@ -0,0 +1,111 @@
+<template>
+<mk-container :show-header="props.showHeader">
+	<template #header><fa :icon="faGlobe"/>{{ $t('_widgets.federation') }}</template>
+
+	<div class="wbrkwalb">
+		<mk-loading v-if="fetching"/>
+		<transition-group tag="div" name="chart" class="instances" v-else>
+			<div v-for="instance in instances" :key="instance.id">
+				<div class="instance">
+					<a class="a" :href="'https://' + instance.host" target="_blank" :title="instance.host">#{{ instance.host }}</a>
+					<p>{{ instance.softwareName }} {{ instance.softwareVersion }}</p>
+				</div>
+				<x-chart class="chart" :src="stat.chart"/>
+			</div>
+		</transition-group>
+	</div>
+</mk-container>
+</template>
+
+<script lang="ts">
+import { faGlobe } from '@fortawesome/free-solid-svg-icons';
+import MkContainer from '../components/ui/container.vue';
+import define from './define';
+import XChart from './trends.chart.vue';
+
+export default define({
+	name: 'federation',
+	props: () => ({
+		showHeader: {
+			type: 'boolean',
+			default: true,
+		},
+	})
+}).extend({
+	components: {
+		MkContainer, XChart
+	},
+	data() {
+		return {
+			instances: [],
+			fetching: true,
+			faGlobe
+		};
+	},
+	mounted() {
+		this.fetch();
+		this.clock = setInterval(this.fetch, 1000 * 60);
+	},
+	beforeDestroy() {
+		clearInterval(this.clock);
+	},
+	methods: {
+		fetch() {
+			this.$root.api('federation/instances', {
+				sort: '+lastCommunicatedAt',
+				limit: 5
+			}).then(instances => {
+				this.instances = instances;
+				this.fetching = false;
+			});
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.wbrkwalb {
+	height: (62px + 1px) + (62px + 1px) + (62px + 1px) + (62px + 1px) + 62px;
+	overflow: hidden;
+
+	> .instances {
+		.chart-move {
+			transition: transform 1s ease;
+		}
+
+		> div {
+			display: flex;
+			align-items: center;
+			padding: 14px 16px;
+			border-bottom: solid 1px var(--divider);
+
+			> .instance {
+				flex: 1;
+				overflow: hidden;
+				font-size: 0.9em;
+				color: var(--fg);
+
+				> .a {
+					display: block;
+					width: 100%;
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					line-height: 18px;
+				}
+
+				> p {
+					margin: 0;
+					font-size: 75%;
+					opacity: 0.7;
+					line-height: 16px;
+				}
+			}
+
+			> .chart {
+				height: 30px;
+			}
+		}
+	}
+}
+</style>

src/client/widgets/index.ts

@@ -12,6 +12,7 @@ export default function(app: App) {
 	app.component('mkw-activity', defineAsyncComponent(() => import('./activity.vue').then(m => m.default)));
 	app.component('mkw-photos', defineAsyncComponent(() => import('./photos.vue').then(m => m.default)));
 	app.component('mkw-digitalClock', defineAsyncComponent(() => import('./digital-clock.vue').then(m => m.default)));
+	app.component('mkw-federation', defineAsyncComponent(() => import('./federation.vue').then(m => m.default)));
 }
 
 export const widgets = [
@@ -25,4 +26,5 @@ export const widgets = [
 	'activity',
 	'photos',
 	'digitalClock',
+	'federation',
 ];