use nostr.com to display unfound event

src/shared/notes/child.tsx

@@ -1,8 +1,11 @@
 import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
+import { nip19 } from 'nostr-tools';
+import { Link } from 'react-router-dom';
 
 import {
   ArticleNote,
   FileNote,
+  LinkPreview,
   NoteActions,
   NoteSkeleton,
   TextNote,
@@ -40,21 +43,32 @@ export function ChildNote({ id, root }: { id: string; root?: string }) {
   }
 
   if (status === 'error') {
+    const noteLink = `https://nostr.com/${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="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" />
+            <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 (System)
+              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 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 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>

src/shared/notes/kinds/repost.tsx

@@ -1,9 +1,12 @@
 import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
+import { nip19 } from 'nostr-tools';
 import { useCallback } from 'react';
+import { Link } from 'react-router-dom';
 
 import {
   ArticleNote,
   FileNote,
+  LinkPreview,
   NoteActions,
   NoteSkeleton,
   RepostUser,
@@ -14,7 +17,8 @@ import { User } from '@shared/user';
 
 import { useEvent } from '@utils/hooks/useEvent';
 
-export function Repost({ event }: { event: NDKEvent & { root_id: string } }) {
+export function Repost({ event }: { event: NDKEvent }) {
+  // @ts-expect-error, root_id isn't exist on NDKEvent
   const { status, data } = useEvent(event.root_id, event.content);
 
   const renderKind = useCallback(
@@ -44,14 +48,31 @@ export function Repost({ event }: { event: NDKEvent & { root_id: string } }) {
   }
 
   if (status === 'error') {
+    // @ts-expect-error, root_id isn't exist on NDKEvent
+    const noteLink = `https://nostr.com/${nip19.noteEncode(event.root_id)}`;
     return (
-      <div className="h-min w-full px-3 pb-3">
-        <div className="flex flex-col gap-1 overflow-hidden rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
-          <p className="select-text break-all text-white/50">
-            Failed to get post with ID
-          </p>
-          <div className="break-all rounded-lg bg-white/10 px-2 py-2 backdrop-blur-xl">
-            <p className="text-white">{event.id}</p>
+      <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>

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>
     );

src/shared/widgets/local/follows.tsx

@@ -0,0 +1,198 @@
+import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useCallback, useMemo, useRef } from 'react';
+
+import { useStorage } from '@libs/storage/provider';
+
+import { ArrowRightCircleIcon, LoaderIcon } from '@shared/icons';
+import {
+  ArticleNote,
+  FileNote,
+  NoteWrapper,
+  Repost,
+  TextNote,
+  UnknownNote,
+} from '@shared/notes';
+import { NoteSkeleton } from '@shared/notes/skeleton';
+import { TitleBar } from '@shared/titleBar';
+
+import { DBEvent } from '@utils/types';
+
+export function LocalFollowsWidget() {
+  const { db } = useStorage();
+  const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
+    useInfiniteQuery({
+      queryKey: ['local-follows-widget'],
+      queryFn: async ({ pageParam = 0 }) => {
+        return await db.getAllEventsByAuthors(db.account.follows, 20, pageParam);
+      },
+      getNextPageParam: (lastPage) => lastPage.nextCursor,
+    });
+
+  const dbEvents = useMemo(
+    () => (data ? data.pages.flatMap((d: { data: DBEvent[] }) => d.data) : []),
+    [data]
+  );
+  const parentRef = useRef<HTMLDivElement>();
+  const virtualizer = useVirtualizer({
+    count: hasNextPage ? dbEvents.length : dbEvents.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 650,
+    overscan: 4,
+  });
+  const items = virtualizer.getVirtualItems();
+
+  // render event match event kind
+  const renderItem = useCallback(
+    (index: string | number) => {
+      const dbEvent: DBEvent = dbEvents[index];
+      if (!dbEvent) return;
+
+      const event: NDKEvent = JSON.parse(dbEvent.event as string);
+      switch (event.kind) {
+        case NDKKind.Text:
+          return (
+            <div
+              key={dbEvent.id + index}
+              data-index={index}
+              ref={virtualizer.measureElement}
+            >
+              <NoteWrapper event={event} root={dbEvent.root_id} reply={dbEvent.reply_id}>
+                <TextNote content={event.content} />
+              </NoteWrapper>
+            </div>
+          );
+        case NDKKind.Repost:
+          return (
+            <div
+              key={dbEvent.id + index}
+              data-index={index}
+              ref={virtualizer.measureElement}
+            >
+              <Repost key={dbEvent.id} event={event} />
+            </div>
+          );
+        case 1063:
+          return (
+            <div
+              key={dbEvent.id + index}
+              data-index={index}
+              ref={virtualizer.measureElement}
+            >
+              <NoteWrapper event={event}>
+                <FileNote event={event} />
+              </NoteWrapper>
+            </div>
+          );
+        case NDKKind.Article:
+          return (
+            <div
+              key={dbEvent.id + index}
+              data-index={index}
+              ref={virtualizer.measureElement}
+            >
+              <NoteWrapper event={event}>
+                <ArticleNote event={event} />
+              </NoteWrapper>
+            </div>
+          );
+        default:
+          return (
+            <div
+              key={dbEvent.id + index}
+              data-index={index}
+              ref={virtualizer.measureElement}
+            >
+              <NoteWrapper event={event}>
+                <UnknownNote event={event} />
+              </NoteWrapper>
+            </div>
+          );
+      }
+    },
+    [dbEvents]
+  );
+
+  return (
+    <div className="relative shrink-0 grow-0 basis-[400px] bg-white/10 backdrop-blur-xl">
+      <TitleBar title="👋 Network" />
+      <div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
+        {status === 'loading' ? (
+          <div className="px-3 py-1.5">
+            <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
+              <NoteSkeleton />
+            </div>
+          </div>
+        ) : dbEvents.length === 0 ? (
+          <div className="flex h-full w-full flex-col items-center justify-center px-3">
+            <div className="flex flex-col items-center gap-4">
+              <img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
+              <div className="text-center">
+                <h3 className="text-xl font-semibold leading-tight">
+                  Your newsfeed is empty
+                </h3>
+                <p className="text-center text-white/50">
+                  Connect more people to explore more content
+                </p>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div
+            style={{
+              position: 'relative',
+              width: '100%',
+              height: `${virtualizer.getTotalSize()}px`,
+            }}
+          >
+            <div
+              className="absolute left-0 top-0 w-full"
+              style={{
+                transform: `translateY(${items[0].start}px)`,
+              }}
+            >
+              {items.map((item) => renderItem(item.index))}
+            </div>
+          </div>
+        )}
+        {isFetchingNextPage && (
+          <div className="mb-20 px-3">
+            <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
+              <NoteSkeleton />
+            </div>
+          </div>
+        )}
+        <div className="px-3 py-1.5">
+          {dbEvents.length > 0 ? (
+            <button
+              onClick={() => fetchNextPage()}
+              disabled={!hasNextPage || isFetchingNextPage}
+              className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
+            >
+              {isFetchingNextPage ? (
+                <>
+                  <span className="w-5" />
+                  <span>Loading...</span>
+                  <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+                </>
+              ) : hasNextPage ? (
+                <>
+                  <span className="w-5" />
+                  <span>Load more</span>
+                  <ArrowRightCircleIcon className="h-5 w-5" />
+                </>
+              ) : (
+                <>
+                  <span className="w-5" />
+                  <span>Nothing more to load</span>
+                  <ArrowRightCircleIcon className="h-5 w-5" />
+                </>
+              )}
+            </button>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}

src/stores/constants.ts

@@ -1,5 +1,6 @@
 export const FULL_RELAYS = [
   'wss://relay.damus.io',
+  'wss://nos.lol',
   'wss://relay.nostr.band/all',
   'wss://nostr.mutinywallet.com',
 ];

src/stores/widgets.ts

@@ -20,6 +20,7 @@ export const WidgetKinds = {
     articles: 103,
     user: 104,
     thread: 105,
+    follows: 106,
   },
   global: {
     feeds: 1000,
@@ -54,6 +55,10 @@ export const DefaultWidgets = [
         kind: WidgetKinds.local.articles,
         title: 'Articles',
       },
+      {
+        kind: WidgetKinds.local.follows,
+        title: 'Follows',
+      },
     ],
   },
   {