From 50698f9a7d7b73f5f8fd54c8286ba8859a7f1670 Mon Sep 17 00:00:00 2001
From: ddidderr <ddidderr@paul.network>
Date: Tue, 19 May 2026 20:48:46 +0200
Subject: [PATCH] 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
---
 .../src/components/Icon.tsx                      |  6 ++++++
 .../src/components/topbar/SearchField.tsx        | 13 +++++++++++++
 .../src/styles/launcher.css                      | 16 ++++++++++++++++
 3 files changed, 35 insertions(+)

diff --git a/crates/lanspread-tauri-deno-ts/src/components/Icon.tsx b/crates/lanspread-tauri-deno-ts/src/components/Icon.tsx
index c2dede7..a8a6f7a 100644
--- a/crates/lanspread-tauri-deno-ts/src/components/Icon.tsx
+++ b/crates/lanspread-tauri-deno-ts/src/components/Icon.tsx
@@ -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" />
diff --git a/crates/lanspread-tauri-deno-ts/src/components/topbar/SearchField.tsx b/crates/lanspread-tauri-deno-ts/src/components/topbar/SearchField.tsx
index d93c05b..82336c0 100644
--- a/crates/lanspread-tauri-deno-ts/src/components/topbar/SearchField.tsx
+++ b/crates/lanspread-tauri-deno-ts/src/components/topbar/SearchField.tsx
@@ -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>
     );
diff --git a/crates/lanspread-tauri-deno-ts/src/styles/launcher.css b/crates/lanspread-tauri-deno-ts/src/styles/launcher.css
index 9424eed..1831b98 100644
--- a/crates/lanspread-tauri-deno-ts/src/styles/launcher.css
+++ b/crates/lanspread-tauri-deno-ts/src/styles/launcher.css
@@ -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;