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

@@ -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} />
 }

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">

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;
   }