update single note screen

src/shared/notes/kinds/article.tsx

@@ -1,5 +1,6 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
 import { useMemo } from 'react';
+import { Link } from 'react-router-dom';
 
 import { Image } from '@shared/image';
 
@@ -27,26 +28,31 @@ export function ArticleNote({ event }: { event: NDKEvent }) {
   }, [event.id]);
 
   return (
-    <div className="mb-2 mt-3 rounded-lg bg-white/10">
+    <Link
+      to={`/notes/article/${event.id}`}
+      preventScrollReset={true}
+      className="mb-2 mt-3 rounded-lg"
+    >
       <div className="flex flex-col rounded-lg">
-        <Image
-          src={metadata.image}
-          alt={metadata.title}
-          className="h-44 w-full rounded-t-lg object-cover"
-        />
-        <div className="flex flex-col gap-2 px-3 py-3">
+        {metadata.image && (
+          <Image
+            src={metadata.image}
+            alt={metadata.title}
+            className="h-44 w-full rounded-t-lg object-cover"
+          />
+        )}
+        <div className="flex flex-col gap-2 rounded-b-lg bg-white/10 px-3 py-3">
           <h5 className="line-clamp-1 font-medium leading-none text-white">
             {metadata.title}
           </h5>
           <p className="line-clamp-3 break-all text-sm text-white/50">
             {metadata.summary}
           </p>
-
           <span className="mt-2.5 text-sm leading-none text-white/50">
             {metadata.publishedAt.toString()}
           </span>
         </div>
       </div>
-    </div>
+    </Link>
   );
 }