Overview

Build a notes editor whose add, edit, toggle, and delete actions are tracked in a useReducer past/present/future history, so every change can be undone and redone with buttons or keyboard shortcuts.

Requirements

• The list starts with the notes "Buy groceries" and "Walk the dog".
• Each note is editable through an input (data-testid="note-input-<id>").
• Each note has a done toggle (data-testid="toggle-note-<id>") and a delete button (data-testid="delete-note-<id>").
• Undo (data-testid="undo-button") and redo (data-testid="redo-button") are disabled on first render.
• Adding a note (data-testid="add-note") appends it to the list and clears the new-note field (data-testid="note-input").
• A change enables undo; undoing restores the previous list, disables undo when there is nothing left to undo, and enables redo.
• Redo reapplies an undone change and disables itself once there is nothing left to redo.
• Adding, editing, toggling, and deleting a note can each be undone.
• An undone change can be redone.
• Consecutive edits to the same note collapse into a single undo step.
• An edit that does not change the text is ignored and adds no history.
• Adding an empty or whitespace-only note is ignored and adds no history.
• Undo is triggered by Cmd/Ctrl+Z.
• Redo is triggered by Shift+Ctrl+Z.
• Pressing undo with no history or redo with nothing to redo leaves the list unchanged.
• The status line (data-testid="history-status") reports how many undo and redo steps are available.
• New notes always get unique identifiers, even after undoing and adding again.
• Making a new change after undoing clears the redo stack.

Notes

• Shortcuts.tsx is read-only. App.tsx wires the UI and the keyboard shortcuts; reducer.ts owns the types, the initial state, and all history logic.
• The history shape most people reach for is { past, present, future }: present is what renders, past and future are stacks of snapshots.
• Return the same state object for a no-op (blank note, edit that doesn't change the text, undo/redo with an empty stack) so React bails out and history stays clean.
• The keyboard shortcuts fire even when the buttons are disabled, so the reducer — not the UI — must guard the empty stacks.
• Keep the id counter outside the history: rewinding it on undo would let two different notes share an id.
• Collapsing a burst of edits to the same note into a single undo step needs a marker of which note was edited last, reset by every other action.
• APIs: useReducer, useCallback, useEffect, KeyboardEvent.

Tests

1. renders the initial notes
2. disables undo and redo on load
3. adds a note and clears the input
4. enables undo after a change and disables it again after undoing
5. redoes an undone change
6. undoes a deletion and restores the note
7. undoes a toggle and restores the previous state
8. undoes an edit and restores the previous text
9. collapses continuous edits to one note into a single undo step
10. ignores an edit that does not change the text
11. does not push history when adding an empty note
12. does not push history when adding a whitespace-only note
13. undoes with Ctrl+Z
14. undoes with Cmd+Z
15. redoes with Shift+Ctrl+Z
16. does nothing when undo is pressed with no history
17. does nothing when redo is pressed with no future
18. reports the available undo and redo steps
19. keeps note identifiers unique after undo and redo
20. clears the redo stack when a new change is made