feat(webui): add central icon button

webui/package.json

@@ -24,6 +24,7 @@
     "test:file-drop-zone": "rm -rf .file-drop-test-build && mkdir -p .file-drop-test-build && printf '{\"type\":\"commonjs\"}\\n' > .file-drop-test-build/package.json && tsc -p tsconfig.file-drop-tests.json && node .file-drop-test-build/tests/file-drop-resolver.test.js && node scripts/test-file-drop-zone-structure.mjs",
     "test:data-grid-actions": "rm -rf .component-test-build && mkdir -p .component-test-build && printf '{\"type\":\"commonjs\"}\\n' > .component-test-build/package.json && tsc -p tsconfig.component-tests.json && node .component-test-build/tests/data-grid-actions.test.js",
     "test:dialog-focus": "rm -rf .component-test-build && mkdir -p .component-test-build && printf '{\"type\":\"commonjs\"}\\n' > .component-test-build/package.json && tsc -p tsconfig.component-tests.json && node .component-test-build/tests/dialog-focus.test.js && node scripts/test-dialog-focus-structure.mjs",
+    "test:icon-button": "rm -rf .component-test-build && mkdir -p .component-test-build && printf '{\"type\":\"commonjs\"}\\n' > .component-test-build/package.json && tsc -p tsconfig.component-tests.json && node .component-test-build/tests/icon-button.test.js",
     "test:module-capabilities": "rm -rf .module-test-build && mkdir -p .module-test-build && printf '{\"type\":\"commonjs\"}\n' > .module-test-build/package.json && tsc -p tsconfig.module-tests.json && node .module-test-build/tests/module-capabilities.test.js && node .module-test-build/tests/privacy-policy.test.js",
     "test:module-permutations": "node scripts/test-module-permutations.mjs",
     "test:mail-components": "rm -rf .component-test-build && mkdir -p .component-test-build && printf '{\"type\":\"commonjs\"}\\n' > .component-test-build/package.json && tsc -p tsconfig.component-tests.json && node .component-test-build/tests/mail-components.test.js",

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

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;
 }

webui/tests/icon-button.test.tsx

@@ -0,0 +1,40 @@
+function assert(condition: unknown, message = "assertion failed"): void {
+  if (!condition) throw new Error(message);
+}
+
+import { renderToStaticMarkup } from "react-dom/server";
+import AdminIconButton from "../src/components/admin/AdminIconButton";
+import IconButton from "../src/components/IconButton";
+import { PlatformLanguageProvider } from "../src/i18n/LanguageContext";
+
+function noop() {}
+
+const iconButtonMarkup = renderToStaticMarkup(
+  <PlatformLanguageProvider>
+    <IconButton
+      label="i18n:govoplan-core.remove.e963907d"
+      icon={<svg><path /></svg>}
+      variant="danger"
+      className="context-action"
+      onClick={noop}
+    />
+  </PlatformLanguageProvider>
+);
+assert(iconButtonMarkup.includes('type="button"'), "icon buttons default to a non-submitting button");
+assert(iconButtonMarkup.includes('class="btn btn-danger icon-button context-action"'), "central variants and caller classes are preserved");
+assert(iconButtonMarkup.includes('aria-label="Remove"'), "the accessible label is translated");
+assert(iconButtonMarkup.includes('title="Remove"'), "the native title is translated");
+assert(iconButtonMarkup.includes('class="icon-button-icon" aria-hidden="true"'), "the visible icon is decorative");
+
+const reasonedMarkup = renderToStaticMarkup(
+  <IconButton label="Clear" icon={<span>X</span>} disabledReason="Permission denied" />
+);
+assert(reasonedMarkup.includes("disabled=\"\""), "a disabled reason disables the icon button");
+assert(reasonedMarkup.includes("disabled-action-tooltip"), "a disabled reason remains discoverable");
+assert(!reasonedMarkup.includes("disabledReason"), "central-only props are not passed to the DOM");
+
+const legacyMarkup = renderToStaticMarkup(
+  <AdminIconButton label="Add" icon={<span>+</span>} disabled />
+);
+assert(legacyMarkup.includes("icon-button admin-icon-button"), "the legacy wrapper delegates to the neutral component and preserves its class hook");
+assert(legacyMarkup.includes("disabled=\"\""), "the legacy disabled contract is preserved");

webui/tsconfig.component-tests.json

@@ -20,6 +20,7 @@
   "include": [
     "tests/data-grid-actions.test.tsx",
     "tests/dialog-focus.test.tsx",
+    "tests/icon-button.test.tsx",
     "tests/mail-components.test.tsx",
     "tests/resource-access-explanation.test.tsx",
     "src/components/CredentialPanel.tsx",
@@ -34,6 +35,8 @@
     "src/components/dialogInteractions.ts",
     "src/components/dialogStack.ts",
     "src/components/FormField.tsx",
+    "src/components/IconButton.tsx",
+    "src/components/admin/AdminIconButton.tsx",
     "src/components/ToggleSwitch.tsx",
     "src/components/table/TableActionGroup.tsx"
   ]