fix errors

src/shared/notes/kinds/repost.tsx

@@ -37,16 +37,16 @@ export function Repost({ event }: { event: LumeEvent }) {
         <div className="flex flex-col">
           <div className="isolate flex flex-col -space-y-4 overflow-hidden">
             <RepostUser pubkey={event.pubkey} />
-            <User pubkey={data.pubkey} time={event.created_at} isRepost={true} />
+            <User pubkey={data.pubkey} time={data.created_at} isRepost={true} />
           </div>
           <div className="relative z-20 flex items-start gap-3">
             <div className="w-11 shrink-0" />
             <div className="flex-1">
               <NoteContent content={data.content} />
-              <NoteActions id={event.event_id} pubkey={event.pubkey} />
+              <NoteActions id={repostID} pubkey={data.pubkey} />
             </div>
           </div>
-          <NoteMetadata id={event.event_id} />
+          <NoteMetadata id={repostID} />
         </div>
       </div>
     </div>

src/shared/notes/kinds/sub.tsx

@@ -8,7 +8,7 @@ export function SubNote({ id }: { id: string }) {
 
   if (status === 'loading') {
     return (
-      <div className="relative overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 pt-3">
+      <div className="relative mb-5 overflow-hidden rounded-xl bg-zinc-900 pt-3">
         <NoteSkeleton />
       </div>
     );
@@ -16,7 +16,7 @@ export function SubNote({ id }: { id: string }) {
 
   if (status === 'error') {
     return (
-      <div className="flex items-center justify-center overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-3">
+      <div className="mb-5 flex overflow-hidden rounded-xl bg-zinc-800 px-3 py-3">
         <p className="text-zinc-400">Failed to fetch</p>
       </div>
     );

src/shared/notes/skeleton.tsx

@@ -2,16 +2,16 @@ export function NoteSkeleton() {
   return (
     <div className="flex h-min flex-col pb-3">
       <div className="flex items-start gap-3">
-        <div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-700" />
+        <div className="relative h-11 w-11 shrink overflow-hidden rounded-lg bg-zinc-700" />
         <div className="flex flex-col gap-0.5">
-          <div className="h-4 w-20 rounded bg-zinc-700" />
+          <div className="h-3 w-20 rounded bg-zinc-700" />
         </div>
       </div>
       <div className="-mt-5 animate-pulse pl-[49px]">
         <div className="flex flex-col gap-1">
-          <div className="h-4 w-full rounded-sm bg-zinc-700" />
-          <div className="h-3 w-2/3 rounded-sm bg-zinc-700" />
-          <div className="h-3 w-1/2 rounded-sm bg-zinc-700" />
+          <div className="h-3 w-full rounded bg-zinc-700" />
+          <div className="h-3 w-2/3 rounded bg-zinc-700" />
+          <div className="h-3 w-1/2 rounded bg-zinc-700" />
         </div>
       </div>
     </div>

src/shared/userProfile.tsx

@@ -0,0 +1,115 @@
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+
+import { UserMetadata } from '@app/user/components/metadata';
+
+import { ZapIcon } from '@shared/icons';
+import { Image } from '@shared/image';
+
+import { DEFAULT_AVATAR } from '@stores/constants';
+
+import { useProfile } from '@utils/hooks/useProfile';
+import { useSocial } from '@utils/hooks/useSocial';
+import { displayNpub } from '@utils/shortenKey';
+
+export function UserProfile({ pubkey }: { pubkey: string }) {
+  const { user } = useProfile(pubkey);
+  const { status, userFollows, follow, unfollow } = useSocial();
+
+  const [followed, setFollowed] = useState(false);
+
+  const followUser = (pubkey: string) => {
+    try {
+      follow(pubkey);
+
+      // update state
+      setFollowed(true);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const unfollowUser = (pubkey: string) => {
+    try {
+      unfollow(pubkey);
+
+      // update state
+      setFollowed(false);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  useEffect(() => {
+    if (status === 'success' && userFollows) {
+      if (userFollows.includes(pubkey)) {
+        setFollowed(true);
+      }
+    }
+  }, [status]);
+
+  return (
+    <div>
+      <Image
+        src={user?.picture || user?.image}
+        fallback={DEFAULT_AVATAR}
+        alt={pubkey}
+        className="h-14 w-14 rounded-md ring-2 ring-black"
+      />
+      <div className="mt-2 flex flex-1 flex-col gap-2">
+        <div className="flex flex-col gap-2">
+          <h5 className="text-lg font-semibold leading-none">
+            {user?.displayName || user?.name || 'No name'}
+          </h5>
+          <span className="max-w-[15rem] truncate text-sm leading-none text-zinc-500">
+            {user?.nip05 || displayNpub(pubkey, 16)}
+          </span>
+        </div>
+        <div className="flex flex-col gap-4">
+          <p className="mt-2 max-w-[500px] select-text break-words text-zinc-100">
+            {user?.about}
+          </p>
+          <UserMetadata pubkey={pubkey} />
+        </div>
+        <div className="mt-4 inline-flex items-center gap-2">
+          {status === 'loading' ? (
+            <button
+              type="button"
+              className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-900 text-sm font-medium hover:bg-fuchsia-500"
+            >
+              Loading...
+            </button>
+          ) : followed ? (
+            <button
+              type="button"
+              onClick={() => unfollowUser(pubkey)}
+              className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-900 text-sm font-medium hover:bg-fuchsia-500"
+            >
+              Unfollow
+            </button>
+          ) : (
+            <button
+              type="button"
+              onClick={() => followUser(pubkey)}
+              className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-900 text-sm font-medium hover:bg-fuchsia-500"
+            >
+              Follow
+            </button>
+          )}
+          <Link
+            to={`/app/chat/${pubkey}`}
+            className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-900 text-sm font-medium hover:bg-fuchsia-500"
+          >
+            Message
+          </Link>
+          <button
+            type="button"
+            className="group inline-flex h-10 w-10 items-center justify-center rounded-md bg-zinc-900 text-sm font-medium hover:bg-orange-500"
+          >
+            <ZapIcon className="h-5 w-5" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}