Camera group dialog changes and fixes (#11117)

* camera group dialog changes and fixes

* use drawer on mobile

* spacing

web/src/components/filter/CameraGroupSelector.tsx

@@ -3,7 +3,7 @@ import {
   FrigateConfig,
   GROUP_ICONS,
 } from "@/types/frigateConfig";
-import { isDesktop } from "react-device-detect";
+import { isDesktop, isMobile } from "react-device-detect";
 import useSWR from "swr";
 import { MdHome } from "react-icons/md";
 import { usePersistedOverlayState } from "@/hooks/use-overlay-state";
@@ -11,19 +11,54 @@ import { Button } from "../ui/button";
 import { useCallback, useMemo, useState } from "react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import { getIconForGroup } from "@/utils/iconUtil";
-import { LuPencil, LuPlus, LuTrash } from "react-icons/lu";
+import { LuPencil, LuPlus } from "react-icons/lu";
 import { Dialog, DialogContent, DialogTitle } from "../ui/dialog";
+import { Drawer, DrawerContent } from "../ui/drawer";
 import { Input } from "../ui/input";
+import { Separator } from "../ui/separator";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuRadioGroup,
+  DropdownMenuItem,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "../ui/alert-dialog";
 import axios from "axios";
 import FilterSwitch from "./FilterSwitch";
+import { HiOutlineDotsVertical, HiTrash } from "react-icons/hi";
+import IconWrapper from "../ui/icon-wrapper";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { Toaster } from "@/components/ui/sonner";
+import { toast } from "sonner";
+import ActivityIndicator from "../indicators/activity-indicator";
+import { ScrollArea, ScrollBar } from "../ui/scroll-area";
 
 type CameraGroupSelectorProps = {
   className?: string;
@@ -71,70 +106,79 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
 
   const [addGroup, setAddGroup] = useState(false);
 
+  const Scroller = isMobile ? ScrollArea : "div";
+
   return (
-    <div
+    <>
-      className={`flex items-center justify-start gap-2 ${className ?? ""} ${isDesktop ? "flex-col" : ""}`}
-    >
       <NewGroupDialog
         open={addGroup}
         setOpen={setAddGroup}
         currentGroups={groups}
+        activeGroup={group}
+        setGroup={setGroup}
       />
-
+      <Scroller className={`${isMobile ? "whitespace-nowrap" : ""}`}>
-      <Tooltip open={tooltip == "default"}>
+        <div
-        <TooltipTrigger asChild>
+          className={`flex items-center justify-start gap-2 ${className ?? ""} ${isDesktop ? "flex-col" : "whitespace-nowrap"}`}
-          <Button
+        >
-            className={
+          <Tooltip open={tooltip == "default"}>
-              group == "default"
-                ? "text-selected bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
-                : "text-secondary-foreground bg-secondary focus:text-secondary-foreground focus:bg-secondary"
-            }
-            size="xs"
-            onClick={() => (group ? setGroup("default", true) : null)}
-            onMouseEnter={() => (isDesktop ? showTooltip("default") : null)}
-            onMouseLeave={() => (isDesktop ? showTooltip(undefined) : null)}
-          >
-            <MdHome className="size-4" />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent className="capitalize" side="right">
-          All Cameras
-        </TooltipContent>
-      </Tooltip>
-      {groups.map(([name, config]) => {
-        return (
-          <Tooltip key={name} open={tooltip == name}>
             <TooltipTrigger asChild>
               <Button
                 className={
-                  group == name
+                  group == "default"
                     ? "text-selected bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
-                    : "text-secondary-foreground bg-secondary"
+                    : "text-secondary-foreground bg-secondary focus:text-secondary-foreground focus:bg-secondary"
                 }
                 size="xs"
-                onClick={() => setGroup(name, group != "default")}
+                onClick={() => (group ? setGroup("default", true) : null)}
-                onMouseEnter={() => (isDesktop ? showTooltip(name) : null)}
+                onMouseEnter={() => (isDesktop ? showTooltip("default") : null)}
                 onMouseLeave={() => (isDesktop ? showTooltip(undefined) : null)}
               >
-                {getIconForGroup(config.icon)}
+                <MdHome className="size-4" />
               </Button>
             </TooltipTrigger>
             <TooltipContent className="capitalize" side="right">
-              {name}
+              All Cameras
             </TooltipContent>
           </Tooltip>
-        );
+          {groups.map(([name, config]) => {
-      })}
+            return (
-      {isDesktop && (
+              <Tooltip key={name} open={tooltip == name}>
-        <Button
+                <TooltipTrigger asChild>
-          className="text-muted-foreground bg-secondary"
+                  <Button
-          size="xs"
+                    className={
-          onClick={() => setAddGroup(true)}
+                      group == name
-        >
+                        ? "text-selected bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
-          <LuPlus className="size-4 text-primary" />
+                        : "text-secondary-foreground bg-secondary"
-        </Button>
+                    }
-      )}
+                    size="xs"
-    </div>
+                    onClick={() => setGroup(name, group != "default")}
+                    onMouseEnter={() => (isDesktop ? showTooltip(name) : null)}
+                    onMouseLeave={() =>
+                      isDesktop ? showTooltip(undefined) : null
+                    }
+                  >
+                    {getIconForGroup(config.icon)}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent className="capitalize" side="right">
+                  {name}
+                </TooltipContent>
+              </Tooltip>
+            );
+          })}
+
+          <Button
+            className="text-muted-foreground bg-secondary"
+            size="xs"
+            onClick={() => setAddGroup(true)}
+          >
+            <LuPlus className="size-4 text-primary" />
+          </Button>
+          {isMobile && <ScrollBar orientation="horizontal" className="h-0" />}
+        </div>
+      </Scroller>
+    </>
   );
 }
 
@@ -142,195 +186,462 @@ type NewGroupDialogProps = {
   open: boolean;
   setOpen: (open: boolean) => void;
   currentGroups: [string, CameraGroupConfig][];
+  activeGroup?: string;
+  setGroup: (value: string | undefined, replace?: boolean | undefined) => void;
 };
-function NewGroupDialog({ open, setOpen, currentGroups }: NewGroupDialogProps) {
+function NewGroupDialog({
+  open,
+  setOpen,
+  currentGroups,
+  activeGroup,
+  setGroup,
+}: NewGroupDialogProps) {
+  const { mutate: updateConfig } = useSWR<FrigateConfig>("config");
+
+  // editing group and state
+
+  const [editingGroupName, setEditingGroupName] = useState("");
+
+  const editingGroup = useMemo(() => {
+    if (currentGroups && editingGroupName !== undefined) {
+      return currentGroups.find(
+        ([groupName]) => groupName === editingGroupName,
+      );
+    } else {
+      return undefined;
+    }
+  }, [currentGroups, editingGroupName]);
+
+  const [editState, setEditState] = useState<"none" | "add" | "edit">("none");
+  const [isLoading, setIsLoading] = useState(false);
+
+  // callbacks
+
+  const onDeleteGroup = useCallback(
+    async (name: string) => {
+      // TODO: reset order on groups when deleting
+
+      await axios
+        .put(`config/set?camera_groups.${name}`, { requires_restart: 0 })
+        .then((res) => {
+          if (res.status === 200) {
+            if (activeGroup == name) {
+              // deleting current group
+              setGroup("default");
+            }
+            updateConfig();
+          } else {
+            setOpen(false);
+            setEditState("none");
+            toast.error(`Failed to save config changes: ${res.statusText}`, {
+              position: "top-center",
+            });
+          }
+        })
+        .catch((error) => {
+          setOpen(false);
+          setEditState("none");
+          toast.error(
+            `Failed to save config changes: ${error.response.data.message}`,
+            { position: "top-center" },
+          );
+        })
+        .finally(() => {
+          setIsLoading(false);
+        });
+    },
+    [updateConfig, activeGroup, setGroup, setOpen],
+  );
+
+  const onSave = () => {
+    setOpen(false);
+    setEditState("none");
+  };
+
+  const onCancel = () => {
+    setEditingGroupName("");
+    setEditState("none");
+  };
+
+  const onEditGroup = useCallback((group: [string, CameraGroupConfig]) => {
+    setEditingGroupName(group[0]);
+    setEditState("edit");
+  }, []);
+
+  const Overlay = isDesktop ? Dialog : Drawer;
+  const Content = isDesktop ? DialogContent : DrawerContent;
+
+  return (
+    <>
+      <Toaster className="toaster group z-[100]" position="top-center" />
+      <Overlay
+        open={open}
+        onOpenChange={(open) => {
+          setEditState("none");
+          setOpen(open);
+        }}
+      >
+        <Content
+          className={`min-w-0 ${isMobile ? "w-full p-3 rounded-t-2xl max-h-[90%]" : "w-6/12 max-h-dvh overflow-y-auto"}`}
+        >
+          <div className="flex flex-col my-4 overflow-y-auto">
+            {editState === "none" && (
+              <>
+                <div className="flex flex-row justify-between items-center py-2">
+                  <DialogTitle>Camera Groups</DialogTitle>
+                  <Button
+                    variant="secondary"
+                    className="size-6 p-1 rounded-md text-background bg-secondary-foreground"
+                    onClick={() => {
+                      setEditState("add");
+                    }}
+                  >
+                    <LuPlus />
+                  </Button>
+                </div>
+                {currentGroups.map((group) => (
+                  <CameraGroupRow
+                    key={group[0]}
+                    group={group}
+                    onDeleteGroup={() => onDeleteGroup(group[0])}
+                    onEditGroup={() => onEditGroup(group)}
+                  />
+                ))}
+              </>
+            )}
+
+            {editState != "none" && (
+              <>
+                <div className="flex flex-row justify-between items-center mb-3">
+                  <DialogTitle>
+                    {editState == "add" ? "Add" : "Edit"} Camera Group
+                  </DialogTitle>
+                </div>
+                <CameraGroupEdit
+                  currentGroups={currentGroups}
+                  editingGroup={editingGroup}
+                  isLoading={isLoading}
+                  setIsLoading={setIsLoading}
+                  onSave={onSave}
+                  onCancel={onCancel}
+                />
+              </>
+            )}
+          </div>
+        </Content>
+      </Overlay>
+    </>
+  );
+}
+
+type CameraGroupRowProps = {
+  group: [string, CameraGroupConfig];
+  onDeleteGroup: () => void;
+  onEditGroup: () => void;
+};
+
+export function CameraGroupRow({
+  group,
+  onDeleteGroup,
+  onEditGroup,
+}: CameraGroupRowProps) {
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+
+  if (!group) {
+    return;
+  }
+
+  return (
+    <>
+      <div
+        key={group[0]}
+        className="flex md:p-1 rounded-lg flex-row items-center justify-between md:mx-2 my-1.5 transition-background duration-100"
+      >
+        <div className={`flex items-center`}>
+          <p className="cursor-default">{group[0]}</p>
+        </div>
+        <AlertDialog
+          open={deleteDialogOpen}
+          onOpenChange={() => setDeleteDialogOpen(!deleteDialogOpen)}
+        >
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Confirm Delete</AlertDialogTitle>
+            </AlertDialogHeader>
+            <AlertDialogDescription>
+              Are you sure you want to delete the camera group{" "}
+              <em>{group[0]}</em>?
+            </AlertDialogDescription>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <AlertDialogAction onClick={onDeleteGroup}>
+                Delete
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+
+        {isMobile && (
+          <>
+            <DropdownMenu>
+              <DropdownMenuTrigger>
+                <HiOutlineDotsVertical className="size-5" />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                <DropdownMenuItem onClick={onEditGroup}>Edit</DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setDeleteDialogOpen(true)}>
+                  Delete
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </>
+        )}
+        {!isMobile && (
+          <div className="flex flex-row gap-2 items-center">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <IconWrapper
+                  icon={LuPencil}
+                  className={`size-[15px] cursor-pointer`}
+                  onClick={onEditGroup}
+                />
+              </TooltipTrigger>
+              <TooltipContent>Edit</TooltipContent>
+            </Tooltip>
+
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <IconWrapper
+                  icon={HiTrash}
+                  className={`size-[15px] cursor-pointer`}
+                  onClick={() => setDeleteDialogOpen(true)}
+                />
+              </TooltipTrigger>
+              <TooltipContent>Delete</TooltipContent>
+            </Tooltip>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
+
+type CameraGroupEditProps = {
+  currentGroups: [string, CameraGroupConfig][];
+  editingGroup?: [string, CameraGroupConfig];
+  isLoading: boolean;
+  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
+  onSave?: () => void;
+  onCancel?: () => void;
+};
+
+export function CameraGroupEdit({
+  currentGroups,
+  editingGroup,
+  isLoading,
+  setIsLoading,
+  onSave,
+  onCancel,
+}: CameraGroupEditProps) {
   const { data: config, mutate: updateConfig } =
     useSWR<FrigateConfig>("config");
 
   const birdseyeConfig = useMemo(() => config?.birdseye, [config]);
 
-  // add fields
+  const formSchema = z.object({
+    name: z
+      .string()
+      .min(2, {
+        message: "Camera group name must be at least 2 characters.",
+      })
+      .transform((val: string) => val.trim().replace(/\s+/g, "_"))
+      .refine(
+        (value: string) => {
+          return (
+            editingGroup !== undefined ||
+            !currentGroups.map((group) => group[0]).includes(value)
+          );
+        },
+        {
+          message: "Camera group name already exists.",
+        },
+      ),
+    cameras: z.array(z.string()).min(2, {
+      message: "You must select at least two cameras.",
+    }),
+    icon: z.string(),
+  });
 
-  const [editState, setEditState] = useState<"none" | "add" | "edit">("none");
+  const onSubmit = useCallback(
-  const [newTitle, setNewTitle] = useState("");
+    async (values: z.infer<typeof formSchema>) => {
-  const [icon, setIcon] = useState("");
+      if (!values) {
-  const [cameras, setCameras] = useState<string[]>([]);
+        return;
-
-  // validation
-
-  const [error, setError] = useState("");
-
-  const onCreateGroup = useCallback(async () => {
-    if (!newTitle) {
-      setError("A title must be selected");
-      return;
-    }
-
-    if (!icon) {
-      setError("An icon must be selected");
-      return;
-    }
-
-    if (!cameras || cameras.length < 2) {
-      setError("At least 2 cameras must be selected");
-      return;
-    }
-
-    setError("");
-    const orderQuery = `camera_groups.${newTitle}.order=${currentGroups.length}`;
-    const iconQuery = `camera_groups.${newTitle}.icon=${icon}`;
-    const cameraQueries = cameras
-      .map((cam) => `&camera_groups.${newTitle}.cameras=${cam}`)
-      .join("");
-
-    const req = axios.put(
-      `config/set?${orderQuery}&${iconQuery}${cameraQueries}`,
-      { requires_restart: 0 },
-    );
-
-    setOpen(false);
-
-    if ((await req).status == 200) {
-      setNewTitle("");
-      setIcon("");
-      setCameras([]);
-      updateConfig();
-    }
-  }, [currentGroups, cameras, newTitle, icon, setOpen, updateConfig]);
-
-  const onDeleteGroup = useCallback(
-    async (name: string) => {
-      const req = axios.put(`config/set?camera_groups.${name}`, {
-        requires_restart: 0,
-      });
-
-      if ((await req).status == 200) {
-        updateConfig();
       }
+
+      setIsLoading(true);
+
+      const order =
+        editingGroup === undefined
+          ? currentGroups.length + 1
+          : editingGroup[1].order;
+
+      const orderQuery = `camera_groups.${values.name}.order=${order}`;
+      const iconQuery = `camera_groups.${values.name}.icon=${values.icon}`;
+      const cameraQueries = values.cameras
+        .map((cam) => `&camera_groups.${values.name}.cameras=${cam}`)
+        .join("");
+
+      axios
+        .put(`config/set?${orderQuery}&${iconQuery}${cameraQueries}`, {
+          requires_restart: 0,
+        })
+        .then((res) => {
+          if (res.status === 200) {
+            toast.success(`Camera group (${values.name}) has been saved.`, {
+              position: "top-center",
+            });
+            updateConfig();
+            if (onSave) {
+              onSave();
+            }
+          } else {
+            toast.error(`Failed to save config changes: ${res.statusText}`, {
+              position: "top-center",
+            });
+          }
+        })
+        .catch((error) => {
+          toast.error(
+            `Failed to save config changes: ${error.response.data.message}`,
+            { position: "top-center" },
+          );
+        })
+        .finally(() => {
+          setIsLoading(false);
+        });
     },
-    [updateConfig],
+    [currentGroups, setIsLoading, onSave, updateConfig, editingGroup],
   );
 
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    mode: "onChange",
+    defaultValues: {
+      name: (editingGroup && editingGroup[0]) ?? "",
+      icon: editingGroup && editingGroup[1].icon,
+      cameras: editingGroup && editingGroup[1].cameras,
+    },
+  });
+
   return (
-    <Dialog
+    <Form {...form}>
-      open={open}
+      <form onSubmit={form.handleSubmit(onSubmit)} className="mt-2 space-y-6">
-      onOpenChange={(open) => {
+        <FormField
-        setEditState("none");
+          control={form.control}
-        setNewTitle("");
+          name="name"
-        setIcon("");
+          render={({ field }) => (
-        setCameras([]);
+            <FormItem>
-        setOpen(open);
+              <FormLabel>Name</FormLabel>
-      }}
+              <FormControl>
-    >
+                <Input
-      <DialogContent className="min-w-0 w-96">
+                  className="w-full p-2 border border-input bg-background hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
-        <DialogTitle>Camera Groups</DialogTitle>
+                  placeholder="Enter a name..."
-        {currentGroups.map((group) => (
+                  disabled={editingGroup !== undefined}
-          <div key={group[0]} className="flex justify-between items-center">
+                  {...field}
-            {group[0]}
+                />
-            <div className="flex justify-center gap-1">
+              </FormControl>
-              <Button
+              <FormMessage />
-                className="bg-transparent"
+            </FormItem>
-                size="icon"
+          )}
-                onClick={() => {
+        />
-                  setNewTitle(group[0]);
+
-                  setIcon(group[1].icon);
+        <Separator className="flex my-2 bg-secondary" />
-                  setCameras(group[1].cameras);
+        <FormField
-                  setEditState("edit");
+          control={form.control}
-                }}
+          name="cameras"
-              >
+          render={({ field }) => (
-                <LuPencil />
+            <FormItem>
-              </Button>
+              <FormLabel>Cameras</FormLabel>
-              <Button
+              <FormDescription>Select cameras for this group.</FormDescription>
-                className="text-destructive bg-transparent"
+              {[
-                size="icon"
+                ...(birdseyeConfig?.enabled ? ["birdseye"] : []),
-                onClick={() => onDeleteGroup(group[0])}
+                ...Object.keys(config?.cameras ?? {}),
-              >
+              ].map((camera) => (
-                <LuTrash />
+                <FormControl key={camera}>
-              </Button>
-            </div>
-          </div>
-        ))}
-        {currentGroups.length > 0 && <DropdownMenuSeparator />}
-        {editState == "none" && (
-          <Button
-            className="text-primary justify-start"
-            variant="ghost"
-            onClick={() => setEditState("add")}
-          >
-            <LuPlus className="size-4 mr-1" />
-            Create new group
-          </Button>
-        )}
-        {editState != "none" && (
-          <>
-            <Input
-              type="text"
-              placeholder="Name"
-              disabled={editState == "edit"}
-              value={newTitle}
-              onChange={(e) => setNewTitle(e.target.value)}
-            />
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <div className="flex justify-start gap-2 items-center cursor-pointer">
-                  {icon.length == 0 ? "Select Icon" : "Icon: "}
-                  {icon ? getIconForGroup(icon) : <div className="size-4" />}
-                </div>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent>
-                <DropdownMenuRadioGroup value={icon} onValueChange={setIcon}>
-                  {GROUP_ICONS.map((gIcon) => (
-                    <DropdownMenuRadioItem
-                      key={gIcon}
-                      className="w-full flex justify-start items-center gap-2 cursor-pointer hover:bg-secondary"
-                      value={gIcon}
-                    >
-                      {getIconForGroup(gIcon)}
-                      {gIcon}
-                    </DropdownMenuRadioItem>
-                  ))}
-                </DropdownMenuRadioGroup>
-              </DropdownMenuContent>
-            </DropdownMenu>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <div className="flex justify-start gap-2 items-center cursor-pointer">
-                  {cameras.length == 0
-                    ? "Select Cameras"
-                    : `${cameras.length} Cameras`}
-                </div>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent>
-                {[
-                  ...(birdseyeConfig?.enabled ? ["birdseye"] : []),
-                  ...Object.keys(config?.cameras ?? {}),
-                ].map((camera) => (
                   <FilterSwitch
-                    key={camera}
+                    isChecked={field.value && field.value.includes(camera)}
-                    isChecked={cameras.includes(camera)}
                     label={camera.replaceAll("_", " ")}
                     onCheckedChange={(checked) => {
-                      if (checked) {
+                      const updatedCameras = checked
-                        setCameras([...cameras, camera]);
+                        ? [...(field.value || []), camera]
-                      } else {
+                        : (field.value || []).filter((c) => c !== camera);
-                        const index = cameras.indexOf(camera);
+                      form.setValue("cameras", updatedCameras);
-                        setCameras([
-                          ...cameras.slice(0, index),
-                          ...cameras.slice(index + 1),
-                        ]);
-                      }
                     }}
                   />
-                ))}
+                </FormControl>
-              </DropdownMenuContent>
+              ))}
-            </DropdownMenu>
+              <FormMessage />
-            {error && <div className="text-danger">{error}</div>}
+            </FormItem>
-            <Button variant="select" onClick={onCreateGroup}>
+          )}
-              Submit
+        />
-            </Button>
+
-          </>
+        <Separator className="flex my-2 bg-secondary" />
-        )}
+        <FormField
-      </DialogContent>
+          control={form.control}
-    </Dialog>
+          name="icon"
+          render={({ field }) => (
+            <FormItem className="space-y-3">
+              <FormLabel>Icon</FormLabel>
+              <FormControl>
+                <Select
+                  onValueChange={field.onChange}
+                  defaultValue={field.value}
+                >
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select an icon" />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    {GROUP_ICONS.map((gIcon) => (
+                      <SelectItem key={gIcon} value={gIcon}>
+                        <div className="flex flex-row justify-start items-center gap-2">
+                          <div className="size-4">{getIconForGroup(gIcon)}</div>
+                          {gIcon}
+                        </div>
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <Separator className="flex my-2 bg-secondary" />
+
+        <div className="flex flex-row gap-2 pt-5">
+          <Button className="flex flex-1" onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button
+            variant="select"
+            disabled={isLoading}
+            className="flex flex-1"
+            type="submit"
+          >
+            {isLoading ? (
+              <div className="flex flex-row items-center gap-2">
+                <ActivityIndicator />
+                <span>Saving...</span>
+              </div>
+            ) : (
+              "Save"
+            )}
+          </Button>
+        </div>
+      </form>
+    </Form>
   );
 }

web/src/components/settings/ZoneEditPane.tsx

@@ -551,14 +551,6 @@ export function ZoneObjectSelector({
 
     const labels = new Set<string>();
 
-    // Object.values(config.cameras).forEach((camera) => {
-    //   camera.objects.track.forEach((label) => {
-    //     if (!ATTRIBUTE_LABELS.includes(label)) {
-    //       labels.add(label);
-    //     }
-    //   });
-    // });
-
     cameraConfig.objects.track.forEach((label) => {
       if (!ATTRIBUTE_LABELS.includes(label)) {
         labels.add(label);

web/src/pages/Live.tsx

@@ -38,7 +38,13 @@ function Live() {
   // settings
 
   const includesBirdseye = useMemo(() => {
-    if (config && cameraGroup && cameraGroup != "default") {
+    if (
+      config &&
+      Object.keys(config.camera_groups).length &&
+      cameraGroup &&
+      config.camera_groups[cameraGroup] &&
+      cameraGroup != "default"
+    ) {
       return config.camera_groups[cameraGroup].cameras.includes("birdseye");
     } else {
       return false;
@@ -50,7 +56,12 @@ function Live() {
       return [];
     }
 
-    if (cameraGroup && cameraGroup != "default") {
+    if (
+      Object.keys(config.camera_groups).length &&
+      cameraGroup &&
+      config.camera_groups[cameraGroup] &&
+      cameraGroup != "default"
+    ) {
       const group = config.camera_groups[cameraGroup];
       return Object.values(config.cameras)
         .filter((conf) => conf.enabled && group.cameras.includes(conf.name))

web/src/views/live/LiveDashboardView.tsx

@@ -144,7 +144,9 @@ export default function LiveDashboardView({
       {isMobile && (
         <div className="h-11 relative flex items-center justify-between">
           <Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
-          <CameraGroupSelector />
+          <div className="max-w-[45%]">
+            <CameraGroupSelector />
+          </div>
           <div className="flex items-center gap-1">
             <Button
               className={`p-1 ${