From e920cf9477b8fd4b3dc847f1d9a901cf063bae72 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 25 Oct 2025 01:56:31 +0200
Subject: [PATCH] feat: make image placeholder reflect bookmark type

- Add content type icon logic to CardView component
- Import appropriate FontAwesome icons for different content types
- Replace generic link icon with type-specific icons:
  - Articles: newspaper icon
  - Videos: play button icon
  - Images: camera icon
  - Documents: file lines icon
  - Web links: globe icon
  - Notes: sticky note icon
- Improve visual context and user experience with meaningful placeholders
---
 src/components/BookmarkViews/CardView.tsx | 32 ++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/components/BookmarkViews/CardView.tsx b/src/components/BookmarkViews/CardView.tsx
index 30c067cc..1ceac88c 100644
--- a/src/components/BookmarkViews/CardView.tsx
+++ b/src/components/BookmarkViews/CardView.tsx
@@ -2,6 +2,8 @@ import React, { useState } from 'react'
 import { Link } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faLink } from '@fortawesome/free-solid-svg-icons'
+import { faNewspaper, faStickyNote, faCirclePlay, faCamera, faFileLines } from '@fortawesome/free-regular-svg-icons'
+import { faGlobe } from '@fortawesome/free-solid-svg-icons'
 import { IndividualBookmark } from '../../types/bookmarks'
 import { formatDate, renderParsedContent } from '../../utils/bookmarkUtils'
 import RichContent from '../RichContent'
@@ -46,10 +48,38 @@ export const CardView: React.FC<CardViewProps> = ({
   const [ogImage, setOgImage] = useState<string | null>(null)
   
   const isArticle = bookmark.kind === 30023
+  const isWebBookmark = bookmark.kind === 39701
+  const isNote = bookmark.kind === 1
   
   // Extract title from tags for regular bookmarks (not just articles)
   const bookmarkTitle = bookmark.tags.find(t => t[0] === 'title')?.[1]
   
+  // Get content type icon based on bookmark kind and URL classification
+  const getContentTypeIcon = () => {
+    if (isArticle) return faNewspaper // Nostr-native article
+    
+    // For web bookmarks, classify the URL to determine icon
+    if (isWebBookmark && firstUrlClassificationType) {
+      switch (firstUrlClassificationType) {
+        case 'youtube':
+        case 'video':
+          return faCirclePlay
+        case 'image':
+          return faCamera
+        case 'document':
+          return faFileLines
+        default:
+          return faGlobe
+      }
+    }
+    
+    // For notes, use sticky note icon
+    if (isNote) return faStickyNote
+    
+    // Default fallback
+    return faLink
+  }
+  
   
   // Determine which image to use (article image, instant preview, or OG image)
   const previewImage = articleImage || instantPreview || ogImage
@@ -115,7 +145,7 @@ export const CardView: React.FC<CardViewProps> = ({
               >
             {!cachedImage && firstUrl && (
               <div className="thumbnail-placeholder">
-                <FontAwesomeIcon icon={faLink} />
+                <FontAwesomeIcon icon={getContentTypeIcon()} />
               </div>
             )}
               </div>