add focus button to note actionbar

src/app/notes/article.tsx

@@ -103,7 +103,7 @@ export function ArticleNoteScreen() {
                   <ThreadUser pubkey={data.pubkey} time={data.created_at} />
                   <div className="mt-2">{renderKind(data)}</div>
                   <div>
-                    <NoteActions id={id} pubkey={data.pubkey} noOpenThread={true} />
+                    <NoteActions id={id} pubkey={data.pubkey} extraButtons={false} />
                     <NoteStats id={id} />
                   </div>
                 </div>

src/app/notes/text.tsx

@@ -109,7 +109,7 @@ export function TextNoteScreen() {
                   <ThreadUser pubkey={data.pubkey} time={data.created_at} />
                   <div className="mt-2">{renderKind(data)}</div>
                   <div>
-                    <NoteActions id={id} pubkey={data.pubkey} noOpenThread={true} />
+                    <NoteActions id={id} pubkey={data.pubkey} extraButtons={false} />
                     <NoteStats id={id} />
                   </div>
                 </div>

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

@@ -55,7 +55,11 @@ export function ThreadBlock({ params }: { params: Widget }) {
             <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} noOpenThread={true} />
+              <NoteActions
+                id={params.content}
+                pubkey={data.pubkey}
+                extraButtons={false}
+              />
               <NoteStats id={params.content} />
             </div>
           </div>

src/shared/icons/focus.tsx

@@ -0,0 +1,22 @@
+import { SVGProps } from 'react';
+
+export function FocusIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M8.25 3.75h-3.5a1 1 0 00-1 1v3.5m12-4.5h3.5a1 1 0 011 1v3.5m0 7.5v3.5a1 1 0 01-1 1h-3.5m-7.5 0h-3.5a1 1 0 01-1-1v-3.5"
+      ></path>
+    </svg>
+  );
+}

src/shared/icons/index.tsx

@@ -52,3 +52,4 @@ export * from './hashtag';
 export * from './file';
 export * from './share';
 export * from './expand';
+export * from './focus';

src/shared/notes/actions.tsx

@@ -1,8 +1,9 @@
 import * as Tooltip from '@radix-ui/react-tooltip';
+import { Link } from 'react-router-dom';
 
 import { useStorage } from '@libs/storage/provider';
 
-import { ThreadIcon } from '@shared/icons';
+import { FocusIcon, ThreadIcon } from '@shared/icons';
 import { MoreActions } from '@shared/notes/actions/more';
 import { NoteReaction } from '@shared/notes/actions/reaction';
 import { NoteReply } from '@shared/notes/actions/reply';
@@ -14,12 +15,12 @@ import { WidgetKinds, useWidgets } from '@stores/widgets';
 export function NoteActions({
   id,
   pubkey,
-  noOpenThread,
+  extraButtons = true,
   root,
 }: {
   id: string;
   pubkey: string;
-  noOpenThread?: boolean;
+  extraButtons?: boolean;
   root?: string;
 }) {
   const { db } = useStorage();
@@ -34,32 +35,50 @@ export function NoteActions({
           <NoteRepost id={id} pubkey={pubkey} />
           <NoteZap id={id} />
         </div>
-        {!noOpenThread && (
+        {extraButtons && (
           <>
             <div className="mx-2 block h-4 w-px bg-white/10 backdrop-blur-xl" />
-            <Tooltip.Root delayDuration={150}>
+            <div className="inline-flex items-center gap-2">
-              <Tooltip.Trigger asChild>
+              <Tooltip.Root delayDuration={150}>
-                <button
+                <Tooltip.Trigger asChild>
-                  type="button"
+                  <Link
-                  onClick={() =>
+                    to={`/notes/text/${id}`}
-                    setWidget(db, {
+                    className="group inline-flex h-7 w-7 items-center justify-center"
-                      kind: WidgetKinds.thread,
+                  >
-                      title: 'Thread',
+                    <FocusIcon className="h-5 w-5 text-white group-hover:text-fuchsia-400" />
-                      content: id,
+                  </Link>
-                    })
+                </Tooltip.Trigger>
-                  }
+                <Tooltip.Portal>
-                  className="group inline-flex h-7 w-7 items-center justify-center"
+                  <Tooltip.Content className="-left-10 select-none rounded-md bg-black px-3.5 py-1.5 text-sm leading-none text-white will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
-                >
+                    Open thread
-                  <ThreadIcon className="h-5 w-5 text-white group-hover:text-fuchsia-400" />
+                    <Tooltip.Arrow className="fill-black" />
-                </button>
+                  </Tooltip.Content>
-              </Tooltip.Trigger>
+                </Tooltip.Portal>
-              <Tooltip.Portal>
+              </Tooltip.Root>
-                <Tooltip.Content className="-left-10 select-none rounded-md bg-black px-3.5 py-1.5 text-sm leading-none text-white will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
+              <Tooltip.Root delayDuration={150}>
-                  Open thread
+                <Tooltip.Trigger asChild>
-                  <Tooltip.Arrow className="fill-black" />
+                  <button
-                </Tooltip.Content>
+                    type="button"
-              </Tooltip.Portal>
+                    onClick={() =>
-            </Tooltip.Root>
+                      setWidget(db, {
+                        kind: WidgetKinds.thread,
+                        title: 'Thread',
+                        content: id,
+                      })
+                    }
+                    className="group inline-flex h-7 w-7 items-center justify-center"
+                  >
+                    <ThreadIcon className="h-5 w-5 text-white group-hover:text-fuchsia-400" />
+                  </button>
+                </Tooltip.Trigger>
+                <Tooltip.Portal>
+                  <Tooltip.Content className="-left-10 select-none rounded-md bg-black px-3.5 py-1.5 text-sm leading-none text-white will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
+                    Open thread
+                    <Tooltip.Arrow className="fill-black" />
+                  </Tooltip.Content>
+                </Tooltip.Portal>
+              </Tooltip.Root>
+            </div>
           </>
         )}
         <MoreActions id={id} pubkey={pubkey} />

src/shared/notes/actions/more.tsx

@@ -45,15 +45,7 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
         </Tooltip.Portal>
       </Tooltip.Root>
       <DropdownMenu.Portal>
-        <DropdownMenu.Content className="flex w-[200px] flex-col overflow-hidden rounded-md bg-white/10 p-2 backdrop-blur-3xl backdrop-blur-xl focus:outline-none">
+        <DropdownMenu.Content className="flex w-[200px] flex-col overflow-hidden rounded-md bg-white/10 p-2 backdrop-blur-3xl focus:outline-none">
-          <DropdownMenu.Item asChild>
-            <Link
-              to={`/notes/text/${id}`}
-              className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white backdrop-blur-xl hover:bg-white/10"
-            >
-              Focus mode
-            </Link>
-          </DropdownMenu.Item>
           <DropdownMenu.Item asChild>
             <button
               type="button"

src/utils/hooks/useEvent.ts

@@ -23,6 +23,27 @@ export function useEvent(id: string, embed?: string) {
         // get event from relay if event in db not present
         const event = await ndk.fetchEvent(id);
         if (!event) throw new Error(`Event not found: ${id}`);
+
+        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];
+        }
+
+        await db.createEvent(
+          event.id,
+          JSON.stringify(event),
+          event.pubkey,
+          event.kind,
+          root,
+          reply,
+          event.created_at
+        );
+
         return event;
       }
     },