ui search pagination 2+page re-search fix (#714)

Co-authored-by: Igor Loskutov <igor.loskutoff@gmail.com>

www/app/(app)/browse/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import {
   Flex,
   Spinner,
@@ -235,15 +235,26 @@ export default function TranscriptBrowser() {
 
   const pageSize = 20;
 
+  // must be json-able
+  const searchFilters = useMemo(
+    () => ({
+      q: urlSearchQuery,
+      extras: {
+        room_id: urlRoomId || undefined,
+        source_kind: urlSourceKind || undefined,
+      },
+    }),
+    [urlSearchQuery, urlRoomId, urlSourceKind],
+  );
+
   const {
     data: searchData,
     isLoading: searchLoading,
     refetch: reloadSearch,
-  } = useTranscriptsSearch(urlSearchQuery, {
+  } = useTranscriptsSearch(searchFilters.q, {
     limit: pageSize,
     offset: paginationPageTo0Based(page) * pageSize,
-    room_id: urlRoomId || undefined,
+    ...searchFilters.extras,
-    source_kind: urlSourceKind || undefined,
   });
 
   const results = searchData?.results || [];
@@ -255,6 +266,12 @@ export default function TranscriptBrowser() {
 
   const totalPages = getTotalPages(totalResults, pageSize);
 
+  // reset pagination when search results change (detected by total change; good enough approximation)
+  useEffect(() => {
+    // operation is idempotent
+    setPage(FIRST_PAGE).then(() => {});
+  }, [JSON.stringify(searchFilters)]);
+
   const userName = useUserName();
   const [deletionLoading, setDeletionLoading] = useState(false);
   const cancelRef = React.useRef(null);