wip

src/shared/notes/kinds/article.tsx

@@ -1,5 +1,5 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
-import { useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { Link } from 'react-router-dom';
 
 import { Image } from '@shared/image';
@@ -54,3 +54,5 @@ export function ArticleNote(props: { event?: NDKEvent }) {
     </Link>
   );
 }
+
+export const MemoizedArticleNote = memo(ArticleNote);

src/shared/notes/kinds/file.tsx

@@ -5,6 +5,7 @@ import {
   DefaultVideoLayout,
   defaultLayoutIcons,
 } from '@vidstack/react/player/layouts/default';
+import { memo } from 'react';
 import { Link } from 'react-router-dom';
 
 import { Image } from '@shared/image';
@@ -34,13 +35,19 @@ export function FileNote(props: { event?: NDKEvent }) {
           key={url}
           src={url}
           poster={`https://thumbnail.video/api/get?url=${url}&seconds=1`}
-          load="visible"
+          load="idle"
           aspectRatio="16/9"
           muted={true}
           crossorigin=""
           className="player"
         >
-          <MediaProvider />
+          <MediaProvider>
+            <Poster
+              className="vds-poster"
+              src={`https://thumbnail.video/api/get?url=${url}&seconds=1`}
+              alt="poster"
+            />
+          </MediaProvider>
           <DefaultAudioLayout
             icons={defaultLayoutIcons}
             smallLayoutWhen="(width < 500) or (height < 380)"
@@ -61,10 +68,12 @@ export function FileNote(props: { event?: NDKEvent }) {
       <Link
         to={url}
         target="_blank"
-        className="break-all font-normal text-blue-500 hover:text-blue-500"
+        className="break-all font-normal text-blue-500 hover:text-blue-600"
       >
         {url}
       </Link>
     </div>
   );
 }
+
+export const MemoizedFileNote = memo(FileNote);

src/shared/notes/kinds/repost.tsx

@@ -1,7 +1,7 @@
 import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
 import { useQuery } from '@tanstack/react-query';
 import { nip19 } from 'nostr-tools';
-import { useCallback } from 'react';
+import { memo, useCallback } from 'react';
 import { Link } from 'react-router-dom';
 import { twMerge } from 'tailwind-merge';
 
@@ -71,7 +71,7 @@ export function Repost({
           <User pubkey={event.pubkey} time={event.created_at} variant="repost" />
           <div className="relative flex flex-col">
             <User pubkey={embedEvent.pubkey} time={embedEvent.created_at} />
-            <div className="-mt-4 flex items-start gap-3">
+            <div className="-mt-3 flex items-start gap-3">
               <div className="w-10 shrink-0" />
               <div className="relative z-20 flex-1">
                 {renderKind(embedEvent)}
@@ -116,7 +116,7 @@ export function Repost({
                 Lume <span className="text-green-500">(System)</span>
               </h5>
             </div>
-            <div className="-mt-4 flex items-start gap-3">
+            <div className="-mt-3 flex items-start gap-3">
               <div className="w-11 shrink-0" />
               <div>
                 <div className="relative z-20 mt-1 flex-1 select-text">
@@ -148,7 +148,7 @@ export function Repost({
         <User pubkey={event.pubkey} time={event.created_at} variant="repost" />
         <div className="relative flex flex-col">
           <User pubkey={data.pubkey} time={data.created_at} />
-          <div className="-mt-4 flex items-start gap-3">
+          <div className="-mt-3 flex items-start gap-3">
             <div className="w-10 shrink-0" />
             <div className="relative z-20 flex-1">
               {renderKind(data)}
@@ -160,3 +160,5 @@ export function Repost({
     </div>
   );
 }
+
+export const MemoizedRepost = memo(Repost);

src/shared/notes/kinds/text.tsx

@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import ReactMarkdown from 'react-markdown';
 import { Link } from 'react-router-dom';
 import remarkGfm from 'remark-gfm';
@@ -82,3 +83,5 @@ export function TextNote(props: { content?: string }) {
     </div>
   );
 }
+
+export const MemoizedTextNote = memo(TextNote);

src/shared/notes/kinds/unknown.tsx

@@ -2,7 +2,7 @@ import { NDKEvent } from '@nostr-dev-kit/ndk';
 
 export function UnknownNote(props: { event?: NDKEvent }) {
   return (
-    <div className="mt-2 flex w-full flex-col gap-2">
+    <div className="flex w-full flex-col gap-2">
       <div className="inline-flex flex-col rounded-md bg-neutral-200 px-2 py-2 dark:bg-neutral-800">
         <span className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
           Kind: {props.event.kind}
@@ -11,7 +11,7 @@ export function UnknownNote(props: { event?: NDKEvent }) {
           Unsupport kind on newsfeed
         </p>
       </div>
-      <div className="select-text whitespace-pre-line	break-all text-neutral-800 dark:text-neutral-200">
+      <div className="select-text whitespace-pre-line	break-words text-neutral-800 dark:text-neutral-200">
         <p>{props.event.content.toString()}</p>
       </div>
     </div>