From e808972df0e3ce1987bb3b5a346add3e6d592b56 Mon Sep 17 00:00:00 2001
From: kaitranntt <kaitran.ntt@gmail.com>
Date: Wed, 14 Jan 2026 16:51:56 -0500
Subject: [PATCH] fix(dashboard): address code review feedback for PR #336

- Fix documentation: config.yaml -> settings.json in backups-section
- Wrap restoreBackup in useCallback for callback stability
- Auth middleware verified: inherited from app.use(authMiddleware)
---
 .../settings/sections/backups-section.tsx     | 67 ++++++++++---------
 1 file changed, 35 insertions(+), 32 deletions(-)

diff --git a/ui/src/pages/settings/sections/backups-section.tsx b/ui/src/pages/settings/sections/backups-section.tsx
index 28153aee..7a484e4a 100644
--- a/ui/src/pages/settings/sections/backups-section.tsx
+++ b/ui/src/pages/settings/sections/backups-section.tsx
@@ -1,6 +1,6 @@
 /**
  * Backups Section
- * Settings section for managing config.yaml backups (list and restore)
+ * Settings section for managing settings.json backups (list and restore)
  */
 
 import { useEffect, useState, useCallback, useRef } from 'react';
@@ -73,38 +73,41 @@ export default function BackupsSection() {
     }
   }, []);
 
-  // Restore backup
-  const restoreBackup = async (timestamp: string) => {
-    // Abort previous restore request
-    restoreAbortControllerRef.current?.abort();
-    restoreAbortControllerRef.current = new AbortController();
+  // Restore backup (wrapped in useCallback for callback stability)
+  const restoreBackup = useCallback(
+    async (timestamp: string) => {
+      // Abort previous restore request
+      restoreAbortControllerRef.current?.abort();
+      restoreAbortControllerRef.current = new AbortController();
 
-    try {
-      setRestoring(timestamp);
-      setError(null);
-      const response = await fetch('/api/persist/restore', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ timestamp }),
-        signal: restoreAbortControllerRef.current.signal,
-      });
+      try {
+        setRestoring(timestamp);
+        setError(null);
+        const response = await fetch('/api/persist/restore', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ timestamp }),
+          signal: restoreAbortControllerRef.current.signal,
+        });
 
-      if (!response.ok) {
-        const data = await response.json();
-        throw new Error(data.error || 'Failed to restore backup');
+        if (!response.ok) {
+          const data = await response.json();
+          throw new Error(data.error || 'Failed to restore backup');
+        }
+
+        setSuccess('Backup restored successfully');
+        await fetchBackups();
+        await fetchRawConfig();
+      } catch (err) {
+        // Ignore abort errors
+        if (err instanceof Error && err.name === 'AbortError') return;
+        setError(err instanceof Error ? err.message : 'Unknown error');
+      } finally {
+        setRestoring(null);
       }
-
-      setSuccess('Backup restored successfully');
-      await fetchBackups();
-      await fetchRawConfig();
-    } catch (err) {
-      // Ignore abort errors
-      if (err instanceof Error && err.name === 'AbortError') return;
-      setError(err instanceof Error ? err.message : 'Unknown error');
-    } finally {
-      setRestoring(null);
-    }
-  };
+    },
+    [fetchBackups, fetchRawConfig]
+  );
 
   // Load on mount
   useEffect(() => {
@@ -199,8 +202,8 @@ export default function BackupsSection() {
               <h2 className="text-lg font-semibold">Settings Backups</h2>
             </div>
             <p className="text-sm text-muted-foreground">
-              Restore previous versions of your config.yaml file. Backups are created automatically
-              when settings are modified.
+              Restore previous versions of your settings.json file. Backups are created
+              automatically when settings are modified.
             </p>
           </div>