enhance: Add profile icon to welcomeBack notification

CHANGELOG_CHERRYPICK.md

@@ -11,12 +11,13 @@
 이 버전부터는 기존 버전과 연결되지 않고, 새로 포크되어 작업되고 있습니다. 따라서 기존 버전에 있던 기능들이 다시 명시될 수 있습니다.
 
 ### Improvements
+- 클라이언트: (friendly) 모바일 환경에서 서버와 연결이 끊어졌을 때 표시되는 경고창의 UI 개선
 - 클라이언트: Google Translate 서비스 추가 (thanks @ltlapy)
 - 클라이언트: DeepL과 Google Translate를 선택할 수 있는 옵션 추가
 - 클라이언트: Enter 키를 눌러 보내기 옵션 추가
 - 클라이언트: 서버와 연결이 끊어졌을 때 경고를 표시하지 않는 옵션 추가
-- 클라이언트: (friendly) 모바일 환경에서 서버와 연결이 끊어졌을 때 표시되는 경고창의 UI 개선
 - 클라이언트: 미디어 우클릭 방지 기능 추가
+- 클라이언트: welcomeBack 알림에 프로필 아이콘 추가
 
 ## 12.x.x-cp-2.x.x (unreleased)_legacy
 

packages/client/src/components/global/toast-avatar.vue

@@ -0,0 +1,74 @@
+<template>
+<span v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect" :style="{ color }" :title="acct(user)">
+	<img class="inner" :src="url" decoding="async"/>
+</span>
+<MkA v-else v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect" :style="{ color }" :to="userPage(user)" :title="acct(user)" :target="target">
+	<img class="inner" :src="url" decoding="async"/>
+</MkA>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, watch } from 'vue';
+import * as misskey from 'misskey-js';
+import { getStaticImageUrl } from '@/scripts/get-static-image-url';
+import { extractAvgColorFromBlurhash } from '@/scripts/extract-avg-color-from-blurhash';
+import { acct, userPage } from '@/filters/user';
+import MkUserOnlineIndicator from '@/components/user-online-indicator.vue';
+import { defaultStore } from '@/store';
+
+const props = withDefaults(defineProps<{
+	user: misskey.entities.User;
+	target?: string | null;
+	disableLink?: boolean;
+	disablePreview?: boolean;
+}>(), {
+	target: null,
+	disableLink: false,
+	disablePreview: false,
+});
+
+const emit = defineEmits<{
+	(ev: 'click', v: MouseEvent): void;
+}>();
+
+const url = $computed(() => defaultStore.state.disableShowingAnimatedImages
+	? getStaticImageUrl(props.user.avatarUrl)
+	: props.user.avatarUrl);
+
+function onClick(ev: MouseEvent) {
+	emit('click', ev);
+}
+
+let color = $ref();
+
+watch(() => props.user.avatarBlurhash, () => {
+	color = extractAvgColorFromBlurhash(props.user.avatarBlurhash);
+}, {
+	immediate: true,
+});
+</script>
+
+<style lang="scss" scoped>
+.eiwwqkts {
+	position: relative;
+	display: inline-block;
+	vertical-align: bottom;
+	flex-shrink: 0;
+	border-radius: 100%;
+	line-height: 16px;
+
+	> .inner {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		top: 0;
+		border-radius: 100%;
+		z-index: 1;
+		overflow: hidden;
+		object-fit: cover;
+		width: 100%;
+		height: 100%;
+	}
+}
+</style>

packages/client/src/components/toast.vue

@@ -2,6 +2,7 @@
 <div class="mk-toast">
 	<transition :name="$store.state.animation ? 'toast' : ''" appear @after-leave="emit('closed')">
 		<div v-if="showing" class="body _acrylic" :style="{ zIndex }">
+			<CPAvatar class="avatar" :user="$i" :disable-preview="true" :show-indicator="false"/>
 			<div class="message">
 				{{ message }}
 			</div>
@@ -13,6 +14,8 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 import * as os from '@/os';
+import { $i } from '@/account';
+import CPAvatar from '@/components/global/toast-avatar.vue';
 
 defineProps<{
 	message: string;
@@ -58,6 +61,19 @@ onMounted(() => {
 		text-align: center;
 		pointer-events: none;
 
+		@media (max-width: 500px) {
+			width: 100%;
+		}
+
+		> .avatar {
+			position: relative;
+			vertical-align: bottom;
+			border-radius: 100%;
+			width: 64px;
+			height: 64px;
+			margin-top: 16px;
+		}
+
 		> .message {
 			padding: 16px 24px;
 		}