From d20aac66c4db925b52493658710acd5f18ac6a9c Mon Sep 17 00:00:00 2001
From: Igor Monadical <igor@monadical.com>
Date: Mon, 10 Nov 2025 14:18:41 -0500
Subject: [PATCH] ui search pagination 2+page re-search fix (#714)

Co-authored-by: Igor Loskutov <igor.loskutoff@gmail.com>
---
 www/app/(app)/browse/page.tsx | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/www/app/(app)/browse/page.tsx b/www/app/(app)/browse/page.tsx
index 8523650e..05d8d5da 100644
--- a/www/app/(app)/browse/page.tsx
+++ b/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,
-    source_kind: urlSourceKind || undefined,
+    ...searchFilters.extras,
   });
 
   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);