Search Command 404 Error Block for React

Nothing leaves the page. Pressing Enter on a row, or clicking it, writes "Opening" and the page's title in a polite status message and says nothing navigated; the field and the list stay as they were. To wire it for real, go to the page's path when a row is chosen. Do it in each row's onSelect. Link the rows (and the homepage button) to real addresses too, so they also work without script.

The block draws the page; the status comes from your server. Answer the request with a real 404 (your framework's not-found handling does this), or search engines will treat the page as a normal one and may keep indexing the dead address. The address in the sentence is typed in the file (MISSING): in your app, read it from the request.

It looks for what you typed anywhere in a page's title, ignoring case, so "knit" finds "Cable-knit beanie". With nothing typed it shows the five popular pages under one heading; a group with no matches disappears; with no matches at all the list says which word found nothing. The list keeps its height, so nothing under it moves while you type, and the count is read out politely about half a second after the last keystroke, never per letter. Escape clears the field and brings the popular pages back.

Edit PAGES. Each page has a group (Patterns or Guides), a label, a path, a popular flag and a value that is unique. The pages flagged popular are the five shown before anything is typed, and they are listed under their own heading. For a large site, filter on your server or search index instead and pass the first few results to the list.

No. Some command libraries focus their field as they mount, which would pull a page's focus and scroll position away from the reader, so the block hands focus back a moment later unless the reader has already moved. Click the field or tab to it and it works as any search field does.

The pages' paths and the Escape hint are hidden below the small breakpoint, the panel keeps its height and the list scrolls inside it, and the homepage button spans the width and is on the first screen. Nothing scrolls sideways at 320 pixels.