feat: Introduce advanced search capabilities (#753)

* feat: Implement search filtering in the backend

* feat: Implement search language parser

* rename matcher name

* Add ability to interleve text

* More fixes

* be more tolerable to parsing errors

* Add a search query explainer widget

* Handle date parsing gracefully

* Fix the lockfile

* Encode query search param

* Fix table body error

* Fix error when writing quotes

1 files changed, 12 insertions, 8 deletions

diff --git a/apps/web/lib/hooks/bookmark-search.ts b/apps/web/lib/hooks/bookmark-search.ts
index 9890ac6f..4662ffb6 100644
--- a/apps/web/lib/hooks/bookmark-search.ts
+++ b/apps/web/lib/hooks/bookmark-search.ts
@@ -1,17 +1,20 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { api } from "@/lib/trpc";
 import { keepPreviousData } from "@tanstack/react-query";
 
+import { parseSearchQuery } from "@hoarder/shared/searchQueryParser";
+
 function useSearchQuery() {
   const searchParams = useSearchParams();
-  const searchQuery = searchParams.get("q") ?? "";
-  return { searchQuery };
+  const searchQuery = decodeURIComponent(searchParams.get("q") ?? "");
+  const parsed = useMemo(() => parseSearchQuery(searchQuery), [searchQuery]);
+  return { searchQuery, parsedSearchQuery: parsed };
 }
 
 export function useDoBookmarkSearch() {
   const router = useRouter();
-  const { searchQuery } = useSearchQuery();
+  const { searchQuery, parsedSearchQuery } = useSearchQuery();
   const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | undefined>();
   const pathname = usePathname();
 
@@ -26,7 +29,7 @@ export function useDoBookmarkSearch() {
 
   const doSearch = (val: string) => {
     setTimeoutId(undefined);
-    router.replace(`/dashboard/search?q=${val}`);
+    router.replace(`/dashboard/search?q=${encodeURIComponent(val)}`);
   };
 
   const debounceSearch = (val: string) => {
@@ -43,12 +46,13 @@ export function useDoBookmarkSearch() {
     doSearch,
     debounceSearch,
     searchQuery,
+    parsedSearchQuery,
     isInSearchPage: pathname.startsWith("/dashboard/search"),
   };
 }
 
 export function useBookmarkSearch() {
-  const { searchQuery } = useSearchQuery();
+  const { parsedSearchQuery } = useSearchQuery();
 
   const {
     data,
@@ -60,7 +64,8 @@ export function useBookmarkSearch() {
     isFetchingNextPage,
   } = api.bookmarks.searchBookmarks.useInfiniteQuery(
     {
-      text: searchQuery,
+      text: parsedSearchQuery.text,
+      matcher: parsedSearchQuery.matcher,
     },
     {
       placeholderData: keepPreviousData,
@@ -75,7 +80,6 @@ export function useBookmarkSearch() {
   }
 
   return {
-    searchQuery,
     error,
     data,
     isPending,