fix the mess I started

src/app/newsfeed/components/note/parent.tsx

@@ -0,0 +1,83 @@
+import { contentParser } from '@lume/app/newsfeed/components/contentParser';
+import { NoteDefaultUser } from '@lume/app/newsfeed/components/user/default';
+import { READONLY_RELAYS } from '@lume/stores/constants';
+
+import { RelayPool } from 'nostr-relaypool';
+import { memo } from 'react';
+import useSWRSubscription from 'swr/subscription';
+
+export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
+  const { data, error } = useSWRSubscription(
+    id
+      ? [
+          {
+            ids: [id],
+            kinds: [1],
+          },
+        ]
+      : null,
+    (key, { next }) => {
+      const pool = new RelayPool(READONLY_RELAYS);
+      const unsubscribe = pool.subscribe(
+        key,
+        READONLY_RELAYS,
+        (event: any) => {
+          next(null, event);
+        },
+        undefined,
+        undefined,
+        {
+          unsubscribeOnEose: true,
+        }
+      );
+
+      return () => {
+        unsubscribe();
+      };
+    }
+  );
+
+  return (
+    <div className="relative pb-5">
+      {error && <div>failed to load</div>}
+      {!data ? (
+        <div className="animated-pulse">
+          <div className="flex items-start gap-2">
+            <div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-700" />
+            <div className="flex w-full flex-1 items-start justify-between">
+              <div className="flex w-full items-center justify-between">
+                <div className="flex items-center gap-2 text-sm">
+                  <div className="h-4 w-16 rounded bg-zinc-700" />
+                  <span className="text-zinc-500">·</span>
+                  <div className="h-4 w-12 rounded bg-zinc-700" />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="-mt-5 pl-[52px]">
+            <div className="flex flex-col gap-6">
+              <div className="h-16 w-full rounded bg-zinc-700" />
+              <div className="flex items-center gap-8">
+                <div className="h-4 w-12 rounded bg-zinc-700" />
+                <div className="h-4 w-12 rounded bg-zinc-700" />
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <>
+          <div className="absolute left-[21px] top-0 h-full w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600"></div>
+          <div className="relative z-10 flex flex-col">
+            <NoteDefaultUser pubkey={data.pubkey} time={data.created_at} />
+            <div className="mt-1 pl-[52px]">
+              <div className="whitespace-pre-line break-words text-[15px] leading-tight text-zinc-100">
+                {contentParser(data.content, data.tags)}
+              </div>
+            </div>
+            <div onClick={(e) => e.stopPropagation()} className="mt-5 pl-[52px]"></div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+});