add hashtag support in composer

src/shared/notes/actions.tsx

@@ -14,10 +14,12 @@ export function NoteActions({
   id,
   pubkey,
   noOpenThread,
+  root,
 }: {
   id: string;
   pubkey: string;
   noOpenThread?: boolean;
+  root?: string;
 }) {
   const { add } = useBlock();
 
@@ -25,7 +27,7 @@ export function NoteActions({
     <Tooltip.Provider>
       <div className="-ml-1 mt-2 inline-flex w-full items-center">
         <div className="inline-flex items-center gap-2">
-          <NoteReply id={id} pubkey={pubkey} />
+          <NoteReply id={id} pubkey={pubkey} root={root} />
           <NoteReaction id={id} pubkey={pubkey} />
           <NoteRepost id={id} pubkey={pubkey} />
           <NoteZap id={id} />

src/shared/notes/actions/reply.tsx

@@ -4,7 +4,15 @@ import { ReplyIcon } from '@shared/icons';
 
 import { useComposer } from '@stores/composer';
 
-export function NoteReply({ id, pubkey }: { id: string; pubkey: string }) {
+export function NoteReply({
+  id,
+  pubkey,
+  root,
+}: {
+  id: string;
+  pubkey: string;
+  root?: string;
+}) {
   const setReply = useComposer((state) => state.setReply);
 
   return (
@@ -12,7 +20,7 @@ export function NoteReply({ id, pubkey }: { id: string; pubkey: string }) {
       <Tooltip.Trigger asChild>
         <button
           type="button"
-          onClick={() => setReply(id, pubkey)}
+          onClick={() => setReply(id, pubkey, root)}
           className="group inline-flex h-7 w-7 items-center justify-center"
         >
           <ReplyIcon className="h-5 w-5 text-zinc-300 group-hover:text-green-500" />

src/shared/notes/kinds/sub.tsx

@@ -3,7 +3,7 @@ import { User } from '@shared/user';
 
 import { useEvent } from '@utils/hooks/useEvent';
 
-export function SubNote({ id }: { id: string }) {
+export function SubNote({ id, root }: { id: string; root?: string }) {
   const { status, data } = useEvent(id);
 
   if (status === 'loading') {
@@ -31,7 +31,7 @@ export function SubNote({ id }: { id: string }) {
           <div className="w-11 shrink-0" />
           <div className="flex-1">
             <NoteContent content={data.content} />
-            <NoteActions id={data.event_id} pubkey={data.pubkey} />
+            <NoteActions id={data.event_id} pubkey={data.pubkey} root={root} />
           </div>
         </div>
       </div>

src/shared/notes/kinds/thread.tsx

@@ -21,7 +21,7 @@ export function NoteThread({
     <div className="h-min w-full px-3 py-1.5">
       <div className="overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 pt-3">
         <div className="relative">{root && <SubNote id={root} />}</div>
-        <div className="relative">{reply && <SubNote id={reply} />}</div>
+        <div className="relative">{reply && <SubNote id={reply} root={root} />}</div>
         <div className="relative flex flex-col">
           <User pubkey={event.pubkey} time={event.created_at} />
           <div className="relative z-20 -mt-6 flex items-start gap-3">

src/shared/notes/replies/item.tsx

@@ -6,7 +6,7 @@ import { User } from '@shared/user';
 import { parser } from '@utils/parser';
 import { LumeEvent } from '@utils/types';
 
-export function Reply({ event }: { event: LumeEvent }) {
+export function Reply({ event, root }: { event: LumeEvent; root?: string }) {
   const content = useMemo(() => parser(event), [event]);
 
   return (
@@ -18,7 +18,11 @@ export function Reply({ event }: { event: LumeEvent }) {
             <div className="w-11 shrink-0" />
             <div className="flex-1">
               <NoteContent content={content} />
-              <NoteActions id={event.event_id || event.id} pubkey={event.pubkey} />
+              <NoteActions
+                id={event.event_id || event.id}
+                pubkey={event.pubkey}
+                root={root}
+              />
             </div>
           </div>
           <div>

src/shared/notes/replies/list.tsx

@@ -1,4 +1,3 @@
-import { NDKEvent } from '@nostr-dev-kit/ndk';
 import { useQuery } from '@tanstack/react-query';
 
 import { useNDK } from '@libs/ndk/provider';
@@ -68,7 +67,9 @@ export function RepliesList({ id }: { id: string }) {
             </div>
           </div>
         ) : (
-          data.reverse().map((event: NDKEvent) => <Reply key={event.id} event={event} />)
+          data
+            .reverse()
+            .map((event: LumeEvent) => <Reply key={event.id} event={event} root={id} />)
         )}
       </div>
     </div>