From 7cf5a69a855d284bd1d4035c229edb6f5cdb4aa1 Mon Sep 17 00:00:00 2001
From: Albrecht Degering <albrecht@degering.name>
Date: Tue, 21 Jul 2026 12:23:51 +0200
Subject: [PATCH] refactor(webui): centralize mail profile controls

---
 .../features/mail/MailProfileManagement.tsx   | 31 +++++++++----------
 webui/src/styles/mail-profiles.css            | 14 ---------
 2 files changed, 14 insertions(+), 31 deletions(-)

diff --git a/webui/src/features/mail/MailProfileManagement.tsx b/webui/src/features/mail/MailProfileManagement.tsx
index e0be3e4..1b7703d 100644
--- a/webui/src/features/mail/MailProfileManagement.tsx
+++ b/webui/src/features/mail/MailProfileManagement.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState, type ReactNode } from "react";
-import { ConnectionTree, FieldLabel, LoadingFrame, MailServerSettingsPanel, PolicyLockedHint, PolicyPathHelp, PolicyRow, PolicySourcePath, PolicyTable, ToggleSwitch, hasMailImapSettings, mailImapSettingsPayload, mailServerSecurityOptions, mailSmtpSettingsPayload, mailTextOrNull, mailTransportCredentialsPayload, mergeDeltaRows, normalizeMailServerSecurity, normalizePolicySourcePathItems, useDeltaWatermarks, type ConnectionTreeColumn, type MailServerConnectionTestResult, type MailServerCredentialSettings, type MailServerImapSettings, type MailServerSmtpSettings, type NormalizedPolicySourcePathItem, type PolicySourcePathItem } from "@govoplan/core-webui";
+import { ConnectionTree, FieldLabel, LoadingFrame, MailServerSettingsPanel, PolicyLockedHint, PolicyPathHelp, PolicyRow, PolicySourcePath, PolicyTable, StatusBadge, TableActionGroup, ToggleSwitch, hasMailImapSettings, mailImapSettingsPayload, mailServerSecurityOptions, mailSmtpSettingsPayload, mailTextOrNull, mailTransportCredentialsPayload, mergeDeltaRows, normalizeMailServerSecurity, normalizePolicySourcePathItems, useDeltaWatermarks, type ConnectionTreeColumn, type MailServerConnectionTestResult, type MailServerCredentialSettings, type MailServerImapSettings, type MailServerSmtpSettings, type NormalizedPolicySourcePathItem, type PolicySourcePathItem } from "@govoplan/core-webui";
 import { Pencil, Plus, Trash2 } from "lucide-react";
 import type { ApiSettings } from "../../types";
 import {
@@ -344,10 +344,10 @@ export function MailProfileScopeManager({
     header: "i18n:govoplan-mail.status.bae7d5be",
     width: "110px",
     render: (row) => row.kind === "profile" ?
-    <span className={`status-badge ${row.profile.is_active ? "success" : "neutral"}`}>{row.profile.is_active ? "i18n:govoplan-mail.active.a733b809" : "i18n:govoplan-mail.inactive.09af574c"}</span> :
+    <StatusBadge status={row.profile.is_active ? "active" : "inactive"} label={row.profile.is_active ? "i18n:govoplan-mail.active.a733b809" : "i18n:govoplan-mail.inactive.09af574c"} /> :
     row.kind === "server" ?
-    <span className={`status-badge ${transportConfigured(row.profile, row.protocol) ? "success" : "neutral"}`}>{transportConfigured(row.profile, row.protocol) ? "i18n:govoplan-core.configured.668c5fff" : "i18n:govoplan-core.not_configured.811931bb"}</span> :
-    <span className={`status-badge ${mailCredentialConfigured(row.profile, row.protocol) ? "success" : "neutral"}`}>{mailCredentialConfigured(row.profile, row.protocol) ? "i18n:govoplan-mail.saved.c0ae8f6e" : "i18n:govoplan-mail.local.dc99d54d"}</span>
+    <StatusBadge status={transportConfigured(row.profile, row.protocol) ? "success" : "inactive"} label={transportConfigured(row.profile, row.protocol) ? "i18n:govoplan-core.configured.668c5fff" : "i18n:govoplan-core.not_configured.811931bb"} /> :
+    <StatusBadge status={mailCredentialConfigured(row.profile, row.protocol) ? "success" : "inactive"} label={mailCredentialConfigured(row.profile, row.protocol) ? "i18n:govoplan-mail.saved.c0ae8f6e" : "i18n:govoplan-mail.local.dc99d54d"} />
   }],
   [profileEffectivePolicy]);
 
@@ -362,24 +362,21 @@ export function MailProfileScopeManager({
   function renderMailProfileActions(row: MailProfileTreeRow) {
     if (row.kind === "server") {
       const label = `Edit ${row.protocol.toUpperCase()} server`;
-      return (
-        <div className="admin-icon-actions">
-          <Button type="button" className="admin-icon-button" title={label} aria-label={label} onClick={() => openEdit(row.profile, { kind: "server", protocol: row.protocol })} disabled={!canWriteProfiles || busy}><Pencil size={16} /></Button>
-        </div>);
+      return <TableActionGroup actions={[{
+        id: "edit-server", label, icon: <Pencil size={16} />, disabled: !canWriteProfiles || busy, onClick: () => openEdit(row.profile, { kind: "server", protocol: row.protocol })
+      }]} />;
 
     }
     if (row.kind === "credential") {
-      return (
-        <div className="admin-icon-actions">
-          <Button type="button" className="admin-icon-button" title={i18nMessage("i18n:govoplan-mail.edit_value_credentials.1e2dc4f6", { value0: row.protocol.toUpperCase() })} aria-label={i18nMessage("i18n:govoplan-mail.edit_value_credentials.1e2dc4f6", { value0: row.protocol.toUpperCase() })} onClick={() => openEdit(row.profile, { kind: "credentials", protocol: row.protocol })} disabled={!canWriteProfiles || busy}><Pencil size={16} /></Button>
-        </div>);
+      return <TableActionGroup actions={[{
+        id: "edit-credentials", label: i18nMessage("i18n:govoplan-mail.edit_value_credentials.1e2dc4f6", { value0: row.protocol.toUpperCase() }), icon: <Pencil size={16} />, disabled: !canWriteProfiles || busy, onClick: () => openEdit(row.profile, { kind: "credentials", protocol: row.protocol })
+      }]} />;
 
     }
-    return (
-      <div className="admin-icon-actions">
-        <Button type="button" className="admin-icon-button" title={i18nMessage("i18n:govoplan-mail.edit_value.fad75899", { value0: row.profile.name })} aria-label={i18nMessage("i18n:govoplan-mail.edit_value.fad75899", { value0: row.profile.name })} onClick={() => openEdit(row.profile)} disabled={!canWriteProfiles || busy}><Pencil size={16} /></Button>
-        <Button type="button" variant="danger" className="admin-icon-button" title={i18nMessage("i18n:govoplan-mail.deactivate_value.a276a667", { value0: row.profile.name })} aria-label={i18nMessage("i18n:govoplan-mail.deactivate_value.a276a667", { value0: row.profile.name })} onClick={() => setDeactivating(row.profile)} disabled={!canWriteProfiles || busy || !row.profile.is_active}><Trash2 size={16} /></Button>
-      </div>);
+    return <TableActionGroup actions={[
+      { id: "edit", label: i18nMessage("i18n:govoplan-mail.edit_value.fad75899", { value0: row.profile.name }), icon: <Pencil size={16} />, disabled: !canWriteProfiles || busy, onClick: () => openEdit(row.profile) },
+      { id: "deactivate", label: i18nMessage("i18n:govoplan-mail.deactivate_value.a276a667", { value0: row.profile.name }), icon: <Trash2 size={16} />, variant: "danger", applicable: row.profile.is_active, disabled: !canWriteProfiles || busy, onClick: () => setDeactivating(row.profile) }
+    ]} />;
 
   }
 
diff --git a/webui/src/styles/mail-profiles.css b/webui/src/styles/mail-profiles.css
index 8e91161..5c4e720 100644
--- a/webui/src/styles/mail-profiles.css
+++ b/webui/src/styles/mail-profiles.css
@@ -1,7 +1,3 @@
-.admin-form-grid.three-columns {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
 .button-icon-label {
   display: inline-flex;
   align-items: center;
@@ -204,16 +200,6 @@
   color: var(--text-strong);
 }
 
-.status-badge.success {
-  background: var(--success-bg);
-  color: var(--success-text);
-}
-
-.status-badge.neutral {
-  background: var(--status-neutral-bg);
-  color: var(--text-soft);
-}
-
 @media (max-width: 900px) {
   .admin-form-grid.three-columns,
   .mail-policy-pattern-grid,