feat: search functionality

packages/website-ue/src/components/AvatarControls/index.css

@@ -0,0 +1,7 @@
+.avatar-controls {
+  display: flex;
+
+  .search {
+    flex: 1;
+  }
+}

packages/website-ue/src/components/AvatarControls/index.tsx

@@ -1,14 +1,32 @@
 import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import { useRef } from "react";
 import { useStrings } from "../../hooks/useStrings";
+import { Avatars } from "../../stores/avatars";
 import { TextField } from "../TextField";
 import "./index.css";
 
 export function AvatarControls() {
   const strings = useStrings();
+  const search = useRef<HTMLInputElement>(null);
 
   return (
-    <div>
-      <TextField placeholder={strings.avatars.search}>
+    <div className="avatar-controls">
+      <TextField
+        ref={search}
+        className="search"
+        placeholder={strings.avatars.search}
+        onChange={(event) => {
+          const trimmed = event.target.value.trim();
+
+          Avatars.mutate((draft) => {
+            if (trimmed.length === 0) {
+              draft.search = null;
+            } else {
+              draft.search = trimmed;
+            }
+          });
+        }}
+      >
         <MagnifyingGlassIcon />
       </TextField>
     </div>