wip

src/app/error.tsx

@@ -39,10 +39,10 @@ export function ErrorScreen() {
   }, []);
 
   return (
-    <div className="flex h-full items-center justify-center">
+    <div className="flex h-full items-center justify-center bg-white dark:bg-black">
       <div className="flex w-full flex-col gap-4 px-4 md:max-w-lg md:px-0">
         <div className="flex flex-col">
-          <h1 className="mb-1 text-2xl font-semibold text-white">
+          <h1 className="mb-1 text-2xl font-semibold">
             Sorry, an unexpected error has occurred.
           </h1>
           <div className="mt-4 inline-flex h-16 items-center justify-center rounded-xl border border-dashed border-red-400 bg-red-200/10 px-5">
@@ -64,19 +64,19 @@ export function ErrorScreen() {
             href="https://github.com/luminous-devs/lume/issues/new"
             target="_blank"
             rel="noreferrer"
-            className="inline-flex h-11 w-full items-center justify-center rounded-lg text-sm font-medium text-white backdrop-blur-xl hover:bg-white/10"
+            className="inline-flex h-11 w-full items-center justify-center rounded-lg text-sm font-medium"
           >
             Click here to report the issue on GitHub
           </a>
           <button
             type="button"
-            className="inline-flex h-11 w-full items-center justify-center rounded-lg text-sm font-medium text-white backdrop-blur-xl hover:bg-white/10"
+            className="inline-flex h-11 w-full items-center justify-center rounded-lg text-sm font-medium"
           >
             Reload app
           </button>
           <button
             type="button"
-            className="inline-flex h-11 w-full items-center justify-center rounded-lg text-sm font-medium text-white backdrop-blur-xl hover:bg-white/10"
+            className="inline-flex h-11 w-full items-center justify-center rounded-lg text-sm font-medium"
           >
             Reset app
           </button>

src/app/explore/components/userLatestPosts.tsx

@@ -3,14 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import { useCallback } from 'react';
 
 import { LoaderIcon } from '@shared/icons';
-import {
-  ArticleNote,
-  FileNote,
-  NoteWrapper,
-  Repost,
-  TextNote,
-  UnknownNote,
-} from '@shared/notes';
+import { MemoizedRepost, MemoizedTextNote, UnknownNote } from '@shared/notes';
 
 import { useNostr } from '@utils/hooks/useNostr';
 
@@ -28,31 +21,11 @@ export function UserLatestPosts({ pubkey }: { pubkey: string }) {
     (event: NDKEvent) => {
       switch (event.kind) {
         case NDKKind.Text:
-          return (
-            <NoteWrapper key={event.id} event={event}>
-              <TextNote />
-            </NoteWrapper>
-          );
+          return <MemoizedTextNote key={event.id} event={event} />;
         case NDKKind.Repost:
-          return <Repost key={event.id} event={event} />;
-        case 1063:
-          return (
-            <NoteWrapper key={event.id} event={event}>
-              <FileNote />
-            </NoteWrapper>
-          );
-        case NDKKind.Article:
-          return (
-            <NoteWrapper key={event.id} event={event}>
-              <ArticleNote />
-            </NoteWrapper>
-          );
+          return <MemoizedRepost key={event.id} event={event} />;
         default:
-          return (
-            <NoteWrapper key={event.id} event={event}>
-              <UnknownNote />
-            </NoteWrapper>
-          );
+          return <UnknownNote key={event.id} event={event} />;
       }
     },
     [data]

src/app/notes/article.tsx

@@ -5,7 +5,7 @@ import { useRef, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import { ArrowLeftIcon, CheckCircleIcon, ReplyIcon, ShareIcon } from '@shared/icons';
-import { ArticleDetailNote, NoteActions, NoteReplyForm } from '@shared/notes';
+import { NoteActions, NoteReplyForm } from '@shared/notes';
 import { ReplyList } from '@shared/notes/replies/list';
 import { User } from '@shared/user';
 
@@ -78,9 +78,7 @@ export function ArticleNoteScreen() {
             <div className="flex h-min w-full flex-col px-3">
               <div className="mb-3 border-b border-neutral-100 pb-3 dark:border-neutral-900">
                 <User pubkey={data.pubkey} time={data.created_at} variant="thread" />
-                <div className="mt-3">
-                  <ArticleDetailNote event={data} />
-                </div>
+                <div className="mt-3">{data.content}</div>
                 <div className="mt-3">
                   <NoteActions id={id} pubkey={data.pubkey} extraButtons={false} />
                 </div>

src/app/relays/components/relayEventList.tsx

@@ -6,14 +6,7 @@ import { VList } from 'virtua';
 import { useNDK } from '@libs/ndk/provider';
 
 import { LoaderIcon } from '@shared/icons';
-import {
-  ArticleNote,
-  FileNote,
-  NoteWrapper,
-  Repost,
-  TextNote,
-  UnknownNote,
-} from '@shared/notes';
+import { MemoizedRepost, MemoizedTextNote, UnknownNote } from '@shared/notes';
 
 export function RelayEventList({ relayUrl }: { relayUrl: string }) {
   const { fetcher } = useNDK();
@@ -24,9 +17,9 @@ export function RelayEventList({ relayUrl }: { relayUrl: string }) {
       const events = await fetcher.fetchLatestEvents(
         [url],
         {
-          kinds: [NDKKind.Text, NDKKind.Repost, 1063, NDKKind.Article],
+          kinds: [NDKKind.Text, NDKKind.Repost],
         },
-        100
+        20
       );
       return events as unknown as NDKEvent[];
     },
@@ -37,31 +30,11 @@ export function RelayEventList({ relayUrl }: { relayUrl: string }) {
     (event: NDKEvent) => {
       switch (event.kind) {
         case NDKKind.Text:
-          return (
-            <NoteWrapper key={event.id} event={event}>
-              <TextNote />
-            </NoteWrapper>
-          );
+          return <MemoizedTextNote key={event.id} event={event} />;
         case NDKKind.Repost:
-          return <Repost key={event.id} event={event} />;
-        case 1063:
-          return (
-            <NoteWrapper key={event.id} event={event}>
-              <FileNote />
-            </NoteWrapper>
-          );
-        case NDKKind.Article:
-          return (
-            <NoteWrapper key={event.id} event={event}>
-              <ArticleNote />
-            </NoteWrapper>
-          );
+          return <MemoizedRepost key={event.id} event={event} />;
         default:
-          return (
-            <NoteWrapper key={event.id} event={event}>
-              <UnknownNote />
-            </NoteWrapper>
-          );
+          return <UnknownNote key={event.id} event={event} />;
       }
     },
     [data]

src/app/users/index.tsx

@@ -7,14 +7,7 @@ import { UserProfile } from '@app/users/components/profile';
 
 import { useNDK } from '@libs/ndk/provider';
 
-import {
-  ArticleNote,
-  FileNote,
-  NoteWrapper,
-  Repost,
-  TextNote,
-  UnknownNote,
-} from '@shared/notes';
+import { MemoizedRepost, MemoizedTextNote, UnknownNote } from '@shared/notes';
 
 export function UserScreen() {
   const { pubkey } = useParams();
@@ -23,9 +16,9 @@ export function UserScreen() {
     queryKey: ['user-feed', pubkey],
     queryFn: async () => {
       const events = await ndk.fetchEvents({
-        kinds: [NDKKind.Text, NDKKind.Repost, NDKKind.Article],
+        kinds: [NDKKind.Text, NDKKind.Repost],
         authors: [pubkey],
-        limit: 50,
+        limit: 20,
       });
       const sorted = [...events].sort((a, b) => b.created_at - a.created_at);
       return sorted;
@@ -38,31 +31,11 @@ export function UserScreen() {
     (event: NDKEvent) => {
       switch (event.kind) {
         case NDKKind.Text:
-          return (
-            <NoteWrapper key={event.id} event={event}>
-              <TextNote />
-            </NoteWrapper>
-          );
+          return <MemoizedTextNote key={event.id} event={event} />;
         case NDKKind.Repost:
-          return <Repost key={event.id} event={event} />;
-        case 1063:
-          return (
-            <NoteWrapper key={event.id} event={event}>
-              <FileNote />
-            </NoteWrapper>
-          );
-        case NDKKind.Article:
-          return (
-            <NoteWrapper key={event.id} event={event}>
-              <ArticleNote />
-            </NoteWrapper>
-          );
+          return <MemoizedRepost key={event.id} event={event} />;
         default:
-          return (
-            <NoteWrapper key={event.id} event={event}>
-              <UnknownNote />
-            </NoteWrapper>
-          );
+          return <UnknownNote key={event.id} event={event} />;
       }
     },
     [data]