From 51e68b1288710874ea2ad8b7226b69b970c28c96 Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Wed, 29 Nov 2023 14:25:14 +0200
Subject: [PATCH] ProfileCard: FollowedBy, fix tab selector z-index

---
 packages/app/src/Element/User/FollowedBy.tsx  | 54 +++++++++++++++++++
 packages/app/src/Element/User/ProfileCard.tsx |  2 +
 .../app/src/Pages/Profile/ProfilePage.tsx     | 48 ++---------------
 packages/app/src/Pages/Root.tsx               |  2 +-
 4 files changed, 60 insertions(+), 46 deletions(-)
 create mode 100644 packages/app/src/Element/User/FollowedBy.tsx

diff --git a/packages/app/src/Element/User/FollowedBy.tsx b/packages/app/src/Element/User/FollowedBy.tsx
new file mode 100644
index 00000000..a6fc029e
--- /dev/null
+++ b/packages/app/src/Element/User/FollowedBy.tsx
@@ -0,0 +1,54 @@
+import FollowDistanceIndicator from "@/Element/User/FollowDistanceIndicator";
+import ProfileImage from "@/Element/User/ProfileImage";
+import { FormattedMessage } from "react-intl";
+import { Fragment } from "react";
+import { ProfileLink } from "@/Element/User/ProfileLink";
+import DisplayName from "@/Element/User/DisplayName";
+import { socialGraphInstance } from "@snort/system";
+
+const MAX_FOLLOWED_BY_FRIENDS = 3;
+
+export default function FollowedBy({ pubkey }: { pubkey: string }) {
+  const followedByFriends = socialGraphInstance.followedByFriends(pubkey);
+  const followedByFriendsArray = Array.from(followedByFriends).slice(0, MAX_FOLLOWED_BY_FRIENDS);
+  return (
+    <div className="flex flex-row items-center">
+      <div className="flex flex-row items-center">
+        <FollowDistanceIndicator className="p-2" pubkey={pubkey} />
+        {followedByFriendsArray.map((a, index) => {
+          const zIndex = followedByFriendsArray.length - index;
+
+          return (
+            <div className={`inline-block ${index > 0 ? "-ml-5" : ""}`} key={a} style={{ zIndex }}>
+              <ProfileImage showFollowDistance={false} pubkey={a} size={24} showUsername={false} />
+            </div>
+          );
+        })}
+      </div>
+      {followedByFriends.size > 0 && (
+        <div className="text-gray-light">
+          <span className="mr-1">
+            <FormattedMessage defaultMessage="Followed by" id="6mr8WU" />
+          </span>
+          {followedByFriendsArray.map((a, index) => (
+            <Fragment key={a}>
+              <ProfileLink pubkey={a} className="link inline">
+                <DisplayName user={undefined} pubkey={a} />
+              </ProfileLink>
+              {index < followedByFriendsArray.length - 1 && ","}{" "}
+            </Fragment>
+          ))}
+          {followedByFriends.size > MAX_FOLLOWED_BY_FRIENDS && (
+            <span>
+              <FormattedMessage
+                defaultMessage="and {count} others you follow"
+                id="CYkOCI"
+                values={{ count: followedByFriends.size - MAX_FOLLOWED_BY_FRIENDS }}
+              />
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/app/src/Element/User/ProfileCard.tsx b/packages/app/src/Element/User/ProfileCard.tsx
index e6be79f7..86726475 100644
--- a/packages/app/src/Element/User/ProfileCard.tsx
+++ b/packages/app/src/Element/User/ProfileCard.tsx
@@ -9,6 +9,7 @@ import { UserWebsiteLink } from "./UserWebsiteLink";
 import Text from "@/Element/Text";
 import { useEffect, useState } from "react";
 import useLogin from "../../Hooks/useLogin";
+import FollowedBy from "@/Element/User/FollowedBy";
 
 export function ProfileCard({
   pubkey,
@@ -68,6 +69,7 @@ export function ProfileCard({
           truncate={250}
         />
         <UserWebsiteLink user={user} />
+        <FollowedBy pubkey={pubkey} />
       </div>
     </ControlledMenu>
   );
diff --git a/packages/app/src/Pages/Profile/ProfilePage.tsx b/packages/app/src/Pages/Profile/ProfilePage.tsx
index 0edc2d02..40554a72 100644
--- a/packages/app/src/Pages/Profile/ProfilePage.tsx
+++ b/packages/app/src/Pages/Profile/ProfilePage.tsx
@@ -1,5 +1,5 @@
 import "./ProfilePage.css";
-import { Fragment, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { FormattedMessage } from "react-intl";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
 import {
@@ -9,7 +9,6 @@ import {
   MetadataCache,
   NostrLink,
   NostrPrefix,
-  socialGraphInstance,
   TLVEntryType,
   tryParseNostrLink,
 } from "@snort/system";
@@ -60,8 +59,7 @@ import { UserWebsiteLink } from "@/Element/User/UserWebsiteLink";
 import { useMuteList, usePinList } from "@/Hooks/useLists";
 
 import messages from "../messages";
-import FollowDistanceIndicator from "@/Element/User/FollowDistanceIndicator";
-import { ProfileLink } from "@/Element/User/ProfileLink";
+import FollowedBy from "@/Element/User/FollowedBy";
 
 interface ProfilePageProps {
   id?: string;
@@ -154,9 +152,6 @@ export default function ProfilePage({ id: propId, state }: ProfilePageProps) {
   }
 
   function username() {
-    const followedByFriends = user?.pubkey ? socialGraphInstance.followedByFriends(user.pubkey) : new Set<string>();
-    const MAX_FOLLOWED_BY_FRIENDS = 3;
-    const followedByFriendsArray = Array.from(followedByFriends).slice(0, MAX_FOLLOWED_BY_FRIENDS);
     return (
       <>
         <div className="flex flex-col g4">
@@ -165,44 +160,7 @@ export default function ProfilePage({ id: propId, state }: ProfilePageProps) {
             <FollowsYou followsMe={follows.includes(loginPubKey ?? "")} />
           </h2>
           {user?.nip05 && <Nip05 nip05={user.nip05} pubkey={user.pubkey} />}
-          <div className="flex flex-row items-center">
-            <div className="flex flex-row items-center">
-              {user?.pubkey && <FollowDistanceIndicator className="p-2" pubkey={user.pubkey} />}
-              {followedByFriendsArray.map((a, index) => {
-                const zIndex = followedByFriendsArray.length - index;
-
-                return (
-                  <div className={`inline-block ${index > 0 ? "-ml-5" : ""}`} key={a} style={{ zIndex }}>
-                    <ProfileImage showFollowDistance={false} pubkey={a} size={24} showUsername={false} />
-                  </div>
-                );
-              })}
-            </div>
-            {followedByFriends.size > 0 && (
-              <div className="text-gray-light">
-                <span className="mr-1">
-                  <FormattedMessage defaultMessage="Followed by" id="6mr8WU" />
-                </span>
-                {followedByFriendsArray.map((a, index) => (
-                  <Fragment key={a}>
-                    <ProfileLink pubkey={a} className="link inline">
-                      <DisplayName user={undefined} pubkey={a} />
-                    </ProfileLink>
-                    {index < followedByFriendsArray.length - 1 && ","}{" "}
-                  </Fragment>
-                ))}
-                {followedByFriends.size > MAX_FOLLOWED_BY_FRIENDS && (
-                  <span>
-                    <FormattedMessage
-                      defaultMessage="and {count} others you follow"
-                      id="CYkOCI"
-                      values={{ count: followedByFriends.size - MAX_FOLLOWED_BY_FRIENDS }}
-                    />
-                  </span>
-                )}
-              </div>
-            )}
-          </div>
+          {user?.pubkey && <FollowedBy pubkey={user.pubkey} />}
         </div>
         {showBadges && <BadgeList badges={badges} />}
         {showStatus && <>{musicStatus()}</>}
diff --git a/packages/app/src/Pages/Root.tsx b/packages/app/src/Pages/Root.tsx
index a11ba737..a8fac628 100644
--- a/packages/app/src/Pages/Root.tsx
+++ b/packages/app/src/Pages/Root.tsx
@@ -31,7 +31,7 @@ interface RelayOption {
 export default function RootPage() {
   return (
     <>
-      <div className="main-content p sticky top-0">
+      <div className="main-content p">
         <RootTabs base="" />
       </div>
       <div className="main-content">