From 1a5b771ae04d220ba9cf33a2bc6253c216b39db2 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Mon, 13 Oct 2025 18:44:29 -0700
Subject: [PATCH] add ListSearchInput component

---
 .../features/albums/components/album-list-header.tsx   |  4 ++--
 .../features/shared/components/list-search-input.tsx   | 10 ++++++++++
 .../features/shared/hooks/use-search-term-filter.ts    |  9 ++++-----
 3 files changed, 16 insertions(+), 7 deletions(-)
 create mode 100644 src/renderer/features/shared/components/list-search-input.tsx

diff --git a/src/renderer/features/albums/components/album-list-header.tsx b/src/renderer/features/albums/components/album-list-header.tsx
index 4a5cfa3c7..db3a82a88 100644
--- a/src/renderer/features/albums/components/album-list-header.tsx
+++ b/src/renderer/features/albums/components/album-list-header.tsx
@@ -5,7 +5,7 @@ import { useListContext } from '/@/renderer/context/list-context';
 import { AlbumListHeaderFilters } from '/@/renderer/features/albums/components/album-list-header-filters';
 import { FilterBar } from '/@/renderer/features/shared/components/filter-bar';
 import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
-import { SearchInput } from '/@/renderer/features/shared/components/search-input';
+import { ListSearchInput } from '/@/renderer/features/shared/components/list-search-input';
 import { Group } from '/@/shared/components/group/group';
 import { Stack } from '/@/shared/components/stack/stack';
 
@@ -30,7 +30,7 @@ export const AlbumListHeader = ({ title }: AlbumListHeaderProps) => {
                     </LibraryHeaderBar.Badge>
                 </LibraryHeaderBar>
                 <Group>
-                    <SearchInput />
+                    <ListSearchInput />
                 </Group>
             </PageHeader>
             <FilterBar>
diff --git a/src/renderer/features/shared/components/list-search-input.tsx b/src/renderer/features/shared/components/list-search-input.tsx
new file mode 100644
index 000000000..8d2645abc
--- /dev/null
+++ b/src/renderer/features/shared/components/list-search-input.tsx
@@ -0,0 +1,10 @@
+import { SearchInput } from '/@/renderer/features/shared/components/search-input';
+import { useSearchTermFilter } from '/@/renderer/features/shared/hooks/use-search-term-filter';
+
+export const ListSearchInput = () => {
+    const { searchTerm, setSearchTerm } = useSearchTermFilter();
+
+    return (
+        <SearchInput defaultValue={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />
+    );
+};
diff --git a/src/renderer/features/shared/hooks/use-search-term-filter.ts b/src/renderer/features/shared/hooks/use-search-term-filter.ts
index 9392a180e..13416879c 100644
--- a/src/renderer/features/shared/hooks/use-search-term-filter.ts
+++ b/src/renderer/features/shared/hooks/use-search-term-filter.ts
@@ -1,4 +1,4 @@
-import { useDebouncedValue } from '@mantine/hooks';
+import { useDebouncedCallback } from '@mantine/hooks';
 import { parseAsString, useQueryState } from 'nuqs';
 
 import { FILTER_KEYS } from '/@/renderer/features/shared/utils';
@@ -9,11 +9,10 @@ export const useSearchTermFilter = (defaultValue?: string) => {
         defaultValue ? parseAsString.withDefault(defaultValue) : parseAsString,
     );
 
-    const [debouncedSearchTerm] = useDebouncedValue(searchTerm, 300);
+    const debouncedSetSearchTerm = useDebouncedCallback(setSearchTerm, 300);
 
     return {
-        [FILTER_KEYS.SHARED.SEARCH_TERM]: debouncedSearchTerm ?? undefined,
-        rawSearchTerm: searchTerm ?? undefined,
-        setSearchTerm,
+        [FILTER_KEYS.SHARED.SEARCH_TERM]: searchTerm ?? undefined,
+        setSearchTerm: debouncedSetSearchTerm,
     };
 };