From eb1ecd90e6fe23ec03b4fa3db759eb976f730598 Mon Sep 17 00:00:00 2001
From: dwarf <dwarf@bcome.nl>
Date: Sun, 30 Oct 2022 09:26:25 +0000
Subject: [PATCH] client: Add "follows you" pill to user profile popup

Changelog: Added
Reviewed-on: https://akkoma.dev/FoundKeyGang/FoundKey/pulls/217
---
 packages/client/src/components/user-preview.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/user-preview.vue b/packages/client/src/components/user-preview.vue
index b4f3dc0be..3cf7c49e5 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">{{ i18n.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>
@@ -105,6 +107,16 @@ onMounted(() => {
 			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 {