chore: update icon

src/libs/ark/components/note/index.ts

@@ -1,6 +1,7 @@
 import { NoteChild } from './child';
-import { NoteContent } from './content';
+import { NoteKind } from './kind';
 import { NoteMenu } from './menu';
+import { NotePin } from './pin';
 import { NoteReaction } from './reaction';
 import { NoteReply } from './reply';
 import { NoteRepost } from './repost';
@@ -12,10 +13,11 @@ export const Note = {
   Root: NoteRoot,
   User: NoteUser,
   Menu: NoteMenu,
-  Content: NoteContent,
+  Kind: NoteKind,
   Reply: NoteReply,
   Repost: NoteRepost,
   Reaction: NoteReaction,
   Zap: NoteZap,
+  Pin: NotePin,
   Child: NoteChild,
 };

src/libs/ark/components/note/kind.tsx

@@ -1,7 +1,7 @@
 import { twMerge } from 'tailwind-merge';
 import { useRichContent } from '@utils/hooks/useRichContent';
 
-export function NoteContent({
+export function NoteKind({
   content,
   className,
 }: {

src/libs/ark/components/note/kinds/text.tsx

@@ -1,43 +0,0 @@
-import { NDKEvent } from '@nostr-dev-kit/ndk';
-import { useArk } from '@libs/ark';
-import { Note } from '..';
-
-export function TextNote({ event }: { event: NDKEvent }) {
-  const ark = useArk();
-  const thread = ark.getEventThread({ tags: event.tags });
-
-  return (
-    <Note.Root>
-      <div className="flex h-14 items-center justify-between gap-2 px-3">
-        <Note.User pubkey={event.pubkey} time={event.created_at} className="w-full" />
-        <Note.Menu eventId={event.id} pubkey={event.pubkey} />
-      </div>
-      {thread ? (
-        <div className="mb-2 w-full px-3">
-          <div className="flex h-min w-full flex-col gap-3 rounded-lg bg-neutral-100 p-3 dark:bg-neutral-900">
-            {thread.rootEventId ? (
-              <Note.Child eventId={thread.rootEventId} isRoot />
-            ) : null}
-            {thread.replyEventId ? <Note.Child eventId={thread.replyEventId} /> : null}
-            <button
-              type="button"
-              className="self-start text-blue-500 hover:text-blue-600"
-            >
-              Show full thread
-            </button>
-          </div>
-        </div>
-      ) : null}
-      <Note.Content content={event.content} className="px-3" />
-      <div className="flex h-14 items-center justify-between px-3">
-        <div />
-        <div className="inline-flex items-center gap-10">
-          <Note.Reply eventId={event.id} rootEventId={thread?.rootEventId} />
-          <Note.Reaction event={event} />
-          <Note.Repost event={event} />
-          <Note.Zap event={event} />
-        </div>
-      </div>
-    </Note.Root>
-  );
-}

src/libs/ark/components/note/pin.tsx

@@ -0,0 +1,27 @@
+import * as Tooltip from '@radix-ui/react-tooltip';
+import { PinIcon } from '@shared/icons';
+
+export function NotePin({ action }: { action: () => void }) {
+  return (
+    <Tooltip.Provider>
+      <Tooltip.Root delayDuration={150}>
+        <Tooltip.Trigger asChild>
+          <button
+            type="button"
+            onClick={action}
+            className="inline-flex h-7 w-max items-center justify-center gap-2 rounded-full bg-neutral-100 px-2 text-sm font-medium dark:bg-neutral-900"
+          >
+            <PinIcon className="size-4" />
+            Pin
+          </button>
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content className="-left-10 inline-flex h-7 select-none items-center justify-center rounded-md bg-neutral-200 px-3.5 text-sm text-neutral-900 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 dark:bg-neutral-800 dark:text-neutral-100">
+            Pin note
+            <Tooltip.Arrow className="fill-neutral-200 dark:fill-neutral-800" />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+    </Tooltip.Provider>
+  );
+}

src/libs/ark/index.ts

@@ -2,4 +2,3 @@ export * from './ark';
 export * from './provider';
 export * from './components/widget';
 export * from './components/note';
-export * from './components/note/kinds/text';

src/shared/icons/index.ts

@@ -91,3 +91,4 @@ export * from './run';
 export * from './gossip';
 export * from './userAdd';
 export * from './userRemove';
+export * from './pin';

src/shared/icons/pin.tsx

@@ -0,0 +1,18 @@
+export function PinIcon(props: JSX.IntrinsicElements['svg']) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+    >
+      <path d="M12 21v-5.307m0 0c-2.201 0-4.39-.184-6.567-.495a.504.504 0 0 1-.433-.5 4.54 4.54 0 0 1 2.194-3.886c.63-.381 1.034-1.029.85-1.788l-.986-4.092a1.6 1.6 0 0 1 1.406-1.967c2.366-.22 4.706-.22 7.072 0a1.6 1.6 0 0 1 1.406 1.967l-.986 4.092c-.183.76.22 1.407.85 1.788A4.54 4.54 0 0 1 19 14.698a.504.504 0 0 1-.433.5c-2.178.31-4.366.495-6.567.495Z" />
+    </svg>
+  );
+}

src/shared/notes/actions.tsx

@@ -1,7 +1,7 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
 import * as Tooltip from '@radix-ui/react-tooltip';
 import { createSearchParams, useNavigate } from 'react-router-dom';
-import { FocusIcon, ReplyIcon } from '@shared/icons';
+import { PinIcon, ReplyIcon } from '@shared/icons';
 import { NoteReaction } from '@shared/notes/actions/reaction';
 import { NoteRepost } from '@shared/notes/actions/repost';
 import { NoteZap } from '@shared/notes/actions/zap';
@@ -38,13 +38,13 @@ export function NoteActions({
                   }
                   className="inline-flex h-7 w-max items-center justify-center gap-2 rounded-full bg-neutral-100 px-2 text-sm font-medium dark:bg-neutral-900"
                 >
-                  <FocusIcon className="h-4 w-4" />
-                  Open
+                  <PinIcon className="size-4" />
+                  Pin
                 </button>
               </Tooltip.Trigger>
               <Tooltip.Portal>
                 <Tooltip.Content className="-left-10 inline-flex h-7 select-none items-center justify-center rounded-md bg-neutral-200 px-3.5 text-sm text-neutral-900 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 dark:bg-neutral-800 dark:text-neutral-100">
-                  Open thread
+                  Pin note
                   <Tooltip.Arrow className="fill-neutral-200 dark:fill-neutral-800" />
                 </Tooltip.Content>
               </Tooltip.Portal>

src/shared/notes/repost.tsx

@@ -59,7 +59,7 @@ export function Repost({ event }: { event: NDKEvent }) {
 
   if (isError) {
     return (
-      <div className="mb-3 h-min w-full px-3">
+      <div className="my-3 h-min w-full px-3">
         <div className="relative flex flex-col gap-2 overflow-hidden rounded-xl bg-neutral-50 pt-3 dark:bg-neutral-950">
           <User pubkey={event.pubkey} time={event.created_at} variant="repost" />
           <div className="relative flex flex-col gap-2">
@@ -73,7 +73,7 @@ export function Repost({ event }: { event: NDKEvent }) {
   }
 
   return (
-    <div className="mb-3 h-min w-full px-3">
+    <div className="my-3 h-min w-full px-3">
       <div className="relative flex flex-col gap-2 overflow-hidden rounded-xl bg-neutral-50 pt-3 dark:bg-neutral-950">
         <User pubkey={event.pubkey} time={event.created_at} variant="repost" />
         <div className="relative flex flex-col gap-2">