wip: ui

src/shared/notes/child.tsx

@@ -34,7 +34,7 @@ export function ChildNote({ id, root }: { id: string; root?: string }) {
   if (status === 'loading') {
     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="absolute bottom-0 left-[18px] h-[calc(100%-3.4rem)] w-0.5 bg-gradient-to-t from-black/20 to-black/10 dark:from-white/20 dark:to-white/10" />
         <div className="relative mb-5 overflow-hidden">
           <NoteSkeleton />
         </div>
@@ -46,7 +46,7 @@ export function ChildNote({ id, root }: { id: string; root?: string }) {
     const noteLink = `https://njump.me/${nip19.noteEncode(id)}`;
     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="absolute bottom-0 left-[18px] h-[calc(100%-3.4rem)] w-0.5 bg-gradient-to-t from-black/20 to-black/10 dark:from-white/20 dark:to-white/10" />
         <div className="relative mb-5 flex flex-col">
           <div className="relative z-10 flex items-start gap-3">
             <div className="inline-flex h-10 w-10 items-end justify-center rounded-lg bg-black pb-1">
@@ -78,7 +78,7 @@ export function ChildNote({ id, root }: { id: string; root?: string }) {
 
   return (
     <>
-      <div className="absolute bottom-0 left-[18px] h-[calc(100%-3.6rem)] w-0.5 bg-gradient-to-t from-white/20 to-white/10" />
+      <div className="absolute bottom-0 left-[18px] h-[calc(100%-3.6rem)] w-0.5 bg-gradient-to-t from-black/20 to-black/10 dark:from-white/20 dark:to-white/10" />
       <div className="mb-6 flex flex-col">
         <User pubkey={data.pubkey} time={data.created_at} />
         <div className="-mt-4 flex items-start gap-3">

src/shared/notes/kinds/file.tsx

@@ -40,13 +40,7 @@ export function FileNote(props: { event?: NDKEvent }) {
           crossorigin=""
           className="player"
         >
-          <MediaProvider>
-            <Poster
-              className="vds-poster"
-              src="https://thumbnail.video/api/get?url=${url}&seconds=1"
-              alt={url}
-            />
-          </MediaProvider>
+          <MediaProvider />
           <DefaultAudioLayout
             icons={defaultLayoutIcons}
             smallLayoutWhen="(width < 500) or (height < 380)"

src/shared/notes/kinds/unknown.tsx

@@ -2,16 +2,16 @@ import { NDKEvent } from '@nostr-dev-kit/ndk';
 
 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: {props.event.kind}
+    <div className="mt-2 flex w-full flex-col gap-2">
+      <div className="inline-flex flex-col rounded-md bg-zinc-200 px-2 py-2 dark:bg-zinc-800">
+        <span className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
+          Kind: {props.event.kind}
         </span>
-        <p className="text-sm leading-none text-white">
-          Lume isn&apos;t fully support this kind
+        <p className="text-sm text-zinc-800 dark:text-zinc-200">
+          Unsupport kind on newsfeed
         </p>
       </div>
-      <div className="select-text whitespace-pre-line	break-all text-white">
+      <div className="select-text whitespace-pre-line	break-all text-zinc-800 dark:text-zinc-200">
         <p>{props.event.content.toString()}</p>
       </div>
     </div>

src/shared/notes/preview/link.tsx

@@ -31,7 +31,9 @@ export function LinkPreview({ urls }: { urls: string[] }) {
               <p className="text-sm text-white/50">
                 Can&apos;t fetch open graph, click to open webpage
               </p>
-              <span className="text-sm leading-none text-white">{domain.hostname}</span>
+              <span className="text-sm leading-none text-zinc-900 dark:text-zinc-100">
+                {domain.hostname}
+              </span>
             </div>
           ) : (
             <>
@@ -46,15 +48,17 @@ export function LinkPreview({ urls }: { urls: string[] }) {
                 />
               )}
               <div className="flex flex-col gap-1 border-t border-white/5 px-3 py-3">
-                <h5 className="line-clamp-1 text-base font-semibold text-white">
+                <h5 className="line-clamp-1 text-base font-semibold text-zinc-900 dark:text-zinc-100">
                   {data.title}
                 </h5>
                 {data.description && (
-                  <p className="line-clamp-3 break-all text-sm text-white/80">
+                  <p className="line-clamp-3 break-all text-sm text-zinc-500 dark:text-zinc-400">
                     {data.description}
                   </p>
                 )}
-                <span className="mt-2.5 text-sm text-white/80">{domain.hostname}</span>
+                <span className="mt-2.5 text-sm text-zinc-500 dark:text-zinc-400">
+                  {domain.hostname}
+                </span>
               </div>
             </>
           )}

src/shared/notes/preview/video.tsx

@@ -18,13 +18,7 @@ export function VideoPreview({ urls }: { urls: string[] }) {
           muted={true}
           className="player"
         >
-          <MediaProvider>
-            <Poster
-              className="vds-poster"
-              src={`https://thumbnail.video/api/get?url=${url}&seconds=1`}
-              alt={url}
-            />
-          </MediaProvider>
+          <MediaProvider />
           <DefaultAudioLayout
             icons={defaultLayoutIcons}
             smallLayoutWhen="(width < 500) or (height < 380)"

src/shared/notes/stats.tsx

@@ -60,27 +60,25 @@ export function NoteStats({ id }: { id: string }) {
   }
 
   return (
-    <div className="flex h-11 items-center gap-3">
-      <p className="text-white/50">
-        <span className="font-semibold text-white">
+    <div className="mt-3 flex w-full flex-wrap gap-2">
+      <div className="flex flex-1 flex-col rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-900">
+        <div className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
           {compactNumber.format(data.reactions)}
-        </span>{' '}
-        reactions
-      </p>
-      <span className="text-white/50">·</span>
-      <p className="text-white/50">
-        <span className="font-semibold text-white">
+        </div>
+        <div className="text-sm text-zinc-500 dark:text-zinc-300">Reactions</div>
+      </div>
+      <div className="flex flex-1 flex-col rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-900">
+        <div className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
           {compactNumber.format(data.reposts)}
-        </span>{' '}
-        reposts
-      </p>
-      <span className="text-white/50">·</span>
-      <p className="text-white/50">
-        <span className="font-semibold text-white">
+        </div>
+        <div className="text-sm text-zinc-500 dark:text-zinc-300">Reposts</div>
+      </div>
+      <div className="flex flex-1 flex-col rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-900">
+        <div className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
           {compactNumber.format(data.zaps)}
-        </span>{' '}
-        zaps
-      </p>
+        </div>
+        <div className="text-sm text-zinc-500 dark:text-zinc-300">Zaps</div>
+      </div>
     </div>
   );
 }