1 files changed, 41 insertions, 10 deletions
diff --git a/apps/web/components/dashboard/search/SearchInput.tsx b/apps/web/components/dashboard/search/SearchInput.tsx
index 55f304e3..5e46fc18 100644
--- a/apps/web/components/dashboard/search/SearchInput.tsx
+++ b/apps/web/components/dashboard/search/SearchInput.tsx
@@ -1,9 +1,14 @@
 "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(
   inputRef: React.RefObject<HTMLInputElement>,
@@ -47,7 +52,8 @@ const SearchInput = React.forwardRef<
   React.HTMLAttributes<HTMLInputElement> & { loading?: boolean }
 >(({ className, ...props }, ref) => {
   const { t } = useTranslation();
-  const { debounceSearch, searchQuery, isInSearchPage } = useDoBookmarkSearch();
+  const { debounceSearch, searchQuery, parsedSearchQuery, isInSearchPage } =
+    useDoBookmarkSearch();
 
   const [value, setValue] = React.useState(searchQuery);
 
@@ -59,6 +65,7 @@ const SearchInput = React.forwardRef<
 
   useFocusSearchOnKeyPress(inputRef, onChange);
   useImperativeHandle(ref, () => inputRef.current!);
+  const [newNestedListModalOpen, setNewNestedListModalOpen] = useState(false);
 
   useEffect(() => {
     if (!isInSearchPage) {
@@ -67,14 +74,38 @@ const SearchInput = React.forwardRef<
   }, [isInSearchPage]);
 
   return (
-    <Input
-      ref={inputRef}
-      value={value}
-      onChange={onChange}
-      placeholder={t("common.search")}
-      className={className}
-      {...props}
-    />
+    <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 stroke-foreground 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}
+        onChange={onChange}
+        placeholder={t("common.search")}
+        {...props}
+      />
+    </div>
   );
 });
 SearchInput.displayName = "SearchInput";