Search History Navbar Block for React

The history is recent in VideoSearch, seeded from START. To keep it, write the array to localStorage (or your account) whenever it changes and read it back as the initial state after mount, so the server and the browser render the same first frame. remember puts a search first without repeats and caps the list at KEPT, and remove drops one. Suggestions come from SUGGESTIONS; replace suggestionRows with your own source, fetched or local.

Press the X on its row: the row goes, the popup stays open and focus stays in the field. From the keyboard, move to the row with the arrow keys and press Shift and Delete; plain Backspace and Delete keep editing the text you typed, so nothing is lost by accident. The X button is skipped by Tab because the field already offers the same action, and a polite status line says "Removed" followed by the search, so a screen reader hears it. The field points to a hidden hint that names the shortcut.

The rows are rebuilt from the typed text on every change: a recent search or a suggestion stays when it holds the text, and a suggestion already in your history is not listed twice. Highlighting a row with the arrow keys never rewrites what you typed. Enter on a highlighted row picks it and fills the field; Enter on text that no row is highlighted for searches it, which puts it at the top of the history. When nothing matches, the popup says so.

The field is a combobox with an accessible name and the popup is a listbox of options in two labelled groups, Recent and Suggestions. The arrow keys move through the rows, Enter picks one and Escape closes the popup, leaving focus in the field. The field declares the "/" key with aria-keyshortcuts, and the key cap is hidden from screen readers because it's a hint, not a control. The search sits in a search landmark and Subscriptions in a nav named Main, marked as the current page. The popup behaves the same on every library, because it is built on the same combobox everywhere.

Below the md breakpoint the bar shows the wordmark, a search button and a menu button. The search button says whether the search is open and which landmark it controls; pressing it (or "/") replaces the bar with the field, which takes the keyboard, and turns the button into a close button in the same place. Escape closes the popup first and ends the search second, and focus returns to the search button. The menu button opens a sheet from the top whose header lines up with the bar, with Subscriptions and an Upload button; choosing a link closes it and Escape returns focus to the menu button. Nothing wraps at 320 pixels, and the popup is never wider than the screen.

Every link points at #: point them at your pages. Upload renders the link it's given with render, with nativeButton={false}.