From fea425b5d04c82b8733ac857d9581e8b259a998a Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Wed, 8 Oct 2025 12:35:05 +0100
Subject: [PATCH] feat: display article summary in header

- Add summary field to ReadableContent interface
- Pass summary through ContentPanel to ReaderHeader
- Display summary below title in both overlay and standard layouts
- Style summary with reading font for consistency
- Summary appears in white with shadow in image overlays
- Summary appears in gray (#aaa) in standard headers
- Enhances article preview and reading experience
---
 src/components/ContentPanel.tsx    |  3 +++
 src/components/ReaderHeader.tsx    |  4 ++++
 src/components/ThreePaneLayout.tsx |  1 +
 src/index.css                      | 27 +++++++++++++++++++--------
 src/services/readerService.ts      |  1 +
 5 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/components/ContentPanel.tsx b/src/components/ContentPanel.tsx
index eb94eb01..b28572ce 100644
--- a/src/components/ContentPanel.tsx
+++ b/src/components/ContentPanel.tsx
@@ -19,6 +19,7 @@ interface ContentPanelProps {
   markdown?: string
   selectedUrl?: string
   image?: string
+  summary?: string
   highlights?: Highlight[]
   showHighlights?: boolean
   highlightStyle?: 'marker' | 'underline'
@@ -40,6 +41,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
   markdown, 
   selectedUrl,
   image,
+  summary,
   highlights = [],
   showHighlights = true,
   highlightStyle = 'marker',
@@ -117,6 +119,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
       <ReaderHeader 
         title={title}
         image={image}
+        summary={summary}
         readingTimeText={readingStats ? readingStats.text : null}
         hasHighlights={hasHighlights}
         highlightCount={relevantHighlights.length}
diff --git a/src/components/ReaderHeader.tsx b/src/components/ReaderHeader.tsx
index 2d552c2f..9c0388dd 100644
--- a/src/components/ReaderHeader.tsx
+++ b/src/components/ReaderHeader.tsx
@@ -5,6 +5,7 @@ import { faHighlighter, faClock } from '@fortawesome/free-solid-svg-icons'
 interface ReaderHeaderProps {
   title?: string
   image?: string
+  summary?: string
   readingTimeText?: string | null
   hasHighlights: boolean
   highlightCount: number
@@ -13,6 +14,7 @@ interface ReaderHeaderProps {
 const ReaderHeader: React.FC<ReaderHeaderProps> = ({
   title,
   image,
+  summary,
   readingTimeText,
   hasHighlights,
   highlightCount
@@ -24,6 +26,7 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
         {title && (
           <div className="reader-header-overlay">
             <h2 className="reader-title">{title}</h2>
+            {summary && <p className="reader-summary">{summary}</p>}
             <div className="reader-meta">
               {readingTimeText && (
                 <div className="reading-time">
@@ -49,6 +52,7 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
       {title && (
         <div className="reader-header">
           <h2 className="reader-title">{title}</h2>
+          {summary && <p className="reader-summary">{summary}</p>}
           <div className="reader-meta">
             {readingTimeText && (
               <div className="reading-time">
diff --git a/src/components/ThreePaneLayout.tsx b/src/components/ThreePaneLayout.tsx
index b76456fa..dbfc32fc 100644
--- a/src/components/ThreePaneLayout.tsx
+++ b/src/components/ThreePaneLayout.tsx
@@ -105,6 +105,7 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
               html={props.readerContent?.html}
               markdown={props.readerContent?.markdown}
               image={props.readerContent?.image}
+              summary={props.readerContent?.summary}
               selectedUrl={props.selectedUrl}
               highlights={props.classifiedHighlights}
               showHighlights={props.showHighlights}
diff --git a/src/index.css b/src/index.css
index 66f6e06c..d85e14f3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -501,17 +501,19 @@ body {
 }
 
 .reader-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 1rem;
-  gap: 1rem;
-  flex-wrap: wrap;
+  margin-bottom: 2rem;
 }
 
 .reader-title {
-  margin: 0;
-  flex: 1;
+  margin: 0 0 0.75rem 0;
+  font-family: var(--reading-font);
+}
+
+.reader-summary {
+  color: #aaa;
+  font-size: 1.1rem;
+  line-height: 1.5;
+  margin: 0 0 1rem 0;
   font-family: var(--reading-font);
 }
 
@@ -1098,6 +1100,15 @@ body {
   margin-bottom: 0.75rem;
 }
 
+.reader-header-overlay .reader-summary {
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 1.1rem;
+  line-height: 1.5;
+  margin: 0 0 1rem 0;
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+  font-family: var(--reading-font);
+}
+
 .reader-header-overlay .reader-meta {
   display: flex;
   align-items: center;
diff --git a/src/services/readerService.ts b/src/services/readerService.ts
index 27c3b133..e917f5f0 100644
--- a/src/services/readerService.ts
+++ b/src/services/readerService.ts
@@ -7,6 +7,7 @@ export interface ReadableContent {
   html?: string
   markdown?: string
   image?: string
+  summary?: string
 }
 
 interface CachedContent {