From 3a5f0d1c19897cf4fa017cedd153e3ef4906eb02 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Tue, 2 Dec 2025 20:24:34 +0000
Subject: [PATCH] fix: Add reconnect button to Backups and Replication pages

Both pages now show a consistent disconnect state with:
- Dynamic description based on reconnecting status
- Manual "Reconnect now" button when not auto-reconnecting

This matches the Dashboard and Storage page behavior, providing a
consistent UX across all main pages when connection is lost.
---
 .../src/components/Backups/Backups.tsx         | 18 ++++++++++++++++--
 .../src/components/Replication/Replication.tsx | 18 ++++++++++++++++--
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/frontend-modern/src/components/Backups/Backups.tsx b/frontend-modern/src/components/Backups/Backups.tsx
index 86a606d..da0ea9a 100644
--- a/frontend-modern/src/components/Backups/Backups.tsx
+++ b/frontend-modern/src/components/Backups/Backups.tsx
@@ -6,7 +6,7 @@ import UnifiedBackups from './UnifiedBackups';
 import { ProxmoxSectionNav } from '@/components/Proxmox/ProxmoxSectionNav';
 
 const Backups: Component = () => {
-  const { state, connected, initialDataReceived } = useWebSocket();
+  const { state, connected, initialDataReceived, reconnecting, reconnect } = useWebSocket();
 
   const hasBackupData = () =>
     Boolean(
@@ -75,8 +75,22 @@ const Backups: Component = () => {
               </svg>
             }
             title="Connection lost"
-            description="Unable to connect to the backend server. Attempting to reconnect..."
+            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>
diff --git a/frontend-modern/src/components/Replication/Replication.tsx b/frontend-modern/src/components/Replication/Replication.tsx
index 88eef06..f5b69ad 100644
--- a/frontend-modern/src/components/Replication/Replication.tsx
+++ b/frontend-modern/src/components/Replication/Replication.tsx
@@ -33,7 +33,7 @@ function formatRate(limit?: number): string {
 }
 
 const Replication: Component = () => {
-  const { state, connected } = useWebSocket();
+  const { state, connected, reconnecting, reconnect } = useWebSocket();
 
   const replicationJobs = createMemo(() => {
     const jobs = state.replicationJobs ?? [];
@@ -59,8 +59,22 @@ const Replication: Component = () => {
               </svg>
             }
             title="Connection lost"
-            description="Unable to connect to the backend server. Attempting to reconnect..."
+            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>
       }>