Canvas: Add search functionality to resources component
- Add search input field at the top of resources panel
- Filter categories and items based on search value in real time
- Hide empty categories when no matching items found
- Use memoized filtering for performance optimization
Change-Id: I3c4d46e54a1100ad14be0b73f015042f2bdef434
diff --git a/apps/canvas/front/src/components/resources.tsx b/apps/canvas/front/src/components/resources.tsx
index 3a5b334..cdd58c5 100644
--- a/apps/canvas/front/src/components/resources.tsx
+++ b/apps/canvas/front/src/components/resources.tsx
@@ -1,6 +1,7 @@
import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
import { v4 as uuidv4 } from "uuid";
-import { useCallback, useState } from "react";
+import { useCallback, useState, useMemo } from "react";
import { Accordion, AccordionTrigger } from "./ui/accordion";
import { AccordionContent, AccordionItem } from "@radix-ui/react-accordion";
import { AppState, useCategories, useMode, useProjectId, useStateStore } from "@/lib/state";
@@ -36,11 +37,36 @@
);
const [open, setOpen] = useState<string[]>(categories.map((c) => c.title));
+ const [searchValue, setSearchValue] = useState<string>("");
+
+ // Filter categories based on search value
+ const filteredCategories = useMemo(() => {
+ if (!searchValue.trim()) {
+ return categories;
+ }
+
+ const searchLower = searchValue.toLowerCase();
+ return categories
+ .map((category) => ({
+ ...category,
+ items: category.items.filter((item) => item.title.toLowerCase().includes(searchLower)),
+ }))
+ .filter((category) => category.items.length > 0); // Remove empty categories
+ }, [categories, searchValue]);
return (
<>
+ <div className="px-3 pb-3 mt-2">
+ <Input
+ type="text"
+ placeholder="Search resources..."
+ value={searchValue}
+ onChange={(e) => setSearchValue(e.target.value)}
+ className="w-full"
+ />
+ </div>
<Accordion type="multiple" value={open} onValueChange={(v) => setOpen(v)}>
- {categories.map((c) => (
+ {filteredCategories.map((c) => (
<AccordionItem key={c.title} value={c.title} className={"px-3" + (c.active ? " bg-amber-100" : "")}>
<AccordionTrigger>{c.title}</AccordionTrigger>
<AccordionContent>