From 29ab7f247e907822816d14481de3c220174aebc5 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 10 Apr 2025 13:38:43 -0600
Subject: [PATCH] Use mobile drawer for face selection

---
 web/src/pages/FaceLibrary.tsx | 63 ++++++++++++++++++++++++-----------
 1 file changed, 43 insertions(+), 20 deletions(-)

diff --git a/web/src/pages/FaceLibrary.tsx b/web/src/pages/FaceLibrary.tsx
index 30606808eb..4c7f59b83c 100644
--- a/web/src/pages/FaceLibrary.tsx
+++ b/web/src/pages/FaceLibrary.tsx
@@ -13,6 +13,12 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -842,6 +848,11 @@ function FaceAttempt({
       });
   }, [data, onRefresh, t]);
 
+  const Selector = isDesktop ? DropdownMenu : Drawer;
+  const SelectorTrigger = isDesktop ? DropdownMenuTrigger : DrawerTrigger;
+  const SelectorContent = isDesktop ? DropdownMenuContent : DrawerContent;
+  const SelectorItem = isDesktop ? DropdownMenuItem : DrawerClose;
+
   return (
     <>
       {newFace && (
@@ -896,33 +907,45 @@ function FaceAttempt({
             </div>
             <div className="flex flex-row items-start justify-end gap-5 md:gap-4">
               <Tooltip>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
+                <Selector>
+                  <SelectorTrigger asChild>
                     <TooltipTrigger>
                       <AddFaceIcon className="size-5 cursor-pointer text-primary-variant hover:text-primary" />
                     </TooltipTrigger>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent>
+                  </SelectorTrigger>
+                  <SelectorContent
+                    className={cn(
+                      "max-h-[75dvh] overflow-hidden",
+                      isMobile && "mx-1 gap-2 rounded-t-2xl px-4",
+                    )}
+                  >
                     <DropdownMenuLabel>{t("trainFaceAs")}</DropdownMenuLabel>
-                    <DropdownMenuItem
-                      className="flex cursor-pointer gap-2 capitalize"
-                      onClick={() => setNewFace(true)}
+                    <div
+                      className={cn(
+                        "flex flex-col",
+                        isMobile && "gap-2 overflow-y-auto pb-4",
+                      )}
                     >
-                      <LuPlus />
-                      {t("createFaceLibrary.new")}
-                    </DropdownMenuItem>
-                    {faceNames.map((faceName) => (
-                      <DropdownMenuItem
-                        key={faceName}
+                      <SelectorItem
                         className="flex cursor-pointer gap-2 capitalize"
-                        onClick={() => onTrainAttempt(faceName)}
+                        onClick={() => setNewFace(true)}
                       >
-                        <LuScanFace />
-                        {faceName}
-                      </DropdownMenuItem>
-                    ))}
-                  </DropdownMenuContent>
-                </DropdownMenu>
+                        <LuPlus />
+                        {t("createFaceLibrary.new")}
+                      </SelectorItem>
+                      {faceNames.map((faceName) => (
+                        <SelectorItem
+                          key={faceName}
+                          className="flex cursor-pointer gap-2 capitalize"
+                          onClick={() => onTrainAttempt(faceName)}
+                        >
+                          <LuScanFace />
+                          {faceName}
+                        </SelectorItem>
+                      ))}
+                    </div>
+                  </SelectorContent>
+                </Selector>
                 <TooltipContent>{t("trainFace")}</TooltipContent>
               </Tooltip>
               <Tooltip>