search input touchups

Author: jjspace

packages/sandcastle/src/Gallery.css

@@ -16,6 +16,28 @@
     h2 {
       font-size: large;
     }
+
+    .search-input {
+      /* Button width + padding on each side of it */
+      padding-inline-end: calc(16px + 2 * 4px);
+    }
+
+    .clear-btn {
+      position: absolute;
+      right: 4px;
+      padding: 2px;
+      min-block-size: unset;
+
+      svg {
+        width: 12px;
+        height: 12px;
+      }
+    }
+
+    .tag-select {
+      /* This helps prevent needing to resize when tags load */
+      min-width: 140px;
+    }
   }
 
   .list {

packages/sandcastle/src/Gallery.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import "./Gallery.css";
-import { Badge, Button, IconButton, Select } from "@stratakit/bricks";
+import { Badge, IconButton, Select, Spinner, TextBox } from "@stratakit/bricks";
 import { getBaseUrl } from "./util/getBaseUrl";
-import { Input } from "@stratakit/bricks/TextBox";
 import classNames from "classnames";
-import { script } from "./icons";
+import { close, script, search } from "./icons";
+import { ProcessStatus } from "./util/ProcessStatus";
 
 const GALLERY_BASE = __GALLERY_BASE_URL__;
 
@@ -32,6 +32,7 @@ export function GallerySearch({
 
   const [searchTerm, setSearchTerm] = useState("");
   const [currentTag, setCurrentTag] = useState<string | "All">("All");
+  const [searchState, setSearchState] = useState<ProcessStatus>("NOT_STARTED");
 
   const requestId = useRef<number>(0);
 
@@ -40,9 +41,12 @@ export function GallerySearch({
       if (!pagefind.current) {
         return;
       }
+
+      setSearchState("IN_PROGRESS");
       const searchString = searchTerm;
       if (!searchString || searchString === "") {
         setSearchResults(null);
+        setSearchState("COMPLETE");
         return;
       }
       const thisRequestId = ++requestId.current;
@@ -66,6 +70,7 @@ export function GallerySearch({
 
       if (thisRequestId === requestId.current) {
         setSearchResults(resultData);
+        setSearchState("COMPLETE");
       }
     }
 
@@ -104,35 +109,49 @@ export function GallerySearch({
 
   return (
     <>
-      {!!searchTerm && (
-        <Button
-          onClick={() => {
-            setSearchTerm("");
-            if (inputRef.current) {
-              inputRef.current.value = "";
+      {searchState === "IN_PROGRESS" && <Spinner />}
+      <TextBox.Root className="search-input">
+        <TextBox.Icon href={search} />
+        <TextBox.Input
+          ref={inputRef}
+          disabled={!pagefindLoaded}
+          onChange={(e) => {
+            if (debounceTimeout.current) {
+              clearInterval(debounceTimeout.current);
             }
+            const newSearchTerm = e.target.value;
+            pagefind.current?.preload(newSearchTerm);
+            if (newSearchTerm === "") {
+              // Instantly update for a more reactive feel when clearing the input
+              console.log("early clear");
+              setSearchTerm("");
+              return;
+            }
+            debounceTimeout.current = setTimeout(() => {
+              setSearchTerm(newSearchTerm);
+            }, 300);
           }}
-        >
-          Clear
-        </Button>
-      )}
-      <Input
-        ref={inputRef}
-        disabled={!pagefindLoaded}
-        onChange={(e) => {
-          if (debounceTimeout.current) {
-            clearInterval(debounceTimeout.current);
-          }
-          const newSearchTerm = e.target.value;
-          pagefind.current?.preload(newSearchTerm);
-          debounceTimeout.current = setTimeout(() => {
-            setSearchTerm(newSearchTerm);
-          }, 300);
-        }}
-        placeholder="Filter demos..."
-      />
+          placeholder="Search gallery"
+        />
+        {!!searchTerm && (
+          <IconButton
+            className="clear-btn"
+            icon={close}
+            label="Clear"
+            onClick={(e) => {
+              console.log(e);
+              setSearchTerm("");
+              if (inputRef.current) {
+                inputRef.current.value = "";
+                inputRef.current.focus();
+              }
+            }}
+          ></IconButton>
+        )}
+      </TextBox.Root>
       <Select.Root>
         <Select.HtmlSelect
+          className="tag-select"
           disabled={!pagefindLoaded}
           onChange={(e) => {
             setCurrentTag(e.target.value);

packages/sandcastle/src/icons.ts

@@ -12,6 +12,8 @@ import image from "@stratakit/icons/image.svg";
 import windowPopout from "@stratakit/icons/window-popout.svg";
 import play from "@stratakit/icons/play.svg";
 import textAlignLeft from "@stratakit/icons/text-align-left.svg";
+import search from "@stratakit/icons/search.svg";
+import close from "@stratakit/icons/close.svg";
 
 export {
   add,
@@ -28,4 +30,6 @@ export {
   windowPopout,
   play,
   textAlignLeft,
+  search,
+  close,
 };

packages/sandcastle/src/util/ProcessStatus.ts

@@ -0,0 +1,8 @@
+/**
+ * Set of states that typically apply to a variety of processes
+ */
+export type ProcessStatus =
+  | "NOT_STARTED"
+  | "IN_PROGRESS"
+  | "COMPLETE"
+  | "ERROR";