Task List Command Menu Block for React

So you can see it without a click. On load the menu is the Command drawn inline over a picture of the Today list, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so a task you ticked in the copy is ticked in the dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.

readQuery looks for !1, !2 or !3 standing alone between spaces, takes the digit as the priority and removes the token from the title, so "Pay invoice !1" adds "Pay invoice" as High. Without a token a task is Medium. The same words search the list, with the token left out. Active tasks sort by priority, and a task already on the list (same words, any case) is refused in words instead of added twice.

The field is where you type the task, and a title has spaces in it. While it is empty there is nothing to protect, so Space ticks the highlighted task; the hint in the foot shows only then. Enter always works: on the Add row it adds, on a task it ticks. With nothing highlighted, Space says so on the status line instead of guessing.

Active shows the tasks still to do, Done the ticked ones (struck through), and All both groups. The foot counts the tasks still to do whatever the filter says, and the matches while you type, and it is spoken a moment after typing stops. Filtering to Done with nothing ticked shows an empty state that says what to do, in the same shell, so nothing around it moves.

All of it. The tasks are state in the block and the status line says that nothing is saved. In your app load START from your store, write tick and add through to it, and keep the optimistic update the block already does.

Yes. Type to add or search, the arrow keys move through the rows, Enter adds or ticks, Space ticks in an empty field, and Escape closes the menu with focus back on the header's field; Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. A drawn box stands for the checkbox, and each row says "to do" or "done" after its title for a screen reader. The rows are options of a cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself.