Changed it so that tasks can be dragged and reordered, as well as having tasks breathe to leave a space where the task will go when you let go

components.jsx

@@ -97,12 +97,13 @@ function findUser(id) {
   return USERS.find(u => u.id === id); 
 }
 
-function TaskCard({ task, onOpen, density = 'cozy', dragging = false, onDragStart, onDragEnd }) {
+function TaskCard({ task, onOpen, density = 'cozy', dragging = false, onDragStart, onDragEnd, onDragOver }) {
   const author = findUser(task.addedBy);
   const isAuto = task.status === 'unsuccessful' || task.status === 'billing';
   return (
     <article
       className={"card" + (dragging ? " card--drag" : "") + (isAuto ? " card--flagged" : "")}
+      style={dragging ? { opacity: 0, pointerEvents: 'none' } : {}}
       data-density={density}
       data-priority={task.priority}
       draggable
@@ -112,6 +113,7 @@ function TaskCard({ task, onOpen, density = 'cozy', dragging = false, onDragStar
         onDragStart && onDragStart(task);
       }}
       onDragEnd={() => onDragEnd && onDragEnd()}
+      onDragOver={onDragOver}
       onClick={() => onOpen && onOpen(task)}
       data-comment-anchor={"task-" + task.id}
     >