Mobile recordings redesign (#10711)

* Only show back button text on desktop

* Add mobile camera drawer to separate component

* Use bottom sheet for export on mobile

* Add intermediary mobile bottom sheet

* fix filter

* Fix mobile layout jumping

* Fix desktop vertical camera view

* Fix horizontal camera list

* Add overlay instead of using same button for timeline exports

* Don't use native hls for now

* Fix export bottom sheet

* Fix scrolling

* Simplify checks

* Adjust hls compat approach

* Fix events shadow

* Make corners consistent

* Make corners consistent

* fix max drawer height

* Use separate buttons for export control

* Add icons

* Fix list views

* Fix new items to review

* bottom padding on bottom sheets

* bottom padding on bottom sheets

web/src/components/overlay/ExportDialog.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useMemo, useState } from "react";
 import {
   Dialog,
-  DialogClose,
   DialogContent,
   DialogFooter,
   DialogHeader,
@@ -23,6 +22,9 @@ import { FrigateConfig } from "@/types/frigateConfig";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import ReviewActivityCalendar from "./ReviewActivityCalendar";
 import { SelectSeparator } from "../ui/select";
+import { isDesktop } from "react-device-detect";
+import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
+import SaveExportOverlay from "./SaveExportOverlay";
 
 const EXPORT_OPTIONS = [
   "1",
@@ -53,8 +55,121 @@ export default function ExportDialog({
   setRange,
   setMode,
 }: ExportDialogProps) {
-  const [selectedOption, setSelectedOption] = useState<ExportOption>("1");
   const [name, setName] = useState("");
+  const onStartExport = useCallback(() => {
+    if (!range) {
+      toast.error("No valid time range selected", { position: "top-center" });
+      return;
+    }
+
+    axios
+      .post(`export/${camera}/start/${range.after}/end/${range.before}`, {
+        playback: "realtime",
+        name,
+      })
+      .then((response) => {
+        if (response.status == 200) {
+          toast.success(
+            "Successfully started export. View the file in the /exports folder.",
+            { position: "top-center" },
+          );
+          setName("");
+          setRange(undefined);
+          setMode("none");
+        }
+      })
+      .catch((error) => {
+        if (error.response?.data?.message) {
+          toast.error(
+            `Failed to start export: ${error.response.data.message}`,
+            { position: "top-center" },
+          );
+        } else {
+          toast.error(`Failed to start export: ${error.message}`, {
+            position: "top-center",
+          });
+        }
+      });
+  }, [camera, name, range, setRange, setName, setMode]);
+
+  const Overlay = isDesktop ? Dialog : Drawer;
+  const Trigger = isDesktop ? DialogTrigger : DrawerTrigger;
+  const Content = isDesktop ? DialogContent : DrawerContent;
+
+  return (
+    <>
+      <SaveExportOverlay
+        className="absolute top-8 left-1/2 -translate-x-1/2 z-50 pointer-events-none"
+        show={mode == "timeline"}
+        onSave={() => onStartExport()}
+        onCancel={() => setMode("none")}
+      />
+      <Overlay
+        open={mode == "select"}
+        onOpenChange={(open) => {
+          if (!open) {
+            setMode("none");
+          }
+        }}
+      >
+        <Trigger asChild>
+          <Button
+            className="flex items-center gap-2"
+            variant="secondary"
+            size="sm"
+            onClick={() => {
+              setMode("select");
+            }}
+          >
+            <FaArrowDown className="p-1 fill-secondary bg-muted-foreground rounded-md" />
+            {isDesktop && "Export"}
+          </Button>
+        </Trigger>
+        <Content
+          className={
+            isDesktop ? "sm:rounded-2xl" : "px-4 pb-4 mx-4 rounded-2xl"
+          }
+        >
+          <ExportContent
+            latestTime={latestTime}
+            currentTime={currentTime}
+            range={range}
+            name={name}
+            onStartExport={onStartExport}
+            setName={setName}
+            setRange={setRange}
+            setMode={setMode}
+            onCancel={() => setMode("none")}
+          />
+        </Content>
+      </Overlay>
+    </>
+  );
+}
+
+type ExportContentProps = {
+  latestTime: number;
+  currentTime: number;
+  range?: TimeRange;
+  name: string;
+  onStartExport: () => void;
+  setName: (name: string) => void;
+  setRange: (range: TimeRange | undefined) => void;
+  setMode: (mode: ExportMode) => void;
+  onCancel: () => void;
+};
+export function ExportContent({
+  latestTime,
+  currentTime,
+  range,
+  name,
+  onStartExport,
+  setName,
+  setRange,
+  setMode,
+  onCancel,
+}: ExportContentProps) {
+  const [selectedOption, setSelectedOption] = useState<ExportOption>("1");
 
   const onSelectTime = useCallback(
     (option: ExportOption) => {
@@ -93,136 +208,86 @@ export default function ExportDialog({
     [latestTime, setRange],
   );
 
-  const onStartExport = useCallback(() => {
-    if (!range) {
-      toast.error("No valid time range selected", { position: "top-center" });
-      return;
-    }
-
-    axios
-      .post(`export/${camera}/start/${range.after}/end/${range.before}`, {
-        playback: "realtime",
-        name,
-      })
-      .then((response) => {
-        if (response.status == 200) {
-          toast.success(
-            "Successfully started export. View the file in the /exports folder.",
-            { position: "top-center" },
-          );
-          setName("");
-          setRange(undefined);
-          setSelectedOption("1");
-        }
-      })
-      .catch((error) => {
-        if (error.response?.data?.message) {
-          toast.error(
-            `Failed to start export: ${error.response.data.message}`,
-            { position: "top-center" },
-          );
-        } else {
-          toast.error(`Failed to start export: ${error.message}`, {
-            position: "top-center",
-          });
-        }
-      });
-  }, [camera, name, range, setRange]);
-
   return (
-    <Dialog
-      open={mode == "select"}
-      onOpenChange={(open) => {
-        if (!open) {
-          setMode("none");
-        }
-      }}
-    >
-      <DialogTrigger asChild>
+    <div className="w-full">
+      {isDesktop && (
+        <>
+          <DialogHeader>
+            <DialogTitle>Export</DialogTitle>
+          </DialogHeader>
+          <SelectSeparator className="bg-secondary" />
+        </>
+      )}
+      <RadioGroup
+        className={`flex flex-col gap-3 ${isDesktop ? "" : "mt-4"}`}
+        onValueChange={(value) => onSelectTime(value as ExportOption)}
+      >
+        {EXPORT_OPTIONS.map((opt) => {
+          return (
+            <div key={opt} className="flex items-center gap-2">
+              <RadioGroupItem
+                className={
+                  opt == selectedOption
+                    ? "from-selected/50 to-selected/90 text-selected bg-selected"
+                    : "from-secondary/50 to-secondary/90 text-secondary bg-secondary"
+                }
+                id={opt}
+                value={opt}
+              />
+              <Label className="cursor-pointer capitalize" htmlFor={opt}>
+                {isNaN(parseInt(opt))
+                  ? opt == "timeline"
+                    ? "Select from Timeline"
+                    : `${opt}`
+                  : `Last ${opt > "1" ? `${opt} Hours` : "Hour"}`}
+              </Label>
+            </div>
+          );
+        })}
+      </RadioGroup>
+      {selectedOption == "custom" && (
+        <CustomTimeSelector
+          latestTime={latestTime}
+          range={range}
+          setRange={setRange}
+        />
+      )}
+      <Input
+        className="mt-3"
+        type="search"
+        placeholder="Name the Export"
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+      />
+      {isDesktop && <SelectSeparator className="bg-secondary" />}
+      <DialogFooter
+        className={isDesktop ? "" : "mt-3 flex flex-col-reverse gap-4"}
+      >
+        <div
+          className={`p-2 cursor-pointer text-center ${isDesktop ? "" : "w-full"}`}
+          onClick={onCancel}
+        >
+          Cancel
+        </div>
         <Button
-          className="flex items-center gap-2"
-          variant="secondary"
+          className={isDesktop ? "" : "w-full"}
+          variant="select"
           size="sm"
           onClick={() => {
-            if (mode == "none") {
-              setMode("select");
-            } else if (mode == "timeline") {
+            if (selectedOption == "timeline") {
+              setRange({ before: currentTime + 30, after: currentTime - 30 });
+              setMode("timeline");
+            } else {
               onStartExport();
+              setSelectedOption("1");
               setMode("none");
             }
           }}
         >
-          <FaArrowDown className="p-1 fill-secondary bg-muted-foreground rounded-md" />
-          {mode != "timeline" ? "Export" : "Save"}
+          {selectedOption == "timeline" ? "Select" : "Export"}
         </Button>
-      </DialogTrigger>
-      <DialogContent className="sm:rounded-2xl">
-        <DialogHeader>
-          <DialogTitle>Export</DialogTitle>
-        </DialogHeader>
-        <SelectSeparator className="bg-secondary" />
-        <RadioGroup
-          className="flex flex-col gap-3"
-          onValueChange={(value) => onSelectTime(value as ExportOption)}
-        >
-          {EXPORT_OPTIONS.map((opt) => {
-            return (
-              <div key={opt} className="flex items-center gap-2">
-                <RadioGroupItem
-                  className={
-                    opt == selectedOption
-                      ? "from-selected/50 to-selected/90 text-selected bg-selected"
-                      : "from-secondary/50 to-secondary/90 text-secondary bg-secondary"
-                  }
-                  id={opt}
-                  value={opt}
-                />
-                <Label className="cursor-pointer capitalize" htmlFor={opt}>
-                  {isNaN(parseInt(opt))
-                    ? opt == "timeline"
-                      ? "Select from Timeline"
-                      : `${opt}`
-                    : `Last ${opt > "1" ? `${opt} Hours` : "Hour"}`}
-                </Label>
-              </div>
-            );
-          })}
-        </RadioGroup>
-        {selectedOption == "custom" && (
-          <CustomTimeSelector
-            latestTime={latestTime}
-            range={range}
-            setRange={setRange}
-          />
-        )}
-        <Input
-          className="mt-2"
-          type="search"
-          placeholder="Name the Export"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-        />
-        <SelectSeparator className="bg-secondary" />
-        <DialogFooter>
-          <DialogClose onClick={() => setMode("none")}>Cancel</DialogClose>
-          <Button
-            variant="select"
-            size="sm"
-            onClick={() => {
-              if (selectedOption == "timeline") {
-                setRange({ before: currentTime + 30, after: currentTime - 30 });
-                setMode("timeline");
-              } else {
-                onStartExport();
-                setMode("none");
-              }
-            }}
-          >
-            {selectedOption == "timeline" ? "Select" : "Export"}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+      </DialogFooter>
+    </div>
   );
 }
 
@@ -276,7 +341,9 @@ function CustomTimeSelector({
   const [endOpen, setEndOpen] = useState(false);
 
   return (
-    <div className="mx-8 px-2 flex items-center gap-2 bg-secondary rounded-lg">
+    <div
+      className={`flex items-center bg-secondary rounded-lg ${isDesktop ? "mx-8 px-2 gap-2" : "pl-2 mt-3"}`}
+    >
       <FaCalendarAlt />
       <Popover
         open={startOpen}
@@ -288,7 +355,9 @@ function CustomTimeSelector({
       >
         <PopoverTrigger asChild>
           <Button
+            className={isDesktop ? "" : "text-xs"}
             variant={startOpen ? "select" : "secondary"}
+            size="sm"
             onClick={() => {
               setStartOpen(true);
               setEndOpen(false);
@@ -347,7 +416,9 @@ function CustomTimeSelector({
       >
         <PopoverTrigger asChild>
           <Button
+            className={isDesktop ? "" : "text-xs"}
             variant={endOpen ? "select" : "secondary"}
+            size="sm"
             onClick={() => {
               setEndOpen(true);
               setStartOpen(false);

web/src/components/overlay/MobileCameraDrawer.tsx

@@ -0,0 +1,46 @@
+import { useState } from "react";
+import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
+import { Button } from "../ui/button";
+import { FaVideo } from "react-icons/fa";
+import { isMobile } from "react-device-detect";
+
+type MobileCameraDrawerProps = {
+  allCameras: string[];
+  selected: string;
+  onSelectCamera: (cam: string) => void;
+};
+export default function MobileCameraDrawer({
+  allCameras,
+  selected,
+  onSelectCamera,
+}: MobileCameraDrawerProps) {
+  const [cameraDrawer, setCameraDrawer] = useState(false);
+
+  if (!isMobile) {
+    return;
+  }
+
+  return (
+    <Drawer open={cameraDrawer} onOpenChange={setCameraDrawer}>
+      <DrawerTrigger asChild>
+        <Button className="rounded-lg capitalize" size="sm" variant="secondary">
+          <FaVideo className="text-muted-foreground" />
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent className="max-h-[75dvh] overflow-hidden flex flex-col items-center gap-2 px-4 pb-4 mx-1 rounded-t-2xl">
+        {allCameras.map((cam) => (
+          <div
+            key={cam}
+            className={`w-full mx-4 py-2 text-center capitalize ${cam == selected ? "bg-secondary rounded-lg" : ""}`}
+            onClick={() => {
+              onSelectCamera(cam);
+              setCameraDrawer(false);
+            }}
+          >
+            {cam.replaceAll("_", " ")}
+          </div>
+        ))}
+      </DrawerContent>
+    </Drawer>
+  );
+}

web/src/components/overlay/MobileReviewSettingsDrawer.tsx

@@ -0,0 +1,289 @@
+import { useCallback, useMemo, useState } from "react";
+import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
+import { Button } from "../ui/button";
+import { FaArrowDown, FaCalendarAlt, FaCog, FaFilter } from "react-icons/fa";
+import { TimeRange } from "@/types/timeline";
+import { ExportContent } from "./ExportDialog";
+import { ExportMode } from "@/types/filter";
+import ReviewActivityCalendar from "./ReviewActivityCalendar";
+import { SelectSeparator } from "../ui/select";
+import { ReviewFilter } from "@/types/review";
+import { getEndOfDayTimestamp } from "@/utils/dateUtil";
+import { GeneralFilterContent } from "../filter/ReviewFilterGroup";
+import useSWR from "swr";
+import { FrigateConfig } from "@/types/frigateConfig";
+import { toast } from "sonner";
+import axios from "axios";
+import SaveExportOverlay from "./SaveExportOverlay";
+import { isMobile } from "react-device-detect";
+
+const ATTRIBUTES = ["amazon", "face", "fedex", "license_plate", "ups"];
+type DrawerMode = "none" | "select" | "export" | "calendar" | "filter";
+
+type MobileReviewSettingsDrawerProps = {
+  camera: string;
+  filter?: ReviewFilter;
+  latestTime: number;
+  currentTime: number;
+  range?: TimeRange;
+  mode: ExportMode;
+  onUpdateFilter: (filter: ReviewFilter) => void;
+  setRange: (range: TimeRange | undefined) => void;
+  setMode: (mode: ExportMode) => void;
+};
+export default function MobileReviewSettingsDrawer({
+  camera,
+  filter,
+  latestTime,
+  currentTime,
+  range,
+  mode,
+  onUpdateFilter,
+  setRange,
+  setMode,
+}: MobileReviewSettingsDrawerProps) {
+  const { data: config } = useSWR<FrigateConfig>("config");
+  const [drawerMode, setDrawerMode] = useState<DrawerMode>("none");
+
+  // exports
+
+  const [name, setName] = useState("");
+  const onStartExport = useCallback(() => {
+    if (!range) {
+      toast.error("No valid time range selected", { position: "top-center" });
+      return;
+    }
+
+    axios
+      .post(`export/${camera}/start/${range.after}/end/${range.before}`, {
+        playback: "realtime",
+        name,
+      })
+      .then((response) => {
+        if (response.status == 200) {
+          toast.success(
+            "Successfully started export. View the file in the /exports folder.",
+            { position: "top-center" },
+          );
+          setName("");
+          setRange(undefined);
+          setMode("none");
+        }
+      })
+      .catch((error) => {
+        if (error.response?.data?.message) {
+          toast.error(
+            `Failed to start export: ${error.response.data.message}`,
+            { position: "top-center" },
+          );
+        } else {
+          toast.error(`Failed to start export: ${error.message}`, {
+            position: "top-center",
+          });
+        }
+      });
+  }, [camera, name, range, setRange, setName, setMode]);
+
+  // filters
+
+  const allLabels = useMemo<string[]>(() => {
+    if (!config) {
+      return [];
+    }
+
+    const labels = new Set<string>();
+    const cameras = filter?.cameras || Object.keys(config.cameras);
+
+    cameras.forEach((camera) => {
+      const cameraConfig = config.cameras[camera];
+      cameraConfig.objects.track.forEach((label) => {
+        if (!ATTRIBUTES.includes(label)) {
+          labels.add(label);
+        }
+      });
+
+      if (cameraConfig.audio.enabled_in_config) {
+        cameraConfig.audio.listen.forEach((label) => {
+          labels.add(label);
+        });
+      }
+    });
+
+    return [...labels].sort();
+  }, [config, filter]);
+  const [currentLabels, setCurrentLabels] = useState<string[] | undefined>(
+    filter?.labels,
+  );
+
+  if (!isMobile) {
+    return;
+  }
+
+  let content;
+  if (drawerMode == "select") {
+    content = (
+      <div className="w-full p-4 flex flex-col gap-2">
+        <Button
+          className="w-full flex justify-center items-center gap-2"
+          onClick={() => setDrawerMode("export")}
+        >
+          <FaArrowDown className="p-1 fill-secondary bg-muted-foreground rounded-md" />
+          Export
+        </Button>
+        <Button
+          className="w-full flex justify-center items-center gap-2"
+          onClick={() => setDrawerMode("calendar")}
+        >
+          <FaCalendarAlt className="fill-muted-foreground" />
+          Calendar
+        </Button>
+        <Button
+          className="w-full flex justify-center items-center gap-2"
+          onClick={() => setDrawerMode("filter")}
+        >
+          <FaFilter className="fill-muted-foreground" />
+          Filter
+        </Button>
+      </div>
+    );
+  } else if (drawerMode == "export") {
+    content = (
+      <ExportContent
+        latestTime={latestTime}
+        currentTime={currentTime}
+        range={range}
+        name={name}
+        onStartExport={onStartExport}
+        setName={setName}
+        setRange={setRange}
+        setMode={(mode) => {
+          setMode(mode);
+
+          if (mode == "timeline") {
+            setDrawerMode("none");
+          }
+        }}
+        onCancel={() => {
+          setMode("none");
+          setRange(undefined);
+          setDrawerMode("select");
+        }}
+      />
+    );
+  } else if (drawerMode == "calendar") {
+    content = (
+      <div className="w-full flex flex-col">
+        <div className="w-full h-8 relative">
+          <div
+            className="absolute left-0 text-selected"
+            onClick={() => setDrawerMode("select")}
+          >
+            Back
+          </div>
+          <div className="absolute left-1/2 -translate-x-1/2 text-muted-foreground">
+            Calendar
+          </div>
+        </div>
+        <ReviewActivityCalendar
+          selectedDay={
+            filter?.after == undefined
+              ? undefined
+              : new Date(filter.after * 1000)
+          }
+          onSelect={(day) => {
+            onUpdateFilter({
+              ...filter,
+              after: day == undefined ? undefined : day.getTime() / 1000,
+              before: day == undefined ? undefined : getEndOfDayTimestamp(day),
+            });
+          }}
+        />
+        <SelectSeparator />
+        <div className="p-2 flex justify-center items-center">
+          <Button
+            variant="secondary"
+            onClick={() => {
+              onUpdateFilter({
+                ...filter,
+                after: undefined,
+                before: undefined,
+              });
+            }}
+          >
+            Reset
+          </Button>
+        </div>
+      </div>
+    );
+  } else if (drawerMode == "filter") {
+    content = (
+      <div className="w-full h-auto overflow-y-auto flex flex-col">
+        <div className="w-full h-8 mb-2 relative">
+          <div
+            className="absolute left-0 text-selected"
+            onClick={() => setDrawerMode("select")}
+          >
+            Back
+          </div>
+          <div className="absolute left-1/2 -translate-x-1/2 text-muted-foreground">
+            Filter
+          </div>
+        </div>
+        <GeneralFilterContent
+          allLabels={allLabels.concat(allLabels)}
+          selectedLabels={filter?.labels}
+          currentLabels={currentLabels}
+          showReviewed={0}
+          reviewed={0}
+          setCurrentLabels={setCurrentLabels}
+          updateLabelFilter={(newLabels) =>
+            onUpdateFilter({ ...filter, labels: newLabels })
+          }
+          setShowReviewed={() => {}}
+          setReviewed={() => {}}
+          onClose={() => setDrawerMode("select")}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <SaveExportOverlay
+        className="absolute top-8 left-1/2 -translate-x-1/2 z-50 pointer-events-none"
+        show={mode == "timeline"}
+        onSave={() => onStartExport()}
+        onCancel={() => setMode("none")}
+      />
+      <Drawer
+        open={drawerMode != "none"}
+        onOpenChange={(open) => {
+          if (!open) {
+            setDrawerMode("none");
+          }
+        }}
+      >
+        <DrawerTrigger asChild>
+          <Button
+            className="rounded-lg capitalize"
+            size="sm"
+            variant="secondary"
+            onClick={() => setDrawerMode("select")}
+          >
+            <FaCog className="text-muted-foreground" />
+          </Button>
+        </DrawerTrigger>
+        <DrawerContent className="max-h-[80dvh] overflow-hidden flex flex-col items-center gap-2 px-4 pb-4 mx-1 rounded-t-2xl">
+          {content}
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+}
+
+/**
+ * <MobileTimelineDrawer
+              selected={timelineType ?? "timeline"}
+              onSelect={setTimelineType}
+            />
+ */

web/src/components/overlay/MobileTimelineDrawer.tsx

@@ -0,0 +1,51 @@
+import { useState } from "react";
+import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
+import { Button } from "../ui/button";
+import { FaFlag } from "react-icons/fa";
+import { TimelineType } from "@/types/timeline";
+import { isMobile } from "react-device-detect";
+
+type MobileTimelineDrawerProps = {
+  selected: TimelineType;
+  onSelect: (timeline: TimelineType) => void;
+};
+export default function MobileTimelineDrawer({
+  selected,
+  onSelect,
+}: MobileTimelineDrawerProps) {
+  const [drawer, setDrawer] = useState(false);
+
+  if (!isMobile) {
+    return;
+  }
+
+  return (
+    <Drawer open={drawer} onOpenChange={setDrawer}>
+      <DrawerTrigger asChild>
+        <Button className="rounded-lg capitalize" size="sm" variant="secondary">
+          <FaFlag className="text-muted-foreground" />
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent className="max-h-[75dvh] overflow-hidden flex flex-col items-center gap-2 px-4 pb-4 mx-1 rounded-t-2xl">
+        <div
+          className={`w-full mx-4 py-2 text-center capitalize ${selected == "timeline" ? "bg-secondary rounded-lg" : ""}`}
+          onClick={() => {
+            onSelect("timeline");
+            setDrawer(false);
+          }}
+        >
+          Timeline
+        </div>
+        <div
+          className={`w-full mx-4 py-2 text-center capitalize ${selected == "events" ? "bg-secondary rounded-lg" : ""}`}
+          onClick={() => {
+            onSelect("events");
+            setDrawer(false);
+          }}
+        >
+          Events
+        </div>
+      </DrawerContent>
+    </Drawer>
+  );
+}

web/src/components/overlay/SaveExportOverlay.tsx

@@ -0,0 +1,45 @@
+import { LuX } from "react-icons/lu";
+import { Button } from "../ui/button";
+import { FaCompactDisc } from "react-icons/fa";
+
+type SaveExportOverlayProps = {
+  className: string;
+  show: boolean;
+  onSave: () => void;
+  onCancel: () => void;
+};
+export default function SaveExportOverlay({
+  className,
+  show,
+  onSave,
+  onCancel,
+}: SaveExportOverlayProps) {
+  return (
+    <div className={className}>
+      <div
+        className={`flex justify-center px-2 gap-2 items-center pointer-events-auto rounded-lg *:text-white ${
+          show ? "animate-in slide-in-from-top duration-500" : "invisible"
+        }  text-center mt-5 mx-auto`}
+      >
+        <Button
+          className="flex items-center gap-1"
+          variant="select"
+          size="sm"
+          onClick={onSave}
+        >
+          <FaCompactDisc />
+          Save Export
+        </Button>
+        <Button
+          className="flex items-center gap-1"
+          size="sm"
+          variant="secondary"
+          onClick={onCancel}
+        >
+          <LuX />
+          Cancel
+        </Button>
+      </div>
+    </div>
+  );
+}