From d0c8012c2c4cb4394ddf4eeaa20fd9093836c9a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20G=C3=B3mez?= <alejandrogomez@bitrefill.com>
Date: Mon, 15 Dec 2025 13:17:01 +0100
Subject: [PATCH] feat: show article image in detail view

---
 .../nostr/kinds/ArticleDetailRenderer.tsx         | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/components/nostr/kinds/ArticleDetailRenderer.tsx b/src/components/nostr/kinds/ArticleDetailRenderer.tsx
index 8fe7fe8..6e512aa 100644
--- a/src/components/nostr/kinds/ArticleDetailRenderer.tsx
+++ b/src/components/nostr/kinds/ArticleDetailRenderer.tsx
@@ -7,6 +7,7 @@ import {
   getArticleTitle,
   getArticleSummary,
   getArticlePublished,
+  getArticleImage,
 } from "applesauce-core/helpers/article";
 import { UserName } from "../UserName";
 import { EmbeddedEvent } from "../EmbeddedEvent";
@@ -126,6 +127,7 @@ export function Kind30023DetailRenderer({ event }: { event: NostrEvent }) {
   const title = useMemo(() => getArticleTitle(event), [event]);
   const summary = useMemo(() => getArticleSummary(event), [event]);
   const published = useMemo(() => getArticlePublished(event), [event]);
+  const imageUrl = useMemo(() => getArticleImage(event), [event]);
 
   // Get canonical URL from "r" tag to resolve relative URLs
   const canonicalUrl = useMemo(() => {
@@ -163,6 +165,9 @@ export function Kind30023DetailRenderer({ event }: { event: NostrEvent }) {
       })
     : null;
 
+  // Resolve article image URL
+  const resolvedImageUrl = imageUrl ? resolveUrl(imageUrl) : null;
+
   return (
     <div dir="auto" className="flex flex-col gap-6 p-6 max-w-3xl mx-auto">
       {/* Article Header */}
@@ -170,6 +175,16 @@ export function Kind30023DetailRenderer({ event }: { event: NostrEvent }) {
         {/* Title */}
         {title && <h1 className="text-3xl font-bold">{title}</h1>}
 
+        {/* Featured Image */}
+        {resolvedImageUrl && (
+          <MediaEmbed
+            url={resolvedImageUrl}
+            preset="preview"
+            enableZoom
+            className="w-full rounded-lg overflow-hidden"
+          />
+        )}
+
         {/* Summary */}
         {summary && <p className="text-lg text-muted-foreground">{summary}</p>}