refactor(reader): extract ReaderHeader to keep ContentPanel concise (<210 lines)

src/components/ContentPanel.tsx

@@ -2,12 +2,13 @@ import React, { useMemo, useEffect, useRef, useState } from 'react'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSpinner, faHighlighter, faClock } from '@fortawesome/free-solid-svg-icons'
+import { faSpinner } from '@fortawesome/free-solid-svg-icons'
 import { Highlight } from '../types/highlights'
 import { applyHighlightsToHTML } from '../utils/highlightMatching'
 import { readingTime } from 'reading-time-estimator'
 import { filterHighlightsByUrl } from '../utils/urlHelpers'
 import { hexToRgb } from '../utils/colorHelpers'
+import ReaderHeader from './ReaderHeader'
 
 interface ContentPanelProps {
   loading: boolean
@@ -162,30 +163,13 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
         </div>
       )}
       
-      {image && (
-        <div className="reader-hero-image">
-          <img src={image} alt={title || 'Article image'} />
-        </div>
-      )}
-      {title && (
-        <div className="reader-header">
-          <h2 className="reader-title">{title}</h2>
-          <div className="reader-meta">
-            {readingStats && (
-              <div className="reading-time">
-                <FontAwesomeIcon icon={faClock} />
-                <span>{readingStats.text}</span>
-              </div>
-            )}
-            {hasHighlights && (
-              <div className="highlight-indicator">
-                <FontAwesomeIcon icon={faHighlighter} />
-                <span>{relevantHighlights.length} highlight{relevantHighlights.length !== 1 ? 's' : ''}</span>
-              </div>
-            )}
-          </div>
-        </div>
-      )}
+      <ReaderHeader 
+        title={title}
+        image={image}
+        readingTimeText={readingStats ? readingStats.text : null}
+        hasHighlights={hasHighlights}
+        highlightCount={relevantHighlights.length}
+      />
       {markdown || html ? (
         markdown ? (
           finalHtml ? (

src/components/ReaderHeader.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faHighlighter, faClock } from '@fortawesome/free-solid-svg-icons'
+
+interface ReaderHeaderProps {
+  title?: string
+  image?: string
+  readingTimeText?: string | null
+  hasHighlights: boolean
+  highlightCount: number
+}
+
+const ReaderHeader: React.FC<ReaderHeaderProps> = ({
+  title,
+  image,
+  readingTimeText,
+  hasHighlights,
+  highlightCount
+}) => {
+  return (
+    <>
+      {image && (
+        <div className="reader-hero-image">
+          <img src={image} alt={title || 'Article image'} />
+        </div>
+      )}
+      {title && (
+        <div className="reader-header">
+          <h2 className="reader-title">{title}</h2>
+          <div className="reader-meta">
+            {readingTimeText && (
+              <div className="reading-time">
+                <FontAwesomeIcon icon={faClock} />
+                <span>{readingTimeText}</span>
+              </div>
+            )}
+            {hasHighlights && (
+              <div className="highlight-indicator">
+                <FontAwesomeIcon icon={faHighlighter} />
+                <span>{highlightCount} highlight{highlightCount !== 1 ? 's' : ''}</span>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
+
+export default ReaderHeader
+
+