From 8a09de6b283a23761059ecc1abb856a96027c10b Mon Sep 17 00:00:00 2001
From: nvisser <nvisser@users.noreply.github.com>
Date: Sat, 13 Aug 2022 07:26:51 +0200
Subject: [PATCH] Add following badge to user preview popup (#9048)

---
 CHANGELOG.md                                    |  5 +++++
 packages/client/src/components/user-preview.vue | 14 +++++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 58d79c52bd..34ec7a6427 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,11 @@
 You should also include the user name that made the change.
 -->
 
+## 12.x.x (unreleased)
+
+### Improvements
+- Client: Add following badge to user preview popup @nvisser
+
 ## 12.118.1 (2022/08/08)
 
 ### Bugfixes
diff --git a/packages/client/src/components/user-preview.vue b/packages/client/src/components/user-preview.vue
index f80947f75a..523960564b 100644
--- a/packages/client/src/components/user-preview.vue
+++ b/packages/client/src/components/user-preview.vue
@@ -2,7 +2,9 @@
 <transition :name="$store.state.animation ? 'popup' : ''" appear @after-leave="$emit('closed')">
 	<div v-if="showing" class="fxxzrfni _popup _shadow" :style="{ zIndex, top: top + 'px', left: left + 'px' }" @mouseover="() => { $emit('mouseover'); }" @mouseleave="() => { $emit('mouseleave'); }">
 		<div v-if="fetched" class="info">
-			<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div>
+			<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''">
+				<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ $ts.followsYou }}</span>
+			</div>
 			<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
 			<div class="title">
 				<MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA>
@@ -120,6 +122,16 @@ export default defineComponent({
 			background-color: rgba(0, 0, 0, 0.1);
 			background-size: cover;
 			background-position: center;
+			> .followed {
+					position: absolute;
+					top: 12px;
+					left: 12px;
+					padding: 4px 8px;
+					color: #fff;
+					background: rgba(0, 0, 0, 0.7);
+					font-size: 0.7em;
+					border-radius: 6px;
+			}
 		}
 
 		> .avatar {