feat(ui): add reusable IconButton component with square styling

src/components/IconButton.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
+
+interface IconButtonProps {
+  icon: IconDefinition
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
+  title?: string
+  ariaLabel?: string
+  variant?: 'primary' | 'success' | 'ghost'
+  size?: number
+}
+
+const IconButton: React.FC<IconButtonProps> = ({
+  icon,
+  onClick,
+  title,
+  ariaLabel,
+  variant = 'ghost',
+  size = 28
+}) => {
+  return (
+    <button
+      className={`icon-button ${variant}`}
+      onClick={onClick}
+      title={title}
+      aria-label={ariaLabel || title}
+      style={{ width: size, height: size }}
+    >
+      <FontAwesomeIcon icon={icon} />
+    </button>
+  )
+}
+
+export default IconButton
+
+

src/index.css

@@ -169,6 +169,29 @@ body {
   background: #218838;
 }
 
+/* Generic IconButton styling */
+.icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #444;
+  border-radius: 6px;
+  background: #2a2a2a;
+  color: #ddd;
+  cursor: pointer;
+}
+
+.icon-button:hover { background: #333; }
+.icon-button:active { transform: translateY(1px); }
+
+.icon-button.primary { background: #646cff; color: white; border-color: #646cff; }
+.icon-button.primary:hover { filter: brightness(1.05); }
+
+.icon-button.success { background: #28a745; color: white; border-color: #28a745; }
+.icon-button.success:hover { filter: brightness(1.05); }
+
+.icon-button.ghost { background: #2a2a2a; }
+
 .bookmark-events {
   margin: 1rem 0;
 }