Add drag-and-drop section reordering

src/App.tsx

@@ -52,7 +52,9 @@ export default function App() {
   const importRef = useRef<HTMLInputElement>(null)
 
   const { catalog, loading: catalogLoading, error: catalogError } = useCatalog()
-  const { carts, activeCart, activeId, storageError, setActiveCart, createCart, deleteCart, renameCart, importCart, exportCart, addSection, removeSection, renameSection, addItem, updateItem, removeItem } = useCarts()
+  const { carts, activeCart, activeId, storageError, setActiveCart, createCart, deleteCart, renameCart, importCart, exportCart, addSection, removeSection, renameSection, reorderSections, addItem, updateItem, removeItem } = useCarts()
+  const [dragSectionId, setDragSectionId] = useState<string | null>(null)
+  const [dragOverId, setDragOverId] = useState<string | null>(null)
 
   function commitCartRename() {
     if (renamingCartId && renameCartValue.trim()) renameCart(renamingCartId, renameCartValue.trim())
@@ -219,6 +221,12 @@ export default function App() {
               onEditItem={item => updateItem(section.id, item)}
               onRemoveSection={() => removeSection(section.id)}
               onRenameSection={label => renameSection(section.id, label)}
+              isDragging={dragSectionId === section.id}
+              isDragOver={dragOverId === section.id}
+              onDragStart={() => setDragSectionId(section.id)}
+              onDragOver={e => { e.preventDefault(); setDragOverId(section.id) }}
+              onDrop={() => { if (dragSectionId) reorderSections(dragSectionId, section.id); setDragOverId(null) }}
+              onDragEnd={() => { setDragSectionId(null); setDragOverId(null) }}
             />
           ))}
           <button