From 09f4885f8975c935861ddef01f4cdb83c4a185d9 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           | Bin 0 -> 3518 bytes
 src/client/components/mention.vue |   8 ++++++++
 src/models/repositories/user.ts   |  10 +++++++++-
 src/server/index.ts               |  18 +++++++++++++++++-
 5 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 assets/user-unknown.png

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7d2b3f7159..e07a35f221 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 0000000000000000000000000000000000000000..ab29bef2b17ba5aaca78d8f809a010bc29970225
GIT binary patch
literal 3518
zcmbtX3pkW%8=jdhB%-8bI*duP4w+LD^Bcx7VkF0LN@LEMlR3o5VJPE})fR1Aim)U@
zY=vZ{(ym{TN>NGKoYFW{T9rZnH?+0;xBLIs_5a^>ecycVdq2<pJ<t6-@B3bp?(MZz
zThmYz1OjQhyE*#+zf#q$0Rf(#p_3;-pamCLek2iz=!v87I7l*;7ePbDaQFZY0@>Qf
z@X3@&ng|v_W3ae*_;`II9LA#J;enfpXd>T<#$>t03TVEuUVfC=NQw;=Zf~b)8-oJ~
zI5ZI%7Q<n4g}4|ze2y0fysM^BaM+xQC=w4R5xrqfJOK^18MzsWhTCbvYz0(0&d1sH
zqcbqV!<ixxABRFkM@J*0Hz9cf1`1<iV}n9tQCO@6U|}JYa7E-83$AdziejF_nI@zN
zSbPzS$Azgl$q_uU2oHw?IP4=iEr#`(oh$s9J|F~2g`hA<H0qD$A{PB`%vH!2=6ohk
z#1k@k{7(t|=@XyeFB}2+{@Nvm%>OH6BJn?)b2xuWLnw0D0|@a^)IY`a`v-)65<U&(
zLlg4E0t(G#4~;8YKc|FB7o0aMhQ=m2vp6)a5KtEn$6&4h4GsD`)QQLD34DRJq5*Dm
zPActi?i@0M7RaKCn4j4`1D-T4;|oL;9b2p_uRoUs<b(apM*585;ajjkW2uTh#~1XM
z(5G79=Hesrs6cp|=Da>b?oLkL0v?^k1~8$|R!5k-i<1?`#>&b9i=0mdC>##(Wzi+h
zWD#J6MPo4*7_<e}(hrNlp)okDr8(LLhn|mT&Kg(`RI-Tt-|SUg4YLJ2h(w$lODN(A
zBy&^qt?o;Unjg&%*{r!9hr#A5jU!W3BH`hD0go!C(5Q210d(`IkVh9qlLa&f22f-?
z+<{JK0dh)U-m30}VUQT~$K*bFL^Ejs+u!Gg`WP8Xwd#Hk%@*}V@V0XXe^{n~-~1e~
z{DFN0^=Tsk2A{Sf8W-4q1i(f^%X%UOfx!D%Kv}*h2MA<xNPMW>yotQJIlP;Bj+N20
zWQj*#M2Gi*15GQ6_zz07j*dp!-%E&7CVbuEUuU*0bQ<?^CEx$nwxy<Zri^FTrl#VE
z#B=Q(L+^jedpi+lhi@MON7_~{e<K4e&!AZtE|SofonNceYr7bAdmsMH^A}XMrB~SA
z#-Ag8iEIp#&(<Zj{rGLCewF1S9rLn)6>IhKNJu$?x2V><u0Q!@de!#q#hOpQk1e~=
zj$p{AS?5+9lwEyfHqtWt>>esW5bQwOnN|C3xKF|u<?{7oNUvt&JsHub^fowZ==5dk
zBHY$FVbx!CY_BXY&0hEJR(_#zT}G>!IdkLT4O>^`mwNc%Eimh2gI)9V&wof%mNC?(
z<o8b+G2<*VyO32pM_LowZi!ZrK%++88rAvQLy3Nem~tgfj3q^Cd!cp*?}py$yc%DL
zsP3<&>ebS*F9li_i<tGvgLS*x6DDmg?R!@icYnjkh-2-E=(a>K1;glHmBbDO&WuHT
zw;&-1v{+AdgF(kn7=S?PM()lIelaITPlRmOb674tT@33As6E7uJtBjb6dJi2nPGmV
zvkTn^z?*;BnwV2Lbt--7R}N50;gS6&JL+8JcXpewNSYpZYHBX9<C%_WIp?~)_U?HZ
z$Gd%=;Wer7VlWt6H{o#GbgeJkUN}8|3be}`gf;;gEC*?6g47m*_Ccf$;4A;*^coRZ
zGp)G~3WX{Zib9jK6%`fb<!OZv9z0;84c^2y?5wOMZEVh3BR_K{>8u}EOT!J3okZwu
zO4af3@Tj*Z7W+g-Ms_E@5MAnPK3EG}H8q``odH#?@H?dv$<*NBV14vB0)e<YeBmwy
zYG^n$HRY9WS8>1WQm%iclmP3UcyDE8waq;OdrVDT{iN5|6=kKq;)y}xbHmrYZ<Wo>
z&Aw;+(k0Jcy?gxlM1Z`yd(`k7**1=7N6&z%``wA5_VC68B4$V)Sea)RAM9)&0KT^Y
zmfez>ndwO+?r68&vL*V%?2I$q0WVB1bt9M^iGB0@&b4cf$6lv87JR)ukIms6F-?pr
zbs<>g#!tU{Rm*#N<I#<`<4?nXirLYL$SGU_o|u>zuv6NUl$1PaObkzwQ42M}KayI9
zCj857^4nK_<7(a+O7=7A9k_Wkad!F)Nf;6mqNk^)A9)u25|VticVvW}0-bsHstBf`
z&$UEdff&0Ru3M+h3f{01TqS*c58>94Zx`>=!~wr#GmV#-juGm6xK_Ej$B)AgxtT0~
zWMgEO&9+kZHS5%NhlPSKfL3^4?`kYAE^cgm%C;JxW|%BDT(c%DEX+UWg`%sn7b2}c
z1=Pnp!(Q^bzape|)<(HsH@9ui+p(}>#snZ)ub%T2h$kX@x_AB7tk8y7|I;@U?*{}1
z?zPP;DM7qn)G;hd@8~K1YNNEzI;)SW2FzbOsOk??_~r6aDQRPgNgnPB#L}>>I<l+Z
zInPE|Qe7>6iq35-DV2T*0~uZal`j&D^|LSrS~D{<f^);aP03_x?<;^xge357q$>#;
zt5&aGZD8;~k?!x|ar5LqqWkU1ffvji4;#O~IzZ5u!!HDnzMmL6>2><)cz9@NYtK4X
zb@2Izj~}Wo(+{i&_#skw_|c~#3Wb8v?{LzG2wvLS+uC|+y#GxRh&|SC&8-A)2j@I_
zX!@e^MpDKCc6JEO|9aA4;|9ru>m8$Bh~FzH;lS|l@Gf-eb6uCW+5?1d0trj0*kdg%
z?!}R&<pJiiYB|ofYY#fZlVPo`ts7A&bNuQ!cv_VS;qVVBDJi?q7cX8cWnMWCJ$lnc
zURFr<Bv=}*fkJ&B-5E+5k`&z`#pW#|yGu<n-j4N{$2UY|9axF-Y4L@(W+nq20EHHb
zCnb6IQO_0}@!N1MQwqeAZ=ZPgMrU`o{4h;XX5zRci69LyJKbT*h^WR^8NqVfWR6B=
zXSCGzbt(MYeZ*D^oQrmtH8gsiu8-<dd)L<G^+1=PXsPH@3`p{}nFUu_YFVTlKYqNR
zprEG4>bc|WK%?$1OT*OE)PrmBnqh8hms|$bc8|V_d7)4gEN*FcSh1@*SY1tRWY0fD
zMk&_cLj*dndbqW*vfRB<=!II^+NNRokcH4D@8Z%A2O71Zkeu25$@arXbf6GHNZ~)V
z&dTM!mj+krS}o9Z?AM|D)tfu){C+8aawO>3p`lwR%_BF6$ga{hx?*_v;g)i_+@o!8
z(THpnc>lL~d3lqQlMpb6!)a(}(3hubzUV<QQG-K6`S`uxc_N}`CvF!w1)dGH5x-dO
z)R4Gjl6xJ8!-XP`!Zea$X@yKnLn6XgDBPq6%^8*90mes<f>WD*<y)UxTmbTD1gkHT
zEi_)1&bKa?9j)+4YCxJ~xBL{Z+(W0+l>_XoK7b4vdeJ*9OgkiGDcVYNnM)LvYCNu1
zh{$eH{ALzA?yp^SZ((uAaH`I_K|HXY9CX*(##{+Kc>S=nrKRN>5B75erh3$^2Gy$Z
z;PK-(${D4s?bfXo4PXt8Rt-{ESR4Jk01gCHcc4IH6C@xYfa+Q(JqJrn3%Y)@LW*90
zs;(}G{=@y<7IPwjnxn*Gu~NpeG(7OLPf{%NYNoWT%<N$Ec^=UA;ZZ1w)74CnV_Nqp
za(d^X`@2WS#?F%Pe!JYIu0?eTGgHMLM_(sA>gkDBPL7t9m1ze0!!z3!4rrt{g<p;f
z3Jwn5xpPqRB;v=5p~!&muFZVqvA%}WN}m{uR~n=gBcBtJ|DPk}i*sofl4fX-e|21-
QQ2p(4ckyyQ>$ofVU+&PFWB>pF

literal 0
HcmV?d00001

diff --git a/src/client/components/mention.vue b/src/client/components/mention.vue
index b9bd6b320b..101a9020ee 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 2b77b613a8..72cefbaac5 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 c891596140..5e1a12e4d3 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');