From a42208494981f9ed8a701c4ab270edd4a9754ecc Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 25 Oct 2025 01:38:11 +0200
Subject: [PATCH] feat: add title display to medium-sized bookmark cards

- Add articleTitle prop to CardView component interface
- Display article titles for kind:30023 articles in card layout
- Style titles with proper typography and responsive design
- Position titles between header and URLs for optimal hierarchy
- Add line clamping for long titles (2 lines max)
- Update BookmarkItem to pass articleTitle to CardView
---
 src/components/BookmarkItem.tsx           |  2 +-
 src/components/BookmarkViews/CardView.tsx |  9 +++++++++
 src/styles/components/cards.css           | 23 +++++++++++++++++++++++
 3 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/components/BookmarkItem.tsx b/src/components/BookmarkItem.tsx
index e90baf8a..f4d0d289 100644
--- a/src/components/BookmarkItem.tsx
+++ b/src/components/BookmarkItem.tsx
@@ -169,5 +169,5 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
     return <LargeView {...sharedProps} getIconForUrlType={getIconForUrlType} previewImage={previewImage} />
   }
 
-  return <CardView {...sharedProps} articleImage={articleImage} />
+  return <CardView {...sharedProps} articleImage={articleImage} articleTitle={articleTitle} />
 }
diff --git a/src/components/BookmarkViews/CardView.tsx b/src/components/BookmarkViews/CardView.tsx
index 687be073..9e3e0c63 100644
--- a/src/components/BookmarkViews/CardView.tsx
+++ b/src/components/BookmarkViews/CardView.tsx
@@ -22,6 +22,7 @@ interface CardViewProps {
   handleReadNow: (e: React.MouseEvent<HTMLButtonElement>) => void
   articleImage?: string
   articleSummary?: string
+  articleTitle?: string
   contentTypeIcon: IconDefinition
   readingProgress?: number
 }
@@ -37,6 +38,7 @@ export const CardView: React.FC<CardViewProps> = ({
   handleReadNow,
   articleImage,
   articleSummary,
+  articleTitle,
   contentTypeIcon,
   readingProgress
 }) => {
@@ -148,6 +150,13 @@ export const CardView: React.FC<CardViewProps> = ({
             <span className="bookmark-date">{formatDate(bookmark.created_at ?? bookmark.listUpdatedAt)}</span>
           )}
         </div>
+        
+        {/* Display title for articles */}
+        {articleTitle && (
+          <h3 className="bookmark-title">
+            <RichContent content={articleTitle} className="" />
+          </h3>
+        )}
       
         {extractedUrls.length > 0 && (
           <div className="bookmark-urls">
diff --git a/src/styles/components/cards.css b/src/styles/components/cards.css
index 8bff8f37..f7ba959f 100644
--- a/src/styles/components/cards.css
+++ b/src/styles/components/cards.css
@@ -168,6 +168,19 @@
   margin-bottom: 0.5rem;
 }
 
+.card-content .bookmark-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--color-text);
+  margin: 0 0 0.75rem 0;
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
 .card-content .bookmark-content {
   font-size: 0.9rem;
   line-height: 1.6;
@@ -295,6 +308,11 @@
     gap: 0.5rem;
   }
   
+  .card-content .bookmark-title {
+    font-size: 1rem;
+    margin-bottom: 0.5rem;
+  }
+  
   .card-content .bookmark-content {
     font-size: 0.85rem;
     line-height: 1.5;
@@ -324,6 +342,11 @@
     font-size: 1.2rem;
   }
   
+  .card-content .bookmark-title {
+    font-size: 0.9rem;
+    margin-bottom: 0.5rem;
+  }
+  
   .card-content .bookmark-content {
     font-size: 0.8rem;
   }