diff options
| -rw-r--r-- | apps/web/components/dashboard/lists/EditListModal.tsx | 44 | ||||
| -rw-r--r-- | apps/web/lib/i18n/locales/en/translation.json | 3 |
2 files changed, 38 insertions, 9 deletions
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", |