feat(client): メンションにユーザーのアバターを表示するように

Resolve #350

CHANGELOG.md

@@ -7,6 +7,13 @@
 
 -->
 
+## 12.x.x (unreleased)
+
+### Improvements
+- クライアント: メンションにユーザーのアバターを表示するように
+
+### Bugfixes
+
 ## 12.93.2 (2021/10/23)
 
 ### Bugfixes

assets/user-unknown.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d03c2c53fd6f38b37c0a8e3024062129209ceabcd4bed02bc29aa855972f542c
+size 3518

src/client/components/mention.vue

@@ -1,6 +1,7 @@
 <template>
 <MkA class="ldlomzub" :class="{ isMe }" :to="url" v-user-preview="canonical" v-if="url.startsWith('/')">
 	<span class="me" v-if="isMe">{{ $ts.you }}</span>
+	<img class="icon" :src="`/avatar/@${username}@${host}`" alt="">
 	<span class="main">
 		<span class="username">@{{ username }}</span>
 		<span class="host" v-if="(host != localHost) || $store.state.showFullAcct">@{{ toUnicode(host) }}</span>
@@ -76,6 +77,13 @@ export default defineComponent({
 		vertical-align: top;
 	}
 
+	> .icon {
+		width: 1.5em;
+		margin: 0 0.2em;
+		vertical-align: bottom;
+		border-radius: 100%;
+	}
+
 	> .main {
 		> .host {
 			opacity: 0.5;

src/models/repositories/user.ts

@@ -155,6 +155,14 @@ export class UserRepository extends Repository<User> {
 		);
 	}
 
+	public getAvatarUrl(user: User): string {
+		if (user.avatarUrl) {
+			return user.avatarUrl;
+		} else {
+			return `${config.url}/random-avatar/${user.id}`;
+		}
+	}
+
 	public async pack(
 		src: User['id'] | User,
 		me?: { id: User['id'] } | null | undefined,
@@ -186,7 +194,7 @@ export class UserRepository extends Repository<User> {
 			name: user.name,
 			username: user.username,
 			host: user.host,
-			avatarUrl: user.avatarUrl ? user.avatarUrl : config.url + '/avatar/' + user.id,
+			avatarUrl: this.getAvatarUrl(user),
 			avatarBlurhash: user.avatarBlurhash,
 			avatarColor: null, // 後方互換性のため
 			isAdmin: user.isAdmin || falsy,

src/server/index.ts

@@ -26,6 +26,7 @@ import { networkChart } from '@/services/chart/index';
 import { genAvatar } from '@/misc/gen-avatar';
 import { createTemp } from '@/misc/create-temp';
 import { publishMainStream } from '@/services/stream';
+import { parseAcct } from '@/misc/acct';
 
 export const serverLogger = new Logger('server', 'gray', false);
 
@@ -68,7 +69,22 @@ router.use(activityPub.routes());
 router.use(nodeinfo.routes());
 router.use(wellKnown.routes());
 
-router.get('/avatar/:x', async ctx => {
+router.get('/avatar/@:acct', async ctx => {
+	const { username, host } = parseAcct(ctx.params.acct);
+	const user = await Users.findOne({
+		usernameLower: username.toLowerCase(),
+		host: host === config.host ? null : host,
+		isSuspended: false
+	});
+
+	if (user) {
+		ctx.redirect(Users.getAvatarUrl(user));
+	} else {
+		ctx.redirect('/static-assets/user-unknown.png');
+	}
+});
+
+router.get('/random-avatar/:x', async ctx => {
 	const [temp] = await createTemp();
 	await genAvatar(ctx.params.x, fs.createWriteStream(temp));
 	ctx.set('Content-Type', 'image/png');