feat(webui): add central icon button

webui/src/components/IconButton.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+import { usePlatformLanguage } from "../i18n/LanguageContext";
+import Button, { type ButtonProps } from "./Button";
+
+export type IconButtonProps = Omit<ButtonProps, "aria-label" | "children" | "title"> & {
+  label: string;
+  icon: ReactNode;
+};
+
+export default function IconButton({
+  label,
+  icon,
+  className = "",
+  type = "button",
+  ...buttonProps
+}: IconButtonProps) {
+  const { translateText } = usePlatformLanguage();
+  const translatedLabel = translateText(label);
+
+  return (
+    <Button
+      {...buttonProps}
+      type={type}
+      className={["icon-button", className].filter(Boolean).join(" ")}
+      aria-label={translatedLabel}
+      title={translatedLabel}
+    >
+      <span className="icon-button-icon" aria-hidden="true">{icon}</span>
+    </Button>
+  );
+}

webui/src/components/admin/AdminIconButton.tsx

@@ -1,29 +1,8 @@
-import type { ReactNode } from "react";
-import Button from "../Button";
-import { usePlatformLanguage } from "../../i18n/LanguageContext";
+import IconButton, { type IconButtonProps } from "../IconButton";
 
-type Props = {
-  label: string;
-  icon: ReactNode;
-  onClick?: () => void;
-  disabled?: boolean;
-  variant?: "primary" | "secondary" | "ghost" | "danger";
-};
+export type AdminIconButtonProps = IconButtonProps;
 
-export default function AdminIconButton({ label, icon, onClick, disabled = false, variant = "secondary" }: Props) {
-  const { translateText } = usePlatformLanguage();
-  const translatedLabel = translateText(label);
-  return (
-    <Button
-      type="button"
-      variant={variant}
-      className="admin-icon-button"
-      aria-label={translatedLabel}
-      title={translatedLabel}
-      disabled={disabled}
-      onClick={onClick}
-    >
-      {icon}
-    </Button>
-  );
+/** @deprecated Prefer the neutral IconButton export for new consumers. */
+export default function AdminIconButton({ className = "", ...props }: AdminIconButtonProps) {
+  return <IconButton {...props} className={["admin-icon-button", className].filter(Boolean).join(" ")} />;
 }

webui/src/index.ts

@@ -44,6 +44,7 @@ export { default as ActionBlockerHint } from "./components/ActionBlockerHint";
 export type { ActionBlockerReason } from "./components/ActionBlockerHint";
 export { default as AdvancedOptionsPanel } from "./components/AdvancedOptionsPanel";
 export { default as AdminIconButton } from "./components/admin/AdminIconButton";
+export type { AdminIconButtonProps } from "./components/admin/AdminIconButton";
 export { default as AdminPageLayout } from "./components/admin/AdminPageLayout";
 export { default as AdminSelectionList } from "./components/admin/AdminSelectionList";
 export { adminErrorMessage, formatAdminDateTime, joinLabels } from "./components/admin/adminUtils";
@@ -72,6 +73,8 @@ export { default as GuidedReviewList } from "./components/GuidedReviewList";
 export type { GuidedReviewItem } from "./components/GuidedReviewList";
 export { default as HoverTooltip } from "./components/HoverTooltip";
 export type { HoverTooltipProps, HoverTooltipTone } from "./components/HoverTooltip";
+export { default as IconButton } from "./components/IconButton";
+export type { IconButtonProps } from "./components/IconButton";
 export { default as LoadingFrame } from "./components/LoadingFrame";
 export { default as LoadingIndicator } from "./components/LoadingIndicator";
 export { default as ExplorerTree } from "./components/ExplorerTree";

webui/src/styles/components.css

@@ -953,7 +953,7 @@
   align-self: start;
 }
 
-.admin-icon-button.btn {
+.icon-button.btn {
   display: inline-grid;
   place-items: center;
   width: 36px;
@@ -962,7 +962,7 @@
   padding: 0;
 }
 
-.admin-icon-button.btn svg {
+.icon-button.btn svg {
   width: 17px;
   height: 17px;
 }