diff --git a/meshexplorer/src/app/(app)/search/page.tsx b/meshexplorer/src/app/(app)/search/page.tsx
index ac58953..a1bf7d6 100644
--- a/meshexplorer/src/app/(app)/search/page.tsx
+++ b/meshexplorer/src/app/(app)/search/page.tsx
@@ -1,7 +1,7 @@
"use client";
import { useConfig } from '@/components/ConfigContext';
-import { useSearchQuery } from '@/hooks/useQueryParams';
+import { useQueryStates, parseAsString, parseAsInteger, parseAsBoolean } from 'nuqs';
import { useMeshcoreSearch } from '@/hooks/useMeshcoreSearch';
import SearchInput from '@/components/SearchInput';
import SearchResults from '@/components/SearchResults';
@@ -12,7 +12,12 @@ import { ChevronDownIcon } from '@heroicons/react/24/outline';
function SearchPageContent() {
const { config } = useConfig();
- const { query, setQuery, setLimit, setExact, setIsRepeater } = useSearchQuery();
+ const [query, setQuery] = useQueryStates({
+ q: parseAsString.withDefault(''),
+ limit: parseAsInteger.withDefault(50),
+ exact: parseAsBoolean.withDefault(false),
+ is_repeater: parseAsBoolean.withDefault(false),
+ });
const [showFilters, setShowFilters] = useState(false);
// Always use config values for region and lastSeen
@@ -41,7 +46,7 @@ function SearchPageContent() {
};
const handleLimitChange = (limit: number) => {
- setLimit(limit);
+ setQuery({ limit });
};
return (
@@ -61,7 +66,7 @@ function SearchPageContent() {
setQuery({ q })}
placeholder="Search by node name or public key..."
autoFocus
/>
@@ -138,7 +143,7 @@ function SearchPageContent() {
type="checkbox"
id="exact-match"
checked={query.exact}
- onChange={(e) => setExact(e.target.checked)}
+ onChange={(e) => setQuery({ exact: e.target.checked })}
className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
/>