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:
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user