add save report modal

apps/web/src/components/report/sidebar/ReportSaveButton.tsx

@@ -2,10 +2,10 @@ import { Button } from "@/components/ui/button";
 import { useReportId } from "../hooks/useReportId";
 import { api } from "@/utils/api";
 import { useSelector } from "@/redux";
+import { pushModal } from "@/modals";
 
-export function ReportSave() {
+export function ReportSaveButton() {
   const { reportId } = useReportId();
-  const save = api.report.save.useMutation();
   const update = api.report.update.useMutation();
   const report = useSelector((state) => state.report);
 
@@ -22,11 +22,9 @@ export function ReportSave() {
     return (
       <Button
         onClick={() => {
-          save.mutate({
+          pushModal('SaveReport', {
             report,
-            dashboardId: "9227feb4-ad59-40f3-b887-3501685733dd",
-            projectId: "f7eabf0c-e0b0-4ac0-940f-1589715b0c3d",
-          });
+          })
         }}
       >
         Create

apps/web/src/components/report/sidebar/ReportSidebar.tsx

@@ -1,13 +1,13 @@
 import { ReportEvents } from "./ReportEvents";
 import { ReportBreakdowns } from "./ReportBreakdowns";
-import { ReportSave } from "./ReportSave";
+import { ReportSaveButton } from "./ReportSaveButton";
 
 export function ReportSidebar() {
   return (
     <div className="flex flex-col gap-4 p-4">
       <ReportEvents />
       <ReportBreakdowns />
-      <ReportSave />
+      <ReportSaveButton />
     </div>
   );
 }

apps/web/src/components/ui/combobox.tsx

@@ -24,7 +24,8 @@ type ComboboxProps = {
   }>;
   value: string;
   onChange: (value: string) => void;
-  children?: React.ReactNode
+  children?: React.ReactNode;
+  onCreate?: (value: string) => void;
 };
 
 export function Combobox({
@@ -32,10 +33,11 @@ export function Combobox({
   items,
   value,
   onChange,
-  children
+  children,
+  onCreate,
 }: ComboboxProps) {
   const [open, setOpen] = React.useState(false);
-  
+  const [search, setSearch] = React.useState("");
   function find(value: string) {
     return items.find(
       (item) => item.value.toLowerCase() === value.toLowerCase(),
@@ -45,20 +47,34 @@ export function Combobox({
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
-        {children ?? <Button
-          variant="outline"
-          role="combobox"
-          aria-expanded={open}
-          className="w-full min-w-0 justify-between"
-        >
-          <span className="overflow-hidden text-ellipsis">{value ? find(value)?.label ?? "No match" : placeholder}</span>
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Button>}
+        {children ?? (
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            className="w-full min-w-0 justify-between"
+          >
+            <span className="overflow-hidden text-ellipsis">
+              {value ? find(value)?.label ?? "No match" : placeholder}
+            </span>
+            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        )}
       </PopoverTrigger>
       <PopoverContent className="w-full min-w-0 p-0" align="start">
         <Command>
-          <CommandInput placeholder="Search item..." />
-          <CommandEmpty>Nothing selected</CommandEmpty>
+          <CommandInput placeholder="Search item..." value={search} onValueChange={setSearch} />
+          {typeof onCreate === "function" && search ? (
+            <CommandEmpty className="p-2">
+              <Button onClick={() => {
+                onCreate(search)
+                setSearch('')
+                setOpen(false)
+              }}>Create &quot;{search}&quot;</Button>
+            </CommandEmpty>
+          ) : (
+            <CommandEmpty>Nothing selected</CommandEmpty>
+          )}
           <CommandGroup className="max-h-[200px] overflow-auto">
             {items.map((item) => (
               <CommandItem

apps/web/src/components/ui/table.tsx

@@ -20,7 +20,7 @@ const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+  <thead ref={ref} className={className} {...props} />
 ))
 TableHeader.displayName = "TableHeader"
 
@@ -55,7 +55,7 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      "transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
       className
     )}
     {...props}