add hashtag block

src/app/space/components/addFeed.tsx

@@ -12,7 +12,7 @@ import { createBlock } from '@libs/storage';
 
 import { CancelIcon, CheckCircleIcon, CommandIcon, LoaderIcon } from '@shared/icons';
 
-import { DEFAULT_AVATAR } from '@stores/constants';
+import { BLOCK_KINDS, DEFAULT_AVATAR } from '@stores/constants';
 import { ADD_FEEDBLOCK_SHORTCUT } from '@stores/shortcuts';
 
 import { useAccount } from '@utils/hooks/useAccount';
@@ -38,7 +38,7 @@ export function AddFeedBlock() {
   useHotkeys(ADD_FEEDBLOCK_SHORTCUT, () => openModal());
 
   const block = useMutation({
-    mutationFn: (data: any) => {
+    mutationFn: (data: { kind: number; title: string; content: string }) => {
       return createBlock(data.kind, data.title, data.content);
     },
     onSuccess: () => {
@@ -53,7 +53,7 @@ export function AddFeedBlock() {
     formState: { isDirty, isValid },
   } = useForm();
 
-  const onSubmit = (data: any) => {
+  const onSubmit = (data: { kind: number; title: string; content: string }) => {
     setLoading(true);
 
     selected.forEach((item, index) => {
@@ -64,7 +64,7 @@ export function AddFeedBlock() {
 
     // insert to database
     block.mutate({
-      kind: 1,
+      kind: BLOCK_KINDS.feed,
       title: data.title,
       content: JSON.stringify(selected),
     });
@@ -205,7 +205,7 @@ export function AddFeedBlock() {
                               {status === 'loading' ? (
                                 <p>Loading...</p>
                               ) : (
-                                JSON.parse(account.follows).map((follow) => (
+                                JSON.parse(account.follows as string).map((follow) => (
                                   <Combobox.Option
                                     key={follow}
                                     value={follow}

src/app/space/components/addImage.tsx

@@ -1,5 +1,4 @@
 import { Dialog, Transition } from '@headlessui/react';
-import { NDKEvent, NDKPrivateKeySigner } from '@nostr-dev-kit/ndk';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { open } from '@tauri-apps/api/dialog';
 import { Body, fetch } from '@tauri-apps/api/http';
@@ -7,18 +6,15 @@ import { Fragment, useEffect, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useHotkeys } from 'react-hotkeys-hook';
 
-import { useNDK } from '@libs/ndk/provider';
 import { createBlock } from '@libs/storage';
 
 import { CancelIcon, CommandIcon } from '@shared/icons';
 import { Image } from '@shared/image';
 
-import { DEFAULT_AVATAR } from '@stores/constants';
+import { BLOCK_KINDS, DEFAULT_AVATAR } from '@stores/constants';
 import { ADD_IMAGEBLOCK_SHORTCUT } from '@stores/shortcuts';
 
 import { createBlobFromFile } from '@utils/createBlobFromFile';
-import { dateToUnix } from '@utils/date';
-import { useAccount } from '@utils/hooks/useAccount';
 import { usePublish } from '@utils/hooks/usePublish';
 
 export function AddImageBlock() {
@@ -29,9 +25,6 @@ export function AddImageBlock() {
   const [isOpen, setIsOpen] = useState(false);
   const [image, setImage] = useState('');
 
-  const { ndk } = useNDK();
-  const { account } = useAccount();
-
   const tags = useRef(null);
 
   const openModal = () => {
@@ -101,7 +94,7 @@ export function AddImageBlock() {
   };
 
   const block = useMutation({
-    mutationFn: (data: any) => {
+    mutationFn: (data: { kind: number; title: string; content: string }) => {
       return createBlock(data.kind, data.title, data.content);
     },
     onSuccess: () => {
@@ -109,14 +102,14 @@ export function AddImageBlock() {
     },
   });
 
-  const onSubmit = async (data: any) => {
+  const onSubmit = async (data: { kind: number; title: string; content: string }) => {
     setLoading(true);
 
     // publish file metedata
     await publish({ content: data.title, kind: 1063, tags: tags.current });
 
     // mutate
-    block.mutate({ kind: 0, title: data.title, content: data.content });
+    block.mutate({ kind: BLOCK_KINDS.image, title: data.title, content: data.content });
 
     setLoading(false);
     // reset form

src/app/space/components/blocks/feed.tsx

@@ -9,11 +9,11 @@ import { NoteKindUnsupport } from '@shared/notes/kinds/unsupport';
 import { NoteSkeleton } from '@shared/notes/skeleton';
 import { TitleBar } from '@shared/titleBar';
 
-import { LumeEvent } from '@utils/types';
+import { Block, LumeEvent } from '@utils/types';
 
 const ITEM_PER_PAGE = 10;
 
-export function FeedBlock({ params }: { params: any }) {
+export function FeedBlock({ params }: { params: Block }) {
   const queryClient = useQueryClient();
   const { status, data, fetchNextPage, hasNextPage, isFetchingNextPage } =
     useInfiniteQuery({
@@ -24,7 +24,7 @@ export function FeedBlock({ params }: { params: any }) {
       getNextPageParam: (lastPage) => lastPage.nextCursor,
     });
 
-  const notes = data ? data.pages.flatMap((d: { data: any }) => d.data) : [];
+  const notes = data ? data.pages.flatMap((d: { data: LumeEvent[] }) => d.data) : [];
   const parentRef = useRef();
 
   const rowVirtualizer = useVirtualizer({
@@ -161,9 +161,7 @@ export function FeedBlock({ params }: { params: any }) {
                 }px)`,
               }}
             >
-              {rowVirtualizer
-                .getVirtualItems()
-                .map((virtualRow) => renderItem(virtualRow.index))}
+              {itemsVirtualizer.map((virtualRow) => renderItem(virtualRow.index))}
             </div>
           </div>
         )}

src/app/space/components/blocks/following.tsx

@@ -36,7 +36,7 @@ export function FollowingBlock() {
       getNextPageParam: (lastPage) => lastPage.nextCursor,
     });
 
-  const notes = data ? data.pages.flatMap((d: { data: any }) => d.data) : [];
+  const notes = data ? data.pages.flatMap((d: { data: LumeEvent[] }) => d.data) : [];
   const parentRef = useRef();
 
   const rowVirtualizer = useVirtualizer({
@@ -198,9 +198,7 @@ export function FollowingBlock() {
                 }px)`,
               }}
             >
-              {rowVirtualizer
-                .getVirtualItems()
-                .map((virtualRow) => renderItem(virtualRow.index))}
+              {itemsVirtualizer.map((virtualRow) => renderItem(virtualRow.index))}
             </div>
           </div>
         )}

src/app/space/components/blocks/hashtag.tsx

@@ -0,0 +1,102 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useRef } from 'react';
+
+import { useNDK } from '@libs/ndk/provider';
+import { removeBlock } from '@libs/storage';
+
+import { NoteKind_1, NoteSkeleton } from '@shared/notes';
+import { TitleBar } from '@shared/titleBar';
+
+import { nHoursAgo } from '@utils/date';
+import { Block, LumeEvent } from '@utils/types';
+
+export function HashtagBlock({ params }: { params: Block }) {
+  const queryClient = useQueryClient();
+  const parentRef = useRef();
+
+  const { relayUrls, fetcher } = useNDK();
+  const { status, data } = useQuery(['hashtag', params.content], async () => {
+    const events = (await fetcher.fetchAllEvents(
+      relayUrls,
+      { kinds: [1], '#t': [params.content] },
+      { since: nHoursAgo(48) }
+    )) as unknown as LumeEvent[];
+    return events;
+  });
+
+  const block = useMutation({
+    mutationFn: (id: string) => {
+      return removeBlock(id);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['blocks'] });
+    },
+  });
+
+  const rowVirtualizer = useVirtualizer({
+    count: data ? data.length : 0,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 400,
+  });
+
+  const itemsVirtualizer = rowVirtualizer.getVirtualItems();
+
+  return (
+    <div className="w-[400px] shrink-0 border-r border-zinc-900">
+      <TitleBar
+        title={params.title + ' in 48 hours ago'}
+        onClick={() => block.mutate(params.id)}
+      />
+      <div
+        ref={parentRef}
+        className="scrollbar-hide flex h-full w-full flex-col justify-between gap-1.5 overflow-y-auto pb-20 pt-1.5"
+        style={{ contain: 'strict' }}
+      >
+        {status === 'loading' ? (
+          <div className="px-3 py-1.5">
+            <div className="shadow-input rounded-md bg-zinc-900 px-3 py-3 shadow-black/20">
+              <NoteSkeleton />
+            </div>
+          </div>
+        ) : itemsVirtualizer.length === 0 ? (
+          <div className="px-3 py-1.5">
+            <div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-6">
+              <div className="flex flex-col items-center gap-4">
+                <p className="text-center text-sm text-zinc-300">
+                  No new posts about this hashtag in 48 hours ago
+                </p>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div
+            className="relative w-full"
+            style={{
+              height: `${rowVirtualizer.getTotalSize()}px`,
+            }}
+          >
+            <div
+              className="absolute left-0 top-0 w-full"
+              style={{
+                transform: `translateY(${
+                  itemsVirtualizer[0].start - rowVirtualizer.options.scrollMargin
+                }px)`,
+              }}
+            >
+              {itemsVirtualizer.map((virtualRow) => (
+                <div
+                  key={virtualRow.key}
+                  data-index={virtualRow.index}
+                  ref={rowVirtualizer.measureElement}
+                >
+                  <NoteKind_1 event={data[virtualRow.index]} />
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/app/space/components/blocks/image.tsx

@@ -7,7 +7,9 @@ import { Image } from '@shared/image';
 
 import { DEFAULT_AVATAR } from '@stores/constants';
 
-export function ImageBlock({ params }: { params: any }) {
+import { Block } from '@utils/types';
+
+export function ImageBlock({ params }: { params: Block }) {
   const queryClient = useQueryClient();
 
   const block = useMutation({

src/app/space/components/blocks/thread.tsx

@@ -5,7 +5,6 @@ import { useLiveThread } from '@app/space/hooks/useLiveThread';
 
 import { getNoteByID, removeBlock } from '@libs/storage';
 
-import { NoteMetadata } from '@shared/notes/metadata';
 import { NoteReplyForm } from '@shared/notes/replies/form';
 import { RepliesList } from '@shared/notes/replies/list';
 import { NoteSkeleton } from '@shared/notes/skeleton';
@@ -14,8 +13,9 @@ import { User } from '@shared/user';
 
 import { useAccount } from '@utils/hooks/useAccount';
 import { parser } from '@utils/parser';
+import { Block } from '@utils/types';
 
-export function ThreadBlock({ params }: { params: any }) {
+export function ThreadBlock({ params }: { params: Block }) {
   useLiveThread(params.content);
 
   const queryClient = useQueryClient();

src/app/space/index.tsx

@@ -1,8 +1,10 @@
 import { useQuery } from '@tanstack/react-query';
+import { useCallback } from 'react';
 
 import { AddBlock } from '@app/space/components/add';
 import { FeedBlock } from '@app/space/components/blocks/feed';
 import { FollowingBlock } from '@app/space/components/blocks/following';
+import { HashtagBlock } from '@app/space/components/blocks/hashtag';
 import { ImageBlock } from '@app/space/components/blocks/image';
 import { ThreadBlock } from '@app/space/components/blocks/thread';
 
@@ -10,6 +12,8 @@ import { getBlocks } from '@libs/storage';
 
 import { LoaderIcon } from '@shared/icons';
 
+import { Block } from '@utils/types';
+
 export function SpaceScreen() {
   const {
     status,
@@ -28,6 +32,24 @@ export function SpaceScreen() {
     }
   );
 
+  const renderBlock = useCallback(
+    (block: Block) => {
+      switch (block.kind) {
+        case 0:
+          return <ImageBlock key={block.id} params={block} />;
+        case 1:
+          return <FeedBlock key={block.id} params={block} />;
+        case 2:
+          return <ThreadBlock key={block.id} params={block} />;
+        case 3:
+          return <HashtagBlock key={block.id} params={block} />;
+        default:
+          break;
+      }
+    },
+    [blocks]
+  );
+
   return (
     <div className="scrollbar-hide flex h-full w-full flex-nowrap overflow-x-auto overflow-y-hidden">
       <FollowingBlock />
@@ -43,18 +65,7 @@ export function SpaceScreen() {
           </div>
         </div>
       ) : (
-        blocks.map((block: { kind: number; id: string }) => {
-          switch (block.kind) {
-            case 0:
-              return <ImageBlock key={block.id} params={block} />;
-            case 1:
-              return <FeedBlock key={block.id} params={block} />;
-            case 2:
-              return <ThreadBlock key={block.id} params={block} />;
-            default:
-              break;
-          }
-        })
+        blocks.map((block: Block) => renderBlock(block))
       )}
       {isFetching && (
         <div className="flex w-[350px] shrink-0 flex-col border-r border-zinc-900">

src/shared/notes/actions.tsx

@@ -9,6 +9,8 @@ import { NoteReply } from '@shared/notes/actions/reply';
 import { NoteRepost } from '@shared/notes/actions/repost';
 import { NoteZap } from '@shared/notes/actions/zap';
 
+import { BLOCK_KINDS } from '@stores/constants';
+
 export function NoteActions({ id, pubkey }: { id: string; pubkey: string }) {
   const queryClient = useQueryClient();
 
@@ -22,7 +24,7 @@ export function NoteActions({ id, pubkey }: { id: string; pubkey: string }) {
   });
 
   const openThread = (thread: string) => {
-    block.mutate({ kind: 2, title: 'Thread', content: thread });
+    block.mutate({ kind: BLOCK_KINDS.thread, title: 'Thread', content: thread });
   };
 
   return (

src/shared/notes/content.tsx

@@ -2,6 +2,7 @@ import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
 import {
+  Hashtag,
   ImagePreview,
   LinkPreview,
   MentionNote,
@@ -30,24 +31,16 @@ export function NoteContent({
           del: ({ children }) => {
             const key = children[0] as string;
             if (key.startsWith('pub')) return <MentionUser pubkey={key.slice(3)} />;
-            if (key.startsWith('tag'))
-              return (
-                <button
-                  type="button"
-                  className="rounded bg-zinc-800 px-2 py-px text-sm font-normal text-orange-400 no-underline hover:bg-zinc-700 hover:text-orange-500"
-                >
-                  {key.slice(3)}
-                </button>
-              );
+            if (key.startsWith('tag')) return <Hashtag tag={key.slice(3)} />;
           },
         }}
       >
         {content.parsed}
       </ReactMarkdown>
-      {content.images.length > 0 && <ImagePreview urls={content.images} />}
-      {content.videos.length > 0 && <VideoPreview urls={content.videos} />}
-      {content.links.length > 0 && <LinkPreview urls={content.links} />}
-      {content.notes.length > 0 &&
+      {content.images?.length > 0 && <ImagePreview urls={content.images} />}
+      {content.videos?.length > 0 && <VideoPreview urls={content.videos} />}
+      {content.links?.length > 0 && <LinkPreview urls={content.links} />}
+      {content.notes?.length > 0 &&
         content.notes.map((note: string) => <MentionNote key={note} id={note} />)}
     </>
   );

src/shared/notes/hashtag.tsx

@@ -0,0 +1,36 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { createBlock } from '@libs/storage';
+
+import { BLOCK_KINDS } from '@stores/constants';
+
+export function Hashtag({ tag }: { tag: string }) {
+  const queryClient = useQueryClient();
+
+  const block = useMutation({
+    mutationFn: (data: { kind: number; title: string; content: string }) => {
+      return createBlock(data.kind, data.title, data.content);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['blocks'] });
+    },
+  });
+
+  const openBlock = () => {
+    block.mutate({
+      kind: BLOCK_KINDS.hashtag,
+      title: tag,
+      content: tag.replace('#', ''),
+    });
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={() => openBlock()}
+      className="rounded bg-zinc-800 px-2 py-px text-sm font-normal text-orange-400 no-underline hover:bg-zinc-700 hover:text-orange-500"
+    >
+      {tag}
+    </button>
+  );
+}

src/shared/notes/index.tsx

@@ -21,3 +21,4 @@ export * from './kinds/sub';
 export * from './skeleton';
 export * from './actions';
 export * from './content';
+export * from './hashtag';

src/shared/notes/kinds/kind1.tsx

@@ -24,11 +24,11 @@ export function NoteKind_1({
             <div className="w-11 shrink-0" />
             <div className="flex-1">
               <NoteContent content={content} />
-              <NoteActions id={event.event_id} pubkey={event.pubkey} />
+              <NoteActions id={event.event_id || event.id} pubkey={event.pubkey} />
             </div>
           </div>
           {!skipMetadata ? (
-            <NoteMetadata id={event.event_id} />
+            <NoteMetadata id={event.event_id || event.id} />
           ) : (
             <div className="pb-3" />
           )}

src/stores/constants.tsx

@@ -70,3 +70,11 @@ export const FULL_RELAYS = [
   'wss://relay.nostr.band/all',
   'wss://nostr.mutinywallet.com',
 ];
+
+export const BLOCK_KINDS = {
+  image: 0,
+  feed: 1,
+  thread: 2,
+  hashtag: 3,
+  exchange_rate: 4,
+};

src/utils/types.d.ts

@@ -1,8 +1,8 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
 
 export interface LumeEvent extends NDKEvent {
-  event_id: string;
-  parent_id: string;
+  event_id?: string;
+  parent_id?: string;
 }
 
 export interface Account {