From ea5cb4fd8bec68f1b0aff97aedad757846258084 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Fri, 8 Mar 2024 10:14:58 -0700
Subject: [PATCH] Rework mobile drawers to have a max height (#10330)

---
 .../components/filter/ReviewFilterGroup.tsx   | 162 ++++++++++--------
 web/src/pages/SubmitPlus.tsx                  | 126 ++++++++------
 2 files changed, 158 insertions(+), 130 deletions(-)

diff --git a/web/src/components/filter/ReviewFilterGroup.tsx b/web/src/components/filter/ReviewFilterGroup.tsx
index 1d862998c..b1d74ce23 100644
--- a/web/src/components/filter/ReviewFilterGroup.tsx
+++ b/web/src/components/filter/ReviewFilterGroup.tsx
@@ -155,56 +155,62 @@ function CamerasFilterButton({
         Filter Cameras
       </DropdownMenuLabel>
       <DropdownMenuSeparator />
-      <FilterCheckBox
-        isChecked={currentCameras == undefined}
-        label="All Cameras"
-        onCheckedChange={(isChecked) => {
-          if (isChecked) {
-            setCurrentCameras(undefined);
-          }
-        }}
-      />
-      {groups.length > 0 && (
-        <>
-          <DropdownMenuSeparator />
-          {groups.map(([name, conf]) => {
-            return (
-              <FilterCheckBox
-                key={name}
-                label={name}
-                isChecked={false}
-                onCheckedChange={() => {
-                  setCurrentCameras([...conf.cameras]);
-                }}
-              />
-            );
-          })}
-        </>
-      )}
-      <DropdownMenuSeparator />
-      {allCameras.map((item) => (
+      <div className="h-auto overflow-y-auto overflow-x-hidden">
         <FilterCheckBox
-          key={item}
-          isChecked={currentCameras?.includes(item) ?? false}
-          label={item.replaceAll("_", " ")}
+          isChecked={currentCameras == undefined}
+          label="All Cameras"
           onCheckedChange={(isChecked) => {
             if (isChecked) {
-              const updatedCameras = currentCameras ? [...currentCameras] : [];
-
-              updatedCameras.push(item);
-              setCurrentCameras(updatedCameras);
-            } else {
-              const updatedCameras = currentCameras ? [...currentCameras] : [];
-
-              // can not deselect the last item
-              if (updatedCameras.length > 1) {
-                updatedCameras.splice(updatedCameras.indexOf(item), 1);
-                setCurrentCameras(updatedCameras);
-              }
+              setCurrentCameras(undefined);
             }
           }}
         />
-      ))}
+        {groups.length > 0 && (
+          <>
+            <DropdownMenuSeparator />
+            {groups.map(([name, conf]) => {
+              return (
+                <FilterCheckBox
+                  key={name}
+                  label={name}
+                  isChecked={false}
+                  onCheckedChange={() => {
+                    setCurrentCameras([...conf.cameras]);
+                  }}
+                />
+              );
+            })}
+          </>
+        )}
+        <DropdownMenuSeparator />
+        {allCameras.map((item) => (
+          <FilterCheckBox
+            key={item}
+            isChecked={currentCameras?.includes(item) ?? false}
+            label={item.replaceAll("_", " ")}
+            onCheckedChange={(isChecked) => {
+              if (isChecked) {
+                const updatedCameras = currentCameras
+                  ? [...currentCameras]
+                  : [];
+
+                updatedCameras.push(item);
+                setCurrentCameras(updatedCameras);
+              } else {
+                const updatedCameras = currentCameras
+                  ? [...currentCameras]
+                  : [];
+
+                // can not deselect the last item
+                if (updatedCameras.length > 1) {
+                  updatedCameras.splice(updatedCameras.indexOf(item), 1);
+                  setCurrentCameras(updatedCameras);
+                }
+              }
+            }}
+          />
+        ))}
+      </div>
       <DropdownMenuSeparator />
       <div className="flex justify-center items-center">
         <Button
@@ -233,7 +239,9 @@ function CamerasFilterButton({
         }}
       >
         <DrawerTrigger asChild>{trigger}</DrawerTrigger>
-        <DrawerContent>{content}</DrawerContent>
+        <DrawerContent className="max-h-[75dvh] overflow-hidden">
+          {content}
+        </DrawerContent>
       </Drawer>
     );
   }
@@ -380,46 +388,50 @@ function GeneralFilterButton({
           checked={reviewed == 1}
           onCheckedChange={() => setReviewed(reviewed == 0 ? 1 : 0)}
         />
-        <Label className="ml-2" htmlFor="reviewed">Show Reviewed</Label>
+        <Label className="ml-2" htmlFor="reviewed">
+          Show Reviewed
+        </Label>
       </div>
       <DropdownMenuSeparator />
       <DropdownMenuLabel className="flex justify-center items-center">
         Filter Labels
       </DropdownMenuLabel>
       <DropdownMenuSeparator />
-      <FilterCheckBox
-        isChecked={currentLabels == undefined}
-        label="All Labels"
-        onCheckedChange={(isChecked) => {
-          if (isChecked) {
-            setCurrentLabels(undefined);
-          }
-        }}
-      />
-      <DropdownMenuSeparator />
-      {allLabels.map((item) => (
+      <div className="h-auto overflow-y-auto overflow-x-hidden">
         <FilterCheckBox
-          key={item}
-          isChecked={currentLabels?.includes(item) ?? false}
-          label={item.replaceAll("_", " ")}
+          isChecked={currentLabels == undefined}
+          label="All Labels"
           onCheckedChange={(isChecked) => {
             if (isChecked) {
-              const updatedLabels = currentLabels ? [...currentLabels] : [];
-
-              updatedLabels.push(item);
-              setCurrentLabels(updatedLabels);
-            } else {
-              const updatedLabels = currentLabels ? [...currentLabels] : [];
-
-              // can not deselect the last item
-              if (updatedLabels.length > 1) {
-                updatedLabels.splice(updatedLabels.indexOf(item), 1);
-                setCurrentLabels(updatedLabels);
-              }
+              setCurrentLabels(undefined);
             }
           }}
         />
-      ))}
+        <DropdownMenuSeparator />
+        {allLabels.map((item) => (
+          <FilterCheckBox
+            key={item}
+            isChecked={currentLabels?.includes(item) ?? false}
+            label={item.replaceAll("_", " ")}
+            onCheckedChange={(isChecked) => {
+              if (isChecked) {
+                const updatedLabels = currentLabels ? [...currentLabels] : [];
+
+                updatedLabels.push(item);
+                setCurrentLabels(updatedLabels);
+              } else {
+                const updatedLabels = currentLabels ? [...currentLabels] : [];
+
+                // can not deselect the last item
+                if (updatedLabels.length > 1) {
+                  updatedLabels.splice(updatedLabels.indexOf(item), 1);
+                  setCurrentLabels(updatedLabels);
+                }
+              }
+            }}
+          />
+        ))}
+      </div>
       <DropdownMenuSeparator />
       <div className="flex justify-center items-center">
         <Button
@@ -456,7 +468,9 @@ function GeneralFilterButton({
         }}
       >
         <DrawerTrigger asChild>{trigger}</DrawerTrigger>
-        <DrawerContent>{content}</DrawerContent>
+        <DrawerContent className="max-h-[75dvh] overflow-hidden">
+          {content}
+        </DrawerContent>
       </Drawer>
     );
   }
diff --git a/web/src/pages/SubmitPlus.tsx b/web/src/pages/SubmitPlus.tsx
index 699cc313f..1fc76597d 100644
--- a/web/src/pages/SubmitPlus.tsx
+++ b/web/src/pages/SubmitPlus.tsx
@@ -9,6 +9,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -20,6 +21,7 @@ import { Event } from "@/types/event";
 import { FrigateConfig } from "@/types/frigateConfig";
 import axios from "axios";
 import { useCallback, useMemo, useState } from "react";
+import { isMobile } from "react-device-detect";
 import { FaList, FaVideo } from "react-icons/fa";
 import useSWR from "swr";
 
@@ -193,9 +195,13 @@ function PlusFilterGroup({
     undefined,
   );
 
+  const Menu = isMobile ? Drawer : DropdownMenu;
+  const Trigger = isMobile ? DrawerTrigger : DropdownMenuTrigger;
+  const Content = isMobile ? DrawerContent : DropdownMenuContent;
+
   return (
     <div className="w-full h-16 flex justify-start gap-2 items-center">
-      <DropdownMenu
+      <Menu
         open={open == "camera"}
         onOpenChange={(open) => {
           if (!open) {
@@ -204,7 +210,7 @@ function PlusFilterGroup({
           setOpen(open ? "camera" : "none");
         }}
       >
-        <DropdownMenuTrigger asChild>
+        <Trigger asChild>
           <Button size="sm" className="mx-1 capitalize" variant="secondary">
             <FaVideo className="md:mr-[10px] text-muted-foreground" />
             <div className="hidden md:block">
@@ -213,8 +219,8 @@ function PlusFilterGroup({
                 : `${selectedCameras.length} Cameras`}
             </div>
           </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent>
+        </Trigger>
+        <Content className={isMobile ? "max-h-[75dvh]" : ""}>
           <DropdownMenuLabel className="flex justify-center">
             Filter Cameras
           </DropdownMenuLabel>
@@ -229,33 +235,35 @@ function PlusFilterGroup({
             }}
           />
           <DropdownMenuSeparator />
-          {allCameras.map((item) => (
-            <FilterCheckBox
-              key={item}
-              isChecked={currentCameras?.includes(item) ?? false}
-              label={item.replaceAll("_", " ")}
-              onCheckedChange={(isChecked) => {
-                if (isChecked) {
-                  const updatedCameras = currentCameras
-                    ? [...currentCameras]
-                    : [];
+          <div className={isMobile ? "h-auto overflow-y-auto" : ""}>
+            {allCameras.map((item) => (
+              <FilterCheckBox
+                key={item}
+                isChecked={currentCameras?.includes(item) ?? false}
+                label={item.replaceAll("_", " ")}
+                onCheckedChange={(isChecked) => {
+                  if (isChecked) {
+                    const updatedCameras = currentCameras
+                      ? [...currentCameras]
+                      : [];
 
-                  updatedCameras.push(item);
-                  setCurrentCameras(updatedCameras);
-                } else {
-                  const updatedCameras = currentCameras
-                    ? [...currentCameras]
-                    : [];
-
-                  // can not deselect the last item
-                  if (updatedCameras.length > 1) {
-                    updatedCameras.splice(updatedCameras.indexOf(item), 1);
+                    updatedCameras.push(item);
                     setCurrentCameras(updatedCameras);
+                  } else {
+                    const updatedCameras = currentCameras
+                      ? [...currentCameras]
+                      : [];
+
+                    // can not deselect the last item
+                    if (updatedCameras.length > 1) {
+                      updatedCameras.splice(updatedCameras.indexOf(item), 1);
+                      setCurrentCameras(updatedCameras);
+                    }
                   }
-                }
-              }}
-            />
-          ))}
+                }}
+              />
+            ))}
+          </div>
           <DropdownMenuSeparator />
           <div className="flex justify-center items-center">
             <Button
@@ -268,9 +276,9 @@ function PlusFilterGroup({
               Apply
             </Button>
           </div>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu
+        </Content>
+      </Menu>
+      <Menu
         open={open == "label"}
         onOpenChange={(open) => {
           if (!open) {
@@ -279,7 +287,7 @@ function PlusFilterGroup({
           setOpen(open ? "label" : "none");
         }}
       >
-        <DropdownMenuTrigger asChild>
+        <Trigger asChild>
           <Button size="sm" className="mx-1 capitalize" variant="secondary">
             <FaList className="md:mr-[10px] text-muted-foreground" />
             <div className="hidden md:block">
@@ -288,8 +296,8 @@ function PlusFilterGroup({
                 : `${selectedLabels.length} Labels`}
             </div>
           </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent>
+        </Trigger>
+        <Content className={isMobile ? "max-h-[75dvh]" : ""}>
           <DropdownMenuLabel className="flex justify-center">
             Filter Labels
           </DropdownMenuLabel>
@@ -304,29 +312,35 @@ function PlusFilterGroup({
             }}
           />
           <DropdownMenuSeparator />
-          {allLabels.map((item) => (
-            <FilterCheckBox
-              key={item}
-              isChecked={currentLabels?.includes(item) ?? false}
-              label={item.replaceAll("_", " ")}
-              onCheckedChange={(isChecked) => {
-                if (isChecked) {
-                  const updatedLabels = currentLabels ? [...currentLabels] : [];
+          <div className={isMobile ? "h-auto overflow-y-auto" : ""}>
+            {allLabels.map((item) => (
+              <FilterCheckBox
+                key={item}
+                isChecked={currentLabels?.includes(item) ?? false}
+                label={item.replaceAll("_", " ")}
+                onCheckedChange={(isChecked) => {
+                  if (isChecked) {
+                    const updatedLabels = currentLabels
+                      ? [...currentLabels]
+                      : [];
 
-                  updatedLabels.push(item);
-                  setCurrentLabels(updatedLabels);
-                } else {
-                  const updatedLabels = currentLabels ? [...currentLabels] : [];
-
-                  // can not deselect the last item
-                  if (updatedLabels.length > 1) {
-                    updatedLabels.splice(updatedLabels.indexOf(item), 1);
+                    updatedLabels.push(item);
                     setCurrentLabels(updatedLabels);
+                  } else {
+                    const updatedLabels = currentLabels
+                      ? [...currentLabels]
+                      : [];
+
+                    // can not deselect the last item
+                    if (updatedLabels.length > 1) {
+                      updatedLabels.splice(updatedLabels.indexOf(item), 1);
+                      setCurrentLabels(updatedLabels);
+                    }
                   }
-                }
-              }}
-            />
-          ))}
+                }}
+              />
+            ))}
+          </div>
           <DropdownMenuSeparator />
           <div className="flex justify-center items-center">
             <Button
@@ -339,8 +353,8 @@ function PlusFilterGroup({
               Apply
             </Button>
           </div>
-        </DropdownMenuContent>
-      </DropdownMenu>
+        </Content>
+      </Menu>
     </div>
   );
 }