From 90c8d7b7e8aaa963f0771336fb152fc62a64e87a Mon Sep 17 00:00:00 2001
From: mbeaulne <matt.beaulne@gmail.com>
Date: Mon, 23 Mar 2026 15:32:48 -0400
Subject: [PATCH] feat_favorites_filter

---
 .../FavoritesSection/FavoritesSection.tsx     | 47 +++++++++++++++++--
 1 file changed, 44 insertions(+), 3 deletions(-)

diff --git a/src/components/Home/FavoritesSection/FavoritesSection.tsx b/src/components/Home/FavoritesSection/FavoritesSection.tsx
index b37fd6cff..75114d38c 100644
--- a/src/components/Home/FavoritesSection/FavoritesSection.tsx
+++ b/src/components/Home/FavoritesSection/FavoritesSection.tsx
@@ -10,6 +10,8 @@ import {
 import { useState } from "react";
 
 import { Button } from "@/components/ui/button";
+import { Icon } from "@/components/ui/icon";
+import { Input } from "@/components/ui/input";
 import { InlineStack } from "@/components/ui/layout";
 import { Paragraph, Text } from "@/components/ui/typography";
 import { type FavoriteItem, useFavorites } from "@/hooks/useFavorites";
@@ -64,11 +66,21 @@ const FavoriteChip = ({ item }: { item: FavoriteItem }) => {
 export const FavoritesSection = () => {
   const { favorites } = useFavorites();
   const [page, setPage] = useState(0);
+  const [query, setQuery] = useState("");
 
-  const totalPages = Math.ceil(favorites.length / PAGE_SIZE);
-  // Reset to last valid page if favorites shrink (e.g. after removing items)
+  const filtered = query.trim()
+    ? favorites.filter((f) => {
+        const q = query.toLowerCase();
+        return (
+          f.id.toLowerCase().includes(q) || f.name.toLowerCase().includes(q)
+        );
+      })
+    : favorites;
+
+  const totalPages = Math.ceil(filtered.length / PAGE_SIZE);
+  // Reset to last valid page if filtered results shrink
   const safePage = Math.min(page, Math.max(0, totalPages - 1));
-  const paginated = favorites.slice(
+  const paginated = filtered.slice(
     safePage * PAGE_SIZE,
     (safePage + 1) * PAGE_SIZE,
   );
@@ -91,6 +103,35 @@ export const FavoritesSection = () => {
         </Paragraph>
       ) : (
         <div className="flex flex-col gap-2">
+          <div className="relative w-48">
+            <Icon
+              name="Search"
+              className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
+            />
+            <Input
+              placeholder="Search by name or ID..."
+              value={query}
+              onChange={(e) => {
+                setPage(0);
+                setQuery(e.target.value);
+              }}
+              className="pl-9 pr-8 w-full"
+            />
+            {query && (
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => {
+                  setPage(0);
+                  setQuery("");
+                }}
+                className="absolute right-2 top-1/2 -translate-y-1/2 size-6 text-muted-foreground hover:text-foreground"
+                aria-label="Clear search"
+              >
+                <Icon name="X" size="sm" />
+              </Button>
+            )}
+          </div>
           <div className="flex flex-wrap gap-2">
             {paginated.map((item) => (
               <FavoriteChip key={`${item.type}-${item.id}`} item={item} />