add hashtag block

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" />
           )}