chore: bump version to 0.2.9

- Replace array accumulation with Map keyed by highlight ID
- Prevents duplicate highlights when same event arrives from multiple relays
- Fix applied in useArticleLoader and useBookmarksData hooks
- Only updates UI when new unique highlight arrives
- Resolves issue where highlights appeared twice in sidebar

package.json

@@ -1,8 +1,8 @@
 {
   "name": "boris",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "description": "A minimal nostr client for bookmark management",
-  "homepage": "https://xn--bris-v0b.com/",
+  "homepage": "https://read.withboris.com/",
   "type": "module",
   "scripts": {
     "dev": "vite",

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}

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,20 +14,45 @@ interface ReaderHeaderProps {
 const ReaderHeader: React.FC<ReaderHeaderProps> = ({
   title,
   image,
+  summary,
   readingTimeText,
   hasHighlights,
   highlightCount
 }) => {
+  if (image) {
+    return (
+      <div className="reader-hero-image">
+        <img src={image} alt={title || 'Article image'} />
+        {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">
+                  <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>
+        )}
+      </div>
+    )
+  }
+
   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>
+          {summary && <p className="reader-summary">{summary}</p>}
           <div className="reader-meta">
             {readingTimeText && (
               <div className="reading-time">

src/components/SidebarHeader.tsx

@@ -108,15 +108,6 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
           ariaLabel="Settings"
           variant="ghost"
         />
-        {activeAccount && (
-          <IconButton
-            icon={faPlus}
-            onClick={() => setShowAddModal(true)}
-            title="Add bookmark"
-            ariaLabel="Add bookmark"
-            variant="ghost"
-          />
-        )}
         {onRefresh && (
           <IconButton
             icon={faRotate}
@@ -128,6 +119,15 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
             spin={isRefreshing}
           />
         )}
+        {activeAccount && (
+          <IconButton
+            icon={faPlus}
+            onClick={() => setShowAddModal(true)}
+            title="Add bookmark"
+            ariaLabel="Add bookmark"
+            variant="ghost"
+          />
+        )}
         {activeAccount ? (
           <IconButton
             icon={faRightFromBracket}

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}

src/hooks/useArticleLoader.ts

@@ -49,6 +49,7 @@ export function useArticleLoader({
           title: article.title,
           markdown: article.markdown,
           image: article.image,
+          summary: article.summary,
           url: `nostr:${naddr}`
         })
         
@@ -71,19 +72,22 @@ export function useArticleLoader({
         try {
           setHighlightsLoading(true)
           setHighlights([]) // Clear old highlights
-          const highlightsList: Highlight[] = []
+          const highlightsMap = new Map<string, Highlight>()
           
           await fetchHighlightsForArticle(
             relayPool, 
             articleCoordinate, 
             article.event.id,
             (highlight) => {
-              // Render each highlight immediately as it arrives
-              highlightsList.push(highlight)
-              setHighlights([...highlightsList].sort((a, b) => b.created_at - a.created_at))
+              // Deduplicate highlights by ID as they arrive
+              if (!highlightsMap.has(highlight.id)) {
+                highlightsMap.set(highlight.id, highlight)
+                const highlightsList = Array.from(highlightsMap.values())
+                setHighlights(highlightsList.sort((a, b) => b.created_at - a.created_at))
+              }
             }
           )
-          console.log(`📌 Found ${highlightsList.length} highlights`)
+          console.log(`📌 Found ${highlightsMap.size} highlights`)
         } catch (err) {
           console.error('Failed to fetch highlights:', err)
         } finally {

src/hooks/useBookmarksData.ts

@@ -55,17 +55,21 @@ export const useBookmarksData = ({
     setHighlightsLoading(true)
     try {
       if (currentArticleCoordinate) {
-        const highlightsList: Highlight[] = []
+        const highlightsMap = new Map<string, Highlight>()
         await fetchHighlightsForArticle(
           relayPool, 
           currentArticleCoordinate, 
           currentArticleEventId,
           (highlight) => {
-            highlightsList.push(highlight)
-            setHighlights([...highlightsList].sort((a, b) => b.created_at - a.created_at))
+            // Deduplicate highlights by ID as they arrive
+            if (!highlightsMap.has(highlight.id)) {
+              highlightsMap.set(highlight.id, highlight)
+              const highlightsList = Array.from(highlightsMap.values())
+              setHighlights(highlightsList.sort((a, b) => b.created_at - a.created_at))
+            }
           }
         )
-        console.log(`🔄 Refreshed ${highlightsList.length} highlights for article`)
+        console.log(`🔄 Refreshed ${highlightsMap.size} highlights for article`)
       } else if (activeAccount) {
         const fetchedHighlights = await fetchHighlights(relayPool, activeAccount.pubkey)
         setHighlights(fetchedHighlights)

src/index.css

@@ -501,17 +501,20 @@ 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);
 }
 
 .reader-meta {
@@ -1070,6 +1073,8 @@ body {
   margin: 0 0 2rem 0;
   border-radius: 8px;
   overflow: hidden;
+  position: relative;
+  min-height: 300px;
 }
 
 .reader-hero-image img {
@@ -1080,6 +1085,50 @@ body {
   display: block;
 }
 
+.reader-header-overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 2rem 2rem 1.5rem;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0) 100%);
+}
+
+.reader-header-overlay .reader-title {
+  color: #fff;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+  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;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.reader-header-overlay .reading-time,
+.reader-header-overlay .highlight-indicator {
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  color: #fff;
+}
+
+.reader-header-overlay .highlight-indicator {
+  background: rgba(100, 108, 255, 0.25);
+  border: 1px solid rgba(100, 108, 255, 0.4);
+}
+
 /* Private Bookmark Styles */
 .private-bookmark {
   background: #2a2a2a;

src/services/readerService.ts

@@ -7,6 +7,7 @@ export interface ReadableContent {
   html?: string
   markdown?: string
   image?: string
+  summary?: string
 }
 
 interface CachedContent {
@@ -57,7 +58,7 @@ function saveToCache(url: string, content: ReadableContent): void {
 function toProxyUrl(url: string): string {
   // Ensure the target URL has a protocol and build the proxy URL
   const normalized = /^https?:\/\//i.test(url) ? url : `https://${url}`
-  return `https://r.jina.ai/http://${normalized.replace(/^https?:\/\//, '')}`
+  return `https://r.jina.ai/${normalized}`
 }
 
 export async function fetchReadableContent(

src/utils/contentLoader.ts

@@ -32,6 +32,7 @@ export async function loadContent(
         title: article.title,
         markdown: article.markdown,
         image: article.image,
+        summary: article.summary,
         url: `nostr:${naddr}`
       }
     } else {