web: reset search on navigate

apps/web/src/components/cached-router/index.tsx

@@ -20,6 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React, { useEffect, useRef } from "react";
 import { getHomeRoute, navigate, NavigationEvents } from "../../navigation";
 import { store as selectionStore } from "../../stores/selection-store";
+import { useStore as useSearchStore } from "../../stores/search-store";
 import useRoutes from "../../hooks/use-routes";
 import RouteContainer from "../route-container";
 import routes from "../../navigation/routes";
@@ -32,6 +33,7 @@ function CachedRouter() {
     hooks: {
       beforeNavigate: (location) => {
         selectionStore.toggleSelectionMode(false);
+        useSearchStore.getState().resetSearch();
         if (location === "/") {
           console.log("Redirecting to", getHomeRoute());
           navigate(getHomeRoute());

apps/web/src/components/navigation-menu/index.tsx

@@ -50,7 +50,12 @@ import {
   HamburgerMenu
 } from "../icons";
 import { SortableNavigationItem } from "./navigation-item";
-import { hardNavigate, hashNavigate, navigate } from "../../navigation";
+import {
+  getCurrentPath,
+  hardNavigate,
+  hashNavigate,
+  navigate
+} from "../../navigation";
 import { db } from "../../common/db";
 import { isMobile } from "../../hooks/use-mobile";
 import { useStore as useAppStore } from "../../stores/app-store";
@@ -63,6 +68,7 @@ import { useStore as useMonographStore } from "../../stores/monograph-store";
 import { useStore as useTrashStore } from "../../stores/trash-store";
 import { useStore as useNotebookStore } from "../../stores/notebook-store";
 import { useStore as useTagStore } from "../../stores/tag-store";
+import { useStore as useSearchStore } from "../../stores/search-store";
 import useLocation from "../../hooks/use-location";
 import { FlexScrollContainer } from "../scroll-container";
 import { ScopedThemeProvider } from "../theme-provider";
@@ -435,8 +441,6 @@ function RouteItem({
           : location.startsWith(item.path)
       }
       onClick={() => {
-        if (!isMobile() && location === item.path)
-          return useAppStore.getState().toggleListPane();
         navigateToRoute(item.path);
       }}
       menuItems={[
@@ -918,6 +922,10 @@ async function getSidebarItemsAsMenuItems(): Promise<MenuItem[]> {
 }
 
 function navigateToRoute(path: string) {
-  useAppStore.getState().toggleListPane(true);
+  if (!isMobile() && getCurrentPath() === path) {
+    if (useSearchStore.getState().isSearching)
+      return useSearchStore.getState().resetSearch();
+    return useAppStore.getState().toggleListPane();
+  }
   navigate(path);
 }

apps/web/src/components/route-container/index.tsx

@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { PropsWithChildren, useRef } from "react";
+import { PropsWithChildren, useEffect, useRef } from "react";
 import { Box } from "@theme-ui/components";
 import { Close, AddReminder } from "../icons";
 import { useStore as useSearchStore } from "../../stores/search-store";
@@ -62,10 +62,20 @@ function Header(props: RouteContainerProps) {
     [props.title]
   );
   const isMobile = useMobile();
-  // const isSearching = useSearchStore((store) => store.isSearching);
+  const isSearching = useSearchStore((store) => store.isSearching);
   const query = useSearchStore((store) => store.query);
   const inputRef = useRef<HTMLInputElement>(null);
 
+  useEffect(() => {
+    if (inputRef.current && inputRef.current.value !== query) {
+      inputRef.current.value = query || "";
+    }
+  }, [query]);
+
+  useEffect(() => {
+    if (isSearching) inputRef.current?.focus();
+  }, [isSearching]);
+
   return (
     <Box
       sx={{
@@ -82,7 +92,6 @@ function Header(props: RouteContainerProps) {
       <Field
         inputRef={inputRef}
         data-test-id="search-input"
-        autoFocus
         id="search"
         name="search"
         variant="clean"
@@ -123,11 +132,7 @@ function Header(props: RouteContainerProps) {
           250
         )}
         onKeyUp={(e) => {
-          if (e.key === "Escape")
-            useSearchStore.setState({
-              isSearching: false,
-              searchType: undefined
-            });
+          if (e.key === "Escape") useSearchStore.getState().resetSearch();
           else useSearchStore.setState({ isSearching: true, searchType: type });
         }}
         rightActions={[
@@ -137,11 +142,7 @@ function Header(props: RouteContainerProps) {
             testId: "search-button",
             onClick: () => {
               if (inputRef.current) inputRef.current.value = "";
-              useSearchStore.setState({
-                isSearching: false,
-                query: undefined,
-                searchType: undefined
-              });
+              useSearchStore.getState().resetSearch();
             }
           },
           ...(type === "reminders"

apps/web/src/stores/search-store.ts

@@ -24,19 +24,10 @@ class SearchStore extends BaseStore<SearchStore> {
   isSearching = false;
   query?: string;
   searchType?: string;
-  // startSearch = () => {
-  //   this.set({ isSearching: true });
-  // };
 
-  // endSearch = () => {
-  //   this.set({ isSearching: false });
-  // };
-  // results = [];
-  // search = async (items, query) => {
-  //   const { type } = this.get();
-  //   const results = await db.lookup[type](items, query);
-  //   this.set((state) => (state.results = results));
-  // };
+  resetSearch = () => {
+    this.set({ isSearching: false, query: undefined, searchType: undefined });
+  };
 }
 
 const [useStore, store] = createStore<SearchStore>(