From b5bfa1f7acf8bba83a7fbf71253d2b2cfde4f6f6 Mon Sep 17 00:00:00 2001
From: Joshua Ryder <ryderjj89@outlook.com>
Date: Mon, 8 Dec 2025 15:40:51 -0500
Subject: [PATCH] Favorites section default fix

---
 frontend/src/components/SectionsManager.tsx | 44 ++++++++++-----------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/SectionsManager.tsx b/frontend/src/components/SectionsManager.tsx
index 9b8fee36..a4bdf14d 100644
--- a/frontend/src/components/SectionsManager.tsx
+++ b/frontend/src/components/SectionsManager.tsx
@@ -104,20 +104,20 @@ const SectionsManager: React.FC<SectionsManagerProps> = ({
     }
   };
 
-  const setDefaultSection = async (id: number) => {
+  const toggleDefaultSection = async (id: number, currentlyDefault: boolean) => {
     try {
       const response = await fetch(`/api/sections/${id}`, {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
         credentials: 'include',
-        body: JSON.stringify({ is_default: true })
+        body: JSON.stringify({ is_default: !currentlyDefault })
       });
 
       if (response.ok) {
         onSectionChange();
       }
     } catch (err) {
-      setError('Failed to set default section');
+      setError('Failed to update default section');
     }
   };
 
@@ -139,6 +139,9 @@ const SectionsManager: React.FC<SectionsManagerProps> = ({
 
     const sectionIds = newSections.map(s => s.id);
 
+    // Store original sections for potential revert (avoid stale closure)
+    const originalSections = localSections;
+
     try {
       const response = await fetch('/api/sections/reorder', {
         method: 'PUT',
@@ -147,16 +150,16 @@ const SectionsManager: React.FC<SectionsManagerProps> = ({
         body: JSON.stringify({ sectionIds })
       });
 
-      if (response.ok) {
-        onSectionChange();
-      } else {
+      if (!response.ok) {
         // Revert on failure
-        setLocalSections(localSections);
+        setLocalSections(originalSections);
         setError('Failed to reorder sections');
       }
+      // On success, don't call onSectionChange - local state is already correct
+      // This avoids race condition where parent refetch overwrites optimistic update
     } catch (err) {
       // Revert on failure
-      setLocalSections(localSections);
+      setLocalSections(originalSections);
       setError('Failed to reorder sections');
     }
   };
@@ -274,11 +277,6 @@ const SectionsManager: React.FC<SectionsManagerProps> = ({
                       <span className="flex-1 text-sm text-gray-900 dark:text-gray-100">
                         {section.name}
                       </span>
-                      {!!section.is_default && (
-                        <span className="text-xs bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-300 px-2 py-0.5 rounded">
-                          default
-                        </span>
-                      )}
                       <div className="flex items-center gap-1">
                         <button
                           onClick={() => moveSection(section.id, 'up')}
@@ -296,15 +294,17 @@ const SectionsManager: React.FC<SectionsManagerProps> = ({
                         >
                           <ChevronDown className="h-4 w-4" />
                         </button>
-                        {!section.is_default && (
-                          <button
-                            onClick={() => setDefaultSection(section.id)}
-                            className="p-1 text-gray-400 hover:text-yellow-500"
-                            title="Set as default"
-                          >
-                            <Star className="h-4 w-4" />
-                          </button>
-                        )}
+                        <button
+                          onClick={() => toggleDefaultSection(section.id, !!section.is_default)}
+                          className="p-1 hover:bg-gray-200 dark:hover:bg-gray-600 rounded"
+                          title={section.is_default ? "Remove as default" : "Set as default"}
+                        >
+                          <Star className={`h-4 w-4 ${
+                            section.is_default
+                              ? 'text-yellow-500 fill-yellow-500'
+                              : 'text-gray-400 hover:text-yellow-500'
+                          }`} />
+                        </button>
                         <button
                           onClick={() => startEditing(section)}
                           className="p-1 text-gray-400 hover:text-blue-500"