wip: refactor

src/shared/notes/content.tsx

@@ -10,9 +10,9 @@ import {
   VideoPreview,
 } from '@shared/notes';
 
-import { Content } from '@utils/types';
+import { RichContent } from '@utils/types';
 
-export function NoteContent({ content, long }: { content: Content; long?: boolean }) {
+export function NoteContent({ content, long }: { content: RichContent; long?: boolean }) {
   if (long) {
     return (
       <ReactMarkdown className="markdown" remarkPlugins={[remarkGfm]}>

src/shared/notes/kinds/kind1063.tsx

@@ -4,12 +4,10 @@ import { Image } from '@shared/image';
 import { NoteActions, NoteMetadata } from '@shared/notes';
 import { User } from '@shared/user';
 
-function isImage(url: string) {
-  return /\.(jpg|jpeg|gif|png|webp|avif)$/.test(url);
-}
+import { isImage } from '@utils/isImage';
 
 export function NoteKind_1063({ event }: { event: NDKEvent }) {
-  const url = event.tags[0][1];
+  const url = event.tags.find((el) => el[0] === 'url')[1];
 
   return (
     <div className="h-min w-full px-3 py-1.5">

src/shared/notes/kinds/repost.tsx

@@ -46,13 +46,17 @@ export function Repost({ event }: { event: NDKEvent }) {
         <div className="relative flex flex-col">
           <div className="isolate flex flex-col -space-y-4">
             <RepostUser pubkey={event.pubkey} />
-            <User pubkey={data.pubkey} time={data.created_at} isRepost={true} />
+            <User
+              pubkey={data.event.pubkey}
+              time={data.event.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.content} />
-              <NoteActions id={repostID} pubkey={data.pubkey} />
+              <NoteContent content={data.richContent} />
+              <NoteActions id={repostID} pubkey={data.event.pubkey} />
             </div>
           </div>
           <NoteMetadata id={repostID} />

src/shared/notes/kinds/sub.tsx

@@ -26,12 +26,12 @@ export function SubNote({ 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="mb-5 flex flex-col">
-        <User pubkey={data.pubkey} time={data.created_at} />
+        <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.content} long={data.kind === 30023} />
-            <NoteActions id={data.id} pubkey={data.pubkey} root={root} />
+            <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/mentions/note.tsx

@@ -1,9 +1,10 @@
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
 import { useStorage } from '@libs/storage/provider';
 
+import { Image } from '@shared/image';
 import { MentionUser, NoteSkeleton } from '@shared/notes';
 import { User } from '@shared/user';
 
@@ -11,6 +12,7 @@ import { widgetKinds } from '@stores/constants';
 import { useWidgets } from '@stores/widgets';
 
 import { useEvent } from '@utils/hooks/useEvent';
+import { isImage } from '@utils/isImage';
 
 export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
   const { db } = useStorage();
@@ -27,10 +29,59 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
     }
   };
 
-  if (!id) {
+  const renderItem = useCallback(() => {
+    switch (data.event.kind) {
+      case 1: {
+        return (
+          <ReactMarkdown
+            className="markdown"
+            remarkPlugins={[remarkGfm]}
+            components={{
+              del: ({ children }) => {
+                const key = children[0] as string;
+                if (key.startsWith('pub')) return <MentionUser pubkey={key.slice(3)} />;
+                if (key.startsWith('tag'))
+                  return (
+                    <button
+                      type="button"
+                      className="font-normal text-orange-400 no-underline hover:text-orange-500"
+                    >
+                      {key.slice(3)}
+                    </button>
+                  );
+              },
+            }}
+          >
+            {data.richContent.parsed.length > 160
+              ? data.richContent.parsed.substring(0, 160) + '...'
+              : data.richContent.parsed}
+          </ReactMarkdown>
+        );
+      }
+      case 1063: {
+        const url = data.event.tags.find((el) => el[0] === 'url')[1];
+        return (
+          <div>
+            {isImage(url) && (
+              <Image
+                src={url}
+                fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
+                alt="image"
+                className="h-auto w-full rounded-lg object-cover"
+              />
+            )}
+          </div>
+        );
+      }
+      default:
+        break;
+    }
+  }, [data]);
+
+  if (status === 'loading') {
     return (
       <div className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3">
-        <p className="break-all">Failed to get event with id: {id}</p>
+        <NoteSkeleton />
       </div>
     );
   }
@@ -43,40 +94,8 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
       tabIndex={0}
       className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3"
     >
-      {status === 'loading' ? (
-        <NoteSkeleton />
-      ) : status === 'success' ? (
-        <>
-          <User pubkey={data.pubkey} time={data.created_at} size="small" />
-          <div className="mt-2">
-            <ReactMarkdown
-              className="markdown"
-              remarkPlugins={[remarkGfm]}
-              components={{
-                del: ({ children }) => {
-                  const key = children[0] as string;
-                  if (key.startsWith('pub')) return <MentionUser pubkey={key.slice(3)} />;
-                  if (key.startsWith('tag'))
-                    return (
-                      <button
-                        type="button"
-                        className="font-normal text-orange-400 no-underline hover:text-orange-500"
-                      >
-                        {key.slice(3)}
-                      </button>
-                    );
-                },
-              }}
-            >
-              {data?.content.length > 160
-                ? data.content.substring(0, 160) + '...'
-                : data.content}
-            </ReactMarkdown>
-          </div>
-        </>
-      ) : (
-        <p className="break-all">Failed to get event with id: {id}</p>
-      )}
+      <User pubkey={data.event.pubkey} time={data.event.created_at} size="small" />
+      <div className="mt-2">{renderItem()}</div>
     </div>
   );
 });