refactor(ui): use IconButton for kind icon (square, link-capable)

src/components/BookmarkItem.tsx

@@ -134,21 +134,22 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
       
       <div className="bookmark-meta">
         {eventNevent ? (
-          <a
+          <IconButton
-            href={`https://search.dergigi.com/e/${eventNevent}`}
+            icon={getKindIcon(bookmark.kind)}
-            target="_blank"
+            ariaLabel="Open event in search"
-            rel="noopener noreferrer"
-            className="kind-icon-link"
             title="Open event in search"
-          >
+            href={`https://search.dergigi.com/e/${eventNevent}`}
-            <span className="kind-icon">
+            variant="ghost"
-              <FontAwesomeIcon icon={getKindIcon(bookmark.kind)} />
+            size={32}
-            </span>
+          />
-          </a>
         ) : (
-          <span className="kind-icon">
+          <IconButton
-            <FontAwesomeIcon icon={getKindIcon(bookmark.kind)} />
+            icon={getKindIcon(bookmark.kind)}
-          </span>
+            ariaLabel="Event kind"
+            title="Event kind"
+            variant="ghost"
+            size={32}
+          />
         )}
         <span>
           <a

src/components/IconButton.tsx

@@ -9,6 +9,9 @@ interface IconButtonProps {
   ariaLabel?: string
   variant?: 'primary' | 'success' | 'ghost'
   size?: number
+  href?: string
+  target?: string
+  rel?: string
 }
 
 const IconButton: React.FC<IconButtonProps> = ({
@@ -17,15 +20,35 @@ const IconButton: React.FC<IconButtonProps> = ({
   title,
   ariaLabel,
   variant = 'ghost',
-  size = 44
+  size = 44,
+  href,
+  target,
+  rel
 }) => {
+  const commonProps = {
+    className: `icon-button ${variant}`,
+    title,
+    'aria-label': ariaLabel || title,
+    style: { width: size, height: size }
+  } as const
+
+  if (href) {
+    return (
+      <a
+        {...(commonProps as any)}
+        href={href}
+        target={target || '_blank'}
+        rel={rel || 'noopener noreferrer'}
+      >
+        <FontAwesomeIcon icon={icon} />
+      </a>
+    )
+  }
+
   return (
     <button
-      className={`icon-button ${variant}`}
+      {...(commonProps as any)}
       onClick={onClick}
-      title={title}
-      aria-label={ariaLabel || title}
-      style={{ width: size, height: size }}
     >
       <FontAwesomeIcon icon={icon} />
     </button>