Improved search input (#13815)

* create input with tags component

* tweaks

* only show filters pane when there are actual filters

* special case for similarity searches

* similarity search tweaks

* populate suggestions values

* scrollbar on outer div

* clean up

* separate custom hook

* use command component

* tooltips

* regex tweaks

* saved searches with confirmation dialogs

* better date handling

* fix filters

* filter capitalization

* filter instructions

* replace underscore in filter type

* alert dialog button color

* toaster on success

web/src/components/input/SaveSearchDialog.tsx

@@ -0,0 +1,74 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from "@/components/ui/dialog";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useState } from "react";
+import { isMobile } from "react-device-detect";
+import { toast } from "sonner";
+
+type SaveSearchDialogProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: (name: string) => void;
+};
+
+export function SaveSearchDialog({
+  isOpen,
+  onClose,
+  onSave,
+}: SaveSearchDialogProps) {
+  const [searchName, setSearchName] = useState("");
+
+  const handleSave = () => {
+    if (searchName.trim()) {
+      onSave(searchName.trim());
+      setSearchName("");
+      toast.success(`Search (${searchName.trim()}) has been saved.`, {
+        position: "top-center",
+      });
+      onClose();
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent
+        onOpenAutoFocus={(e) => {
+          if (isMobile) {
+            e.preventDefault();
+          }
+        }}
+      >
+        <DialogHeader>
+          <DialogTitle>Save Search</DialogTitle>
+          <DialogDescription className="sr-only">
+            Provide a name for this saved search.
+          </DialogDescription>
+        </DialogHeader>
+        <Input
+          value={searchName}
+          className="text-md"
+          onChange={(e) => setSearchName(e.target.value)}
+          placeholder="Enter a name for your search"
+        />
+        <DialogFooter>
+          <Button onClick={onClose}>Cancel</Button>
+          <Button
+            onClick={handleSave}
+            variant="select"
+            className="mb-2 md:mb-0"
+          >
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}