feat(ui): add search clear button

Search now exposes a small icon-only clear button whenever a query is present.
Clicking it clears the term in one step and returns focus to the input so users
can immediately type a replacement.

The button uses the existing topbar styling language and a compact circled-x
icon alongside the keyboard hint.

Test Plan:
- git diff --check

Refs: user redesign nitpick about one-click search clearing
This commit is contained in:
2026-05-19 20:48:46 +02:00
parent a6130fc687
commit 50698f9a7d
3 changed files with 35 additions and 0 deletions
@@ -49,6 +49,19 @@ export const SearchField = ({ value, onChange }: Props) => {
}}
spellCheck={false}
/>
{value && (
<button
className="search-clear"
type="button"
aria-label="Clear search"
onClick={() => {
onChange('');
inputRef.current?.focus();
}}
>
<Icon.clearCircle />
</button>
)}
<span className="search-kbd">/</span>
</div>
);