feat: Add support for smart lists (#802)

* feat: Add support for smart lists

* i18n

* Fix update list endpoint

* Add a test for smart lists

* Add header to the query explainer

* Hide remove from lists in the smart context list

* Add proper validation to list form

---------

Co-authored-by: Deepak Kapoor <41769111+orthdron@users.noreply.github.com>

2 files changed, 26 insertions, 1 deletions

diff --git a/apps/web/components/dashboard/search/QueryExplainerTooltip.tsx b/apps/web/components/dashboard/search/QueryExplainerTooltip.tsx
index eb7282d0..13174fb2 100644
--- a/apps/web/components/dashboard/search/QueryExplainerTooltip.tsx
+++ b/apps/web/components/dashboard/search/QueryExplainerTooltip.tsx
@@ -6,8 +6,10 @@ import { Matcher } from "@hoarder/shared/types/search";
 
 export default function QueryExplainerTooltip({
   parsedSearchQuery,
+  header,
   className,
 }: {
+  header?: React.ReactNode;
   parsedSearchQuery: TextAndMatcher & { result: string };
   className?: string;
 }) {
@@ -98,6 +100,7 @@ export default function QueryExplainerTooltip({
 
   return (
     <InfoTooltip className={className}>
+      {header}
       <Table>
         <TableBody>
           {parsedSearchQuery.text && (
diff --git a/apps/web/components/dashboard/search/SearchInput.tsx b/apps/web/components/dashboard/search/SearchInput.tsx
index 8ed2ea3c..ace3d785 100644
--- a/apps/web/components/dashboard/search/SearchInput.tsx
+++ b/apps/web/components/dashboard/search/SearchInput.tsx
@@ -1,11 +1,13 @@
 "use client";
 
-import React, { useEffect, useImperativeHandle, useRef } from "react";
+import React, { useEffect, useImperativeHandle, useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { useDoBookmarkSearch } from "@/lib/hooks/bookmark-search";
 import { useTranslation } from "@/lib/i18n/client";
 import { cn } from "@/lib/utils";
 
+import { EditListModal } from "../lists/EditListModal";
 import QueryExplainerTooltip from "./QueryExplainerTooltip";
 
 function useFocusSearchOnKeyPress(
@@ -63,6 +65,7 @@ const SearchInput = React.forwardRef<
 
   useFocusSearchOnKeyPress(inputRef, onChange);
   useImperativeHandle(ref, () => inputRef.current!);
+  const [newNestedListModalOpen, setNewNestedListModalOpen] = useState(false);
 
   useEffect(() => {
     if (!isInSearchPage) {
@@ -72,10 +75,29 @@ const SearchInput = React.forwardRef<
 
   return (
     <div className={cn("relative flex-1", className)}>
+      <EditListModal
+        open={newNestedListModalOpen}
+        setOpen={setNewNestedListModalOpen}
+        prefill={{
+          type: "smart",
+          query: value,
+        }}
+      />
       <QueryExplainerTooltip
         className="-translate-1/2 absolute right-1.5 top-2 p-0.5"
         parsedSearchQuery={parsedSearchQuery}
       />
+      {parsedSearchQuery.result === "full" &&
+        parsedSearchQuery.text.length == 0 && (
+          <Button
+            onClick={() => setNewNestedListModalOpen(true)}
+            size="none"
+            variant="secondary"
+            className="absolute right-9 top-2 z-50 px-2 py-1 text-xs"
+          >
+            {t("actions.save")}
+          </Button>
+        )}
       <Input
         ref={inputRef}
         value={value}