Notes Capture 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 notes app, 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 note saved in the copy is 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 takes every word that starts with a hash and stands alone between spaces (letters, digits, underscores and hyphens, up to twenty characters), lower-cases it, keeps each once and removes it from the note's words. So "Ask Dana about the lease #errand #errand" saves "Ask Dana about the lease" with one tag. A line with tags and no words offers no Save row. A note already on the list (same words, any case) is refused in words instead of saved twice.

The chips show All and each tag with its count, one always chosen. The list shows the notes that carry the chosen tag, contain the words you typed and carry any tags you typed. Saving a note that the current chip would hide switches the chip back to All and says so on the status line, so a saved note is never invisible. The foot counts the notes shown, or the matches while you type.

The pin button on a row is a real button that doesn't choose the row and stays out of the tab order; Alt P (Option P on a Mac) does the same on the highlighted row, so the keyboard has its own route. Pinned notes sit in the Pinned group above Recent, and the status line says what was pinned. With nothing highlighted, Alt P says to move to a note first.

All of it. The notes are state in the block, the days are fixed text and the status line says nothing is saved. In your app load START from your store, write save and pin through to it, and set day from the note's timestamp.

Yes. Type to capture or search, the arrow keys move through the rows, Enter saves or opens, Alt P pins, and Escape closes the menu with focus on the field. Tab reaches the tag chips, which scroll sideways on a phone. Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself.