add ListSearchInput component

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>

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)} />
+    );
+};

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,
     };
 };