Transfer List

Build a transfer list: two side-by-side lists with arrow buttons that move selected items from one to the other. The clean model is a single array of items, each tagged with which side it's on, plus a Set of selected ids — the two visible lists are just filters of that array, and moving means flipping side.

Signature

type Item = { id: string; label: string; side: 'left' | 'right' };

// A self-contained component. No props.
function App(): JSX.Element;

Two lists, a › button, and a ‹ button.

Examples

select HTML + CSS on the left, click ›
  → both move to the right list; selection clears

left  = items.filter(i => i.side === 'left')
right = items.filter(i => i.side === 'right')

Notes

• One array, a side per item. The two lists are filters; don't keep two separate arrays in sync.
• Selection is a Set of ids. Clicking toggles membership; highlight reflects it.
• Move = flip side. Map the items, change side for selected ids, then clear the selection.
• Out of scope. Bulk select-all and adding items — that's Transfer List II.