update single note screen

src/app/auth/components/user.tsx

@@ -28,11 +28,11 @@ export function User({ pubkey, fallback }: { pubkey: string; fallback?: string }
         />
       </div>
       <div className="flex w-full flex-1 flex-col items-start text-start">
-        <span className="truncate font-medium leading-tight text-white">
+        <p className="truncate font-medium leading-tight text-white">
           {user?.name || user?.display_name || user?.nip05}
-        </span>
+        </p>
         <span className="max-w-[15rem] truncate text-base leading-tight text-white/50">
-          {user?.nip05?.toLowerCase() || displayNpub(pubkey, 16)}
+          {displayNpub(pubkey, 16)}
         </span>
       </div>
     </div>

src/app/error.tsx

@@ -40,7 +40,7 @@ export function ErrorScreen() {
             Sorry, an unexpected error has occurred.
           </h1>
           <div className="mt-4 inline-flex h-16 items-center justify-center rounded-xl border border-dashed border-red-400 bg-red-200/10 px-5">
-            <p className="text-sm font-medium text-red-400">
+            <p className="select-text text-sm font-medium text-red-400">
               {error.statusText || error.message}
             </p>
           </div>

src/app/events/index.tsx

@@ -1,67 +0,0 @@
-import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
-import { useParams } from 'react-router-dom';
-
-import { useStorage } from '@libs/storage/provider';
-
-import {
-  ArticleNote,
-  FileNote,
-  NoteActions,
-  NoteReplyForm,
-  NoteStats,
-  TextNote,
-  ThreadUser,
-  UnknownNote,
-} from '@shared/notes';
-import { RepliesList } from '@shared/notes/replies/list';
-import { NoteSkeleton } from '@shared/notes/skeleton';
-
-import { useEvent } from '@utils/hooks/useEvent';
-
-export function EventScreen() {
-  const { id } = useParams();
-  const { db } = useStorage();
-  const { status, data } = useEvent(id);
-
-  const renderKind = (event: NDKEvent) => {
-    switch (event.kind) {
-      case NDKKind.Text:
-        return <TextNote event={event} />;
-      case NDKKind.Article:
-        return <ArticleNote event={event} />;
-      case 1063:
-        return <FileNote event={event} />;
-      default:
-        return <UnknownNote event={event} />;
-    }
-  };
-
-  return (
-    <div className="mx-auto w-[600px]">
-      <div className="scrollbar-hide flex h-full w-full flex-col gap-1.5 overflow-y-auto pt-11">
-        {status === 'loading' ? (
-          <div className="px-3 py-1.5">
-            <div className="rounded-xl bg-white/10 px-3 py-3">
-              <NoteSkeleton />
-            </div>
-          </div>
-        ) : (
-          <div className="h-min w-full px-3 pt-1.5">
-            <div className="rounded-xl bg-white/10 px-3 pt-3">
-              <ThreadUser pubkey={data.pubkey} time={data.created_at} />
-              <div className="mt-2">{renderKind(data)}</div>
-              <div>
-                <NoteActions id={id} pubkey={data.pubkey} noOpenThread={true} />
-                <NoteStats id={id} />
-              </div>
-            </div>
-          </div>
-        )}
-        <div className="px-3">
-          <NoteReplyForm id={id} pubkey={db.account.pubkey} />
-          <RepliesList id={id} />
-        </div>
-      </div>
-    </div>
-  );
-}

src/app/notes/article.tsx

@@ -0,0 +1,122 @@
+import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
+import { writeText } from '@tauri-apps/plugin-clipboard-manager';
+import { nip19 } from 'nostr-tools';
+import { EventPointer } from 'nostr-tools/lib/nip19';
+import { useRef, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import { useStorage } from '@libs/storage/provider';
+
+import { ArrowLeftIcon, CheckCircleIcon, ReplyIcon, ShareIcon } from '@shared/icons';
+import {
+  ArticleDetailNote,
+  NoteActions,
+  NoteReplyForm,
+  NoteStats,
+  ThreadUser,
+  UnknownNote,
+} from '@shared/notes';
+import { RepliesList } from '@shared/notes/replies/list';
+import { NoteSkeleton } from '@shared/notes/skeleton';
+
+import { useEvent } from '@utils/hooks/useEvent';
+
+export function ArticleNoteScreen() {
+  const navigate = useNavigate();
+  const replyRef = useRef(null);
+
+  const { id } = useParams();
+  const { db } = useStorage();
+  const { status, data } = useEvent(id);
+
+  const [isCopy, setIsCopy] = useState(false);
+
+  const share = async () => {
+    await writeText(
+      'https://nostr.com/' +
+        nip19.neventEncode({ id: data.id, author: data.pubkey } as EventPointer)
+    );
+    // update state
+    setIsCopy(true);
+    // reset state after 2 sec
+    setTimeout(() => setIsCopy(false), 2000);
+  };
+
+  const scrollToReply = () => {
+    replyRef.current.scrollIntoView();
+  };
+
+  const renderKind = (event: NDKEvent) => {
+    switch (event.kind) {
+      case NDKKind.Article:
+        return <ArticleDetailNote event={event} />;
+      default:
+        return <UnknownNote event={event} />;
+    }
+  };
+
+  return (
+    <div className="scrollbar-hide h-full w-full overflow-y-auto scroll-smooth">
+      <div className="container mx-auto px-4 pt-16 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-5">
+          <div className="col-span-1 pr-8">
+            <div className="sticky top-16 flex flex-col items-end gap-4">
+              <button
+                type="button"
+                onClick={() => navigate(-1)}
+                className="inline-flex h-12 w-12 items-center justify-center rounded-xl border border-white/10 bg-white/5"
+              >
+                <ArrowLeftIcon className="h-5 w-5 text-white" />
+              </button>
+              <div className="flex flex-col divide-y divide-white/5 rounded-xl border border-white/10 bg-white/5">
+                <button
+                  type="button"
+                  onClick={share}
+                  className="sticky top-16 inline-flex h-12 w-12 items-center justify-center rounded-t-xl "
+                >
+                  {isCopy ? (
+                    <CheckCircleIcon className="h-5 w-5 text-green-500" />
+                  ) : (
+                    <ShareIcon className="h-5 w-5 text-white" />
+                  )}
+                </button>
+                <button
+                  type="button"
+                  onClick={scrollToReply}
+                  className="sticky top-16 inline-flex h-12 w-12 items-center justify-center rounded-b-xl"
+                >
+                  <ReplyIcon className="h-5 w-5 text-white" />
+                </button>
+              </div>
+            </div>
+          </div>
+          <div className="col-span-3 flex flex-col gap-1.5">
+            {status === 'loading' ? (
+              <div className="px-3 py-1.5">
+                <div className="rounded-xl bg-white/10 px-3 py-3">
+                  <NoteSkeleton />
+                </div>
+              </div>
+            ) : (
+              <div className="h-min w-full px-3">
+                <div className="rounded-xl bg-white/10 px-3 pt-3">
+                  <ThreadUser pubkey={data.pubkey} time={data.created_at} />
+                  <div className="mt-2">{renderKind(data)}</div>
+                  <div>
+                    <NoteActions id={id} pubkey={data.pubkey} noOpenThread={true} />
+                    <NoteStats id={id} />
+                  </div>
+                </div>
+              </div>
+            )}
+            <div ref={replyRef} className="px-3">
+              <NoteReplyForm id={id} pubkey={db.account.pubkey} />
+              <RepliesList id={id} />
+            </div>
+          </div>
+          <div className="col-span-1" />
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/notes/text.tsx

@@ -0,0 +1,128 @@
+import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
+import { writeText } from '@tauri-apps/plugin-clipboard-manager';
+import { nip19 } from 'nostr-tools';
+import { EventPointer } from 'nostr-tools/lib/nip19';
+import { useRef, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import { useStorage } from '@libs/storage/provider';
+
+import { ArrowLeftIcon, CheckCircleIcon, ReplyIcon, ShareIcon } from '@shared/icons';
+import {
+  ArticleNote,
+  FileNote,
+  NoteActions,
+  NoteReplyForm,
+  NoteStats,
+  TextNote,
+  ThreadUser,
+  UnknownNote,
+} from '@shared/notes';
+import { RepliesList } from '@shared/notes/replies/list';
+import { NoteSkeleton } from '@shared/notes/skeleton';
+
+import { useEvent } from '@utils/hooks/useEvent';
+
+export function TextNoteScreen() {
+  const navigate = useNavigate();
+  const replyRef = useRef(null);
+
+  const { id } = useParams();
+  const { db } = useStorage();
+  const { status, data } = useEvent(id);
+
+  const [isCopy, setIsCopy] = useState(false);
+
+  const share = async () => {
+    await writeText(
+      'https://nostr.com/' +
+        nip19.neventEncode({ id: data.id, author: data.pubkey } as EventPointer)
+    );
+    // update state
+    setIsCopy(true);
+    // reset state after 2 sec
+    setTimeout(() => setIsCopy(false), 2000);
+  };
+
+  const scrollToReply = () => {
+    replyRef.current.scrollIntoView();
+  };
+
+  const renderKind = (event: NDKEvent) => {
+    switch (event.kind) {
+      case NDKKind.Text:
+        return <TextNote event={event} />;
+      case NDKKind.Article:
+        return <ArticleNote event={event} />;
+      case 1063:
+        return <FileNote event={event} />;
+      default:
+        return <UnknownNote event={event} />;
+    }
+  };
+
+  return (
+    <div className="scrollbar-hide h-full w-full overflow-y-auto scroll-smooth">
+      <div className="container mx-auto px-4 pt-16 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-5">
+          <div className="col-span-1 pr-8">
+            <div className="sticky top-16 flex flex-col items-end gap-4">
+              <button
+                type="button"
+                onClick={() => navigate(-1)}
+                className="inline-flex h-12 w-12 items-center justify-center rounded-xl border border-white/10 bg-white/5"
+              >
+                <ArrowLeftIcon className="h-5 w-5 text-white" />
+              </button>
+              <div className="flex flex-col divide-y divide-white/5 rounded-xl border border-white/10 bg-white/5">
+                <button
+                  type="button"
+                  onClick={share}
+                  className="sticky top-16 inline-flex h-12 w-12 items-center justify-center rounded-t-xl "
+                >
+                  {isCopy ? (
+                    <CheckCircleIcon className="h-5 w-5 text-green-500" />
+                  ) : (
+                    <ShareIcon className="h-5 w-5 text-white" />
+                  )}
+                </button>
+                <button
+                  type="button"
+                  onClick={scrollToReply}
+                  className="sticky top-16 inline-flex h-12 w-12 items-center justify-center rounded-b-xl"
+                >
+                  <ReplyIcon className="h-5 w-5 text-white" />
+                </button>
+              </div>
+            </div>
+          </div>
+          <div className="col-span-3 flex flex-col gap-1.5">
+            {status === 'loading' ? (
+              <div className="px-3 py-1.5">
+                <div className="rounded-xl bg-white/10 px-3 py-3">
+                  <NoteSkeleton />
+                </div>
+              </div>
+            ) : (
+              <div className="h-min w-full px-3">
+                <div className="rounded-xl bg-white/10 px-3 pt-3">
+                  <ThreadUser pubkey={data.pubkey} time={data.created_at} />
+                  <div className="mt-2">{renderKind(data)}</div>
+                  <div>
+                    <NoteActions id={id} pubkey={data.pubkey} noOpenThread={true} />
+                    <NoteStats id={id} />
+                  </div>
+                </div>
+              </div>
+            )}
+            <div ref={replyRef} className="px-3">
+              <NoteReplyForm id={id} pubkey={db.account.pubkey} />
+              <RepliesList id={id} />
+            </div>
+          </div>
+          <div className="col-span-1" />
+        </div>
+      </div>
+    </div>
+  );
+}