From 4163ffa4ba321d6e87a98326f58413c6e50aec03 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Thu, 2 Oct 2025 23:41:03 +0200
Subject: [PATCH] feat(ui): add READ NOW button to bookmark cards

- Shows when a bookmark has URLs
- Triggers onSelectUrl to load readability content in main panel
- Added styles for prominent call-to-action
---
 src/components/BookmarkItem.tsx | 20 ++++++++++++++++++++
 src/index.css                   | 26 ++++++++++++++++++++++++++
 2 files changed, 46 insertions(+)

diff --git a/src/components/BookmarkItem.tsx b/src/components/BookmarkItem.tsx
index 155a78db..6f400910 100644
--- a/src/components/BookmarkItem.tsx
+++ b/src/components/BookmarkItem.tsx
@@ -24,6 +24,18 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
   
   // Extract URLs from bookmark content
   const extractedUrls = extractUrlsFromContent(bookmark.content)
+  const hasUrls = extractedUrls.length > 0
+
+  const handleReadNow = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (!hasUrls) return
+    const firstUrl = extractedUrls[0]
+    if (onSelectUrl) {
+      event.preventDefault()
+      onSelectUrl(firstUrl)
+    } else {
+      window.open(firstUrl, '_blank')
+    }
+  }
 
   return (
     <div key={`${bookmark.id}-${index}`} className={`individual-bookmark ${bookmark.isPrivate ? 'private-bookmark' : ''}`}>
@@ -84,6 +96,14 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
           </button>
         </span>
       </div>
+
+      {hasUrls && (
+        <div className="read-now">
+          <button className="read-now-button" onClick={handleReadNow}>
+            READ NOW
+          </button>
+        </div>
+      )}
     </div>
   )
 }
diff --git a/src/index.css b/src/index.css
index 152f9094..592c6b67 100644
--- a/src/index.css
+++ b/src/index.css
@@ -443,6 +443,32 @@ body {
   font-family: monospace;
 }
 
+.read-now {
+  margin-top: 0.75rem;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.read-now-button {
+  background: #28a745;
+  color: white;
+  border: none;
+  padding: 0.6rem 1rem;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  transition: background-color 0.2s ease, transform 0.1s ease;
+}
+
+.read-now-button:hover {
+  background: #218838;
+}
+
+.read-now-button:active {
+  transform: translateY(1px);
+}
+
 /* Private Bookmark Styles */
 .private-bookmark {
   border-left: 4px solid #ff6b6b;