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,53 +51,68 @@ 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
-          <button
+          type="button"
-            type="button"
+          onClick={() => navigate(-1)}
-            onClick={() => navigate(-1)}
+          className="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-100 dark:bg-neutral-900"
-            className="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-100 dark:bg-neutral-900"
+        >
-          >
+          <ArrowLeftIcon className="h-5 w-5" />
-            <ArrowLeftIcon className="h-5 w-5" />
+        </button>
-          </button>
+        <button
-          <button
+          type="button"
-            type="button"
+          onClick={share}
-            onClick={share}
+          className="inline-flex h-12 w-12 items-center justify-center rounded-t-xl"
-            className="inline-flex h-12 w-12 items-center justify-center rounded-t-xl"
+        >
-          >
+          {isCopy ? (
-            {isCopy ? (
+            <CheckCircleIcon className="h-5 w-5 text-teal-500" />
-              <CheckCircleIcon className="h-5 w-5 text-teal-500" />
+          ) : (
-            ) : (
+            <ShareIcon className="h-5 w-5" />
-              <ShareIcon className="h-5 w-5" />
+          )}
-            )}
+        </button>
-          </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>
         ) : (
-          <Markdown
+          <div className="flex flex-col gap-4">
-            options={{
+            <div className="flex flex-col gap-2 border-b border-neutral-100 pb-4 dark:border-neutral-900">
-              overrides: {
+              {metadata.image && (
-                a: {
+                <img
-                  props: {
+                  src={metadata.image}
-                    className: 'text-blue-500 hover:text-blue-600',
+                  alt={metadata.title}
-                    target: '_blank',
+                  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: {
+                  a: {
+                    props: {
+                      className: 'text-blue-500 hover:text-blue-600',
+                      target: '_blank',
+                    },
                   },
                 },
-              },
+              }}
-            }}
+              className="break-p prose-lg prose-neutral dark:prose-invert prose-ul:list-disc"
-            className="break-p prose-lg prose-neutral dark:prose-invert prose-ul:list-disc"
+            >
-          >
+              {data.content}
-            {data.content}
+            </Markdown>
-          </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">