fix: library search UI fixes/tweaks (#10032)

* fix library icon height in command palette

* add clear button when no results

packages/excalidraw/components/InlineIcon.tsx

@@ -12,8 +12,9 @@ export const InlineIcon = ({
       className={className}
       style={{
         width: size,
+        height: "100%",
         margin: "0 0.5ex 0 0.5ex",
-        display: "inline-block",
+        display: "inline-flex",
         lineHeight: 0,
         verticalAlign: "middle",
         flex: "0 0 auto",

packages/excalidraw/components/LibraryMenuItems.tsx

@@ -34,6 +34,8 @@ import { TextField } from "./TextField";
 
 import { useDevice } from "./App";
 
+import { Button } from "./Button";
+
 import type { ExcalidrawLibraryIds } from "../data/types";
 
 import type {
@@ -319,7 +321,14 @@ export default function LibraryMenuItems({
       <div className="library-menu-items-container__header">
         {t("library.search.heading")}
         {!isLoading && (
-          <div className="library-menu-items-container__header__hint">
+          <div
+            className="library-menu-items-container__header__hint"
+            style={{ cursor: "pointer" }}
+            onPointerDown={(e) => e.preventDefault()}
+            onClick={(event) => {
+              setSearchInputValue("");
+            }}
+          >
             <kbd>esc</kbd> to clear
           </div>
         )}
@@ -341,6 +350,15 @@ export default function LibraryMenuItems({
           <div className="library-menu-items__no-items__hint">
             {t("library.search.noResults")}
           </div>
+          <Button
+            onPointerDown={(e) => e.preventDefault()}
+            onSelect={() => {
+              setSearchInputValue("");
+            }}
+            style={{ width: "auto", marginTop: "1rem" }}
+          >
+            {t("library.search.clearSearch")}
+          </Button>
         </div>
       )}
     </>

packages/excalidraw/locales/en.json

@@ -185,7 +185,8 @@
     "search": {
       "inputPlaceholder": "Search library",
       "heading": "Library matches",
-      "noResults": "No matching items found..."
+      "noResults": "No matching items found...",
+      "clearSearch": "Clear search"
     }
   },
   "search": {