feat: #1541 adding search history #1627

lexafaxine · 2025-06-17T10:49:58Z

Changes

Add search history for web

Use local storage to store last 5 search history,
The popover showing search history will appear when input is focused.
According to the current search query implementation, history will only be saved to local storage after the input is blur, to prevent unintended saving.

Add search history for mobile

Use react-native async-storage to store last 5 search history,
Because we are showing user search history now in the search screen, user need to hit return to submit a search.
(Please refer to the demo video)

Demo video

web: ~~https://drive.google.com/file/d/1VCfapgyx8nqwxw7JajyC8HlXiJYvjNR7/view?usp=sharing~~
https://drive.google.com/file/d/1sNfqTqymk3r3Mhbd9mvdOwWNMYvjobzK/view?usp=sharing
mobile: https://drive.google.com/file/d/1b5Xj5ekeFxb6IrzoWVUmZpMLWBHpCnBk/view?usp=sharing

xuatz · 2025-06-17T16:50:54Z

(nit) @lexafaxine sorry, can you update your description to something like

closes #1541

so that this PR is autolinked to the issue? ^^

xuatz · 2025-06-17T17:04:45Z

apps/web/components/dashboard/search/SearchAutocomplete.tsx

@@ -0,0 +1,60 @@
+import React from "react";


Suggested change

import React from "react";

not necessary

xuatz · 2025-06-17T17:08:48Z

apps/web/components/dashboard/search/SearchAutocomplete.tsx

+          ))}
+        </CommandGroup>
+      </CommandList>
+    </Command>


suggestion(ux): might be unrelated to this feature specifically, but I think there is a ux improvement that can be done

after firing the search query upon typing, we should dismiss the "Command" dialog
2. or otherwise at least it should not show "No matching recent searches"

we can also maybe consider to dismiss the dialog if the user press "enter" button
3. seems like an intuitive thing to do, seeing that the dialog doesn't go away

Hi @xuatz Thank u for the suggestions! They are really good points. You're right that showing "no results" when there is no result is not necessary in this situation. And regarding the close of the popover, I am considering UX like this:

When there are search history that match user's typing, show the history. Close popover if there is no match.

After user select one history item the popover will close. (Current behavior)

No matter if there is matched history, close the popover if user press Enter, and in the same time blur the input and save the term to history.

Let me know if this sounds OK to you :)

yeah sounds good to me 👍

xuatz · 2025-06-20T13:19:04Z

apps/web/components/dashboard/search/SearchInput.tsx

+      setIsPopoverOpen(false);
+      inputRef.current?.blur();
+    }
+  };


suggestion(ux): when testing the feature, i found myself instinctively trying to press down on the inputbox when there are search history options, in an attempt to navigate to those items. I think this would be a UX improvement

Thank you for the suggestion! U r right so I tried changing to use the CommandInput which already has good UX out of box :) Therefore I requested a review again, please help review when available! Thanks🙏

the ux is feeling great 💪

xuatz · 2025-06-20T13:23:08Z

apps/web/components/dashboard/search/SearchAutocomplete.tsx

+        <CommandEmpty>No matching recent searches.</CommandEmpty>
+        <CommandGroup heading="Recent Searches">


I think these texts should be... what do you call this... t("label")'ed? lol

i18n added ^^
b33cdb0

xuatz

LGTM, but I didn't test mobile tho ^^

xuatz · 2025-06-20T13:23:45Z

apps/web/components/dashboard/search/SearchInput.tsx

+    inputRef.current?.blur();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {


Suggested change

const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {

const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {

just nitpicks ^^

I guess cmdk has a restriction on keyboard event's type, if only using KeyboardEvent there will be type error :(

xuatz

LGTMv2 👍

MohamedBassem

I tired it and it feels great! Left a bunch of comments.

MohamedBassem · 2025-06-21T15:37:09Z

apps/web/lib/hooks/bookmark-search.ts

@@ -45,7 +45,7 @@ export function useDoBookmarkSearch() {
    }
    const id = setTimeout(() => {
      doSearch(val);
-    }, 10);
+    }, 200);


Any reason why we increased the debounce? It makes the search feels slower. If we're adding the value onBlur, then the debounce value probably doesn't make a difference?

You're right, that change left because I tried to save search during user's typing, reverted already in 6f83a20

MohamedBassem · 2025-06-21T15:37:33Z

apps/web/lib/searchHistory.tsx

+
+export function getSearchHistory(): string[] {
+  try {
+    const rawHistory = localStorage.getItem(BOOKMARK_SEARCH_HISTORY_KEY);


If we're keeping stuff in the user's localstorage, we'll probably need to clean it up otherwise it will leak between accounts on the same device. Which makes me wonder if it might be a good idea to store it in the database instead? If we're storing them in the database, they'll get synced across device, and it'll allow you to use mostly the same logic between the mobile and web app.

We don't need to address the localstorage idea in this PR, but if you agree, we can followup on it with a separate PR.

Yeah I thought about it these days, and I think it's a good idea to implement it in database so we have sync across device and prevent leak across accounts on same device. And I also realized actually there are a lot of apps are doing something like this XD.
I would like to implement it as a separate PR as improvement :) Thank you for the idea!

MohamedBassem · 2025-06-21T15:37:54Z

apps/web/lib/searchHistory.tsx

+      const parsed = JSON.parse(rawHistory) as string[];
+      if (
+        Array.isArray(parsed) &&
+        parsed.every((item) => typeof item === "string")
+      ) {
+        return parsed;
+      }


Might be clear to use a simple zod schema here instead?

True, fixed in 6f83a20

MohamedBassem · 2025-06-21T15:39:35Z

apps/web/lib/searchHistory.tsx

The logic in this file seems exactly the same as the one in the mobile version (except for the storage utilities). It seems to me that we can move the hooks to the shared-react package and pass in the getter and setter as inputs to the hook? This will allow you to share most of the code?

moved in 4e214bf

MohamedBassem · 2025-06-21T15:40:14Z

apps/web/lib/searchHistory.tsx

@@ -0,0 +1,37 @@
+const BOOKMARK_SEARCH_HISTORY_KEY = "karakeep_search_history";
+const MAX_HISTORY_ITEMS = 5;


How about we store something like 50, but by default render last 5 and only show the others as the user types?

changed in 4e214bf

MohamedBassem · 2025-06-21T16:45:46Z

apps/web/components/dashboard/search/SearchInput.tsx

+
+  const handleCommandKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter") {


Something is wrong with the key down handler. Pressing enter correctly goes to the selected item when the search history first show up. But if you attempt to use Enter on any filtered result, it doesn't work.

good catch! there was actually some issue there 🙇 fixed in b5e0acf

MohamedBassem · 2025-07-14T00:01:14Z

@lexafaxine This is such a great addition, thanks a lot for all the effort you put in this PR and addressing all of our comments. Sorry it took long to merge!

feat: adding search history

c8f6084

xuatz reviewed Jun 17, 2025

View reviewed changes

lexafaxine added 2 commits June 20, 2025 21:22

fix popover should close when no matched history

a4c820e

remove unnecessary react import

ca082fb

lexafaxine requested a review from xuatz June 20, 2025 12:26

xuatz reviewed Jun 20, 2025

View reviewed changes

lexafaxine added 2 commits June 21, 2025 10:33

replace current Input component with CommandInput for better UX

51e9b33

add i18n for recent searches label

b33cdb0

lexafaxine requested a review from xuatz June 21, 2025 01:56

xuatz approved these changes Jun 21, 2025

View reviewed changes

MohamedBassem requested changes Jun 21, 2025

View reviewed changes

lexafaxine added 3 commits June 23, 2025 20:13

fix bug

b5e0acf

refactor local storage logic to make code reusable

4e214bf

using zod schema to validate search history and revert debounce change

6f83a20

lexafaxine requested a review from MohamedBassem June 25, 2025 06:53

lexafaxine and others added 3 commits July 13, 2025 11:02

resolve conflict

1bafb74

Merge branch 'main' into feat-search-history

a0c0dc2

Consolidate some of the files

cd9acb1

MohamedBassem merged commit 39fcda0 into karakeep-app:main Jul 14, 2025
5 checks passed

lexafaxine mentioned this pull request Jul 17, 2025

Improvement: move search history storage to database instead of local storage #1743

Open

		<CommandEmpty>No matching recent searches.</CommandEmpty>
		<CommandGroup heading="Recent Searches">

	const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
	const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {

		@@ -0,0 +1,37 @@
		const BOOKMARK_SEARCH_HISTORY_KEY = "karakeep_search_history";
		const MAX_HISTORY_ITEMS = 5;

Uh oh!

feat: #1541 adding search history #1627

feat: #1541 adding search history #1627

Uh oh!

Conversation

lexafaxine commented Jun 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Add search history for web

Add search history for mobile

Demo video

Uh oh!

xuatz commented Jun 17, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lexafaxine Jun 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lexafaxine Jun 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

xuatz left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

xuatz left a comment

Choose a reason for hiding this comment

Uh oh!

MohamedBassem left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

MohamedBassem commented Jul 14, 2025

Uh oh!

Uh oh!

lexafaxine commented Jun 17, 2025 •

edited

Loading

lexafaxine Jun 21, 2025 •

edited

Loading

lexafaxine Jun 21, 2025 •

edited

Loading