use nostr.com to display unfound event

src/shared/notes/mentions/note.tsx

@@ -1,11 +1,14 @@
 import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
+import { nip19 } from 'nostr-tools';
 import { memo } from 'react';
+import { Link } from 'react-router-dom';
 
 import { useStorage } from '@libs/storage/provider';
 
 import {
   ArticleNote,
   FileNote,
+  LinkPreview,
   NoteSkeleton,
   TextNote,
   UnknownNote,
@@ -53,11 +56,31 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
   }
 
   if (status === 'error') {
+    const noteLink = `https://nostr.com/${nip19.noteEncode(id)}`;
     return (
-      <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 className="relative mb-5 flex flex-col">
+        <div className="relative z-10 flex items-start gap-3">
+          <div className="inline-flex h-11 w-11 items-end justify-center rounded-lg bg-black pb-1">
+            <img src="/lume.png" alt="lume" className="h-auto w-1/3" />
+          </div>
+          <h5 className="truncate font-semibold leading-none text-white">
+            Lume <span className="text-green-500">(System)</span>
+          </h5>
+        </div>
+        <div className="-mt-6 flex items-start gap-3">
+          <div className="w-11 shrink-0" />
+          <div>
+            <div className="relative z-20 mt-1 flex-1 select-text">
+              <div className="mb-1 select-text rounded-lg bg-white/5 p-1.5 text-sm">
+                Lume cannot find this post with your current relays, but you can view it
+                via nostr.com.{' '}
+                <Link to={noteLink} className="text-fuchsia-500">
+                  Learn more
+                </Link>
+              </div>
+            </div>
+            <LinkPreview urls={[noteLink]} />
+          </div>
         </div>
       </div>
     );