many changes

src/lib/components/library/GenericMediaListPage.svelte

@@ -30,7 +30,6 @@
     sortOptions: Array<{ key: string; label: string }>; // Jellyfin field names
     defaultSort: string; // Jellyfin field name (e.g., "SortName")
     displayComponent: "grid" | "tracklist"; // Which component to use
-    searchFields: string[]; // Which fields to search in: ["name", "artists"], etc.
   }
 
   interface Props {
@@ -42,8 +41,10 @@
   let items = $state<MediaItem[]>([]);
   let loading = $state(true);
   let searchQuery = $state("");
+  let debouncedSearchQuery = $state("");
   let sortBy = $state<string>(config.defaultSort);
   let sortOrder = $state<"Ascending" | "Descending">("Ascending");
+  let searchTimeout: ReturnType<typeof setTimeout> | null = null;
 
   const { markLoaded } = useServerReachabilityReload(async () => {
     await loadItems();
@@ -65,8 +66,8 @@
       const repo = auth.getRepository();
 
       // Use backend search if search query is provided, otherwise use getItems with sort
-      if (searchQuery.trim()) {
-        const result = await repo.search(searchQuery, {
+      if (debouncedSearchQuery.trim()) {
+        const result = await repo.search(debouncedSearchQuery, {
           includeItemTypes: [config.itemType],
           limit: 10000,
         });
@@ -90,9 +91,18 @@
 
   function handleSearch(query: string) {
     searchQuery = query;
-    loadItems();
   }
 
+  // Debounce search input (300ms delay)
+  $effect(() => {
+    if (searchTimeout) clearTimeout(searchTimeout);
+
+    searchTimeout = setTimeout(() => {
+      debouncedSearchQuery = searchQuery;
+      loadItems();
+    }, 300);
+  });
+
   function handleSort(newSort: string) {
     sortBy = newSort;
     loadItems();