145Build a Trello-like Kanban app supporting nested cards, drag-and-drop, undo/redo, and persistence

Build the state layer of a Trello-like board. (Drag and drop events are covered in #80; here every drag ends in a moveCard command.)

createBoardStore({ storage, key = "board", initial = { columns: [], cards: {} }, historyLimit = 100 }) returns { getState, dispatch, undo, redo, canUndo, canRedo, subscribe }.

State: { columns: [{ id, title, cardIds }], cards: { [id]: { id, title, parentId, childIds } } }. A card either sits in a column (parentId: null, listed in the column's cardIds) or is nested under another card (parentId set, listed in that card's childIds).

Commands for dispatch(command):

• { type: "addColumn", id, title }
• { type: "addCard", id, title, columnId } or { type: "addCard", id, title, parentId }
• { type: "editCard", id, title }
• { type: "moveCard", id, columnId?, parentId?, index }: move to a column or under a card, at index (counted after removing the card from its old place). Moving a card moves its nested cards with it. Throw an Error when moving a card under itself or its own descendant.
• { type: "deleteCard", id }: delete the card and all its nested cards.

Requirements:

• State is immutable: every command produces a new state; untouched columns and cards keep their identity.
• undo()/redo() step through history; a new command after undo clears the redo history; at most historyLimit steps are kept.
• After every change (command, undo, redo) save { version: 1, state } as JSON in storage (getItem/setItem). On creation, load it; if it is missing, corrupt or a different version, use initial.
• subscribe(listener) calls listener(state) after every change and returns an unsubscribe function.