Allow clearing search field

renderer/src/styles/search.css

@@ -24,4 +24,18 @@
 .bd-search-wrapper > svg {
     margin-right: 2px;
     fill: var(--interactive-normal);
+}
+
+.bd-search-wrapper > .bd-button {
+    margin-right: 2px;
+    background: none;
+    padding: 0;
+}
+
+.bd-search-wrapper > .bd-button > svg .fill {
+    fill: var(--interactive-normal);
+}
+
+.bd-search-wrapper > .bd-button:hover > svg .fill {
+    fill: var(--interactive-hover);
 }

renderer/src/ui/settings/components/search.jsx

@@ -1,4 +1,5 @@
 import React from "@modules/react";
+import Close from "@ui/icons/close";
 import SearchIcon from "@ui/icons/search";
 
 const {useState, useEffect, useCallback, useRef} = React;
@@ -19,9 +20,15 @@ export default function Search({onChange, className, onKeyDown, placeholder}) {
         setValue(e.target.value);
     }, [onChange]);
 
+    const reset = useCallback(() => {
+        onChange?.({target: {value: ""}});
+        setValue("");
+    }, [onChange]);
+
     return <div className={"bd-search-wrapper" + (className ? ` ${className}` : "")}>
                 <input onChange={change} onKeyDown={onKeyDown} type="text" className="bd-search" placeholder={placeholder} maxLength="50" value={value} ref={input}/>
-                <SearchIcon />
+                {!value && <SearchIcon />}
+                {value && <button className="bd-button" onClick={reset}><Close size="16px" /></button>}
             </div>;
 
 }