refactor widget

src/shared/notes/kinds/repost.tsx

@@ -20,7 +20,7 @@ export function Repost({ event }: { event: NDKEvent }) {
 
   if (status === 'loading') {
     return (
-      <div className="h-min w-full px-3 py-1.5">
+      <div className="h-min w-full px-3 pb-3">
         <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
           <NoteSkeleton />
         </div>
@@ -30,7 +30,7 @@ export function Repost({ event }: { event: NDKEvent }) {
 
   if (status === 'error') {
     return (
-      <div className="h-min w-full px-3 py-1.5">
+      <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 repost with ID
@@ -57,7 +57,7 @@ export function Repost({ event }: { event: NDKEvent }) {
   };
 
   return (
-    <div className="h-min w-full px-3 py-1.5">
+    <div className="h-min w-full px-3 pb-3">
       <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3 backdrop-blur-xl">
         <div className="relative flex flex-col">
           <div className="isolate flex flex-col -space-y-4">

src/shared/notes/mentions/hashtag.tsx

@@ -11,7 +11,7 @@ export function Hashtag({ tag }: { tag: string }) {
       type="button"
       onClick={() =>
         setWidget(db, {
-          kind: WidgetKinds.hashtag,
+          kind: WidgetKinds.global.hashtag,
           title: tag,
           content: tag.replace('#', ''),
         })

src/shared/notes/mentions/note.tsx

@@ -25,7 +25,7 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
   const openThread = (event, thread: string) => {
     const selection = window.getSelection();
     if (selection.toString().length === 0) {
-      setWidget(db, { kind: WidgetKinds.thread, title: 'Thread', content: thread });
+      setWidget(db, { kind: WidgetKinds.local.thread, title: 'Thread', content: thread });
     } else {
       event.stopPropagation();
     }

src/shared/notes/mentions/user.tsx

@@ -16,7 +16,7 @@ export function MentionUser({ pubkey }: { pubkey: string }) {
       type="button"
       onClick={() =>
         setWidget(db, {
-          kind: WidgetKinds.user,
+          kind: WidgetKinds.local.user,
           title: user?.nip05 || user?.name || user?.display_name,
           content: pubkey,
         })

src/shared/titleBar.tsx

@@ -19,7 +19,7 @@ export function TitleBar({ id, title }: { id?: string; title: string }) {
         <button
           type="button"
           onClick={() => remove(db, id)}
-          className="inline-flex h-6 w-6 shrink-0 transform items-center justify-center rounded backdrop-blur-xl hover:bg-white/10"
+          className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded backdrop-blur-xl hover:bg-white/10"
         >
           <CancelIcon className="h-3 w-3 text-white" />
         </button>

src/shared/widgets/global/articles.tsx

@@ -0,0 +1,94 @@
+import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
+import { useQuery } from '@tanstack/react-query';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useCallback, useRef } from 'react';
+
+import { useNDK } from '@libs/ndk/provider';
+
+import { ArticleNote, NoteSkeleton, NoteWrapper } from '@shared/notes';
+import { TitleBar } from '@shared/titleBar';
+
+import { Widget } from '@utils/types';
+
+export function GlobalArticlesWidget({ params }: { params: Widget }) {
+  const { ndk } = useNDK();
+  const { status, data } = useQuery(
+    ['global-articles-widget'],
+    async () => {
+      const events = await ndk.fetchEvents({
+        kinds: [NDKKind.Article],
+        limit: 100,
+      });
+      return [...events] as unknown as NDKEvent[];
+    },
+    { refetchOnWindowFocus: false }
+  );
+
+  const parentRef = useRef<HTMLDivElement>(null);
+  const virtualizer = useVirtualizer({
+    count: data ? data.length : 0,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 650,
+    overscan: 4,
+  });
+  const items = virtualizer.getVirtualItems();
+
+  // render event match event kind
+  const renderItem = useCallback(
+    (index: string | number) => {
+      const event: NDKEvent = data[index];
+      if (!event) return;
+
+      return (
+        <div key={event.id} data-index={index} ref={virtualizer.measureElement}>
+          <NoteWrapper event={event}>
+            <ArticleNote event={event} />
+          </NoteWrapper>
+        </div>
+      );
+    },
+    [data]
+  );
+
+  return (
+    <div className="relative shrink-0 grow-0 basis-[400px] bg-white/10 backdrop-blur-xl">
+      <TitleBar id={params.id} title={params.title} />
+      <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>
+        ) : items.length === 0 ? (
+          <div className="px-3 py-1.5">
+            <div className="rounded-xl bg-white/10 px-3 py-6 backdrop-blur-xl">
+              <div className="flex flex-col items-center gap-4">
+                <p className="text-center text-sm font-medium text-white">
+                  There have been no new articles in the last 24 hours.
+                </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>
+        )}
+      </div>
+    </div>
+  );
+}

src/shared/widgets/global/files.tsx

@@ -0,0 +1,95 @@
+import { NDKEvent } from '@nostr-dev-kit/ndk';
+import { useQuery } from '@tanstack/react-query';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useCallback, useRef } from 'react';
+
+import { useNDK } from '@libs/ndk/provider';
+
+import { FileNote, NoteSkeleton, NoteWrapper } from '@shared/notes';
+import { TitleBar } from '@shared/titleBar';
+
+import { Widget } from '@utils/types';
+
+export function GlobalFilesWidget({ params }: { params: Widget }) {
+  const { ndk } = useNDK();
+  const { status, data } = useQuery(
+    ['global-files-widget'],
+    async () => {
+      const events = await ndk.fetchEvents({
+        // @ts-expect-error, NDK not support file metadata yet
+        kinds: [1063],
+        limit: 100,
+      });
+      return [...events] as unknown as NDKEvent[];
+    },
+    { refetchOnWindowFocus: false }
+  );
+
+  const parentRef = useRef<HTMLDivElement>(null);
+  const virtualizer = useVirtualizer({
+    count: data ? data.length : 0,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 650,
+    overscan: 4,
+  });
+  const items = virtualizer.getVirtualItems();
+
+  // render event match event kind
+  const renderItem = useCallback(
+    (index: string | number) => {
+      const event: NDKEvent = data[index];
+      if (!event) return;
+
+      return (
+        <div key={event.id} data-index={index} ref={virtualizer.measureElement}>
+          <NoteWrapper event={event}>
+            <FileNote event={event} />
+          </NoteWrapper>
+        </div>
+      );
+    },
+    [data]
+  );
+
+  return (
+    <div className="relative shrink-0 grow-0 basis-[400px] bg-white/10 backdrop-blur-xl">
+      <TitleBar id={params.id} title={params.title} />
+      <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>
+        ) : items.length === 0 ? (
+          <div className="px-3 py-1.5">
+            <div className="rounded-xl bg-white/10 px-3 py-6 backdrop-blur-xl">
+              <div className="flex flex-col items-center gap-4">
+                <p className="text-center text-sm font-medium text-white">
+                  There have been no new files in the last 24 hours.
+                </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>
+        )}
+      </div>
+    </div>
+  );
+}

src/shared/widgets/global/hashtag.tsx

@@ -0,0 +1,157 @@
+import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
+import { useQuery } from '@tanstack/react-query';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useCallback, useRef } from 'react';
+
+import { useNDK } from '@libs/ndk/provider';
+
+import {
+  ArticleNote,
+  FileNote,
+  NoteSkeleton,
+  NoteWrapper,
+  Repost,
+  TextNote,
+  UnknownNote,
+} from '@shared/notes';
+import { TitleBar } from '@shared/titleBar';
+
+import { nHoursAgo } from '@utils/date';
+import { Widget } from '@utils/types';
+
+export function GlobalHashtagWidget({ params }: { params: Widget }) {
+  const { ndk } = useNDK();
+  const { status, data } = useQuery(
+    ['global-hashtag-widget', params.content],
+    async () => {
+      const events = await ndk.fetchEvents({
+        kinds: [NDKKind.Text, NDKKind.Repost, NDKKind.Article],
+        '#t': [params.content],
+        since: nHoursAgo(24),
+      });
+      return [...events] as unknown as NDKEvent[];
+    },
+    { refetchOnWindowFocus: false }
+  );
+
+  const parentRef = useRef<HTMLDivElement>(null);
+  const virtualizer = useVirtualizer({
+    count: data ? data.length : 0,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 650,
+    overscan: 4,
+  });
+  const items = virtualizer.getVirtualItems();
+
+  // render event match event kind
+  const renderItem = useCallback(
+    (index: string | number) => {
+      const event: NDKEvent = data[index];
+      if (!event) return;
+
+      switch (event.kind) {
+        case NDKKind.Text:
+          return (
+            <div
+              key={event.id + index}
+              data-index={index}
+              ref={virtualizer.measureElement}
+            >
+              <NoteWrapper event={event}>
+                <TextNote event={event} />
+              </NoteWrapper>
+            </div>
+          );
+        case NDKKind.Repost:
+          return (
+            <div
+              key={event.id + index}
+              data-index={index}
+              ref={virtualizer.measureElement}
+            >
+              <Repost key={event.id} event={event} />
+            </div>
+          );
+        case 1063:
+          return (
+            <div
+              key={event.id + index}
+              data-index={index}
+              ref={virtualizer.measureElement}
+            >
+              <NoteWrapper event={event}>
+                <FileNote event={event} />
+              </NoteWrapper>
+            </div>
+          );
+        case NDKKind.Article:
+          return (
+            <div
+              key={event.id + index}
+              data-index={index}
+              ref={virtualizer.measureElement}
+            >
+              <NoteWrapper event={event}>
+                <ArticleNote event={event} />
+              </NoteWrapper>
+            </div>
+          );
+        default:
+          return (
+            <div
+              key={event.id + index}
+              data-index={index}
+              ref={virtualizer.measureElement}
+            >
+              <NoteWrapper event={event}>
+                <UnknownNote event={event} />
+              </NoteWrapper>
+            </div>
+          );
+      }
+    },
+    [data]
+  );
+
+  return (
+    <div className="relative shrink-0 grow-0 basis-[400px] bg-white/10 backdrop-blur-xl">
+      <TitleBar id={params.id} title={params.title + ' in 24 hours ago'} />
+      <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>
+        ) : items.length === 0 ? (
+          <div className="px-3 py-1.5">
+            <div className="rounded-xl bg-white/10 px-3 py-6 backdrop-blur-xl">
+              <div className="flex flex-col items-center gap-4">
+                <p className="text-center text-sm font-medium text-white">
+                  There have been no new posts with this hashtag in the last 24 hours.
+                </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>
+        )}
+      </div>
+    </div>
+  );
+}

src/shared/widgets/index.ts

@@ -0,0 +1,13 @@
+export * from './local/feeds';
+export * from './local/network';
+export * from './local/user';
+export * from './local/thread';
+export * from './local/files';
+export * from './local/articles';
+export * from './global/articles';
+export * from './global/files';
+export * from './global/hashtag';
+export * from './nostrBand/trendingNotes';
+export * from './nostrBand/trendingAccounts';
+export * from './tmp/feeds';
+export * from './tmp/hashtag';

src/shared/widgets/local/articles.tsx

@@ -0,0 +1,130 @@
+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 { FileNote, NoteSkeleton, NoteWrapper } from '@shared/notes';
+import { TitleBar } from '@shared/titleBar';
+
+import { DBEvent, Widget } from '@utils/types';
+
+export function LocalArticlesWidget({ params }: { params: Widget }) {
+  const { db } = useStorage();
+  const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
+    useInfiniteQuery({
+      queryKey: ['local-articles-widget'],
+      queryFn: async ({ pageParam = 0 }) => {
+        return await db.getAllEventsByKinds([NDKKind.Article], 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 event: NDKEvent = data[index];
+      if (!event) return;
+
+      return (
+        <div key={event.id} data-index={index} ref={virtualizer.measureElement}>
+          <NoteWrapper event={event}>
+            <FileNote event={event} />
+          </NoteWrapper>
+        </div>
+      );
+    },
+    [data]
+  );
+
+  return (
+    <div className="relative shrink-0 grow-0 basis-[400px] bg-white/10 backdrop-blur-xl">
+      <TitleBar id={params.id} title={params.title} />
+      <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>
+        ) : items.length === 0 ? (
+          <div className="px-3 py-1.5">
+            <div className="bbg-white/10 rounded-xl px-3 py-6 backdrop-blur-xl">
+              <div className="flex flex-col items-center gap-4">
+                <p className="text-center text-sm text-white">
+                  There have been no new posts.
+                </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="px-3 py-1.5">
+            <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
+              <NoteSkeleton />
+            </div>
+          </div>
+        )}
+        <div className="px-3 py-1.5">
+          <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>
+        </div>
+      </div>
+    </div>
+  );
+}

src/shared/widgets/local/feeds.tsx

@@ -0,0 +1,193 @@
+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, Widget } from '@utils/types';
+
+export function LocalFeedsWidget({ params }: { params: Widget }) {
+  const { db } = useStorage();
+  const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
+    useInfiniteQuery({
+      queryKey: ['local-feeds-widget', params.content],
+      queryFn: async ({ pageParam = 0 }) => {
+        const authors = JSON.parse(params.content);
+        return await db.getAllEventsByAuthors(authors, 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 event={event} />
+              </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 id={params.id} title={params.title} />
+      <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>
+        ) : items.length === 0 ? (
+          <div className="px-3 py-1.5">
+            <div className="bbg-white/10 rounded-xl px-3 py-6 backdrop-blur-xl">
+              <div className="flex flex-col items-center gap-4">
+                <p className="text-center text-sm text-white">
+                  There have been no new posts.
+                </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="px-3 py-1.5">
+            <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
+              <NoteSkeleton />
+            </div>
+          </div>
+        )}
+        <div className="px-3 py-1.5">
+          <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>
+        </div>
+      </div>
+    </div>
+  );
+}

src/shared/widgets/local/files.tsx

@@ -0,0 +1,130 @@
+import { NDKEvent } 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 { FileNote, NoteSkeleton, NoteWrapper } from '@shared/notes';
+import { TitleBar } from '@shared/titleBar';
+
+import { DBEvent, Widget } from '@utils/types';
+
+export function LocalFilesWidget({ params }: { params: Widget }) {
+  const { db } = useStorage();
+  const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
+    useInfiniteQuery({
+      queryKey: ['local-files-widget'],
+      queryFn: async ({ pageParam = 0 }) => {
+        return await db.getAllEventsByKinds([1063], 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 event: NDKEvent = data[index];
+      if (!event) return;
+
+      return (
+        <div key={event.id} data-index={index} ref={virtualizer.measureElement}>
+          <NoteWrapper event={event}>
+            <FileNote event={event} />
+          </NoteWrapper>
+        </div>
+      );
+    },
+    [data]
+  );
+
+  return (
+    <div className="relative shrink-0 grow-0 basis-[400px] bg-white/10 backdrop-blur-xl">
+      <TitleBar id={params.id} title={params.title} />
+      <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>
+        ) : items.length === 0 ? (
+          <div className="px-3 py-1.5">
+            <div className="bbg-white/10 rounded-xl px-3 py-6 backdrop-blur-xl">
+              <div className="flex flex-col items-center gap-4">
+                <p className="text-center text-sm text-white">
+                  There have been no new posts.
+                </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="px-3 py-1.5">
+            <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
+              <NoteSkeleton />
+            </div>
+          </div>
+        )}
+        <div className="px-3 py-1.5">
+          <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>
+        </div>
+      </div>
+    </div>
+  );
+}

src/shared/widgets/local/network.tsx

@@ -0,0 +1,241 @@
+import { NDKEvent, NDKFilter, NDKKind } from '@nostr-dev-kit/ndk';
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useCallback, useEffect, 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 { useNostr } from '@utils/hooks/useNostr';
+import { toRawEvent } from '@utils/rawEvent';
+import { DBEvent } from '@utils/types';
+
+export function LocalNetworkWidget() {
+  const { sub } = useNostr();
+  const { db } = useStorage();
+  const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
+    useInfiniteQuery({
+      queryKey: ['local-network-widget'],
+      queryFn: async ({ pageParam = 0 }) => {
+        return await db.getAllEvents(30, 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 event={event} />
+              </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]
+  );
+
+  // subscribe for new event
+  // sub will be managed by lru-cache
+  useEffect(() => {
+    if (db.account && db.account.network) {
+      const filter: NDKFilter = {
+        kinds: [1, 6],
+        authors: db.account.network,
+        since: db.account.last_login_at ?? Math.floor(Date.now() / 1000),
+      };
+
+      sub(
+        filter,
+        async (event) => {
+          let root: string;
+          let reply: string;
+
+          if (event.tags?.[0]?.[0] === 'e' && !event.tags?.[0]?.[3]) {
+            root = event.tags[0][1];
+          } else {
+            root = event.tags.find((el) => el[3] === 'root')?.[1];
+            reply = event.tags.find((el) => el[3] === 'reply')?.[1];
+          }
+
+          const rawEvent = toRawEvent(event);
+
+          await db.createEvent(
+            event.id,
+            JSON.stringify(rawEvent),
+            event.pubkey,
+            event.kind,
+            root,
+            reply,
+            event.created_at
+          );
+        },
+        false // don't close sub on eose
+      );
+    }
+  }, []);
+
+  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/shared/widgets/local/thread.tsx

@@ -0,0 +1,74 @@
+import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
+import { useCallback } from 'react';
+
+import { useStorage } from '@libs/storage/provider';
+
+import {
+  ArticleNote,
+  FileNote,
+  NoteActions,
+  NoteReplyForm,
+  NoteStats,
+  TextNote,
+  ThreadUser,
+  UnknownNote,
+} from '@shared/notes';
+import { RepliesList } from '@shared/notes/replies/list';
+import { NoteSkeleton } from '@shared/notes/skeleton';
+import { TitleBar } from '@shared/titleBar';
+
+import { useEvent } from '@utils/hooks/useEvent';
+import { Widget } from '@utils/types';
+
+export function LocalThreadWidget({ params }: { params: Widget }) {
+  const { db } = useStorage();
+  const { status, data } = useEvent(params.content);
+
+  const renderKind = useCallback(
+    (event: NDKEvent) => {
+      switch (event.kind) {
+        case NDKKind.Text:
+          return <TextNote event={event} />;
+        case NDKKind.Article:
+          return <ArticleNote event={event} />;
+        case 1063:
+          return <FileNote event={event} />;
+        default:
+          return <UnknownNote event={event} />;
+      }
+    },
+    [data]
+  );
+
+  return (
+    <div className="scrollbar-hide relative shrink-0 grow-0 basis-[400px] overflow-y-auto bg-white/10 backdrop-blur-xl">
+      <TitleBar id={params.id} title={params.title} />
+      <div className="h-full">
+        {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>
+        ) : (
+          <div className="h-min w-full px-3 pt-1.5">
+            <div className="rounded-xl bg-white/10 px-3 pt-3 backdrop-blur-xl">
+              <ThreadUser pubkey={data.pubkey} time={data.created_at} />
+              <div className="mt-2">{renderKind(data)}</div>
+              <NoteActions
+                id={params.content}
+                pubkey={data.pubkey}
+                extraButtons={false}
+              />
+              <NoteStats id={params.content} />
+            </div>
+          </div>
+        )}
+        <div className="px-3">
+          <NoteReplyForm id={params.content} pubkey={db.account.pubkey} />
+          <RepliesList id={params.content} />
+        </div>
+      </div>
+    </div>
+  );
+}

src/shared/widgets/local/user.tsx

@@ -0,0 +1,171 @@
+import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
+import { useQuery } from '@tanstack/react-query';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useCallback, useRef } from 'react';
+
+import { useNDK } from '@libs/ndk/provider';
+
+import {
+  ArticleNote,
+  FileNote,
+  NoteSkeleton,
+  NoteWrapper,
+  Repost,
+  TextNote,
+  UnknownNote,
+} from '@shared/notes';
+import { TitleBar } from '@shared/titleBar';
+import { UserProfile } from '@shared/userProfile';
+
+import { nHoursAgo } from '@utils/date';
+import { Widget } from '@utils/types';
+
+export function LocalUserWidget({ params }: { params: Widget }) {
+  const { ndk } = useNDK();
+  const { status, data } = useQuery(
+    ['local-user-widget', params.content],
+    async () => {
+      const events = await ndk.fetchEvents({
+        kinds: [1, 6],
+        authors: [params.content],
+        since: nHoursAgo(24),
+      });
+      return [...events] as unknown as NDKEvent[];
+    },
+    {
+      staleTime: Infinity,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+      refetchOnWindowFocus: false,
+    }
+  );
+
+  const parentRef = useRef<HTMLDivElement>(null);
+  const virtualizer = useVirtualizer({
+    count: data ? data.length : 0,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 650,
+    overscan: 4,
+  });
+  const items = virtualizer.getVirtualItems();
+
+  // render event match event kind
+  const renderItem = useCallback(
+    (index: string | number) => {
+      const event: NDKEvent = data[index];
+      if (!event) return;
+
+      switch (event.kind) {
+        case NDKKind.Text:
+          return (
+            <div
+              key={event.id + index}
+              data-index={index}
+              ref={virtualizer.measureElement}
+            >
+              <NoteWrapper event={event}>
+                <TextNote event={event} />
+              </NoteWrapper>
+            </div>
+          );
+        case NDKKind.Repost:
+          return (
+            <div
+              key={event.id + index}
+              data-index={index}
+              ref={virtualizer.measureElement}
+            >
+              <Repost key={event.id} event={event} />
+            </div>
+          );
+        case 1063:
+          return (
+            <div
+              key={event.id + index}
+              data-index={index}
+              ref={virtualizer.measureElement}
+            >
+              <NoteWrapper event={event}>
+                <FileNote event={event} />
+              </NoteWrapper>
+            </div>
+          );
+        case NDKKind.Article:
+          return (
+            <div
+              key={event.id + index}
+              data-index={index}
+              ref={virtualizer.measureElement}
+            >
+              <NoteWrapper event={event}>
+                <ArticleNote event={event} />
+              </NoteWrapper>
+            </div>
+          );
+        default:
+          return (
+            <div
+              key={event.id + index}
+              data-index={index}
+              ref={virtualizer.measureElement}
+            >
+              <NoteWrapper event={event}>
+                <UnknownNote event={event} />
+              </NoteWrapper>
+            </div>
+          );
+      }
+    },
+    [data]
+  );
+
+  return (
+    <div className="relative shrink-0 grow-0 basis-[400px] bg-white/10 backdrop-blur-xl">
+      <TitleBar id={params.id} title={params.title} />
+      <div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
+        <div className="px-3 pt-1.5">
+          <UserProfile pubkey={params.content} />
+        </div>
+        <div>
+          <h3 className="mt-4 px-3 text-lg font-semibold text-white">Latest posts</h3>
+          <div className="flex h-full w-full flex-col justify-between gap-1.5 pb-10">
+            {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>
+            ) : items.length === 0 ? (
+              <div className="px-3 py-1.5">
+                <div className="rounded-xl bg-white/10 px-3 py-6 backdrop-blur-xl">
+                  <div className="flex flex-col items-center gap-4">
+                    <p className="text-center text-sm text-white">
+                      No new post from user in 24 hours ago
+                    </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>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/shared/widgets/nostrBand/trendingAccounts.tsx

@@ -0,0 +1,61 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { NoteSkeleton } from '@shared/notes/skeleton';
+import { TitleBar } from '@shared/titleBar';
+import { NostrBandUserProfile, type Profile } from '@shared/widgets/nostrBandUserProfile';
+
+import { Widget } from '@utils/types';
+
+interface Response {
+  profiles: Array<{ pubkey: string }>;
+}
+
+export function TrendingAccountsWidget({ params }: { params: Widget }) {
+  const { status, data } = useQuery(
+    ['trending-profiles-widget'],
+    async () => {
+      const res = await fetch('https://api.nostr.band/v0/trending/profiles');
+      if (!res.ok) {
+        throw new Error('Error');
+      }
+      const json: Response = await res.json();
+      if (!json.profiles) return [];
+      return json.profiles;
+    },
+    {
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+      refetchOnWindowFocus: false,
+      staleTime: Infinity,
+    }
+  );
+
+  return (
+    <div className="relative shrink-0 grow-0 basis-[400px] bg-white/10 backdrop-blur-xl">
+      <TitleBar id={params.id} title="Trending Accounts" />
+      <div className="scrollbar-hide h-full max-w-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>
+        ) : status === 'error' ? (
+          <div className="px-3 py-1.5">
+            <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
+              <p className="text-center text-sm font-medium text-white">
+                Sorry, an unexpected error has occurred.
+              </p>
+            </div>
+          </div>
+        ) : (
+          <div className="relative flex w-full flex-col gap-3 px-3 pt-1.5">
+            {data.map((item: Profile) => (
+              <NostrBandUserProfile key={item.pubkey} data={item} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/shared/widgets/nostrBand/trendingNotes.tsx

@@ -0,0 +1,63 @@
+import { NDKEvent } from '@nostr-dev-kit/ndk';
+import { useQuery } from '@tanstack/react-query';
+
+import { NoteSkeleton, NoteWrapper, TextNote } from '@shared/notes';
+import { TitleBar } from '@shared/titleBar';
+
+import { Widget } from '@utils/types';
+
+interface Response {
+  notes: Array<{ event: NDKEvent }>;
+}
+
+export function TrendingNotesWidget({ params }: { params: Widget }) {
+  const { status, data } = useQuery(
+    ['trending-notes-widget'],
+    async () => {
+      const res = await fetch('https://api.nostr.band/v0/trending/notes');
+      if (!res.ok) {
+        throw new Error('failed to fecht trending notes');
+      }
+      const json: Response = await res.json();
+      if (!json.notes) return null;
+      return json.notes;
+    },
+    {
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+      refetchOnWindowFocus: false,
+      staleTime: Infinity,
+    }
+  );
+
+  return (
+    <div className="relative shrink-0 grow-0 basis-[400px] bg-white/10 backdrop-blur-xl">
+      <TitleBar id={params.id} title="Trending Notes" />
+      <div className="scrollbar-hide h-full max-w-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>
+        ) : status === 'error' ? (
+          <div className="px-3 py-1.5">
+            <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
+              <p className="text-center text-sm font-medium text-white">
+                Sorry, an unexpected error has occurred.
+              </p>
+            </div>
+          </div>
+        ) : (
+          <div className="relative flex w-full flex-col">
+            {data.map((item) => (
+              <NoteWrapper key={item.event.id} event={item.event}>
+                <TextNote event={item.event} />
+              </NoteWrapper>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/shared/widgets/nostrBandUserProfile.tsx

@@ -0,0 +1,148 @@
+import { useQuery } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+
+import { useStorage } from '@libs/storage/provider';
+
+import { FollowIcon, UnfollowIcon } from '@shared/icons';
+import { Image } from '@shared/image';
+
+import { useNostr } from '@utils/hooks/useNostr';
+import { compactNumber } from '@utils/number';
+import { shortenKey } from '@utils/shortenKey';
+
+export interface Profile {
+  pubkey: string;
+  profile: { content: string };
+}
+
+export function NostrBandUserProfile({ data }: { data: Profile }) {
+  const { db } = useStorage();
+  const { addContact, removeContact } = useNostr();
+  const { status, data: userStats } = useQuery(
+    ['user-stats', data.pubkey],
+    async () => {
+      const res = await fetch(`https://api.nostr.band/v0/stats/profile/${data.pubkey}`);
+      return res.json();
+    },
+    {
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+      refetchOnWindowFocus: false,
+      staleTime: Infinity,
+    }
+  );
+
+  const embedProfile = data.profile ? JSON.parse(data.profile.content) : null;
+  const profile = embedProfile;
+
+  const [followed, setFollowed] = useState(false);
+
+  const followUser = (pubkey: string) => {
+    try {
+      addContact(pubkey);
+      // update state
+      setFollowed(true);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const unfollowUser = (pubkey: string) => {
+    try {
+      removeContact(pubkey);
+      // update state
+      setFollowed(false);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  useEffect(() => {
+    if (db.account.follows.includes(data.pubkey)) {
+      setFollowed(true);
+    }
+  }, []);
+
+  if (!profile) {
+    return (
+      <div className="rounded-xl bg-white/10 px-5 py-5 backdrop-blur-xl">
+        <p>Can&apos;t fetch profile</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-xl bg-white/10 px-5 py-5 backdrop-blur-xl">
+      <div className="flex items-center justify-between">
+        <div className="inline-flex items-center gap-2">
+          <Image
+            src={profile.picture}
+            className="h-11 w-11 shrink-0 rounded-lg object-cover"
+          />
+          <div className="inline-flex flex-col gap-1">
+            <h3 className="max-w-[15rem] truncate font-semibold leading-none text-white">
+              {profile.display_name || profile.name}
+            </h3>
+            <p className="max-w-[10rem] truncate text-sm leading-none text-white/50">
+              {profile.nip05 || shortenKey(data.pubkey)}
+            </p>
+          </div>
+        </div>
+        <div className="inline-flex items-center gap-2">
+          {followed ? (
+            <button
+              type="button"
+              onClick={() => unfollowUser(data.pubkey)}
+              className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-white backdrop-blur-xl hover:bg-fuchsia-500 hover:text-white"
+            >
+              <UnfollowIcon className="h-4 w-4" />
+            </button>
+          ) : (
+            <button
+              type="button"
+              onClick={() => followUser(data.pubkey)}
+              className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-white backdrop-blur-xl hover:bg-fuchsia-500 hover:text-white"
+            >
+              <FollowIcon className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+      </div>
+      <div className="mt-2">
+        <p className="whitespace-pre-line break-words text-white">
+          {profile.about || profile.bio}
+        </p>
+      </div>
+      <div className="mt-8">
+        {status === 'loading' ? (
+          <p>Loading...</p>
+        ) : (
+          <div className="flex w-full items-center gap-8">
+            <div className="inline-flex flex-col gap-1">
+              <span className="font-semibold leading-none text-white">
+                {userStats.stats[data.pubkey].followers_pubkey_count ?? 0}
+              </span>
+              <span className="text-sm leading-none text-white/50">Followers</span>
+            </div>
+            <div className="inline-flex flex-col gap-1">
+              <span className="font-semibold leading-none text-white">
+                {userStats.stats[data.pubkey].pub_following_pubkey_count ?? 0}
+              </span>
+              <span className="text-sm leading-none text-white/50">Following</span>
+            </div>
+            <div className="inline-flex flex-col gap-1">
+              <span className="font-semibold leading-none text-white">
+                {userStats.stats[data.pubkey].zaps_received
+                  ? compactNumber.format(
+                      userStats.stats[data.pubkey].zaps_received.msats / 1000
+                    )
+                  : 0}
+              </span>
+              <span className="text-sm leading-none text-white/50">Zaps received</span>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/shared/widgets/tmp/feeds.tsx

@@ -0,0 +1,100 @@
+import { useState } from 'react';
+
+import { User } from '@app/auth/components/user';
+
+import { useStorage } from '@libs/storage/provider';
+
+import { ArrowRightCircleIcon, CheckCircleIcon } from '@shared/icons';
+
+import { WidgetKinds, useWidgets } from '@stores/widgets';
+
+import { Widget } from '@utils/types';
+
+export function XfeedsWidget({ params }: { params: Widget }) {
+  const { db } = useStorage();
+
+  const [setWidget, removeWidget] = useWidgets((state) => [
+    state.setWidget,
+    state.removeWidget,
+  ]);
+  const [title, setTitle] = useState<string>('');
+  const [groups, setGroups] = useState<Array<string>>([]);
+
+  // toggle follow state
+  const toggleGroup = (pubkey: string) => {
+    const arr = groups.includes(pubkey)
+      ? groups.filter((i) => i !== pubkey)
+      : [...groups, pubkey];
+    setGroups(arr);
+  };
+
+  const cancel = () => {
+    removeWidget(db, params.id);
+  };
+
+  const submit = async () => {
+    setWidget(db, {
+      kind: WidgetKinds.local.feeds,
+      title: title || 'Group',
+      content: JSON.stringify(groups),
+    });
+    // remove temp widget
+    removeWidget(db, params.id);
+  };
+
+  return (
+    <div className="flex h-full shrink-0 grow-0 basis-[400px] flex-col items-center justify-center bg-white/10 backdrop-blur-xl">
+      <div className="w-full px-5">
+        <h3 className="mb-4 text-center text-lg font-semibold">
+          Choose account you want to add to group feeds
+        </h3>
+        <div className="mb-0 flex flex-col gap-2">
+          <div>
+            <input
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="Title"
+              className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
+            />
+          </div>
+          <div className="scrollbar-hide flex h-[500px] w-full flex-col overflow-y-auto rounded-lg bg-white/10 py-2 backdrop-blur-xl">
+            {db.account.network.map((item: string) => (
+              <button
+                key={item}
+                type="button"
+                onClick={() => toggleGroup(item)}
+                className="inline-flex transform items-center justify-between px-4 py-2 hover:bg-white/20"
+              >
+                <User pubkey={item} />
+                {groups.includes(item) && (
+                  <div>
+                    <CheckCircleIcon className="h-4 w-4 text-green-400" />
+                  </div>
+                )}
+              </button>
+            ))}
+          </div>
+          <div className="flex flex-col items-center justify-center gap-2">
+            <button
+              type="submit"
+              disabled={groups.length < 1}
+              onClick={submit}
+              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 disabled:opacity-50"
+            >
+              <span className="w-5" />
+              <span>Add {groups.length} account to group feed</span>
+              <ArrowRightCircleIcon className="h-5 w-5" />
+            </button>
+            <button
+              type="button"
+              onClick={cancel}
+              className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-white/10 px-6 font-medium leading-none text-white backdrop-blur-xl hover:bg-white/20 focus:outline-none disabled:opacity-50"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/shared/widgets/tmp/hashtag.tsx

@@ -0,0 +1,103 @@
+import { Resolver, useForm } from 'react-hook-form';
+
+import { useStorage } from '@libs/storage/provider';
+
+import { ArrowRightCircleIcon } from '@shared/icons';
+
+import { WidgetKinds, useWidgets } from '@stores/widgets';
+
+import { Widget } from '@utils/types';
+
+type FormValues = {
+  hashtag: string;
+};
+
+const resolver: Resolver<FormValues> = async (values) => {
+  return {
+    values: values.hashtag ? values : {},
+    errors: !values.hashtag
+      ? {
+          hashtag: {
+            type: 'required',
+            message: 'This is required.',
+          },
+        }
+      : {},
+  };
+};
+
+export function XhashtagWidget({ params }: { params: Widget }) {
+  const [setWidget, removeWidget] = useWidgets((state) => [
+    state.setWidget,
+    state.removeWidget,
+  ]);
+
+  const { db } = useStorage();
+  const {
+    register,
+    setError,
+    handleSubmit,
+    formState: { errors, isDirty, isValid },
+  } = useForm<FormValues>({ resolver });
+
+  const cancel = () => {
+    removeWidget(db, params.id);
+  };
+
+  const onSubmit = async (data: FormValues) => {
+    try {
+      setWidget(db, {
+        kind: WidgetKinds.global.hashtag,
+        title: data.hashtag + ' in 24 hours ago',
+        content: data.hashtag.replace('#', ''),
+      });
+      // remove temp widget
+      removeWidget(db, params.id);
+    } catch (e) {
+      setError('hashtag', {
+        type: 'custom',
+        message: e,
+      });
+    }
+  };
+
+  return (
+    <div className="flex h-full shrink-0 grow-0 basis-[400px] flex-col items-center justify-center bg-white/10 backdrop-blur-xl">
+      <div className="w-full px-5">
+        <h3 className="mb-4 text-center text-lg font-semibold">
+          Enter hashtag you want to follow
+        </h3>
+        <form onSubmit={handleSubmit(onSubmit)} className="mb-0 flex flex-col gap-2">
+          <div className="flex flex-col gap-1">
+            <input
+              {...register('hashtag', { required: true, minLength: 1 })}
+              placeholder="#bitcoin"
+              className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
+            />
+            <span className="text-sm text-red-400">
+              {errors.hashtag && <p>{errors.hashtag.message}</p>}
+            </span>
+          </div>
+          <div className="flex flex-col items-center justify-center gap-2">
+            <button
+              type="submit"
+              disabled={!isDirty || !isValid}
+              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 disabled:opacity-50"
+            >
+              <span className="w-5" />
+              <span>Create</span>
+              <ArrowRightCircleIcon className="h-5 w-5" />
+            </button>
+            <button
+              type="button"
+              onClick={cancel}
+              className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-white/10 px-6 font-medium leading-none text-white backdrop-blur-xl hover:bg-white/20 focus:outline-none disabled:opacity-50"
+            >
+              Cancel
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}