From c52a1b4fa2029f69a22ac342a8b79665a43ecb01 Mon Sep 17 00:00:00 2001
From: Mohamed Bassem <me@mbassem.com>
Date: Sat, 1 Feb 2025 22:08:30 +0000
Subject: feat(web): Add the query explainer to the smart list modal

---
 .../components/dashboard/lists/EditListModal.tsx   | 44 ++++++++++++++++++----
 apps/web/lib/i18n/locales/en/translation.json      |  3 +-
 2 files changed, 38 insertions(+), 9 deletions(-)

(limited to 'apps')

diff --git a/apps/web/components/dashboard/lists/EditListModal.tsx b/apps/web/components/dashboard/lists/EditListModal.tsx
index 98bb19be..db87ec22 100644
--- a/apps/web/components/dashboard/lists/EditListModal.tsx
+++ b/apps/web/components/dashboard/lists/EditListModal.tsx
@@ -1,4 +1,5 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { ActionButton } from "@/components/ui/action-button";
 import { Button } from "@/components/ui/button";
@@ -14,6 +15,7 @@ import {
 import {
   Form,
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
   FormLabel,
@@ -45,11 +47,13 @@ import {
   useCreateBookmarkList,
   useEditBookmarkList,
 } from "@hoarder/shared-react/hooks/lists";
+import { parseSearchQuery } from "@hoarder/shared/searchQueryParser";
 import {
   ZBookmarkList,
   zNewBookmarkListSchema,
 } from "@hoarder/shared/types/lists";
 
+import QueryExplainerTooltip from "../search/QueryExplainerTooltip";
 import { BookmarkListSelector } from "./BookmarkListSelector";
 
 export function EditListModal({
@@ -99,6 +103,14 @@ export function EditListModal({
     });
   }, [open]);
 
+  const parsedSearchQuery = useMemo(() => {
+    const query = form.getValues().query;
+    if (!query) {
+      return undefined;
+    }
+    return parseSearchQuery(query);
+  }, [form.watch("query")]);
+
   const { mutate: createList, isPending: isCreating } = useCreateBookmarkList({
     onSuccess: (resp) => {
       toast({
@@ -318,13 +330,29 @@ export function EditListModal({
                   return (
                     <FormItem className="grow pb-4">
                       <FormLabel>{t("lists.search_query")}</FormLabel>
-                      <FormControl>
-                        <Input
-                          value={field.value}
-                          onChange={field.onChange}
-                          placeholder={t("lists.search_query")}
-                        />
-                      </FormControl>
+                      <div className="relative">
+                        <FormControl>
+                          <Input
+                            value={field.value}
+                            onChange={field.onChange}
+                            placeholder={t("lists.search_query")}
+                          />
+                        </FormControl>
+                        {parsedSearchQuery && (
+                          <QueryExplainerTooltip
+                            className="translate-1/2 absolute right-1.5 top-2 stroke-foreground p-0.5"
+                            parsedSearchQuery={parsedSearchQuery}
+                          />
+                        )}
+                      </div>
+                      <FormDescription>
+                        <Link
+                          href="https://docs.hoarder.app/Guides/search-query-language"
+                          className="italic"
+                        >
+                          {t("lists.search_query_help")}
+                        </Link>
+                      </FormDescription>
                       <FormMessage />
                     </FormItem>
                   );
diff --git a/apps/web/lib/i18n/locales/en/translation.json b/apps/web/lib/i18n/locales/en/translation.json
index eec48ec4..4df3e104 100644
--- a/apps/web/lib/i18n/locales/en/translation.json
+++ b/apps/web/lib/i18n/locales/en/translation.json
@@ -207,7 +207,8 @@
     "list_type": "List Type",
     "manual_list": "Manual List",
     "smart_list": "Smart List",
-    "search_query": "Search Query"
+    "search_query": "Search Query",
+    "search_query_help": "Learn more about the search query language."
   },
   "tags": {
     "all_tags": "All Tags",
-- 
cgit v1.2.3-70-g09d2