update article screen

src/app/notes/article.tsx

@@ -2,7 +2,7 @@ import { writeText } from '@tauri-apps/plugin-clipboard-manager';
 import Markdown from 'markdown-to-jsx';
 import { nip19 } from 'nostr-tools';
 import { EventPointer } from 'nostr-tools/lib/types/nip19';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import { ArrowLeftIcon, CheckCircleIcon, ShareIcon } from '@shared/icons';
@@ -12,13 +12,33 @@ import { ReplyList } from '@shared/notes/replies/list';
 import { useEvent } from '@utils/hooks/useEvent';
 
 export function ArticleNoteScreen() {
-  const navigate = useNavigate();
-
   const { id } = useParams();
   const { status, data } = useEvent(id);
 
   const [isCopy, setIsCopy] = useState(false);
 
+  const navigate = useNavigate();
+  const metadata = useMemo(() => {
+    if (status === 'pending') return;
+
+    const title = data.tags.find((tag) => tag[0] === 'title')?.[1];
+    const image = data.tags.find((tag) => tag[0] === 'image')?.[1];
+    const summary = data.tags.find((tag) => tag[0] === 'summary')?.[1];
+
+    let publishedAt: Date | string | number = data.tags.find(
+      (tag) => tag[0] === 'published_at'
+    )?.[1];
+
+    publishedAt = new Date(parseInt(publishedAt) * 1000).toLocaleDateString('en-US');
+
+    return {
+      title,
+      image,
+      publishedAt,
+      summary,
+    };
+  }, [data]);
+
   const share = async () => {
     await writeText(
       'https://njump.me/' +
@@ -31,9 +51,8 @@ export function ArticleNoteScreen() {
   };
 
   return (
-    <div className="grid grid-cols-12 gap-4 scroll-smooth px-4">
+    <div className="grid grid-cols-12 scroll-smooth px-4">
-      <div className="col-span-1">
+      <div className="col-span-1 flex flex-col items-start">
-        <div className="flex flex-col items-end gap-4">
         <button
           type="button"
           onClick={() => navigate(-1)}
@@ -53,11 +72,26 @@ export function ArticleNoteScreen() {
           )}
         </button>
       </div>
-      </div>
       <div className="col-span-7 overflow-y-auto px-3 xl:col-span-8">
         {status === 'pending' ? (
           <div className="px-3 py-1.5">Loading...</div>
         ) : (
+          <div className="flex flex-col gap-4">
+            <div className="flex flex-col gap-2 border-b border-neutral-100 pb-4 dark:border-neutral-900">
+              {metadata.image && (
+                <img
+                  src={metadata.image}
+                  alt={metadata.title}
+                  className="h-auto w-full rounded-lg object-cover"
+                />
+              )}
+              <div>
+                <h1 className="mb-2 text-3xl font-semibold">{metadata.title}</h1>
+                <span className="text-sm font-medium text-neutral-600 dark:text-neutral-400">
+                  Published: {metadata.publishedAt.toString()}
+                </span>
+              </div>
+            </div>
             <Markdown
               options={{
                 overrides: {
@@ -73,11 +107,12 @@ export function ArticleNoteScreen() {
             >
               {data.content}
             </Markdown>
+          </div>
         )}
       </div>
       <div className="col-span-4 border-l border-neutral-100 px-3 dark:border-neutral-900 xl:col-span-3">
         <div className="mb-3 border-b border-neutral-100 pb-3 dark:border-neutral-900">
-          <NoteReplyForm eventId={id} />
+          <NoteReplyForm rootEvent={data} />
         </div>
         <ReplyList eventId={id} />
       </div>

src/shared/layouts/note.tsx

@@ -13,7 +13,6 @@ export function NoteLayout() {
       ) : (
         <div data-tauri-drag-region className="h-9" />
       )}
-      <div data-tauri-drag-region className="h-6" />
       <div className="flex h-full min-h-0 w-full">
         <Outlet />
         <ScrollRestoration />

src/shared/notes/article.tsx

@@ -45,7 +45,10 @@ export function ArticleNote({ event }: { event: NDKEvent }) {
               <img
                 src={metadata.image}
                 alt={metadata.title}
-                className="h-56 w-full rounded-t-lg object-cover"
+                loading="lazy"
+                decoding="async"
+                style={{ contentVisibility: 'auto' }}
+                className="h-auto w-full rounded-t-lg object-cover"
               />
             )}
             <div className="flex flex-col gap-1 rounded-b-lg rounded-t-lg bg-neutral-100 px-3 py-3 dark:bg-neutral-900">

src/shared/notes/kinds/article.tsx

@@ -34,7 +34,10 @@ export function ArticleKind({ id, tags }: { id: string; tags: NDKTag[] }) {
         <img
           src={metadata.image}
           alt={metadata.title}
-          className="h-56 w-full rounded-t-lg object-cover"
+          loading="lazy"
+          decoding="async"
+          style={{ contentVisibility: 'auto' }}
+          className="h-auto w-full rounded-t-lg object-cover"
         />
       )}
       <div className="flex flex-col gap-1 rounded-b-lg bg-neutral-200 px-3 py-3 dark:bg-neutral-800">