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
@@ -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;