feat: adding search history #1541 (#1627)

* feat: adding search history

* fix popover should close when no matched history

* remove unnecessary react import

* replace current Input component with CommandInput for better UX

* add i18n for recent searches label

* fix bug

* refactor local storage logic to make code reusable

* using zod schema to validate search history and revert debounce change

* Consolidate some of the files

---------

Co-authored-by: Mohamed Bassem <me@mbassem.com>

5 files changed, 286 insertions, 46 deletions

diff --git a/apps/mobile/app/dashboard/search.tsx b/apps/mobile/app/dashboard/search.tsx
index de3d0f46..5cc97575 100644
--- a/apps/mobile/app/dashboard/search.tsx
+++ b/apps/mobile/app/dashboard/search.tsx
@@ -1,5 +1,12 @@
-import { useState } from "react";
-import { Pressable, Text, View } from "react-native";
+import { useMemo, useRef, useState } from "react";
+import {
+  FlatList,
+  Keyboard,
+  Pressable,
+  Text,
+  TextInput,
+  View,
+} from "react-native";
 import { router } from "expo-router";
 import BookmarkList from "@/components/bookmarks/BookmarkList";
 import FullPageError from "@/components/FullPageError";
@@ -7,39 +14,105 @@ import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import { Input } from "@/components/ui/Input";
 import { api } from "@/lib/trpc";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 import { keepPreviousData } from "@tanstack/react-query";
 import { useDebounce } from "use-debounce";
 
+import { useSearchHistory } from "@karakeep/shared-react/hooks/search-history";
+
+const MAX_DISPLAY_SUGGESTIONS = 5;
+
 export default function Search() {
   const [search, setSearch] = useState("");
 
   const [query] = useDebounce(search, 10);
+  const inputRef = useRef<TextInput>(null);
+
+  const [isInputFocused, setIsInputFocused] = useState(true);
+  const { history, addTerm, clearHistory } = useSearchHistory({
+    getItem: (k: string) => AsyncStorage.getItem(k),
+    setItem: (k: string, v: string) => AsyncStorage.setItem(k, v),
+    removeItem: (k: string) => AsyncStorage.removeItem(k),
+  });
 
   const onRefresh = api.useUtils().bookmarks.searchBookmarks.invalidate;
 
-  const { data, error, refetch, isPending, fetchNextPage, isFetchingNextPage } =
-    api.bookmarks.searchBookmarks.useInfiniteQuery(
-      { text: query },
-      {
-        placeholderData: keepPreviousData,
-        gcTime: 0,
-        initialCursor: null,
-        getNextPageParam: (lastPage) => lastPage.nextCursor,
-      },
-    );
+  const {
+    data,
+    error,
+    refetch,
+    isPending,
+    isFetching,
+    fetchNextPage,
+    isFetchingNextPage,
+  } = api.bookmarks.searchBookmarks.useInfiniteQuery(
+    { text: query },
+    {
+      placeholderData: keepPreviousData,
+      gcTime: 0,
+      initialCursor: null,
+      getNextPageParam: (lastPage) => lastPage.nextCursor,
+    },
+  );
+
+  const filteredHistory = useMemo(() => {
+    if (search.trim().length === 0) {
+      // Show recent items when not typing
+      return history.slice(0, MAX_DISPLAY_SUGGESTIONS);
+    }
+    // Show filtered items when typing
+    return history
+      .filter((item) => item.toLowerCase().includes(search.toLowerCase()))
+      .slice(0, MAX_DISPLAY_SUGGESTIONS);
+  }, [search, history]);
 
   if (error) {
     return <FullPageError error={error.message} onRetry={() => refetch()} />;
   }
 
+  const handleSearchSubmit = (searchTerm: string) => {
+    const term = searchTerm.trim();
+    if (term.length > 0) {
+      addTerm(term);
+      setSearch(term);
+    }
+    inputRef.current?.blur();
+    Keyboard.dismiss();
+  };
+
+  const renderHistoryItem = ({ item }: { item: string }) => (
+    <Pressable
+      onPress={() => handleSearchSubmit(item)}
+      className="border-b border-gray-200 p-3"
+    >
+      <Text className="text-foreground">{item}</Text>
+    </Pressable>
+  );
+
+  const handleOnFocus = () => {
+    setIsInputFocused(true);
+  };
+
+  const handleOnBlur = () => {
+    setIsInputFocused(false);
+    if (search.trim().length > 0) {
+      addTerm(search);
+    }
+  };
+
   return (
     <CustomSafeAreaView>
       <View className="flex flex-row items-center gap-3 p-3">
         <Input
+          ref={inputRef}
           placeholder="Search"
           className="flex-1"
           value={search}
           onChangeText={setSearch}
+          onFocus={handleOnFocus}
+          onBlur={handleOnBlur}
+          onSubmitEditing={() => handleSearchSubmit(search)}
+          returnKeyType="search"
           autoFocus
           autoCapitalize="none"
         />
@@ -47,8 +120,34 @@ export default function Search() {
           <Text className="text-foreground">Cancel</Text>
         </Pressable>
       </View>
-      {!data && <FullPageSpinner />}
-      {data && (
+
+      {isInputFocused ? (
+        <FlatList
+          data={filteredHistory}
+          renderItem={renderHistoryItem}
+          keyExtractor={(item, index) => `${item}-${index}`}
+          ListHeaderComponent={
+            <View className="flex-row items-center justify-between p-3">
+              <Text className="text-sm font-bold text-gray-500">
+                Recent Searches
+              </Text>
+              {history.length > 0 && (
+                <Pressable onPress={clearHistory}>
+                  <Text className="text-sm text-blue-500">Clear</Text>
+                </Pressable>
+              )}
+            </View>
+          }
+          ListEmptyComponent={
+            <Text className="p-3 text-center text-gray-500">
+              No matching searches.
+            </Text>
+          }
+          keyboardShouldPersistTaps="handled"
+        />
+      ) : isFetching && query.length > 0 ? (
+        <FullPageSpinner />
+      ) : data && query.length > 0 ? (
         <BookmarkList
           bookmarks={data.pages.flatMap((p) => p.bookmarks)}
           fetchNextPage={fetchNextPage}
@@ -56,6 +155,8 @@ export default function Search() {
           onRefresh={onRefresh}
           isRefreshing={isPending}
         />
+      ) : (
+        <View />
       )}
     </CustomSafeAreaView>
   );
diff --git a/apps/mobile/package.json b/apps/mobile/package.json
index 2c68810e..d5c2262f 100644
--- a/apps/mobile/package.json
+++ b/apps/mobile/package.json
@@ -18,6 +18,7 @@
     "@karakeep/shared": "workspace:^0.1.0",
     "@karakeep/shared-react": "workspace:^0.1.0",
     "@karakeep/trpc": "workspace:^0.1.0",
+    "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-menu/menu": "^1.1.6",
     "@tanstack/react-query": "^5.69.0",
     "class-variance-authority": "^0.7.0",
diff --git a/apps/web/components/dashboard/header/Header.tsx b/apps/web/components/dashboard/header/Header.tsx
index e882ebfc..f830beb6 100644
--- a/apps/web/components/dashboard/header/Header.tsx
+++ b/apps/web/components/dashboard/header/Header.tsx
@@ -20,7 +20,7 @@ export default async function Header() {
         </Link>
       </div>
       <div className="flex flex-1 gap-2">
-        <SearchInput className="min-w-40 bg-muted" />
+        <SearchInput className="min-w-40 rounded-md bg-muted" />
         <GlobalActions />
       </div>
       <div className="flex items-center">
diff --git a/apps/web/components/dashboard/search/SearchInput.tsx b/apps/web/components/dashboard/search/SearchInput.tsx
index fad45672..0de7694a 100644
--- a/apps/web/components/dashboard/search/SearchInput.tsx
+++ b/apps/web/components/dashboard/search/SearchInput.tsx
@@ -1,20 +1,44 @@
 "use client";
 
-import React, { useEffect, useImperativeHandle, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
+import {
+  Command,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import { useDoBookmarkSearch } from "@/lib/hooks/bookmark-search";
 import { useTranslation } from "@/lib/i18n/client";
 import { cn } from "@/lib/utils";
-import { SearchIcon } from "lucide-react";
+import { History } from "lucide-react";
+
+import { useSearchHistory } from "@karakeep/shared-react/hooks/search-history";
 
 import { EditListModal } from "../lists/EditListModal";
 import QueryExplainerTooltip from "./QueryExplainerTooltip";
 
+const MAX_DISPLAY_SUGGESTIONS = 5;
+
 function useFocusSearchOnKeyPress(
   inputRef: React.RefObject<HTMLInputElement>,
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void,
+  value: string,
+  setValue: (value: string) => void,
+  setPopoverOpen: React.Dispatch<React.SetStateAction<boolean>>,
 ) {
   useEffect(() => {
     function handleKeyPress(e: KeyboardEvent) {
@@ -27,18 +51,12 @@ function useFocusSearchOnKeyPress(
         // Move the cursor to the end of the input field, so you can continue typing
         const length = inputRef.current.value.length;
         inputRef.current.setSelectionRange(length, length);
+        setPopoverOpen(true);
       }
-      if (
-        e.code === "Escape" &&
-        e.target == inputRef.current &&
-        inputRef.current.value !== ""
-      ) {
+      if (e.code === "Escape" && e.target == inputRef.current && value !== "") {
         e.preventDefault();
         inputRef.current.blur();
-        inputRef.current.value = "";
-        onChange({
-          target: inputRef.current,
-        } as React.ChangeEvent<HTMLInputElement>);
+        setValue("");
       }
     }
 
@@ -46,7 +64,7 @@ function useFocusSearchOnKeyPress(
     return () => {
       document.removeEventListener("keydown", handleKeyPress);
     };
-  }, [inputRef, onChange]);
+  }, [inputRef, value, setValue, setPopoverOpen]);
 }
 
 const SearchInput = React.forwardRef<
@@ -54,20 +72,81 @@ const SearchInput = React.forwardRef<
   React.HTMLAttributes<HTMLInputElement> & { loading?: boolean }
 >(({ className, ...props }, ref) => {
   const { t } = useTranslation();
-  const { debounceSearch, searchQuery, parsedSearchQuery, isInSearchPage } =
-    useDoBookmarkSearch();
+  const {
+    debounceSearch,
+    searchQuery,
+    doSearch,
+    parsedSearchQuery,
+    isInSearchPage,
+  } = useDoBookmarkSearch();
+  const { addTerm, history } = useSearchHistory({
+    getItem: (k: string) => localStorage.getItem(k),
+    setItem: (k: string, v: string) => localStorage.setItem(k, v),
+    removeItem: (k: string) => localStorage.removeItem(k),
+  });
 
   const [value, setValue] = React.useState(searchQuery);
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [newNestedListModalOpen, setNewNestedListModalOpen] = useState(false);
 
   const inputRef = useRef<HTMLInputElement>(null);
-  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(e.target.value);
-    debounceSearch(e.target.value);
-  };
+  const isHistorySelected = useRef(false);
 
-  useFocusSearchOnKeyPress(inputRef, onChange);
+  const handleValueChange = useCallback(
+    (newValue: string) => {
+      setValue(newValue);
+      debounceSearch(newValue);
+      isHistorySelected.current = false; // Reset flag when user types
+    },
+    [debounceSearch],
+  );
+
+  const suggestions = useMemo(() => {
+    if (value.trim() === "") {
+      // Show recent items when not typing
+      return history.slice(0, MAX_DISPLAY_SUGGESTIONS);
+    } else {
+      // Show filtered items when typing
+      return history
+        .filter((item) => item.toLowerCase().includes(value.toLowerCase()))
+        .slice(0, MAX_DISPLAY_SUGGESTIONS);
+    }
+  }, [history, value]);
+
+  const isPopoverVisible = isPopoverOpen && suggestions.length > 0;
+  const handleHistorySelect = useCallback(
+    (term: string) => {
+      isHistorySelected.current = true;
+      setValue(term);
+      doSearch(term);
+      addTerm(term);
+      setIsPopoverOpen(false);
+      inputRef.current?.blur();
+    },
+    [doSearch],
+  );
+
+  const handleCommandKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      const selectedItem = document.querySelector(
+        '[cmdk-item][data-selected="true"]',
+      );
+      const isPlaceholderSelected =
+        selectedItem?.getAttribute("data-value") === "-";
+      if (!selectedItem || isPlaceholderSelected) {
+        e.preventDefault();
+        setIsPopoverOpen(false);
+        inputRef.current?.blur();
+      }
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      setIsPopoverOpen(false);
+      inputRef.current?.blur();
+    }
+  }, []);
+
+  useFocusSearchOnKeyPress(inputRef, value, setValue, setIsPopoverOpen);
   useImperativeHandle(ref, () => inputRef.current!);
-  const [newNestedListModalOpen, setNewNestedListModalOpen] = useState(false);
 
   useEffect(() => {
     if (!isInSearchPage) {
@@ -75,6 +154,21 @@ const SearchInput = React.forwardRef<
     }
   }, [isInSearchPage]);
 
+  const handleFocus = useCallback(() => {
+    setIsPopoverOpen(true);
+  }, []);
+
+  const handleBlur = useCallback(() => {
+    // Only add to history if it wasn't a history selection
+    if (value && !isHistorySelected.current) {
+      addTerm(value);
+    }
+
+    // Reset the flag
+    isHistorySelected.current = false;
+    setIsPopoverOpen(false);
+  }, [value, addTerm]);
+
   return (
     <div className={cn("relative flex-1", className)}>
       <EditListModal
@@ -103,14 +197,57 @@ const SearchInput = React.forwardRef<
             {t("actions.save")}
           </Button>
         )}
-      <Input
-        startIcon={<SearchIcon size={18} className="text-muted-foreground" />}
-        ref={inputRef}
-        value={value}
-        onChange={onChange}
-        placeholder={t("common.search")}
-        {...props}
-      />
+      <Command
+        shouldFilter={false}
+        className="relative rounded-md bg-transparent"
+        onKeyDown={handleCommandKeyDown}
+      >
+        <Popover open={isPopoverVisible}>
+          <PopoverTrigger asChild>
+            <div className="relative">
+              <CommandInput
+                ref={inputRef}
+                placeholder={t("common.search")}
+                value={value}
+                onValueChange={handleValueChange}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+                className={cn("h-10", className)}
+                {...props}
+              />
+            </div>
+          </PopoverTrigger>
+          <PopoverContent
+            className="w-[--radix-popover-trigger-width] p-0"
+            onOpenAutoFocus={(e) => e.preventDefault()}
+            onCloseAutoFocus={(e) => e.preventDefault()}
+          >
+            <CommandList>
+              <CommandGroup
+                heading={t("search.history")}
+                className="max-h-60 overflow-y-auto"
+              >
+                {/* prevent cmdk auto select the first suggestion -> https://github.com/pacocoursey/cmdk/issues/171*/}
+                <CommandItem value="-" className="hidden" />
+                {suggestions.map((term) => (
+                  <CommandItem
+                    key={term}
+                    value={term}
+                    onSelect={() => handleHistorySelect(term)}
+                    onMouseDown={() => {
+                      isHistorySelected.current = true;
+                    }}
+                    className="cursor-pointer"
+                  >
+                    <History className="mr-2 h-4 w-4" />
+                    <span>{term}</span>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </PopoverContent>
+        </Popover>
+      </Command>
     </div>
   );
 });
diff --git a/apps/web/lib/i18n/locales/en/translation.json b/apps/web/lib/i18n/locales/en/translation.json
index f9e1d493..10b2f390 100644
--- a/apps/web/lib/i18n/locales/en/translation.json
+++ b/apps/web/lib/i18n/locales/en/translation.json
@@ -439,7 +439,8 @@
     "is_from_feed": "Is from RSS Feed",
     "is_not_from_feed": "Is not from RSS Feed",
     "and": "And",
-    "or": "Or"
+    "or": "Or",
+    "history": "Recent Searches"
   },
   "preview": {
     "view_original": "View Original",