From 4c5b515cbad5ed04d7baced18da3f715cdc1071c Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Tue, 2 Dec 2025 20:34:32 +0000
Subject: [PATCH] fix: Update Mail Gateway disconnect state for consistency

Changed from warning (amber) to danger (red) tone and added:
- Dynamic description based on reconnecting status
- Manual "Reconnect now" button when not auto-reconnecting
- Consistent "Connection lost" title

All 7 major pages now have unified connection lost UX:
Dashboard, Storage, Backups, Replication, Hosts, Docker, Mail Gateway
---
 .../src/components/PMG/MailGateway.tsx        | 25 +++++++++++++++----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/frontend-modern/src/components/PMG/MailGateway.tsx b/frontend-modern/src/components/PMG/MailGateway.tsx
index 63dc03850..ea24f3888 100644
--- a/frontend-modern/src/components/PMG/MailGateway.tsx
+++ b/frontend-modern/src/components/PMG/MailGateway.tsx
@@ -22,7 +22,7 @@ const parseTimestamp = (value?: string) => {
 };
 
 const MailGateway: Component = () => {
-  const { state, connected } = useWebSocket();
+  const { state, connected, reconnecting, reconnect } = useWebSocket();
   const instances = createMemo(() => state.pmg ?? []);
 
   return (
@@ -30,15 +30,30 @@ const MailGateway: Component = () => {
       <ProxmoxSectionNav current="mail" />
 
       <Show when={!connected()}>
-        <Card padding="lg" tone="warning">
+        <Card padding="lg" tone="danger">
           <EmptyState
             icon={
-              <svg class="h-12 w-12 text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <svg class="h-12 w-12 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
               </svg>
             }
-            title="Disconnected from backend"
-            description="Waiting for backend to reconnect before loading Mail Gateway details."
+            title="Connection lost"
+            description={
+              reconnecting()
+                ? 'Attempting to reconnect…'
+                : 'Unable to connect to the backend server'
+            }
+            tone="danger"
+            actions={
+              !reconnecting() ? (
+                <button
+                  onClick={() => reconnect()}
+                  class="mt-2 inline-flex items-center px-4 py-2 text-xs font-medium rounded bg-red-600 text-white hover:bg-red-700 transition-colors"
+                >
+                  Reconnect now
+                </button>
+              ) : undefined
+            }
           />
         </Card>
       </Show>