From bcda0e7315a9e7f28b9ffda35e95530387f926b0 Mon Sep 17 00:00:00 2001
From: mnerv <24420859+mnerv@users.noreply.github.com>
Date: Mon, 20 Apr 2026 01:14:11 +0200
Subject: [PATCH] Add drag-and-drop section reordering

---
 src/App.tsx                     | 10 +++++++++-
 src/components/SectionBlock.tsx | 27 +++++++++++++++++++++++++--
 src/hooks/useCarts.ts           | 13 +++++++++++++
 3 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 2624fb6..8515420 100644
--- a/src/App.tsx
+++ b/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
diff --git a/src/components/SectionBlock.tsx b/src/components/SectionBlock.tsx
index fd027d0..b30ab2d 100644
--- a/src/components/SectionBlock.tsx
+++ b/src/components/SectionBlock.tsx
@@ -11,9 +11,15 @@ interface Props {
   onEditItem: (item: Product | Drone) => void
   onRemoveSection: () => void
   onRenameSection: (label: string) => void
+  onDragStart: () => void
+  onDragOver: (e: React.DragEvent) => void
+  onDrop: () => void
+  onDragEnd: () => void
+  isDragging: boolean
+  isDragOver: boolean
 }
 
-export function SectionBlock({ section, onRemoveItem, onAddItem, onEditItem, onRemoveSection, onRenameSection }: Props) {
+export function SectionBlock({ section, onRemoveItem, onAddItem, onEditItem, onRemoveSection, onRenameSection, onDragStart, onDragOver, onDrop, onDragEnd, isDragging, isDragOver }: Props) {
   const [showAdd, setShowAdd] = useState(false)
   const [editingItem, setEditingItem] = useState<Product | Drone | null>(null)
   const [editing, setEditing] = useState(false)
@@ -49,10 +55,27 @@ export function SectionBlock({ section, onRemoveItem, onAddItem, onEditItem, onR
   }
 
   return (
-    <div className="flex flex-col gap-3 rounded-lg border p-4" style={{ background: 'var(--color-bg1)', borderColor: 'var(--color-bg3)' }}>
+    <div
+      draggable
+      onDragStart={onDragStart}
+      onDragOver={onDragOver}
+      onDrop={onDrop}
+      onDragEnd={onDragEnd}
+      className="flex flex-col gap-3 rounded-lg border p-4 transition-opacity"
+      style={{
+        background: 'var(--color-bg1)',
+        borderColor: isDragOver ? 'var(--color-cyan)' : 'var(--color-bg3)',
+        opacity: isDragging ? 0.4 : 1,
+      }}
+    >
       {/* Header */}
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
+          <span
+            className="cursor-grab select-none text-base leading-none"
+            style={{ color: 'var(--color-bg3)' }}
+            title="Drag to reorder"
+          >⠿</span>
           {editing ? (
             <form onSubmit={submitRename} className="flex items-center gap-1">
               <input
diff --git a/src/hooks/useCarts.ts b/src/hooks/useCarts.ts
index 9b57ab3..2e1403d 100644
--- a/src/hooks/useCarts.ts
+++ b/src/hooks/useCarts.ts
@@ -158,6 +158,18 @@ export function useCarts() {
     }))
   }
 
+  function reorderSections(fromId: string, toId: string) {
+    mutateActiveCart(cart => {
+      const sections = [...cart.sections]
+      const fromIdx = sections.findIndex(s => s.id === fromId)
+      const toIdx   = sections.findIndex(s => s.id === toId)
+      if (fromIdx === -1 || toIdx === -1 || fromIdx === toIdx) return cart
+      const [moved] = sections.splice(fromIdx, 1)
+      sections.splice(toIdx, 0, moved)
+      return { ...cart, sections }
+    })
+  }
+
   // ── Item management ───────────────────────────────────────────────────────
 
   function addItem(sectionId: string, item: Product | Drone) {
@@ -220,6 +232,7 @@ export function useCarts() {
     addSection,
     removeSection,
     renameSection,
+    reorderSections,
     addItem,
     updateItem,
     removeItem,