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 (
+
+
+
+ {followedByFriendsArray.map((a, index) => {
+ const zIndex = followedByFriendsArray.length - index;
+
+ return (
+
0 ? "-ml-5" : ""}`} key={a} style={{ zIndex }}>
+
+
+ );
+ })}
+
+ {followedByFriends.size > 0 && (
+
+
+
+
+ {followedByFriendsArray.map((a, index) => (
+
+
+
+
+ {index < followedByFriendsArray.length - 1 && ","}{" "}
+
+ ))}
+ {followedByFriends.size > MAX_FOLLOWED_BY_FRIENDS && (
+
+
+
+ )}
+
+ )}
+
+ );
+}
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}
/>
+
);
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();
- const MAX_FOLLOWED_BY_FRIENDS = 3;
- const followedByFriendsArray = Array.from(followedByFriends).slice(0, MAX_FOLLOWED_BY_FRIENDS);
return (
<>
@@ -165,44 +160,7 @@ export default function ProfilePage({ id: propId, state }: ProfilePageProps) {
{user?.nip05 &&
}
-
-
- {user?.pubkey &&
}
- {followedByFriendsArray.map((a, index) => {
- const zIndex = followedByFriendsArray.length - index;
-
- return (
-
0 ? "-ml-5" : ""}`} key={a} style={{ zIndex }}>
-
-
- );
- })}
-
- {followedByFriends.size > 0 && (
-
-
-
-
- {followedByFriendsArray.map((a, index) => (
-
-
-
-
- {index < followedByFriendsArray.length - 1 && ","}{" "}
-
- ))}
- {followedByFriends.size > MAX_FOLLOWED_BY_FRIENDS && (
-
-
-
- )}
-
- )}
-
+ {user?.pubkey &&
}
{showBadges && }
{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 (
<>
-