refactor note component & add support for kind 30023

src/shared/notes/kinds/article.tsx

@@ -0,0 +1,52 @@
+import { NDKEvent } from '@nostr-dev-kit/ndk';
+import { useMemo } from 'react';
+
+import { Image } from '@shared/image';
+
+export function ArticleNote({ event }: { 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];
+
+    let publishedAt: Date | string | number = 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');
+    }
+
+    return {
+      title,
+      image,
+      publishedAt,
+      summary,
+    };
+  }, [event.id]);
+
+  return (
+    <div className="mb-2 mt-3 rounded-lg bg-white/10">
+      <div className="flex flex-col rounded-lg">
+        <Image
+          src={metadata.image}
+          alt={metadata.title}
+          className="h-44 w-full rounded-t-lg object-cover"
+        />
+        <div className="flex flex-col gap-2 px-3 py-3">
+          <h5 className="line-clamp-1 font-medium leading-none text-white">
+            {metadata.title}
+          </h5>
+          <p className="line-clamp-3 break-all text-sm text-white/50">
+            {metadata.summary}
+          </p>
+
+          <span className="mt-2.5 text-sm leading-none text-white/50">
+            {metadata.publishedAt.toString()}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

src/shared/notes/kinds/file.tsx

@@ -6,7 +6,7 @@ import { User } from '@shared/user';
 
 import { isImage } from '@utils/isImage';
 
-export function NoteKind_1063({ event }: { event: NDKEvent }) {
+export function FileNote({ event }: { event: NDKEvent }) {
   const url = event.tags.find((el) => el[0] === 'url')[1];
 
   return (
@@ -20,7 +20,6 @@ export function NoteKind_1063({ event }: { event: NDKEvent }) {
               {isImage(url) && (
                 <Image
                   src={url}
-                  fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
                   alt="image"
                   className="h-auto w-full rounded-lg object-cover"
                 />

src/shared/notes/kinds/kind1.tsx

@@ -1,39 +0,0 @@
-import { NDKEvent } from '@nostr-dev-kit/ndk';
-import { useMemo } from 'react';
-
-import { NoteActions, NoteContent, NoteMetadata } from '@shared/notes';
-import { User } from '@shared/user';
-
-import { parser } from '@utils/parser';
-
-export function NoteKind_1({
-  event,
-  skipMetadata = false,
-}: {
-  event: NDKEvent;
-  skipMetadata?: boolean;
-}) {
-  const content = useMemo(() => parser(event), [event.id]);
-
-  return (
-    <div className="h-min w-full px-3 py-1.5">
-      <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3">
-        <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="relative z-20 flex-1">
-              <NoteContent content={content} />
-              <NoteActions id={event.id || event.id} pubkey={event.pubkey} />
-            </div>
-          </div>
-          {!skipMetadata ? (
-            <NoteMetadata id={event.id || event.id} />
-          ) : (
-            <div className="pb-3" />
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}

src/shared/notes/kinds/repost.tsx

@@ -1,11 +1,14 @@
-import { NDKEvent } from '@nostr-dev-kit/ndk';
+import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
 
 import {
+  ArticleNote,
+  FileNote,
   NoteActions,
-  NoteContent,
   NoteMetadata,
   NoteSkeleton,
   RepostUser,
+  TextNote,
+  UnknownNote,
 } from '@shared/notes';
 import { User } from '@shared/user';
 
@@ -40,23 +43,32 @@ export function Repost({ event }: { event: NDKEvent }) {
     );
   }
 
+  const renderKind = (event: NDKEvent) => {
+    switch (event.kind) {
+      case NDKKind.Text:
+        return <TextNote event={event} />;
+      case NDKKind.Article:
+        return <ArticleNote event={event} />;
+      case 1063:
+        return <FileNote event={event} />;
+      default:
+        return <UnknownNote event={event} />;
+    }
+  };
+
   return (
     <div className="h-min w-full px-3 py-1.5">
       <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3">
         <div className="relative flex flex-col">
           <div className="isolate flex flex-col -space-y-4">
             <RepostUser pubkey={event.pubkey} />
-            <User
-              pubkey={data.event.pubkey}
-              time={data.event.created_at}
-              isRepost={true}
-            />
+            <User pubkey={data.pubkey} time={data.created_at} isRepost={true} />
           </div>
           <div className="flex items-start gap-3">
             <div className="w-11 shrink-0" />
             <div className="relative z-20 flex-1">
-              <NoteContent content={data.richContent} />
-              <NoteActions id={repostID} pubkey={data.event.pubkey} />
+              {renderKind(data)}
+              <NoteActions id={repostID} pubkey={data.pubkey} />
             </div>
           </div>
           <NoteMetadata id={repostID} />

src/shared/notes/kinds/sub.tsx

@@ -1,40 +0,0 @@
-import { NoteActions, NoteContent, NoteSkeleton } from '@shared/notes';
-import { User } from '@shared/user';
-
-import { useEvent } from '@utils/hooks/useEvent';
-
-export function SubNote({ id, root }: { id: string; root?: string }) {
-  const { status, data } = useEvent(id);
-
-  if (status === 'loading') {
-    return (
-      <div className="relative mb-5 overflow-hidden rounded-xl bg-white/10 px-3 py-3">
-        <NoteSkeleton />
-      </div>
-    );
-  }
-
-  if (status === 'error') {
-    return (
-      <div className="mb-5 flex overflow-hidden rounded-xl bg-white/10 px-3 py-3">
-        <p className="break-all text-white/50">Failed to fetch event: {id}</p>
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <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="mb-5 flex flex-col">
-        <User pubkey={data.event.pubkey} time={data.event.created_at} />
-        <div className="-mt-6 flex items-start gap-3">
-          <div className="w-11 shrink-0" />
-          <div className="relative z-20 flex-1">
-            <NoteContent content={data.richContent} long={data.event.kind === 30023} />
-            <NoteActions id={data.event.id} pubkey={data.event.pubkey} root={root} />
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}

src/shared/notes/kinds/text.tsx

@@ -0,0 +1,43 @@
+import { NDKEvent } from '@nostr-dev-kit/ndk';
+import { useMemo } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+import {
+  Hashtag,
+  ImagePreview,
+  LinkPreview,
+  MentionNote,
+  MentionUser,
+  VideoPreview,
+} from '@shared/notes';
+
+import { parser } from '@utils/parser';
+
+export function TextNote({ event }: { event: NDKEvent }) {
+  const content = useMemo(() => parser(event), [event.id]);
+
+  return (
+    <div>
+      <ReactMarkdown
+        className="markdown"
+        remarkPlugins={[remarkGfm]}
+        components={{
+          del: ({ children }) => {
+            const key = children[0] as string;
+            if (key.startsWith('pub') && key.length > 50 && key.length < 100)
+              return <MentionUser pubkey={key.replace('pub-', '')} />;
+            if (key.startsWith('tag')) return <Hashtag tag={key.replace('tag-', '')} />;
+          },
+        }}
+      >
+        {content?.parsed}
+      </ReactMarkdown>
+      {content?.images?.length > 0 && <ImagePreview urls={content.images} />}
+      {content?.videos?.length > 0 && <VideoPreview urls={content.videos} />}
+      {content?.links?.length > 0 && <LinkPreview urls={content.links} />}
+      {content?.notes?.length > 0 &&
+        content?.notes.map((note: string) => <MentionNote key={note} id={note} />)}
+    </div>
+  );
+}

src/shared/notes/kinds/thread.tsx

@@ -1,39 +0,0 @@
-import { NDKEvent } from '@nostr-dev-kit/ndk';
-import { useMemo } from 'react';
-
-import { NoteActions, NoteContent, NoteMetadata, SubNote } from '@shared/notes';
-import { User } from '@shared/user';
-
-import { parser } from '@utils/parser';
-
-export function NoteThread({
-  event,
-  root,
-  reply,
-}: {
-  event: NDKEvent;
-  root: string;
-  reply: string;
-}) {
-  const content = useMemo(() => parser(event), [event.id]);
-
-  return (
-    <div className="h-min w-full px-3 py-1.5">
-      <div className="overflow-hidden rounded-xl bg-white/10 px-3 pt-3">
-        <div className="relative">{root && <SubNote id={root} />}</div>
-        <div className="relative">{reply && <SubNote id={reply} root={root} />}</div>
-        <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="relative z-20 flex-1">
-              <NoteContent content={content} />
-              <NoteActions id={event.id} pubkey={event.pubkey} />
-            </div>
-          </div>
-          <NoteMetadata id={event.id} />
-        </div>
-      </div>
-    </div>
-  );
-}

src/shared/notes/kinds/unknown.tsx

@@ -0,0 +1,19 @@
+import { NDKEvent } from '@nostr-dev-kit/ndk';
+
+export function UnknownNote({ event }: { event: NDKEvent }) {
+  return (
+    <div className="mb-3 mt-3 flex w-full flex-col gap-2">
+      <div className="inline-flex flex-col gap-1 rounded-md bg-white/10 px-2 py-2">
+        <span className="text-sm font-medium leading-none text-white/50">
+          Unknown kind: {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>
+      </div>
+    </div>
+  );
+}

src/shared/notes/kinds/unsupport.tsx

@@ -1,36 +0,0 @@
-import { NDKEvent } from '@nostr-dev-kit/ndk';
-
-import { NoteActions, NoteMetadata } from '@shared/notes';
-import { User } from '@shared/user';
-
-export function NoteKindUnsupport({ event }: { event: NDKEvent }) {
-  return (
-    <div className="h-min w-full px-3 py-1.5">
-      <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3">
-        <div className="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="relative z-20 flex-1">
-              <div className="mt-3 flex w-full flex-col gap-2">
-                <div className="inline-flex flex-col gap-1 rounded-md bg-white/10 px-2 py-2">
-                  <span className="text-sm font-medium leading-none text-white/50">
-                    Kind: {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>
-                </div>
-              </div>
-              <NoteActions id={event.id} pubkey={event.pubkey} />
-            </div>
-          </div>
-          <NoteMetadata id={event.id} />
-        </div>
-      </div>
-    </div>
-  );
-}