refactor(ui): use IconButton for all icon-only actions to enforce square sizing

src/components/BookmarkItem.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faBookmark, faUserLock } from '@fortawesome/free-solid-svg-icons'
 import { faChevronDown, faChevronUp, faBookOpen } from '@fortawesome/free-solid-svg-icons'
+import IconButton from './IconButton'
 import { useEventModel } from 'applesauce-react/hooks'
 import { Models } from 'applesauce-core'
 import { npubEncode, neventEncode } from 'nostr-tools/nip19'
@@ -87,23 +88,24 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
               >
                 {url}
               </a>
-              <button
+              <IconButton
-                className="read-inline-btn"
+                icon={faBookOpen}
+                ariaLabel="Read now"
                 title="Read now"
+                variant="success"
+                size={36}
                 onClick={(e) => { e.preventDefault(); onSelectUrl?.(url) }}
-              >
+              />
-                <FontAwesomeIcon icon={faBookOpen} />
-              </button>
             </div>
           ))}
           {extractedUrls.length > 3 && (
-            <button
+            <IconButton
-              className="expand-toggle"
+              icon={urlsExpanded ? faChevronUp : faChevronDown}
+              ariaLabel={urlsExpanded ? 'Collapse URLs' : 'Expand URLs'}
+              title={urlsExpanded ? 'Collapse URLs' : 'Expand URLs'}
               onClick={() => setUrlsExpanded(v => !v)}
-              aria-label={urlsExpanded ? 'Collapse URLs' : 'Expand URLs'}
+              size={32}
-            >
+            />
-              <FontAwesomeIcon icon={urlsExpanded ? faChevronUp : faChevronDown} />
-            </button>
           )}
         </div>
       )}
@@ -121,13 +123,13 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
       )}
 
       {contentLength > 210 && (
-        <button
+        <IconButton
-          className="expand-toggle"
+          icon={expanded ? faChevronUp : faChevronDown}
+          ariaLabel={expanded ? 'Collapse' : 'Expand'}
+          title={expanded ? 'Collapse' : 'Expand'}
           onClick={() => setExpanded(v => !v)}
-          aria-label={expanded ? 'Collapse' : 'Expand'}
+          size={32}
-        >
+        />
-          <FontAwesomeIcon icon={expanded ? faChevronUp : faChevronDown} />
-        </button>
       )}
       
       <div className="bookmark-meta">