clean up and improve perf

src/shared/notes/child.tsx

@@ -49,7 +49,7 @@ export function ChildNote({ id, root }: { id: string; root?: string }) {
         <div className="absolute bottom-0 left-[18px] h-[calc(100%-3.4rem)] w-0.5 bg-gradient-to-t from-white/20 to-white/10" />
         <div className="relative mb-5 flex flex-col">
           <div className="relative z-10 flex items-start gap-3">
-            <div className="inline-flex h-11 w-11 items-end justify-center rounded-lg bg-black pb-1">
+            <div className="inline-flex h-10 w-10 items-end justify-center rounded-lg bg-black pb-1">
               <img src="/lume.png" alt="lume" className="h-auto w-1/3" />
             </div>
             <h5 className="truncate font-semibold leading-none text-white">

src/shared/notes/replies/item.tsx

@@ -12,19 +12,26 @@ export function Reply({ event, root }: { event: NDKEventWithReplies; root?: stri
       <div className="relative z-10">
         <div className="relative flex flex-col">
           <User pubkey={event.pubkey} time={event.created_at} />
-          <div className="-mt-6 flex items-start gap-3">
-            <div className="w-11 shrink-0" />
+          <div className="-mt-5 flex items-start gap-3">
+            <div className="w-10 shrink-0" />
             <div className="flex-1">
               <TextNote content={event.content} />
-              <NoteActions id={event.id} pubkey={event.pubkey} root={root} />
+              <NoteActions
+                id={event.id}
+                pubkey={event.pubkey}
+                root={root}
+                extraButtons={false}
+              />
             </div>
           </div>
         </div>
-        {event.replies ? (
-          event.replies.map((sub) => <SubReply key={sub.id} event={sub} />)
-        ) : (
-          <div className="pb-3" />
-        )}
+        <div className="pl-14">
+          {event.replies ? (
+            event.replies.map((sub) => <SubReply key={sub.id} event={sub} />)
+          ) : (
+            <div className="pb-3" />
+          )}
+        </div>
       </div>
     </div>
   );

src/shared/notes/replies/list.tsx

@@ -51,7 +51,7 @@ export function RepliesList({ id }: { id: string }) {
       <h5 className="mb-2 text-lg font-semibold text-white">
         {data?.length || 0} replies
       </h5>
-      <div className="flex flex-col gap-3">
+      <div className="flex flex-col gap-5">
         {data?.length === 0 ? (
           <div className="mt-2 flex w-full items-center justify-center rounded-xl bg-white/10 backdrop-blur-xl">
             <div className="flex flex-col items-center justify-center gap-2 py-6">

src/shared/notes/replies/sub.tsx

@@ -7,11 +7,11 @@ export function SubReply({ event }: { event: NDKEvent }) {
   return (
     <div className="relative z-10 mb-3 mt-5 flex flex-col">
       <User pubkey={event.pubkey} time={event.created_at} />
-      <div className="-mt-6 flex items-start gap-3">
-        <div className="w-11 shrink-0" />
+      <div className="-mt-5 flex items-start gap-3">
+        <div className="w-10 shrink-0" />
         <div className="flex-1">
-          <TextNote />
-          <NoteActions id={event.id} pubkey={event.pubkey} />
+          <TextNote content={event.content} />
+          <NoteActions id={event.id} pubkey={event.pubkey} extraButtons={false} />
         </div>
       </div>
     </div>

src/shared/notes/skeleton.tsx

@@ -5,7 +5,8 @@ export function NoteSkeleton() {
         <div className="relative h-11 w-11 shrink overflow-hidden rounded-lg bg-white/10 backdrop-blur-xl" />
         <div className="h-3 w-20 rounded bg-white/10 backdrop-blur-xl" />
       </div>
-      <div className="-mt-6 animate-pulse pl-[49px]">
+      <div className="-mt-5 flex animate-pulse gap-3">
+        <div className="w-10 shrink-0" />
         <div className="flex flex-col gap-1">
           <div className="h-3 w-full rounded bg-white/10 backdrop-blur-xl" />
           <div className="h-3 w-2/3 rounded bg-white/10 backdrop-blur-xl" />