#434

frontend/src/components/common/SortableList.tsx

@@ -25,9 +25,7 @@ const sameGroups = (left: Groups, right: Groups): boolean =>
 
 const Group = ({ id, children }: { id: string; children: ReactNode }) => {
   const drop = useDroppable ({ id: `group:${id}` })
-  return <div ref={drop.setNodeRef} className={cn (
-      'min-w-0 rounded',
-      drop.isOver && 'ring-1 ring-blue-500 dark:ring-blue-400')}>{children}</div>
+  return <div ref={drop.setNodeRef} className="min-w-0 rounded">{children}</div>
 }
 
 
@@ -36,12 +34,13 @@ const SortableList = (
     groups: Groups; name: (id: string) => Name
     handleName?: (id: string) => Name
     renderItem: (id: string, group: string) => ReactNode
-    renderGroup: (id: string, content: ReactNode) => ReactNode
+    renderGroup: (id: string, content: ReactNode, over: boolean) => ReactNode
     onChange: (groups: Groups) => void; fixed?: string[] },
 ) => {
   const drag = useRef<{ id: string; groups: Groups } | null> (null)
   const scope = useId ()
   const [active, setActive] = useState<string | null> (null)
+  const [overGroup, setOverGroup] = useState<string | null> (null)
   const motion = useClientMotion ()
   const accessibleName = handleName ?? name
   const sensors = useSensors (
@@ -86,12 +85,15 @@ const SortableList = (
   const reset = () => {
     drag.current = null
     setActive (null)
+    setOverGroup (null)
   }
   return <DndContext sensors={sensors} collisionDetection={args => {
       const hits = pointerWithin (args)
-      const available = hits.find (hit => hit.id === 'group:available')
-      return owner (String (args.active.id), groups) !== 'available'
-          && available != null ? [available] : closestCenter (args)
+      const group = hits.find (hit => String (hit.id).startsWith ('group:'))
+      const groupName = group?.id.toString ().slice (6)
+      const item = groupName != null && hits.some (hit =>
+	  owner (String (hit.id), groups) === groupName)
+      return group != null && !item ? [group] : closestCenter (args)
     }}
       accessibility={{ announcements: {
           onDragStart: event => accessibleName (String (event.active.id)).text,
@@ -106,6 +108,12 @@ const SortableList = (
 	const id = String (event.active.id)
 	drag.current = { id, groups }
 	setActive (id)
+	setOverGroup (owner (id, groups) ?? null)
+	  }} onDragOver={event => {
+	const id = event.over?.id.toString ()
+	const group = id == null ? null
+	    : (id.startsWith ('group:') ? id.slice (6) : owner (id, groups) ?? null)
+	setOverGroup (previous => previous === group ? previous : group)
       }} onDragCancel={reset} onDragEnd={event => {
         const session = drag.current
         reset ()
@@ -125,7 +133,7 @@ const SortableList = (
           {renderItem (id, group)}
           </SortableItem>)}
         </div>
-      </SortableContext>)}
+      </SortableContext>, overGroup === group)}
     </Group>)}
     {typeof document !== 'undefined' && createPortal (
 	<DragOverlay adjustScale={false}