From 260e57970163c530ab4fb4aa9c9ee7d28ee8b24e Mon Sep 17 00:00:00 2001
From: Albrecht Degering <albrecht@degering.name>
Date: Tue, 21 Jul 2026 13:24:06 +0200
Subject: [PATCH] refactor(webui): use central mailbox icon action

---
 package.json                                  |  2 +-
 webui/package.json                            |  4 +--
 .../test-mailbox-icon-button-structure.mjs    | 25 +++++++++++++++++++
 webui/src/features/mail/MailboxPage.tsx       |  3 ++-
 webui/src/styles/mail-profiles.css            | 19 --------------
 5 files changed, 30 insertions(+), 23 deletions(-)
 create mode 100644 webui/scripts/test-mailbox-icon-button-structure.mjs

diff --git a/package.json b/package.json
index 99e9b87..a4801a5 100644
--- a/package.json
+++ b/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",
diff --git a/webui/package.json b/webui/package.json
index 98ce9f3..b0b2578 100644
--- a/webui/package.json
+++ b/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"
diff --git a/webui/scripts/test-mailbox-icon-button-structure.mjs b/webui/scripts/test-mailbox-icon-button-structure.mjs
new file mode 100644
index 0000000..8e51db8
--- /dev/null
+++ b/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"
+);
diff --git a/webui/src/features/mail/MailboxPage.tsx b/webui/src/features/mail/MailboxPage.tsx
index 247ee79..c858a78 100644
--- a/webui/src/features/mail/MailboxPage.tsx
+++ b/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>
 
diff --git a/webui/src/styles/mail-profiles.css b/webui/src/styles/mail-profiles.css
index 94aea5f..eee73f5 100644
--- a/webui/src/styles/mail-profiles.css
+++ b/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);
 }