feat(shell): make search a button and a modal where searching applies
The phone's top bar is about to go, and the search box is the one thing in it that is an action rather than chrome. It becomes a button in the row that already says which page you are on, opening a wa-dialog with the real search box in it. Three decisions worth the words. **A wa-dialog, and that is a mechanism rather than a taste.** wa-popup renders `<div popover="manual">` and feature-detects the Popover API, falling back to `strategy: "fixed"` where there is none -- which is Chrome 113, the reference device, since `popover` is Chrome 114. And `position: fixed` escapes ancestor overflow but not `contain: paint`, which `.main-panel` carries, so a popup-shaped search panel opened from a view's header is structurally clipped on that device. `<dialog>` / `showModal()` is Chrome 37 and uses the real top layer. No tier here can see the difference -- CI's Chromium and WebKit both have the Popover API -- so the component test asserts the *mechanism*, a native `<dialog>` in the tree, rather than the symptom. **An element, not a PageAction.** Two of the seven searchable views are detail views with no page-header; they filter on the term and say so in their own headers. Declaring search as an action would mean seven hosts each writing it out, which is a second list of searchable views, and it would put a phone mode for actions inside page-header, which that component documents its refusal to grow. search-store's own map is the condition, asked by one component placed three times. **The modal carries the real search-bar**, so there is still one debounce, one clear button and one view-scoped placeholder. Escape closes it and *keeps* the term -- the input treats Escape as "clear the search", which is right in a header where the box stays on screen and wrong in a surface whose dismissal would then discard the search.
This commit is contained in:
@@ -124,6 +124,19 @@ export const ICON_DOWNLOADING = 'download';
|
||||
*/
|
||||
export const ICON_MORE_ACTIONS = 'ellipsis';
|
||||
|
||||
/**
|
||||
* Look for something.
|
||||
*
|
||||
* Deliberately **not** governed by the sweep in
|
||||
* `icon-language.test.ts`: `magnifying-glass` has only ever meant this,
|
||||
* in the header box and in Explore's own catalog search alike, so
|
||||
* governing it would force a rename on two call sites that are already
|
||||
* right. It is written down because #57 gave the meaning a *button* as
|
||||
* well as a box, and a second surface for the same verb is exactly the
|
||||
* point at which two spellings start.
|
||||
*/
|
||||
export const ICON_SEARCH = 'magnifying-glass';
|
||||
|
||||
/**
|
||||
* Take this away.
|
||||
*
|
||||
|
||||
Reference in New Issue
Block a user