better "followed by" layout

packages/app/src/Element/User/DisplayName.tsx

@@ -1,21 +1,20 @@
 import "./DisplayName.css";
-
 import { useMemo } from "react";
 import { HexKey, UserMetadata } from "@snort/system";
 import { getDisplayNameOrPlaceHolder } from "@/SnortUtils";
+import { useUserProfile } from "@snort/system-react";
+import classNames from "classnames";
 
 interface DisplayNameProps {
   pubkey: HexKey;
   user: UserMetadata | undefined;
 }
 
-const DisplayName = ({ pubkey, user }: DisplayNameProps) => {
-  const [name, isPlaceHolder] = useMemo(() => getDisplayNameOrPlaceHolder(user, pubkey), [user, pubkey]);
+const DisplayName = ({ pubkey }: DisplayNameProps) => {
+  const profile = useUserProfile(pubkey);
+  const [name, isPlaceHolder] = useMemo(() => getDisplayNameOrPlaceHolder(profile, pubkey), [profile, pubkey]);
 
-  if (isPlaceHolder) {
-    return <span className="placeholder">{name}</span>;
-  }
-  return name;
+  return <span className={classNames({ placeholder: isPlaceHolder })}>{name}</span>;
 };
 
 export default DisplayName;

packages/app/src/Element/User/UserWebsiteLink.tsx

@@ -18,7 +18,7 @@ export function UserWebsiteLink({ user }: { user?: MetadataCache | UserMetadata
 
   if (user?.website) {
     return (
-      <div className="user-profile-link f-ellipsis">
+      <div className="user-profile-link f-ellipsis flex gap-2 items-center">
         <Icon name="link-02" size={16} />
         <a href={website_url} target="_blank" rel="noreferrer">
           {tryFormatWebsite(user.website)}

packages/app/src/Pages/Profile/ProfilePage.css

@@ -130,12 +130,6 @@
   line-height: 24px;
 }
 
-.profile .link {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
 .profile .link svg {
   color: var(--highlight);
 }

packages/app/src/Pages/Profile/ProfilePage.tsx

@@ -1,5 +1,5 @@
 import "./ProfilePage.css";
-import { useEffect, useState } from "react";
+import { Fragment, useEffect, useState } from "react";
 import { FormattedMessage } from "react-intl";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
 import {
@@ -61,6 +61,8 @@ import { useMuteList, usePinList } from "@/Hooks/useLists";
 
 import messages from "../messages";
 import FollowDistanceIndicator from "@/Element/User/FollowDistanceIndicator";
+import classNames from "classnames";
+import { ProfileLink } from "@/Element/User/ProfileLink";
 
 interface ProfilePageProps {
   id?: string;
@@ -156,6 +158,7 @@ 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">
@@ -168,18 +171,24 @@ export default function ProfilePage({ id: propId, state }: ProfilePageProps) {
             {user?.pubkey && <FollowDistanceIndicator className="p-2" pubkey={user.pubkey} />}
             {followedByFriends.size > 0 && (
               <div className="text-gray-light">
+                {followedByFriendsArray.map((a, index) => {
+                  return (
+                    <span className={classNames({ "-ml-4": index > 0 }, "inline-block")} key={a}>
+                      <ProfileImage showFollowDistance={false} pubkey={a} size={24} showUsername={false} />
+                    </span>
+                  );
+                })}
                 <span className="mr-1">
                   <FormattedMessage defaultMessage="Followed by" id="6mr8WU" />
                 </span>
-                {Array.from(followedByFriends)
-                  .slice(0, MAX_FOLLOWED_BY_FRIENDS)
-                  .map(a => {
-                    return (
-                      <span className="inline-block" key={a}>
-                        <ProfileImage showFollowDistance={false} pubkey={a} size={24} showUsername={false} />
-                      </span>
-                    );
-                  })}
+                {followedByFriendsArray.map((a, index) => (
+                  <Fragment key={a}>
+                    <ProfileLink pubkey={a} user={undefined} className="link inline">
+                      <DisplayName user={undefined} pubkey={a} />
+                    </ProfileLink>
+                    {index < followedByFriendsArray.length - 1 && ","}{" "}
+                  </Fragment>
+                ))}
                 {followedByFriends.size > MAX_FOLLOWED_BY_FRIENDS && (
                   <span>
                     <FormattedMessage
@@ -208,7 +217,7 @@ export default function ProfilePage({ id: propId, state }: ProfilePageProps) {
       <>
         <UserWebsiteLink user={user} />
         {lnurl && (
-          <div className="link lnurl f-ellipsis" onClick={() => setShowLnQr(true)}>
+          <div className="link lnurl f-ellipsis flex gap-2 items-center" onClick={() => setShowLnQr(true)}>
             <Icon name="zapCircle" size={16} />
             {lnurl.name}
           </div>