No Saved Searches Empty State Block for Vue

The name, the query and the number of filters you kept go into the page's state and a row appears in the card's list; the field clears. The Daily digest switch is only a switch: nothing is scheduled and no mail is ever sent. Reload and the list is empty, and Start over empties it without a reload. To wire it for real, send the query, the filters and the name to your API where the code says so, and list what comes back.

They are the filters of the search on screen, Owner: Me and Updated: This week. Each is a checkbox drawn as a pill: pressed, it is kept in the saved search; turned off, it is left out, and the row says "unpaid invoices, 1 filter". A check mark shows on a kept chip, so the state is not only a colour.

On load the card is drawn in place on the stage so the page does not trap or move focus. The Saved searches button opens the real, non-modal Popover (Escape closes it and focus goes back to the button) and the in-place copy stays closed until a reload. Both share one form and the page's state, so what you typed in place is there in the real card. In your app keep the Popover and delete the in-place copy.

Tab reaches the two chips, the name field, Save search and each row's switch, which is named "Daily digest for" the search. Save search with an empty name says so and puts focus back in the field. The results behind the card are drawn and hidden from assistive technology; the polite status line says what was saved.

The card has a row for each and the demo keeps two, so the empty list and the full one are the same height. A third press says so ("The demo keeps two. Start over.") and Start over empties the list. With your own data, let the list grow.

The card docks to the foot of the stage and scrolls inside itself, with the search and the name field at the top so you can type at once; the description folds away. The real popover keeps the catalog's phone layout.