perf improve

src/shared/notes/kinds/article.tsx

@@ -4,19 +4,19 @@ import { Link } from 'react-router-dom';
 
 import { Image } from '@shared/image';
 
-export function ArticleNote({ event }: { event: NDKEvent }) {
+export function ArticleNote(props: { event?: NDKEvent }) {
   const metadata = useMemo(() => {
-    const title = event.tags.find((tag) => tag[0] === 'title')?.[1];
-    const image = event.tags.find((tag) => tag[0] === 'image')?.[1];
-    const summary = event.tags.find((tag) => tag[0] === 'summary')?.[1];
+    const title = props.event.tags.find((tag) => tag[0] === 'title')?.[1];
+    const image = props.event.tags.find((tag) => tag[0] === 'image')?.[1];
+    const summary = props.event.tags.find((tag) => tag[0] === 'summary')?.[1];
 
-    let publishedAt: Date | string | number = event.tags.find(
+    let publishedAt: Date | string | number = props.event.tags.find(
       (tag) => tag[0] === 'published_at'
     )?.[1];
     if (publishedAt) {
       publishedAt = new Date(parseInt(publishedAt)).toLocaleDateString('en-US');
     } else {
-      publishedAt = new Date(event.created_at * 1000).toLocaleDateString('en-US');
+      publishedAt = new Date(props.event.created_at * 1000).toLocaleDateString('en-US');
     }
 
     return {
@@ -25,11 +25,11 @@ export function ArticleNote({ event }: { event: NDKEvent }) {
       publishedAt,
       summary,
     };
-  }, [event.id]);
+  }, [props.event.id]);
 
   return (
     <Link
-      to={`/notes/article/${event.id}`}
+      to={`/notes/article/${props.event.id}`}
       preventScrollReset={true}
       className="mb-2 mt-3 rounded-lg"
     >

src/shared/notes/kinds/file.tsx

@@ -6,8 +6,8 @@ import { Image } from '@shared/image';
 
 import { fileType } from '@utils/nip94';
 
-export function FileNote({ event }: { event: NDKEvent }) {
-  const url = event.tags.find((el) => el[0] === 'url')[1];
+export function FileNote(props: { event?: NDKEvent }) {
+  const url = props.event.tags.find((el) => el[0] === 'url')[1];
   const type = fileType(url);
 
   if (type === 'image') {
@@ -15,7 +15,7 @@ export function FileNote({ event }: { event: NDKEvent }) {
       <div className="mb-2 mt-3">
         <Image
           src={url}
-          alt={event.content}
+          alt={props.event.content}
           className="h-auto w-full rounded-lg object-cover"
         />
       </div>

src/shared/notes/kinds/text.tsx

@@ -13,8 +13,8 @@ import {
 
 import { parser } from '@utils/parser';
 
-export function TextNote({ content }: { content: string }) {
-  const richContent = parser(content) ?? null;
+export function TextNote(props: { content?: string }) {
+  const richContent = parser(props.content) ?? null;
 
   if (!richContent) {
     return (
@@ -26,7 +26,7 @@ export function TextNote({ content }: { content: string }) {
           unwrapDisallowed={true}
           linkTarget={'_blank'}
         >
-          {content}
+          {props.content}
         </ReactMarkdown>
       </div>
     );

src/shared/notes/kinds/unknown.tsx

@@ -1,18 +1,18 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
 
-export function UnknownNote({ event }: { event: NDKEvent }) {
+export function UnknownNote(props: { event?: NDKEvent }) {
   return (
     <div className="flex w-full flex-col gap-2">
       <div className="inline-flex flex-col gap-1 rounded-md bg-white/10 px-2 py-2 backdrop-blur-xl">
         <span className="text-sm font-medium leading-none text-white/50">
-          Unknown kind: {event.kind}
+          Unknown kind: {props.event.kind}
         </span>
         <p className="text-sm leading-none text-white">
           Lume isn&apos;t fully support this kind
         </p>
       </div>
       <div className="select-text whitespace-pre-line	break-all text-white">
-        <p>{event.content.toString()}</p>
+        <p>{props.event.content.toString()}</p>
       </div>
     </div>
   );

src/shared/notes/replies/sub.tsx

@@ -10,7 +10,7 @@ export function SubReply({ event }: { event: NDKEvent }) {
       <div className="-mt-6 flex items-start gap-3">
         <div className="w-11 shrink-0" />
         <div className="flex-1">
-          <TextNote content={event.content} />
+          <TextNote />
           <NoteActions id={event.id} pubkey={event.pubkey} />
         </div>
       </div>

src/shared/notes/wrapper.tsx

@@ -1,5 +1,5 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
-import { ReactNode } from 'react';
+import { ReactElement, cloneElement } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 import { ChildNote, NoteActions } from '@shared/notes';
@@ -13,7 +13,7 @@ export function NoteWrapper({
   lighter = false,
 }: {
   event: NDKEvent;
-  children: ReactNode;
+  children: ReactElement;
   repost?: boolean;
   root?: string;
   reply?: string;
@@ -34,7 +34,10 @@ export function NoteWrapper({
           <div className="-mt-5 flex items-start gap-3">
             <div className="w-10 shrink-0" />
             <div className="relative z-20 flex-1">
-              {children}
+              {cloneElement(
+                children,
+                event.kind === 1 ? { content: event.content } : { event: event }
+              )}
               <NoteActions id={event.id} pubkey={event.pubkey} />
             </div>
           </div>