From c3eb29445e0346b4285cea5189b15aa406a9bf08 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Fri, 3 Oct 2025 00:40:37 +0200
Subject: [PATCH] feat(ui): add chevron toggle for URL list (show 3 by default)

---
 src/components/BookmarkItem.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/BookmarkItem.tsx b/src/components/BookmarkItem.tsx
index 72448744..d2e628e9 100644
--- a/src/components/BookmarkItem.tsx
+++ b/src/components/BookmarkItem.tsx
@@ -37,6 +37,7 @@ interface BookmarkItemProps {
 
 export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onSelectUrl }) => {
   const [expanded, setExpanded] = useState(false)
+  const [urlsExpanded, setUrlsExpanded] = useState(false)
   // removed copy-to-clipboard buttons
 
   const short = (v: string) => `${v.slice(0, 8)}...${v.slice(-8)}`
@@ -117,7 +118,7 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
       {extractedUrls.length > 0 && (
         <div className="bookmark-urls">
           <h4>URLs:</h4>
-          {extractedUrls.map((url, urlIndex) => (
+          {(urlsExpanded ? extractedUrls : extractedUrls.slice(0, 3)).map((url, urlIndex) => (
             <div key={urlIndex} className="url-row">
               <a
                 href={url}
@@ -136,6 +137,15 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
               </button>
             </div>
           ))}
+          {extractedUrls.length > 3 && (
+            <button
+              className="expand-toggle"
+              onClick={() => setUrlsExpanded(v => !v)}
+              aria-label={urlsExpanded ? 'Collapse URLs' : 'Expand URLs'}
+            >
+              <FontAwesomeIcon icon={urlsExpanded ? faChevronUp : faChevronDown} />
+            </button>
+          )}
         </div>
       )}