refactor newsfeed widget

src/shared/notes/kinds/repost.tsx

@@ -2,7 +2,6 @@ import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
 import { useQuery } from '@tanstack/react-query';
 import { nip19 } from 'nostr-tools';
 import { memo, useCallback } from 'react';
-import { twMerge } from 'tailwind-merge';
 
 import { useNDK } from '@libs/ndk/provider';
 
@@ -17,13 +16,7 @@ import {
 } from '@shared/notes';
 import { User } from '@shared/user';
 
-export function Repost({
-  event,
-  lighter = false,
-}: {
-  event: NDKEvent;
-  lighter?: boolean;
-}) {
+export function Repost({ event }: { event: NDKEvent }) {
   const embedEvent: null | NDKEvent =
     event.content.length > 0 ? JSON.parse(event.content) : null;
 
@@ -59,12 +52,7 @@ export function Repost({
   if (embedEvent) {
     return (
       <div className="h-min w-full px-3 pb-3">
-        <div
-          className={twMerge(
-            'relative flex flex-col gap-1 overflow-hidden rounded-xl px-3 py-3',
-            !lighter ? 'bg-neutral-100 dark:bg-neutral-900' : 'bg-transparent'
-          )}
-        >
+        <div className="relative flex flex-col gap-1 overflow-hidden rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
           <User pubkey={event.pubkey} time={event.created_at} variant="repost" />
           <div className="relative flex flex-col">
             <User
@@ -102,12 +90,7 @@ export function Repost({
 
     return (
       <div className="h-min w-full px-3 pb-3">
-        <div
-          className={twMerge(
-            'relative overflow-hidden rounded-xl px-3 py-3',
-            !lighter ? 'bg-neutral-100 dark:bg-neutral-900' : 'bg-transparent'
-          )}
-        >
+        <div className="relative overflow-hidden rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
           <div className="relative flex flex-col">
             <div className="relative z-10 flex items-start gap-3">
               <div className="inline-flex h-10 w-10 shrink-0 items-end justify-center rounded-lg bg-black"></div>
@@ -133,12 +116,7 @@ export function Repost({
 
   return (
     <div className="h-min w-full px-3 pb-3">
-      <div
-        className={twMerge(
-          'relative flex flex-col gap-1 overflow-hidden rounded-xl px-3 py-3',
-          !lighter ? 'bg-neutral-100 dark:bg-neutral-900' : 'bg-transparent'
-        )}
-      >
+      <div className="relative flex flex-col gap-1 overflow-hidden rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
         <User pubkey={event.pubkey} time={event.created_at} variant="repost" />
         <div className="relative flex flex-col">
           <User pubkey={data.pubkey} time={data.created_at} eventId={data.id} />

src/shared/notes/skeleton.tsx

@@ -2,17 +2,17 @@ export function NoteSkeleton() {
   return (
     <div className="flex h-min flex-col">
       <div className="flex items-start gap-3">
-        <div className="relative h-10 w-10 shrink-0 overflow-hidden rounded-lg bg-neutral-400 dark:bg-neutral-600" />
+        <div className="relative h-10 w-10 shrink-0 animate-pulse overflow-hidden rounded-lg bg-neutral-400 dark:bg-neutral-600" />
         <div className="h-6 w-full">
-          <div className="h-3 w-24 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
+          <div className="h-4 w-24 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
         </div>
       </div>
-      <div className="-mt-5 flex animate-pulse gap-3">
+      <div className="-mt-4 flex gap-3">
         <div className="w-10 shrink-0" />
-        <div className="flex flex-col gap-1">
-          <div className="h-3 w-full rounded bg-neutral-400 dark:bg-neutral-600" />
-          <div className="h-3 w-2/3 rounded bg-neutral-400 dark:bg-neutral-600" />
-          <div className="h-3 w-1/2 rounded bg-neutral-400 dark:bg-neutral-600" />
+        <div className="flex w-full flex-col gap-1">
+          <div className="h-3 w-2/3 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
+          <div className="h-3 w-2/3 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
+          <div className="h-3 w-1/2 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
         </div>
       </div>
     </div>

src/shared/notes/wrapper.tsx

@@ -1,6 +1,5 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
-import { ReactElement, cloneElement } from 'react';
-import { twMerge } from 'tailwind-merge';
+import { ReactElement, cloneElement, useMemo } from 'react';
 
 import { ChildNote, NoteActions } from '@shared/notes';
 import { User } from '@shared/user';
@@ -8,25 +7,22 @@ import { User } from '@shared/user';
 export function NoteWrapper({
   event,
   children,
-  root,
-  reply,
-  lighter = false,
 }: {
   event: NDKEvent;
   children: ReactElement;
-  repost?: boolean;
-  root?: string;
-  reply?: string;
-  lighter?: boolean;
 }) {
+  const root = useMemo(() => {
+    if (event.tags?.[0]?.[0] === 'e' && !event.tags?.[0]?.[3]) {
+      return event.tags[0][1];
+    }
+    return event.tags.find((el) => el[3] === 'root')?.[1];
+  }, [event]);
+
+  const reply = useMemo(() => event.tags.find((el) => el[3] === 'reply')?.[1], []);
+
   return (
     <div className="h-min w-full px-3 pb-3">
-      <div
-        className={twMerge(
-          'relative overflow-hidden rounded-xl px-3 py-4',
-          !lighter ? 'bg-neutral-100 dark:bg-neutral-900' : 'bg-transparent'
-        )}
-      >
+      <div className="relative overflow-hidden rounded-xl bg-neutral-100 px-3 py-4 dark:bg-neutral-900">
         <div className="relative">{root && <ChildNote id={root} />}</div>
         <div className="relative">{reply && <ChildNote id={reply} root={root} />}</div>
         <div className="relative flex flex-col">