Drag to reorder

[parker-codes]

Use svelte-dnd-action. It seems a little like overkill, but it has good support compared to others.

I'll also need to rethink the data structure.

---

Option 1

Instead of sorting by the timestamp, we can have a new sort field. The issue would be that if we want to update one item's place, we would need to update all affected items, which could be the entire list.

To solve that, I think we could make sort a decimal number and change only the moved item's sort value to fit where it lands. In many cases we'll put it in the middle of two items' values. When at the beginning or end, we can find an appropriately spaced value.

Let's calculate this on the backend to hide the implementation. So we pass in the before and after item IDs (optional) along with the dragged item ID.

One issue is that creating new items means we have to query the list, get the last item's sort value, and use that to determine the new item's value.

Option 2

This is more traditional. Send an array of all of the updated IDs and new sort values, dictated by the frontend. So if I move an item one down (a simple swap):

1. Get currentIndex and newIndex via event.detail.info.id.
2. Build an array of the affected items, like [{ id: '32k3920', index: 4 }, { id: 'skks0183', index: 5 }].
3. Send this as a payload to the Tauri side and update each item with the new index value.

This way also means creating a new item is cleaner because the new sort value can be the next index in the list.

---

I think I like Option 2 the best!

---

---

• Implement index field
• On create, use list size as new index
• On delete, update affected indexes (after removing, increment the index of all items after the deleted task's index)
• Use drag handles with an icon on hover/focus-within | example
• On reorder, update affected indexes