From 146aa85e7694d4e90d4bab2b5df3906a034eee90 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Mon, 13 Oct 2025 17:27:25 +0200
Subject: [PATCH] feat(bookmarks): make entire bookmark cards clickable; stop
 propagation on internal controls

---
 src/components/BookmarkViews/CardView.tsx  | 28 ++++++++++++++++++----
 src/components/BookmarkViews/LargeView.tsx | 24 ++++++++++++++++---
 2 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/src/components/BookmarkViews/CardView.tsx b/src/components/BookmarkViews/CardView.tsx
index 7abff35f..cb802c16 100644
--- a/src/components/BookmarkViews/CardView.tsx
+++ b/src/components/BookmarkViews/CardView.tsx
@@ -67,8 +67,24 @@ export const CardView: React.FC<CardViewProps> = ({
     }
   }, [firstUrl, articleImage, instantPreview, ogImage])
 
+  const triggerOpen = () => handleReadNow({ preventDefault: () => {} } as React.MouseEvent<HTMLButtonElement>)
+
+  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      triggerOpen()
+    }
+  }
+
   return (
-    <div key={`${bookmark.id}-${index}`} className={`individual-bookmark ${bookmark.isPrivate ? 'private-bookmark' : ''}`}>
+    <div 
+      key={`${bookmark.id}-${index}`}
+      className={`individual-bookmark ${bookmark.isPrivate ? 'private-bookmark' : ''}`}
+      onClick={triggerOpen}
+      role="button"
+      tabIndex={0}
+      onKeyDown={handleKeyDown}
+    >
       {cachedImage && (
         <div 
           className="article-hero-image"
@@ -100,6 +116,7 @@ export const CardView: React.FC<CardViewProps> = ({
             rel="noopener noreferrer"
             className="bookmark-date-link"
             title="Open event in search"
+            onClick={(e) => e.stopPropagation()}
           >
             {formatDate(bookmark.created_at)}
           </a>
@@ -115,7 +132,7 @@ export const CardView: React.FC<CardViewProps> = ({
               <div key={urlIndex} className="url-row">
                 <button
                   className="bookmark-url"
-                  onClick={() => onSelectUrl?.(url)}
+                  onClick={(e) => { e.stopPropagation(); onSelectUrl?.(url) }}
                   title="Open in reader"
                 >
                   {url}
@@ -126,7 +143,7 @@ export const CardView: React.FC<CardViewProps> = ({
                   title="Open"
                   variant="success"
                   size={32}
-                  onClick={(e) => { e.preventDefault(); onSelectUrl?.(url) }}
+                  onClick={(e) => { e.preventDefault(); e.stopPropagation(); onSelectUrl?.(url) }}
                 />
               </div>
             )
@@ -134,7 +151,7 @@ export const CardView: React.FC<CardViewProps> = ({
           {extractedUrls.length > 1 && (
             <button
               className="expand-toggle-urls"
-              onClick={() => setUrlsExpanded(v => !v)}
+              onClick={(e) => { e.stopPropagation(); setUrlsExpanded(v => !v) }}
               aria-label={urlsExpanded ? 'Collapse URLs' : 'Expand URLs'}
               title={urlsExpanded ? 'Collapse URLs' : 'Expand URLs'}
             >
@@ -163,7 +180,7 @@ export const CardView: React.FC<CardViewProps> = ({
       {contentLength > 210 && (
         <button
           className="expand-toggle"
-          onClick={() => setExpanded(v => !v)}
+          onClick={(e) => { e.stopPropagation(); setExpanded(v => !v) }}
           aria-label={expanded ? 'Collapse' : 'Expand'}
           title={expanded ? 'Collapse' : 'Expand'}
         >
@@ -179,6 +196,7 @@ export const CardView: React.FC<CardViewProps> = ({
             rel="noopener noreferrer"
             className="author-link-minimal"
             title="Open author in search"
+            onClick={(e) => e.stopPropagation()}
           >
             {getAuthorDisplayName()}
           </a>
diff --git a/src/components/BookmarkViews/LargeView.tsx b/src/components/BookmarkViews/LargeView.tsx
index 1e1faf4e..92e5850d 100644
--- a/src/components/BookmarkViews/LargeView.tsx
+++ b/src/components/BookmarkViews/LargeView.tsx
@@ -42,12 +42,28 @@ export const LargeView: React.FC<LargeViewProps> = ({
   const cachedImage = useImageCache(previewImage || undefined, settings)
   const isArticle = bookmark.kind === 30023
   
+  const triggerOpen = () => handleReadNow({ preventDefault: () => {} } as React.MouseEvent<HTMLButtonElement>)
+  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      triggerOpen()
+    }
+  }
+
   return (
-    <div key={`${bookmark.id}-${index}`} className={`individual-bookmark large ${bookmark.isPrivate ? 'private-bookmark' : ''}`}>
+    <div 
+      key={`${bookmark.id}-${index}`} 
+      className={`individual-bookmark large ${bookmark.isPrivate ? 'private-bookmark' : ''}`}
+      onClick={triggerOpen}
+      role="button"
+      tabIndex={0}
+      onKeyDown={handleKeyDown}
+    >
       {(hasUrls || (isArticle && cachedImage)) && (
         <div 
           className="large-preview-image" 
-          onClick={() => {
+          onClick={(e) => {
+            e.stopPropagation()
             if (isArticle) {
               handleReadNow({ preventDefault: () => {} } as React.MouseEvent<HTMLButtonElement>)
             } else {
@@ -82,6 +98,7 @@ export const LargeView: React.FC<LargeViewProps> = ({
               target="_blank"
               rel="noopener noreferrer"
               className="author-link-minimal"
+              onClick={(e) => e.stopPropagation()}
             >
               {getAuthorDisplayName()}
             </a>
@@ -93,12 +110,13 @@ export const LargeView: React.FC<LargeViewProps> = ({
               target="_blank"
               rel="noopener noreferrer"
               className="bookmark-date-link"
+              onClick={(e) => e.stopPropagation()}
             >
               {formatDate(bookmark.created_at)}
             </a>
           )}
           
-          {/* CTA removed */}
+          {/* CTA removed */
         </div>
       </div>
     </div>