refactor(webui): use central mailbox icon action

package.json

@@ -19,7 +19,7 @@
     "LICENSE"
   ],
   "peerDependencies": {
-    "@govoplan/core-webui": "^0.1.8",
+    "@govoplan/core-webui": "^0.1.9",
     "lucide-react": "^1.23.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

webui/package.json

@@ -14,7 +14,7 @@
     "./styles/mail-profiles.css": "./src/styles/mail-profiles.css"
   },
   "peerDependencies": {
-    "@govoplan/core-webui": "^0.1.8",
+    "@govoplan/core-webui": "^0.1.9",
     "lucide-react": "^1.23.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -26,7 +26,7 @@
     }
   },
   "scripts": {
-    "test:mail-ui": "rm -rf .mail-test-build && mkdir -p .mail-test-build && printf '{\"type\":\"commonjs\"}\\n' > .mail-test-build/package.json && tsc -p tsconfig.mail-tests.json && node .mail-test-build/tests/mailbox-folders.test.js && node .mail-test-build/tests/mail-profile-editor-model.test.js && node .mail-test-build/tests/mail-policy-validation.test.js"
+    "test:mail-ui": "rm -rf .mail-test-build && mkdir -p .mail-test-build && printf '{\"type\":\"commonjs\"}\\n' > .mail-test-build/package.json && tsc -p tsconfig.mail-tests.json && node .mail-test-build/tests/mailbox-folders.test.js && node .mail-test-build/tests/mail-profile-editor-model.test.js && node .mail-test-build/tests/mail-policy-validation.test.js && node scripts/test-mailbox-icon-button-structure.mjs"
   },
   "devDependencies": {
     "typescript": "^5.7.2"

webui/scripts/test-mailbox-icon-button-structure.mjs

@@ -0,0 +1,25 @@
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const webuiDir = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
+const source = fs.readFileSync(path.join(webuiDir, "src/features/mail/MailboxPage.tsx"), "utf8");
+const styles = fs.readFileSync(path.join(webuiDir, "src/styles/mail-profiles.css"), "utf8");
+
+function assert(condition, message) {
+  if (!condition) throw new Error(message);
+}
+
+assert(source.includes("IconButton,"), "MailboxPage must import the central IconButton");
+assert(
+  source.includes('<IconButton label="i18n:govoplan-mail.clear_message_search.cc9f2800"'),
+  "the clear-search action must use the central IconButton"
+);
+assert(
+  !source.includes('<button type="button" onClick={() => setMessageQuery("")}'),
+  "the raw clear-search button must not return"
+);
+assert(
+  !styles.includes(".mailbox-search-field button"),
+  "Mail must not redefine the central icon-button appearance"
+);

webui/src/features/mail/MailboxPage.tsx

@@ -5,6 +5,7 @@ import {
   DataGridPaginationBar,
   DismissibleAlert,
   ExplorerTree,
+  IconButton,
   LoadingIndicator,
   MessageDisplayPanel,
   formatDateTime,
@@ -416,7 +417,7 @@ export default function MailboxPage({ settings }: {settings: ApiSettings;}) {
               <label className="mailbox-search-field">
                 <Search size={15} aria-hidden="true" />
                 <input value={messageQuery} onChange={(event) => setMessageQuery(event.target.value)} placeholder="i18n:govoplan-mail.search_messages.abea65ae" />
-                {messageQuery && <button type="button" onClick={() => setMessageQuery("")} aria-label="i18n:govoplan-mail.clear_message_search.cc9f2800"><X size={14} /></button>}
+                {messageQuery && <IconButton label="i18n:govoplan-mail.clear_message_search.cc9f2800" icon={<X />} variant="ghost" onClick={() => setMessageQuery("")} />}
               </label>
             </div>
 

webui/src/styles/mail-profiles.css

@@ -559,25 +559,6 @@
   padding: 6px 0;
 }
 
-.mailbox-search-field button {
-  display: inline-grid;
-  place-items: center;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  border: 0;
-  border-radius: var(--radius-xs, 5px);
-  background: transparent;
-  color: var(--muted);
-  cursor: pointer;
-}
-
-.mailbox-search-field button:hover,
-.mailbox-search-field button:focus-visible {
-  background: var(--surface-subtle);
-  color: var(--text-strong);
-}
-
 .mailbox-error-state {
   color: var(--danger-text);
 }