Add ability to upload image

web/src/components/overlay/dialog/UploadImageDialog.tsx

@@ -0,0 +1,75 @@
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+type UploadImageDialogProps = {
+  open: boolean;
+  title: string;
+  description?: string;
+  setOpen: (open: boolean) => void;
+};
+export default function UploadImageDialog({
+  open,
+  title,
+  description,
+  setOpen,
+}: UploadImageDialogProps) {
+  const formSchema = z.object({
+    image: z
+      .instanceof(File, { message: "Please select an image file." })
+      .refine((file) => file.size < 1000000, "Image size is too large."),
+  });
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    mode: "onChange",
+  });
+
+  return (
+    <Dialog open={open} defaultOpen={false} onOpenChange={setOpen}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          {description && <DialogDescription>{description}</DialogDescription>}
+        </DialogHeader>
+        <Form {...form}>
+          <form>
+            <FormField
+              control={form.control}
+              name="image"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    {
+                      // @ts-expect-error ignore
+                      <Input
+                        className="aspect-video h-40 w-full"
+                        type="file"
+                        {...field}
+                      />
+                    }
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+          </form>
+        </Form>
+        <DialogFooter>
+          <Button onClick={() => setOpen(false)}>Cancel</Button>
+          <Button variant="select">Save</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

web/src/pages/FaceLibrary.tsx

@@ -1,26 +1,27 @@
 import { baseUrl } from "@/api/baseUrl";
 import Chip from "@/components/indicators/Chip";
-import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
+import UploadImageDialog from "@/components/overlay/dialog/UploadImageDialog";
-import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { Toaster } from "@/components/ui/sonner";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import useOptimisticState from "@/hooks/use-optimistic-state";
-import { zodResolver } from "@hookform/resolvers/zod";
 import axios from "axios";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { isDesktop } from "react-device-detect";
-import { useForm } from "react-hook-form";
+import { LuImagePlus, LuTrash } from "react-icons/lu";
-import { LuTrash } from "react-icons/lu";
 import { toast } from "sonner";
 import useSWR from "swr";
-import { z } from "zod";
 
 export default function FaceLibrary() {
   const [page, setPage] = useState<string>();
   const [pageToggle, setPageToggle] = useOptimisticState(page, setPage, 100);
   const tabsRef = useRef<HTMLDivElement | null>(null);
 
+  // upload
+
+  const [upload, setUpload] = useState(false);
+
   // face data
 
   const { data: faceData } = useSWR("faces");
@@ -42,29 +43,18 @@ export default function FaceLibrary() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [faces]);
 
-  /**
-     * <Button className="flex gap-2" variant="select" size="sm">
-            <FaPlus />
-            Upload Image
-          </Button>
-     */
-
-  const formSchema = z.object({
-    image: z
-      .instanceof(File, { message: "Please select an image file." })
-      .refine((file) => file.size < 1000000, "Image size is too large."),
-  });
-
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    mode: "onChange",
-  });
-
   return (
     <div className="flex size-full flex-col p-2">
-      <div className="relative flex h-11 w-full items-center justify-between">
+      <Toaster />
-        <Toaster />
 
+      <UploadImageDialog
+        open={upload}
+        title="Upload Face Image"
+        description={`Upload an image to scan for faces and include for ${pageToggle}`}
+        setOpen={setUpload}
+      />
+
+      <div className="relative flex h-11 w-full items-center justify-between">
         <ScrollArea className="w-full whitespace-nowrap">
           <div ref={tabsRef} className="flex flex-row">
             <ToggleGroup
@@ -93,30 +83,19 @@ export default function FaceLibrary() {
             <ScrollBar orientation="horizontal" className="h-0" />
           </div>
         </ScrollArea>
-        <Form {...form}>
-          <form>
-            <FormField
-              control={form.control}
-              name="image"
-              render={({ field }) => (
-                <FormItem>
-                  <FormControl>
-                    {
-                      // @ts-expect-error ignore
-                      <Input type="file" {...field} />
-                    }
-                  </FormControl>
-                </FormItem>
-              )}
-            />
-          </form>
-        </Form>
       </div>
       {pageToggle && (
         <div className="flex flex-wrap gap-2">
           {faceImages.map((image: string) => (
-            <FaceImage name={pageToggle} image={image} />
+            <FaceImage key={image} name={pageToggle} image={image} />
           ))}
+          <Button
+            key="upload"
+            className="size-40"
+            onClick={() => setUpload(true)}
+          >
+            <LuImagePlus className="size-10" />
+          </Button>
         </div>
       )}
     </div>