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
@@ -67,6 +67,12 @@ export const Icon = {
<path d="m4 4 8 8M12 4l-8 8" />
</svg>
),
clearCircle: (p: Props) => (
<svg viewBox="0 0 16 16" width="14" height="14" strokeWidth={1.7} {...baseStroke} {...p}>
<circle cx="8" cy="8" r="5.5" />
<path d="m6 6 4 4M10 6l-4 4" />
</svg>
),
check: (p: Props) => (
<svg viewBox="0 0 16 16" width="12" height="12" strokeWidth={2} {...baseStroke} {...p}>
<path d="m3 8 3.5 3.5L13 5" />
@@ -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>
);
@@ -223,6 +223,22 @@
.search input::placeholder {
color: var(--t-3);
}
.search-clear {
display: inline-grid;
place-items: center;
width: 22px;
height: 22px;
padding: 0;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--t-3);
cursor: pointer;
}
.search-clear:hover {
color: var(--t-1);
background: rgba(255, 255, 255, 0.08);
}
.search-kbd {
display: inline-grid;
place-items: center;