From c2b97ea8ff556e89886d1afbe07bcbe13d586887 Mon Sep 17 00:00:00 2001
From: Joshua Ryder <ryderjj89@outlook.com>
Date: Mon, 8 Dec 2025 15:16:38 -0500
Subject: [PATCH] More favorites fixes

---
 frontend/src/components/SectionsManager.tsx | 32 +++++++++++++++------
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/SectionsManager.tsx b/frontend/src/components/SectionsManager.tsx
index 24276345..9b8fee36 100644
--- a/frontend/src/components/SectionsManager.tsx
+++ b/frontend/src/components/SectionsManager.tsx
@@ -9,10 +9,12 @@ interface SectionsManagerProps {
 }
 
 const SectionsManager: React.FC<SectionsManagerProps> = ({
-  sections,
+  sections: propSections,
   onClose,
   onSectionChange
 }) => {
+  // Local state for optimistic updates
+  const [localSections, setLocalSections] = useState<Section[]>(propSections);
   const [editingId, setEditingId] = useState<number | null>(null);
   const [editName, setEditName] = useState('');
   const [editColor, setEditColor] = useState('');
@@ -22,6 +24,11 @@ const SectionsManager: React.FC<SectionsManagerProps> = ({
   const [showColorPicker, setShowColorPicker] = useState<number | 'new' | null>(null);
   const [error, setError] = useState('');
 
+  // Sync local state when props change
+  React.useEffect(() => {
+    setLocalSections(propSections);
+  }, [propSections]);
+
   const createSection = async () => {
     if (!newSectionName.trim()) {
       setError('Section name is required');
@@ -115,18 +122,21 @@ const SectionsManager: React.FC<SectionsManagerProps> = ({
   };
 
   const moveSection = async (id: number, direction: 'up' | 'down') => {
-    const currentIndex = sections.findIndex(s => s.id === id);
+    const currentIndex = localSections.findIndex(s => s.id === id);
     if (
       (direction === 'up' && currentIndex === 0) ||
-      (direction === 'down' && currentIndex === sections.length - 1)
+      (direction === 'down' && currentIndex === localSections.length - 1)
     ) {
       return;
     }
 
-    const newSections = [...sections];
+    const newSections = [...localSections];
     const swapIndex = direction === 'up' ? currentIndex - 1 : currentIndex + 1;
     [newSections[currentIndex], newSections[swapIndex]] = [newSections[swapIndex], newSections[currentIndex]];
 
+    // Optimistic update - immediately show the reorder
+    setLocalSections(newSections);
+
     const sectionIds = newSections.map(s => s.id);
 
     try {
@@ -139,8 +149,14 @@ const SectionsManager: React.FC<SectionsManagerProps> = ({
 
       if (response.ok) {
         onSectionChange();
+      } else {
+        // Revert on failure
+        setLocalSections(localSections);
+        setError('Failed to reorder sections');
       }
     } catch (err) {
+      // Revert on failure
+      setLocalSections(localSections);
       setError('Failed to reorder sections');
     }
   };
@@ -196,13 +212,13 @@ const SectionsManager: React.FC<SectionsManagerProps> = ({
 
         {/* Sections list */}
         <div className="p-4 overflow-y-auto max-h-[50vh]">
-          {sections.length === 0 ? (
+          {localSections.length === 0 ? (
             <p className="text-center text-gray-500 dark:text-gray-400 py-4">
               No sections yet. Create one to organize your favorites!
             </p>
           ) : (
             <div className="space-y-2">
-              {sections.map((section, index) => (
+              {localSections.map((section, index) => (
                 <div
                   key={section.id}
                   className="flex items-center gap-2 p-2 bg-gray-50 dark:bg-gray-700 rounded-lg"
@@ -258,7 +274,7 @@ const SectionsManager: React.FC<SectionsManagerProps> = ({
                       <span className="flex-1 text-sm text-gray-900 dark:text-gray-100">
                         {section.name}
                       </span>
-                      {section.is_default && (
+                      {!!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>
@@ -274,7 +290,7 @@ const SectionsManager: React.FC<SectionsManagerProps> = ({
                         </button>
                         <button
                           onClick={() => moveSection(section.id, 'down')}
-                          disabled={index === sections.length - 1}
+                          disabled={index === localSections.length - 1}
                           className="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 disabled:opacity-30"
                           title="Move down"
                         >