fix(web): fix query getting rest when bookmark preview is closed. fixes #1521

4 files changed, 34 insertions, 17 deletions

diff --git a/apps/web/app/dashboard/search/page.tsx b/apps/web/app/dashboard/search/page.tsx
index c3542a88..930ad6bb 100644
--- a/apps/web/app/dashboard/search/page.tsx
+++ b/apps/web/app/dashboard/search/page.tsx
@@ -4,12 +4,15 @@ import { Suspense, useEffect } from "react";
 import BookmarksGrid from "@/components/dashboard/bookmarks/BookmarksGrid";
 import { FullPageSpinner } from "@/components/ui/full-page-spinner";
 import { useBookmarkSearch } from "@/lib/hooks/bookmark-search";
+import { useInSearchPageStore } from "@/lib/store/useInSearchPageStore";
 import { useSortOrderStore } from "@/lib/store/useSortOrderStore";
 
 function SearchComp() {
   const { data, hasNextPage, fetchNextPage, isFetchingNextPage } =
     useBookmarkSearch();
 
+  const { setInSearchPage } = useInSearchPageStore();
+
   const { setSortOrder } = useSortOrderStore();
 
   useEffect(() => {
@@ -17,6 +20,11 @@ function SearchComp() {
     setSortOrder("relevance");
   }, []);
 
+  useEffect(() => {
+    setInSearchPage(true);
+    return () => setInSearchPage(false);
+  }, [setInSearchPage]);
+
   return (
     <div className="flex flex-col gap-3">
       {data ? (
diff --git a/apps/web/components/dashboard/SortOrderToggle.tsx b/apps/web/components/dashboard/SortOrderToggle.tsx
index ba3385ac..a5a10541 100644
--- a/apps/web/components/dashboard/SortOrderToggle.tsx
+++ b/apps/web/components/dashboard/SortOrderToggle.tsx
@@ -8,14 +8,14 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { useIsSearchPage } from "@/lib/hooks/bookmark-search";
 import { useTranslation } from "@/lib/i18n/client";
+import { useInSearchPageStore } from "@/lib/store/useInSearchPageStore";
 import { useSortOrderStore } from "@/lib/store/useSortOrderStore";
 import { Check, ListFilter, SortAsc, SortDesc } from "lucide-react";
 
 export default function SortOrderToggle() {
   const { t } = useTranslation();
-  const isInSearchPage = useIsSearchPage();
+  const isInSearchPage = useInSearchPageStore();
 
   const { sortOrder: currentSort, setSortOrder } = useSortOrderStore();
 
diff --git a/apps/web/lib/hooks/bookmark-search.ts b/apps/web/lib/hooks/bookmark-search.ts
index b6af94ee..0902af44 100644
--- a/apps/web/lib/hooks/bookmark-search.ts
+++ b/apps/web/lib/hooks/bookmark-search.ts
@@ -1,15 +1,12 @@
-import { useEffect, useMemo, useState } from "react";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useMemo, useRef } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import { useSortOrderStore } from "@/lib/store/useSortOrderStore";
 import { api } from "@/lib/trpc";
 import { keepPreviousData } from "@tanstack/react-query";
 
 import { parseSearchQuery } from "@karakeep/shared/searchQueryParser";
 
-export function useIsSearchPage() {
-  const pathname = usePathname();
-  return pathname.startsWith("/dashboard/search");
-}
+import { useInSearchPageStore } from "../store/useInSearchPageStore";
 
 function useSearchQuery() {
   const searchParams = useSearchParams();
@@ -22,31 +19,30 @@ function useSearchQuery() {
 export function useDoBookmarkSearch() {
   const router = useRouter();
   const { searchQuery, parsedSearchQuery } = useSearchQuery();
-  const isInSearchPage = useIsSearchPage();
-  const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | undefined>();
+  const isInSearchPage = useInSearchPageStore((val) => val.inSearchPage);
+  const timeoutId = useRef<NodeJS.Timeout>(null);
 
   useEffect(() => {
     return () => {
-      if (!timeoutId) {
+      if (!timeoutId.current) {
         return;
       }
-      clearTimeout(timeoutId);
+      clearTimeout(timeoutId.current);
     };
   }, [timeoutId]);
 
   const doSearch = (val: string) => {
-    setTimeoutId(undefined);
+    timeoutId.current = null;
     router.replace(`/dashboard/search?q=${encodeURIComponent(val)}`);
   };
 
   const debounceSearch = (val: string) => {
-    if (timeoutId) {
-      clearTimeout(timeoutId);
+    if (timeoutId.current) {
+      clearTimeout(timeoutId.current);
     }
-    const id = setTimeout(() => {
+    timeoutId.current = setTimeout(() => {
       doSearch(val);
     }, 10);
-    setTimeoutId(id);
   };
 
   return {
diff --git a/apps/web/lib/store/useInSearchPageStore.ts b/apps/web/lib/store/useInSearchPageStore.ts
new file mode 100644
index 00000000..c433539d
--- /dev/null
+++ b/apps/web/lib/store/useInSearchPageStore.ts
@@ -0,0 +1,13 @@
+import { create } from "zustand";
+
+interface InSearchPageState {
+  inSearchPage: boolean;
+  setInSearchPage: (inSearchPage: boolean) => void;
+}
+
+export const useInSearchPageStore = create<InSearchPageState>((set) => ({
+  inSearchPage: false,
+  setInSearchPage: (inSearchPage) => {
+    set({ inSearchPage });
+  },
+}));