From c80b14e251b471caa61592d87df5f12bd47f8ef5 Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Fri, 30 May 2025 14:32:19 +0200
Subject: [PATCH] [Glitch] feat: Add relationship info to hover card

Port 975db93e3f57134cc85b4cc1458141fa094b61da to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../glitch/components/hover_card_account.tsx  | 31 ++++++++++++++++++-
 .../flavours/glitch/styles/components.scss    |  2 +-
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/hover_card_account.tsx b/app/javascript/flavours/glitch/components/hover_card_account.tsx
index 58c0b17acb..69f2a4b8fd 100644
--- a/app/javascript/flavours/glitch/components/hover_card_account.tsx
+++ b/app/javascript/flavours/glitch/components/hover_card_account.tsx
@@ -45,6 +45,19 @@ export const HoverCardAccount = forwardRef<
 
   const { familiarFollowers } = useFetchFamiliarFollowers({ accountId });
 
+  const relationship = useAppSelector((state) =>
+    accountId ? state.relationships.get(accountId) : undefined,
+  );
+  const isMutual = relationship?.followed_by && relationship.following;
+  const isFollower = relationship?.followed_by;
+  const hasRelationshipLoaded = !!relationship;
+
+  const shouldDisplayFamiliarFollowers =
+    familiarFollowers.length > 0 &&
+    hasRelationshipLoaded &&
+    !isMutual &&
+    !isFollower;
+
   return (
     <div
       ref={ref}
@@ -89,7 +102,7 @@ export const HoverCardAccount = forwardRef<
               value={account.followers_count}
               renderer={FollowersCounter}
             />
-            {familiarFollowers.length > 0 && (
+            {shouldDisplayFamiliarFollowers && (
               <>
                 &middot;
                 <div className='hover-card__familiar-followers'>
@@ -105,6 +118,22 @@ export const HoverCardAccount = forwardRef<
                 </div>
               </>
             )}
+            {(isMutual || isFollower) && (
+              <>
+                &middot;
+                {isMutual ? (
+                  <FormattedMessage
+                    id='account.mutual'
+                    defaultMessage='You follow each other'
+                  />
+                ) : (
+                  <FormattedMessage
+                    id='account.follows_you'
+                    defaultMessage='Follows you'
+                  />
+                )}
+              </>
+            )}
           </div>
 
           <FollowButton accountId={accountId} />
diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
index 4e7aa11265..43a0e6fcc0 100644
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ b/app/javascript/flavours/glitch/styles/components.scss
@@ -11080,7 +11080,7 @@ noscript {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    gap: 10px;
+    gap: 2px 10px;
   }
 
   &__numbers {