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 = { ), + clearCircle: (p: Props) => ( + + + + + ), check: (p: Props) => ( 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 && ( + + )} / ); 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;