updated profile page

src/components/note/base.tsx

@@ -59,8 +59,10 @@ export const NoteBase = memo(function NoteBase({ event }: { event: any }) {
   }, [event.content, event.tags]);
 
   const getParent = useMemo(() => {
-    if (event.parent_id !== event.id && !event.content.includes('#[0]')) {
-      return <NoteParent id={event.parent_id} />;
+    if (event.parent_id) {
+      if (event.parent_id !== event.id && !event.content.includes('#[0]')) {
+        return <NoteParent id={event.parent_id} />;
+      }
     }
 
     return;

src/components/profile/followers.tsx

@@ -1,4 +1,5 @@
 import { RelayContext } from '@components/relaysProvider';
+import { UserFollow } from '@components/user/follow';
 
 import { relaysAtom } from '@stores/relays';
 
@@ -19,8 +20,8 @@ export default function ProfileFollowers({ id }: { id: string }) {
   }, [id, pool, relays]);
 
   return (
-    <div className="flex flex-col gap-3 py-5">
-      {followers && followers.map((follower, index) => <p key={index}>{follower[1]}</p>)}
+    <div className="flex flex-col gap-3 px-3 py-5">
+      {followers && followers.map((follower) => <UserFollow key={follower[1]} pubkey={follower[1]} />)}
     </div>
   );
 }

src/components/profile/follows.tsx

@@ -1,4 +1,5 @@
 import { RelayContext } from '@components/relaysProvider';
+import { UserFollow } from '@components/user/follow';
 
 import { relaysAtom } from '@stores/relays';
 
@@ -18,8 +19,8 @@ export default function ProfileFollows({ id }: { id: string }) {
   }, [id, pool, relays]);
 
   return (
-    <div className="flex flex-col gap-3 py-5">
-      {follows && follows.map((follow, index) => <p key={index}>{follow.pubkey}</p>)}
+    <div className="flex flex-col gap-3 px-3 py-5">
+      {follows && follows.map((follow) => <UserFollow key={follow.pubkey} pubkey={follow.pubkey} />)}
     </div>
   );
 }

src/components/profile/notes.tsx

@@ -1,4 +1,4 @@
-import { Content } from '@components/note/content';
+import { NoteBase } from '@components/note/base';
 import { RelayContext } from '@components/relaysProvider';
 
 import { relaysAtom } from '@stores/relays';
@@ -15,17 +15,14 @@ export default function ProfileNotes({ id }: { id: string }) {
 
   useEffect(() => {
     const user = new Author(pool, relays, id);
-    user.text((res) => setData((data) => [...data, res]), 0, 100);
+    user.text((res) => setData((data) => [...data, res]), 100, 0);
   }, [id, pool, relays]);
 
   return (
     <div className="flex flex-col">
       {data.map((item) => (
-        <div
-          key={item.id}
-          className="flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 px-3 py-5 hover:bg-black/20"
-        >
-          <Content data={item} />
+        <div key={item.id}>
+          <NoteBase event={item} />
         </div>
       ))}
     </div>

src/components/user/follow.tsx

@@ -0,0 +1,45 @@
+import { ImageWithFallback } from '@components/imageWithFallback';
+
+import { createCacheProfile } from '@utils/storage';
+import { truncate } from '@utils/truncate';
+
+import { fetch } from '@tauri-apps/api/http';
+import destr from 'destr';
+import { memo, useCallback, useEffect, useState } from 'react';
+
+export const UserFollow = memo(function UserFollow({ pubkey }: { pubkey: string }) {
+  const [profile, setProfile] = useState(null);
+
+  const fetchProfile = useCallback(async (id: string) => {
+    const res = await fetch(`https://rbr.bio/${id}/metadata.json`, {
+      method: 'GET',
+      timeout: 30,
+    });
+    return res.data;
+  }, []);
+
+  useEffect(() => {
+    fetchProfile(pubkey)
+      .then((res: any) => {
+        setProfile(destr(res.content));
+        createCacheProfile(res.pubkey, res.content);
+      })
+      .catch(console.error);
+  }, [fetchProfile, pubkey]);
+
+  return (
+    <div className="flex items-center gap-2">
+      <div className="relative h-11 w-11 shrink overflow-hidden rounded-full border border-white/10">
+        {profile?.picture && (
+          <ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded-full object-cover" />
+        )}
+      </div>
+      <div className="flex w-full flex-1 flex-col items-start text-start">
+        <span className="truncate font-medium leading-tight text-zinc-200">
+          {profile?.display_name || profile?.name}
+        </span>
+        <span className="text-sm leading-tight text-zinc-400">{truncate(pubkey, 16, ' .... ')}</span>
+      </div>
+    </div>
+  );
+});