From dedb37995f27cfc051343e438c1b99767b6cc6ec Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 24 Oct 2021 21:02:50 +0900
Subject: [PATCH] =?UTF-8?q?feat(client):=20=E3=83=A1=E3=83=B3=E3=82=B7?=
 =?UTF-8?q?=E3=83=A7=E3=83=B3=E3=81=AB=E3=83=A6=E3=83=BC=E3=82=B6=E3=83=BC?=
 =?UTF-8?q?=E3=81=AE=E3=82=A2=E3=83=90=E3=82=BF=E3=83=BC=E3=82=92=E8=A1=A8?=
 =?UTF-8?q?=E7=A4=BA=E3=81=99=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Resolve #350
---
 CHANGELOG.md                      |  7 +++++++
 assets/user-unknown.png           |  3 +++
 src/client/components/mention.vue |  8 ++++++++
 src/models/repositories/user.ts   | 10 +++++++++-
 src/server/index.ts               | 18 +++++++++++++++++-
 5 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 assets/user-unknown.png

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7d2b3f715..e07a35f22 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,13 @@
 
 -->
 
+## 12.x.x (unreleased)
+
+### Improvements
+- クライアント: メンションにユーザーのアバターを表示するように
+
+### Bugfixes
+
 ## 12.93.2 (2021/10/23)
 
 ### Bugfixes
diff --git a/assets/user-unknown.png b/assets/user-unknown.png
new file mode 100644
index 000000000..ef88b9855
--- /dev/null
+++ b/assets/user-unknown.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d03c2c53fd6f38b37c0a8e3024062129209ceabcd4bed02bc29aa855972f542c
+size 3518
diff --git a/src/client/components/mention.vue b/src/client/components/mention.vue
index b9bd6b320..101a9020e 100644
--- a/src/client/components/mention.vue
+++ b/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;
diff --git a/src/models/repositories/user.ts b/src/models/repositories/user.ts
index 2b77b613a..72cefbaac 100644
--- a/src/models/repositories/user.ts
+++ b/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,
diff --git a/src/server/index.ts b/src/server/index.ts
index c89159614..5e1a12e4d 100644
--- a/src/server/index.ts
+++ b/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');