From 9400faa00f0da81bc4d06e5b96dcb2f1ae078616 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Thu, 2 Oct 2025 23:11:22 +0200
Subject: [PATCH] feat: display URLs clearly in individual bookmarks

- Extract URLs from bookmark content using extractUrlsFromContent()
- Display extracted URLs in a dedicated section with proper styling
- URLs are clickable and open in new tabs
- Reuse existing CSS styles for consistent appearance
---
 src/components/BookmarkItem.tsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/components/BookmarkItem.tsx b/src/components/BookmarkItem.tsx
index 6e6d0532..fbeb8e3d 100644
--- a/src/components/BookmarkItem.tsx
+++ b/src/components/BookmarkItem.tsx
@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faLock, faGlobe, faCopy } from '@fortawesome/free-solid-svg-icons'
 import { IndividualBookmark } from '../types/bookmarks'
 import { formatDate, renderParsedContent } from '../utils/bookmarkUtils'
+import { extractUrlsFromContent } from '../services/bookmarkHelpers'
 
 interface BookmarkItemProps {
   bookmark: IndividualBookmark
@@ -19,6 +20,9 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index }) =
   }
 
   const short = (v: string) => `${v.slice(0, 8)}...${v.slice(-8)}`
+  
+  // Extract URLs from bookmark content
+  const extractedUrls = extractUrlsFromContent(bookmark.content)
 
   return (
     <div key={`${bookmark.id}-${index}`} className={`individual-bookmark ${bookmark.isPrivate ? 'private-bookmark' : ''}`}>
@@ -35,6 +39,17 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index }) =
         <span className="bookmark-date">{formatDate(bookmark.created_at)}</span>
       </div>
       
+      {extractedUrls.length > 0 && (
+        <div className="bookmark-urls">
+          <h4>URLs:</h4>
+          {extractedUrls.map((url, urlIndex) => (
+            <a key={urlIndex} href={url} target="_blank" rel="noopener noreferrer" className="bookmark-url">
+              {url}
+            </a>
+          ))}
+        </div>
+      )}
+      
       {bookmark.parsedContent ? (
         <div className="bookmark-content">
           {renderParsedContent(bookmark.parsedContent)}