Transfer List
Implement a Transfer List — the MUI-style widget: two lists of items with checkboxes, buttons to move the checked items right or left, plus "move all" in each direction. Aim for a working version in about 15 minutes, then polish. Available as a React template and an HTML/CSS/JS one.
Requirements
- Each item has a checkbox; items can be checked on either side.
- › moves the checked items from Available to Chosen; ‹ moves the checked items back. Moved items land at the end of the other list and become unchecked.
- ≫ / ≪ move everything regardless of checkboxes.
- Each button is disabled when it would do nothing (nothing checked on that side; that side empty).
- Each list shows its count in the legend and an "Empty" note when it has no items.
- Order is preserved within each list.
Hints
Hint 1
State is two arrays plus one Set of checked ids — ids are unique across both sides, so one Set covers both lists. Moving is filter-out-of-one, append-to-the-other, then drop the moved ids from the Set.
Hint 2
Write one move(from, to, ids) and call it four ways: the two arrow buttons pass the checked Set, the two move-all buttons pass a Set of every id on that side.
Hint 3
Real checkboxes inside labels give you keyboard support for free; derive each button's disabled state from the arrays and the Set instead of tracking it.