feat: add brain search bar

frontend/app/brains-management/components/BrainSearchBar/BrainSearchBar.tsx

@@ -0,0 +1,24 @@
+import Field from "@/lib/components/ui/Field";
+
+type BrainSearchBarProps = {
+  searchQuery: string;
+  setSearchQuery: (searchQuery: string) => void;
+};
+
+export const BrainSearchBar = ({
+  searchQuery,
+  setSearchQuery,
+}: BrainSearchBarProps): JSX.Element => {
+  return (
+    <div className="m-2">
+      <Field
+        name="brainsearch"
+        placeholder="Search for a brain"
+        autoFocus
+        autoComplete="off"
+        value={searchQuery}
+        onChange={(e) => setSearchQuery(e.target.value)}
+      />
+    </div>
+  );
+};

frontend/app/brains-management/components/BrainsList.tsx

@@ -2,15 +2,15 @@
 import { motion, MotionConfig } from "framer-motion";
 import { MdChevronRight } from "react-icons/md";
 
-import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
 import { cn } from "@/lib/utils";
 
 import { BrainListItem } from "./BrainListItem/BrainListItem";
+import { BrainSearchBar } from "./BrainSearchBar/BrainSearchBar";
 import { useBrainsList } from "../hooks/useBrainsList";
 
 export const BrainsList = (): JSX.Element => {
-  const { allBrains } = useBrainContext();
-  const { open, setOpen } = useBrainsList();
+  const { open, setOpen, searchQuery, setSearchQuery, brains } =
+    useBrainsList();
 
   return (
     <MotionConfig transition={{ massq: 1, damping: 10 }}>
@@ -39,11 +39,15 @@ export const BrainsList = (): JSX.Element => {
           data-testid="chats-list"
         >
           <div className="flex flex-col flex-1">
+            <BrainSearchBar
+              searchQuery={searchQuery}
+              setSearchQuery={setSearchQuery}
+            />
             <div
               data-testid="chats-list-items"
               className="flex-1 overflow-auto scrollbar h-full"
             >
-              {allBrains.map((brain) => (
+              {brains.map((brain) => (
                 <BrainListItem brain={brain} key={brain.id} />
               ))}
             </div>

frontend/app/brains-management/hooks/useBrainsList.ts

@@ -1,12 +1,15 @@
 import { usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
 
+import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
 import { useDevice } from "@/lib/hooks/useDevice";
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const useBrainsList = () => {
   const { isMobile } = useDevice();
   const [open, setOpen] = useState(!isMobile);
+  const [searchQuery, setSearchQuery] = useState("");
+  const { allBrains } = useBrainContext();
 
   const pathname = usePathname();
 
@@ -14,8 +17,19 @@ export const useBrainsList = () => {
     setOpen(!isMobile);
   }, [isMobile, pathname]);
 
+  const brains = allBrains.filter((brain) => {
+    const query = searchQuery.toLowerCase();
+    const name = brain.name.toLowerCase();
+
+    return name.includes(query);
+  });
+
   return {
     open,
     setOpen,
+    searchQuery,
+    setSearchQuery,
+
+    brains,
   };
 };