polish

src/shared/editProfileModal.tsx

@@ -146,7 +146,7 @@ export function EditProfileModal() {
       <button
         type="button"
         onClick={() => openModal()}
-        className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-900 text-sm font-medium hover:bg-fuchsia-500"
+        className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
       >
         Edit profile
       </button>

src/shared/notes/actions.tsx

@@ -7,10 +7,10 @@ import { NoteReply } from '@shared/notes/actions/reply';
 import { NoteRepost } from '@shared/notes/actions/repost';
 import { NoteZap } from '@shared/notes/actions/zap';
 
+import { useBlocks } from '@stores/blocks';
 import { BLOCK_KINDS } from '@stores/constants';
 
 import { useAccount } from '@utils/hooks/useAccount';
-import { useBlock } from '@utils/hooks/useBlock';
 
 export function NoteActions({
   id,
@@ -23,8 +23,8 @@ export function NoteActions({
   noOpenThread?: boolean;
   root?: string;
 }) {
-  const { add } = useBlock();
   const { account } = useAccount();
+  const setBlock = useBlocks((state) => state.setBlock);
 
   return (
     <Tooltip.Provider>
@@ -43,7 +43,7 @@ export function NoteActions({
                 <button
                   type="button"
                   onClick={() =>
-                    add.mutate({
+                    setBlock({
                       kind: BLOCK_KINDS.thread,
                       title: 'Thread',
                       content: id,

src/shared/notes/hashtag.tsx

@@ -1,15 +1,14 @@
+import { useBlocks } from '@stores/blocks';
 import { BLOCK_KINDS } from '@stores/constants';
 
-import { useBlock } from '@utils/hooks/useBlock';
-
 export function Hashtag({ tag }: { tag: string }) {
-  const { add } = useBlock();
+  const setBlock = useBlocks((state) => state.setBlock);
 
   return (
     <button
       type="button"
       onClick={() =>
-        add.mutate({
+        setBlock({
           kind: BLOCK_KINDS.hashtag,
           title: tag,
           content: tag.replace('#', ''),

src/shared/notes/kinds/repost.tsx

@@ -13,7 +13,7 @@ import { LumeEvent } from '@utils/types';
 
 export function Repost({ event }: { event: LumeEvent }) {
   const repostID = getRepostID(event.tags);
-  const { status, data } = useEvent(repostID, event.content);
+  const { status, data } = useEvent(repostID, event.content as unknown as string);
 
   if (status === 'loading') {
     return (
@@ -34,7 +34,7 @@ export function Repost({ event }: { event: LumeEvent }) {
   return (
     <div className="h-min w-full px-3 py-1.5">
       <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3">
-        <div className="flex flex-col">
+        <div className="relative flex flex-col">
           <div className="isolate flex flex-col -space-y-4 overflow-hidden">
             <RepostUser pubkey={event.pubkey} />
             <User pubkey={data.pubkey} time={data.created_at} isRepost={true} />

src/shared/notes/kinds/sub.tsx

@@ -8,7 +8,7 @@ export function SubNote({ id, root }: { id: string; root?: string }) {
 
   if (status === 'loading') {
     return (
-      <div className="relative mb-5 overflow-hidden rounded-xl bg-white/10 py-3">
+      <div className="relative mb-5 overflow-hidden rounded-xl bg-white/10 px-3 py-3">
         <NoteSkeleton />
       </div>
     );

src/shared/notes/mentions/note.tsx

@@ -5,19 +5,19 @@ import remarkGfm from 'remark-gfm';
 import { MentionUser, NoteSkeleton } from '@shared/notes';
 import { User } from '@shared/user';
 
+import { useBlocks } from '@stores/blocks';
 import { BLOCK_KINDS } from '@stores/constants';
 
-import { useBlock } from '@utils/hooks/useBlock';
 import { useEvent } from '@utils/hooks/useEvent';
 
 export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
-  const { add } = useBlock();
   const { status, data } = useEvent(id);
+  const setBlock = useBlocks((state) => state.setBlock);
 
   const openThread = (event, thread: string) => {
     const selection = window.getSelection();
     if (selection.toString().length === 0) {
-      add.mutate({ kind: BLOCK_KINDS.thread, title: 'Thread', content: thread });
+      setBlock({ kind: BLOCK_KINDS.thread, title: 'Thread', content: thread });
     } else {
       event.stopPropagation();
     }

src/shared/notes/mentions/user.tsx

@@ -1,18 +1,18 @@
+import { useBlocks } from '@stores/blocks';
 import { BLOCK_KINDS } from '@stores/constants';
 
-import { useBlock } from '@utils/hooks/useBlock';
 import { useProfile } from '@utils/hooks/useProfile';
 import { displayNpub } from '@utils/shortenKey';
 
 export function MentionUser({ pubkey }: { pubkey: string }) {
-  const { add } = useBlock();
   const { user } = useProfile(pubkey);
+  const setBlock = useBlocks((state) => state.setBlock);
 
   return (
     <button
       type="button"
       onClick={() =>
-        add.mutate({
+        setBlock({
           kind: BLOCK_KINDS.user,
           title: user?.nip05 || user?.name || user?.displayNam,
           content: pubkey,

src/shared/notes/metadata.tsx

@@ -8,13 +8,14 @@ import { createReplyNote } from '@libs/storage';
 import { LoaderIcon } from '@shared/icons';
 import { MiniUser } from '@shared/notes/users/mini';
 
+import { useBlocks } from '@stores/blocks';
 import { BLOCK_KINDS } from '@stores/constants';
 
-import { useBlock } from '@utils/hooks/useBlock';
 import { compactNumber } from '@utils/number';
 
 export function NoteMetadata({ id }: { id: string }) {
-  const { add } = useBlock();
+  const setBlock = useBlocks((state) => state.setBlock);
+
   const { ndk } = useNDK();
   const { status, data } = useQuery(
     ['note-metadata', id],
@@ -95,7 +96,7 @@ export function NoteMetadata({ id }: { id: string }) {
               <button
                 type="button"
                 onClick={() =>
-                  add.mutate({ kind: BLOCK_KINDS.thread, title: 'Thread', content: id })
+                  setBlock({ kind: BLOCK_KINDS.thread, title: 'Thread', content: id })
                 }
                 className="text-white/50"
               >

src/shared/titleBar.tsx

@@ -1,9 +1,9 @@
 import { CancelIcon } from '@shared/icons';
 
-import { useBlock } from '@utils/hooks/useBlock';
+import { useBlocks } from '@stores/blocks';
 
 export function TitleBar({ id, title }: { id?: string; title: string }) {
-  const { remove } = useBlock();
+  const removeBlock = useBlocks((state) => state.removeBlock);
 
   return (
     <div
@@ -15,7 +15,7 @@ export function TitleBar({ id, title }: { id?: string; title: string }) {
       {id ? (
         <button
           type="button"
-          onClick={() => remove.mutate(id)}
+          onClick={() => removeBlock(id)}
           className="inline-flex h-6 w-6 shrink translate-y-8 transform items-center justify-center rounded transition-transform duration-150 ease-in-out hover:bg-white/10 group-hover:translate-y-0"
         >
           <CancelIcon className="h-3 w-3 text-white" />

src/shared/user.tsx

@@ -52,7 +52,7 @@ export function User({
     <Popover.Root>
       <div
         className={twMerge(
-          'relative flex',
+          'relative z-10 flex',
           size === 'small' ? 'items-center gap-2' : 'items-start gap-3'
         )}
       >