Colors and ordering fix

backend/src/index.js

@@ -492,6 +492,22 @@ app.post('/api/sections', requireAuth, (req, res) => {
   });
 });
 
+// IMPORTANT: /reorder must come BEFORE /:id to avoid matching "reorder" as an id
+app.put('/api/sections/reorder', requireAuth, (req, res) => {
+  const { sectionIds } = req.body;
+
+  if (!Array.isArray(sectionIds)) {
+    return res.status(400).json({ error: 'sectionIds must be an array' });
+  }
+
+  sectionsOps.reorderSections(req.user.id, sectionIds, (err) => {
+    if (err) {
+      return res.status(500).json({ error: 'Failed to reorder sections' });
+    }
+    res.json({ message: 'Sections reordered successfully' });
+  });
+});
+
 app.put('/api/sections/:id', requireAuth, (req, res) => {
   const sectionId = req.params.id;
   const { name, color, is_default } = req.body;
@@ -518,21 +534,6 @@ app.delete('/api/sections/:id', requireAuth, (req, res) => {
   });
 });
 
-app.put('/api/sections/reorder', requireAuth, (req, res) => {
-  const { sectionIds } = req.body;
-
-  if (!Array.isArray(sectionIds)) {
-    return res.status(400).json({ error: 'sectionIds must be an array' });
-  }
-
-  sectionsOps.reorderSections(req.user.id, sectionIds, (err) => {
-    if (err) {
-      return res.status(500).json({ error: 'Failed to reorder sections' });
-    }
-    res.json({ message: 'Sections reordered successfully' });
-  });
-});
-
 // Catch-all handler: send back React's index.html for client-side routing
 app.get('*', (req, res) => {
   res.sendFile(path.join(__dirname, '../../frontend/build/index.html'));

frontend/src/components/SectionsManager.tsx

@@ -171,9 +171,10 @@ const SectionsManager: React.FC<SectionsManagerProps> = ({
     setShowColorPicker(null);
   };
 
-  const ColorPicker = ({ selectedColor, onSelect, target }: { selectedColor: string; onSelect: (color: string) => void; target: number | 'new' }) => (
+  const ColorPicker = ({ selectedColor, onSelect }: { selectedColor: string; onSelect: (color: string) => void }) => (
-    <div className="absolute z-10 mt-1 p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg">
+    <div className="absolute z-10 mt-2 p-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-xl min-w-[280px]">
-      <div className="grid grid-cols-6 gap-1">
+      <p className="text-xs text-gray-500 dark:text-gray-400 mb-2 font-medium">Choose a color</p>
+      <div className="grid grid-cols-3 gap-2">
         {SECTION_COLORS.map(color => (
           <button
             key={color.value}
@@ -181,12 +182,20 @@ const SectionsManager: React.FC<SectionsManagerProps> = ({
               onSelect(color.value);
               setShowColorPicker(null);
             }}
-            className={`w-6 h-6 rounded-full border-2 ${
+            className={`flex items-center gap-2 px-2 py-1.5 rounded-lg transition-colors ${
-              selectedColor === color.value ? 'border-gray-900 dark:border-white' : 'border-transparent'
+              selectedColor === color.value
+                ? 'bg-gray-100 dark:bg-gray-700 ring-2 ring-blue-500'
+                : 'hover:bg-gray-50 dark:hover:bg-gray-700'
             }`}
+          >
+            <div
+              className="w-6 h-6 rounded-full flex-shrink-0 border border-gray-200 dark:border-gray-600"
               style={{ backgroundColor: color.value }}
-            title={color.name}
             />
+            <span className="text-xs text-gray-700 dark:text-gray-300 truncate">
+              {color.name}
+            </span>
+          </button>
         ))}
       </div>
     </div>
@@ -239,7 +248,6 @@ const SectionsManager: React.FC<SectionsManagerProps> = ({
                           <ColorPicker
                             selectedColor={editColor}
                             onSelect={setEditColor}
-                            target={section.id}
                           />
                         )}
                       </div>
@@ -342,7 +350,6 @@ const SectionsManager: React.FC<SectionsManagerProps> = ({
                   <ColorPicker
                     selectedColor={newSectionColor}
                     onSelect={setNewSectionColor}
-                    target="new"
                   />
                 )}
               </div>