feat: enhance API response handling and add new components for module management

apps/web/app/[locale]/home/[account]/modules/[moduleId]/module-search-bar.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { useCallback } from 'react';
+
+import { useRouter, useSearchParams, usePathname } from 'next/navigation';
+
+import { ModuleSearch } from '@kit/module-builder/components';
+
+import { encodeFilters, decodeFilters } from './_lib/filter-params';
+
+interface FieldOption {
+  name: string;
+  display_name: string;
+  show_in_filter: boolean;
+  show_in_search: boolean;
+}
+
+interface ModuleSearchBarProps {
+  fields: FieldOption[];
+}
+
+export function ModuleSearchBar({ fields }: ModuleSearchBarProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const currentSearch = searchParams.get('q') ?? '';
+  const currentFilters = decodeFilters(searchParams.get('f') ?? '');
+
+  const updateParams = useCallback(
+    (updates: Record<string, string | null>) => {
+      const params = new URLSearchParams(searchParams.toString());
+      // Reset to page 1 when search/filters change
+      params.delete('page');
+      for (const [key, value] of Object.entries(updates)) {
+        if (value === null || value === '') {
+          params.delete(key);
+        } else {
+          params.set(key, value);
+        }
+      }
+      router.push(`${pathname}?${params.toString()}`);
+    },
+    [router, pathname, searchParams],
+  );
+
+  return (
+    <ModuleSearch
+      fields={fields}
+      initialSearch={currentSearch}
+      initialFilters={currentFilters}
+      onSearch={(search) => updateParams({ q: search || null })}
+      onFilter={(filters) =>
+        updateParams({ f: filters.length > 0 ? encodeFilters(filters) : null })
+      }
+    />
+  );
+}