feat(reader): display article publication date

- Add published field to ReadableContent interface
- Pass published date from article loader through component chain
- Display formatted publication date in ReaderHeader with calendar icon
- Format date as 'MMMM d, yyyy' using date-fns

src/components/ContentPanel.tsx

@@ -20,6 +20,7 @@ interface ContentPanelProps {
   selectedUrl?: string
   image?: string
   summary?: string
+  published?: number
   highlights?: Highlight[]
   showHighlights?: boolean
   highlightStyle?: 'marker' | 'underline'
@@ -42,6 +43,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
   selectedUrl,
   image,
   summary,
+  published,
   highlights = [],
   showHighlights = true,
   highlightStyle = 'marker',
@@ -120,6 +122,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
         title={title}
         image={image}
         summary={summary}
+        published={published}
         readingTimeText={readingStats ? readingStats.text : null}
         hasHighlights={hasHighlights}
         highlightCount={relevantHighlights.length}

src/components/ReaderHeader.tsx

@@ -1,11 +1,13 @@
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faHighlighter, faClock } from '@fortawesome/free-solid-svg-icons'
+import { faHighlighter, faClock, faCalendar } from '@fortawesome/free-solid-svg-icons'
+import { format } from 'date-fns'
 
 interface ReaderHeaderProps {
   title?: string
   image?: string
   summary?: string
+  published?: number
   readingTimeText?: string | null
   hasHighlights: boolean
   highlightCount: number
@@ -15,10 +17,12 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
   title,
   image,
   summary,
+  published,
   readingTimeText,
   hasHighlights,
   highlightCount
 }) => {
+  const formattedDate = published ? format(new Date(published * 1000), 'MMMM d, yyyy') : null
   if (image) {
     return (
       <div className="reader-hero-image">
@@ -28,6 +32,12 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
             <h2 className="reader-title">{title}</h2>
             {summary && <p className="reader-summary">{summary}</p>}
             <div className="reader-meta">
+              {formattedDate && (
+                <div className="publish-date">
+                  <FontAwesomeIcon icon={faCalendar} />
+                  <span>{formattedDate}</span>
+                </div>
+              )}
               {readingTimeText && (
                 <div className="reading-time">
                   <FontAwesomeIcon icon={faClock} />
@@ -54,6 +64,12 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
           <h2 className="reader-title">{title}</h2>
           {summary && <p className="reader-summary">{summary}</p>}
           <div className="reader-meta">
+            {formattedDate && (
+              <div className="publish-date">
+                <FontAwesomeIcon icon={faCalendar} />
+                <span>{formattedDate}</span>
+              </div>
+            )}
             {readingTimeText && (
               <div className="reading-time">
                 <FontAwesomeIcon icon={faClock} />

src/components/ThreePaneLayout.tsx

@@ -107,6 +107,7 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
               markdown={props.readerContent?.markdown}
               image={props.readerContent?.image}
               summary={props.readerContent?.summary}
+              published={props.readerContent?.published}
               selectedUrl={props.selectedUrl}
               highlights={props.classifiedHighlights}
               showHighlights={props.showHighlights}

src/hooks/useArticleLoader.ts

@@ -50,6 +50,7 @@ export function useArticleLoader({
           markdown: article.markdown,
           image: article.image,
           summary: article.summary,
+          published: article.published,
           url: `nostr:${naddr}`
         })
         

src/services/readerService.ts

@@ -8,6 +8,7 @@ export interface ReadableContent {
   markdown?: string
   image?: string
   summary?: string
+  published?: number
 }
 
 interface CachedContent {