feat(packing): drag a category by its head to move it among the others

Categories showed in the order they were created, which a list kept per day
cannot undo once the days swap. A grip in each category's head band moves
the whole category onto another's place on desktop. A category has no
position of its own, it shows where its first item is, so the move reorders
the items as one block through the item reorder the list already has: no
new column, and the order reaches everyone the way a dragged item does. The
other view's categories keep their order.

client/src/components/Packing/PackingListPanelList.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import type { PackingState } from './usePackingListPanel'
 import { KategorieGruppe } from './PackingListPanelCategoryGroup'
 import EmptyState from '../shared/EmptyState'
@@ -7,8 +8,13 @@ export function PackingList(S: PackingState) {
     items, gruppiert, t, tripId, allCategories, handleRenameCategory, handleDeleteCategory, handleDeleteItem,
     handleAddItemToCategory, categoryAssignees, tripMembers, handleSetAssignees,
     bagTrackingEnabled, bags, handleCreateBagByName, canEdit, reorderPackingItems,
-    currentUserId, handleSetSharing, handleCloneItem, handleJoinItem, handleLeaveItem, sort,
+    currentUserId, handleSetSharing, handleCloneItem, handleJoinItem, handleLeaveItem, sort, moveCategory,
   } = S
+  // Which category is being dragged and which card it is over. Held here, above
+  // the cards, because the drag starts in one card and ends in another.
+  const [draggedCategory, setDraggedCategory] = useState<string | null>(null)
+  const [overCategory, setOverCategory] = useState<string | null>(null)
+  const endCategoryDrag = () => { setDraggedCategory(null); setOverCategory(null) }
   return (
     <div style={{ flex: 1, overflowY: 'auto', padding: '10px 0 16px' }}>
       {items.length === 0 ? (
@@ -40,6 +46,18 @@ export function PackingList(S: PackingState) {
               allItems={items}
               onReorder={(orderedIds) => reorderPackingItems(tripId, orderedIds)}
               reorderable={sort === 'manual'}
+              categoryDrag={canEdit ? {
+                active: draggedCategory !== null,
+                isDragging: draggedCategory === kat,
+                isOver: overCategory === kat && draggedCategory !== null && draggedCategory !== kat,
+                onStart: () => { setDraggedCategory(kat); setOverCategory(null) },
+                onOver: () => setOverCategory(kat),
+                onEnd: endCategoryDrag,
+                onDrop: () => {
+                  if (draggedCategory !== null) moveCategory(draggedCategory, kat)
+                  endCategoryDrag()
+                },
+              } : undefined}
               currentUserId={currentUserId}
               onSetSharing={handleSetSharing}
               onClone={handleCloneItem}