Favorites section default fix

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"
+                          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" />
+                          <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"