add note page

src/app/channel/components/messages/hideButton.tsx

@@ -4,7 +4,6 @@ import { Fragment, useContext, useState } from 'react';
 
 import { CancelIcon, HideIcon } from '@shared/icons';
 import { RelayContext } from '@shared/relayProvider';
-import { Tooltip } from '@shared/tooltip_dep';
 
 import { useChannelMessages } from '@stores/channels';
 
@@ -51,15 +50,13 @@ export function MessageHideButton({ id }: { id: string }) {
 
   return (
     <>
-      <Tooltip message="Hide this message">
-        <button
-          type="button"
-          onClick={openModal}
-          className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-zinc-800"
-        >
-          <HideIcon width={16} height={16} className="text-zinc-200" />
-        </button>
-      </Tooltip>
+      <button
+        type="button"
+        onClick={openModal}
+        className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-zinc-800"
+      >
+        <HideIcon width={16} height={16} className="text-zinc-200" />
+      </button>
       <Transition appear show={isOpen} as={Fragment}>
         <Dialog as="div" className="relative z-10" onClose={closeModal}>
           <Transition.Child

src/app/channel/components/messages/muteButton.tsx

@@ -4,7 +4,6 @@ import { Fragment, useContext, useState } from 'react';
 
 import { CancelIcon, MuteIcon } from '@shared/icons';
 import { RelayContext } from '@shared/relayProvider';
-import { Tooltip } from '@shared/tooltip_dep';
 
 import { useChannelMessages } from '@stores/channels';
 
@@ -51,15 +50,13 @@ export function MessageMuteButton({ pubkey }: { pubkey: string }) {
 
   return (
     <>
-      <Tooltip message="Mute this user">
-        <button
-          type="button"
-          onClick={() => openModal()}
-          className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-zinc-800"
-        >
-          <MuteIcon width={16} height={16} className="text-zinc-200" />
-        </button>
-      </Tooltip>
+      <button
+        type="button"
+        onClick={() => openModal()}
+        className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-zinc-800"
+      >
+        <MuteIcon width={16} height={16} className="text-zinc-200" />
+      </button>
       <Transition appear show={isOpen} as={Fragment}>
         <Dialog as="div" className="relative z-10" onClose={closeModal}>
           <Transition.Child

src/app/channel/components/messages/replyButton.tsx

@@ -1,5 +1,4 @@
 import { ReplyMessageIcon } from '@shared/icons';
-import { Tooltip } from '@shared/tooltip_dep';
 
 import { useChannelMessages } from '@stores/channels';
 
@@ -19,14 +18,12 @@ export function MessageReplyButton({
   };
 
   return (
-    <Tooltip message="Reply to message">
-      <button
-        type="button"
-        onClick={() => createReply()}
-        className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-zinc-800"
-      >
-        <ReplyMessageIcon width={16} height={16} className="text-zinc-200" />
-      </button>
-    </Tooltip>
+    <button
+      type="button"
+      onClick={() => createReply()}
+      className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-zinc-800"
+    >
+      <ReplyMessageIcon width={16} height={16} className="text-zinc-200" />
+    </button>
   );
 }

src/app/note/index.tsx

@@ -0,0 +1,60 @@
+import { useQuery } from '@tanstack/react-query';
+import { useParams } from 'react-router-dom';
+
+import { useLiveThread } from '@app/space/hooks/useLiveThread';
+
+import { getNoteByID } from '@libs/storage';
+
+import { Kind1 } from '@shared/notes/contents/kind1';
+import { Kind1063 } from '@shared/notes/contents/kind1063';
+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';
+import { User } from '@shared/user';
+
+import { useAccount } from '@utils/hooks/useAccount';
+import { parser } from '@utils/parser';
+
+export function NoteScreen() {
+  const { id } = useParams();
+  const { account } = useAccount();
+  const { status, data } = useQuery(['thread', id], async () => {
+    const res = await getNoteByID(id);
+    res['content'] = parser(res);
+    return res;
+  });
+
+  useLiveThread(id);
+
+  return (
+    <div className="mx-auto w-[600px]">
+      <div className="scrollbar-hide flex h-full w-full flex-col gap-1.5 overflow-y-auto pb-20 pt-16">
+        {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>
+        ) : (
+          <div className="h-min w-full px-3 py-1.5">
+            <div className="rounded-md bg-zinc-900 px-5 pt-5">
+              <User pubkey={data.pubkey} time={data.created_at} />
+              <div className="mt-3">
+                {data.kind === 1 && <Kind1 content={data.content} />}
+                {data.kind === 1063 && <Kind1063 metadata={data.tags} />}
+                <NoteMetadata id={data.event_id || id} eventPubkey={data.pubkey} />
+              </div>
+            </div>
+            <div className="mt-3 rounded-md bg-zinc-900">
+              {account && <NoteReplyForm rootID={id} userPubkey={account.pubkey} />}
+            </div>
+          </div>
+        )}
+        <div className="px-3">
+          <RepliesList parent_id={id} />
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -1,4 +1,5 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Link } from 'react-router-dom';
 
 import { useLiveThread } from '@app/space/hooks/useLiveThread';
 
@@ -58,6 +59,7 @@ export function ThreadBlock({ params }: { params: any }) {
                   id={data.event_id || params.content}
                   eventPubkey={data.pubkey}
                 />
+                <Link to={`/app/note/${params.content}`}>Focus</Link>
               </div>
             </div>
             <div className="mt-3 rounded-md bg-zinc-900">

src/app/user/index.tsx

@@ -143,13 +143,18 @@ export function UserScreen() {
                   <button
                     type="button"
                     className={`${
-                      selected
-                        ? 'border-fuchsia-500 text-fuchsia-500'
-                        : 'border-transparent text-zinc-200'
-                    } inline-flex h-10 items-center gap-2 border-t font-medium`}
+                      selected ? 'border-fuchsia-500' : 'border-transparent'
+                    } inline-flex h-16 items-start gap-2 border-t pt-4 font-medium`}
                   >
-                    <ThreadsIcon className="h-4 w-4" />
-                    Activities from 48 hours ago
+                    <ThreadsIcon className="h-3.5 w-3.5" />
+                    <div className="flex flex-col justify-start gap-0.5 text-start">
+                      <p className="text-sm font-medium leading-none text-zinc-200">
+                        Activities
+                      </p>
+                      <span className="text-sm leading-none text-zinc-500">
+                        48 hours ago
+                      </span>
+                    </div>
                   </button>
                 )}
               </Tab>