re-add link preview

src/shared/notes/child.tsx

@@ -15,27 +15,6 @@ import { useEvent } from '@utils/hooks/useEvent';
 export function ChildNote({ 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 backdrop-blur-xl">
-        <NoteSkeleton />
-      </div>
-    );
-  }
-
-  if (status === 'error') {
-    return (
-      <div className="mb-5 flex flex-col gap-1.5 overflow-hidden rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
-        <p className="text-sm font-bold text-white">
-          Lume cannot found the event with ID
-        </p>
-        <div className="inline-flex items-center justify-center rounded-xl border border-dashed border-red-400 bg-red-200/10 p-2">
-          <p className="select-text break-all text-sm font-medium text-red-400">{id}</p>
-        </div>
-      </div>
-    );
-  }
-
   const renderKind = (event: NDKEvent) => {
     switch (event.kind) {
       case NDKKind.Text:
@@ -49,6 +28,40 @@ 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="relative mb-5 overflow-hidden">
+          <NoteSkeleton />
+        </div>
+      </>
+    );
+  }
+
+  if (status === 'error') {
+    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="relative mb-5 flex flex-col">
+          <div className="relative z-10 flex items-start gap-3">
+            <div className="h-11 w-11 rounded-lg bg-black" />
+            <h5 className="truncate font-semibold leading-none text-white">
+              Lume (System)
+            </h5>
+          </div>
+          <div className="-mt-6 flex items-start gap-3">
+            <div className="w-11 shrink-0" />
+            <div className="markdown relative z-20 flex-1 select-text">
+              <p>Event not found, click to open this note via nostr.com</p>
+              <p>{id}</p>
+            </div>
+          </div>
+        </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" />

src/shared/notes/mentions/note.tsx

@@ -46,7 +46,7 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
 
   if (status === 'loading') {
     return (
-      <div className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3 backdrop-blur-xl">
+      <div className="mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3 backdrop-blur-xl">
         <NoteSkeleton />
       </div>
     );
@@ -54,8 +54,11 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
 
   if (status === 'error') {
     return (
-      <div className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3 backdrop-blur-xl">
-        <p>Can&apos;t get event from relay, ID: {id}</p>
+      <div className="mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3 backdrop-blur-xl">
+        <h5 className="mb-1 text-sm font-medium text-red-500">Event not found</h5>
+        <div className="select-text break-all rounded border border-dashed border-red-500 p-2 text-red-500">
+          {id}
+        </div>
       </div>
     );
   }

src/shared/notes/preview/link.tsx

@@ -1,3 +1,5 @@
+import { Link } from 'react-router-dom';
+
 import { Image } from '@shared/image';
 
 import { useOpenGraph } from '@utils/hooks/useOpenGraph';
@@ -20,11 +22,11 @@ export function LinkPreview({ urls }: { urls: string[] }) {
           </div>
         </div>
       ) : (
-        <a
-          className="flex flex-col rounded-lg"
-          href={urls[0]}
+        <Link
+          to={urls[0]}
           target="_blank"
           rel="noreferrer"
+          className="flex flex-col rounded-lg"
         >
           {error ? (
             <div className="flex flex-col gap-2 px-3 py-3">
@@ -42,22 +44,22 @@ export function LinkPreview({ urls }: { urls: string[] }) {
                   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">
+              <div className="flex flex-col gap-1 border-t border-white/5 px-3 py-3">
+                <h5 className="line-clamp-1 font-semibold leading-none text-white">
                   {data.title}
                 </h5>
                 {data.description && (
-                  <p className="line-clamp-3 break-all text-sm text-white/50">
+                  <p className="line-clamp-3 break-words text-sm text-white/50">
                     {data.description}
                   </p>
                 )}
-                <span className="mt-2.5 text-sm leading-none text-white/50">
+                <span className="mt-2.5 text-sm leading-none text-white/80">
                   {domain.hostname}
                 </span>
               </div>
             </>
           )}
-        </a>
+        </Link>
       )}
     </div>
   );