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" />