Merge branch 'fastapi-poc' into fastapi-poc-media-endpoints

# Conflicts: # web/src/components/overlay/dialog/FrigatePlusDialog.tsx
2026-02-14 23:25:25 +03:00 · 2024-09-13 08:52:44 +01:00 · 2024-09-13 08:52:44 +01:00 · 2187765e0b
commit 2187765e0b
parent abf9e76d77 b87fc3304c
33 changed files with 700 additions and 253 deletions
--- a/web/package-lock.json
+++ b/web/package-lock.json
@ -37,6 +37,7 @@
        "copy-to-clipboard": "^3.3.3",
        "date-fns": "^3.6.0",
        "embla-carousel-react": "^8.2.0",
+        "framer-motion": "^11.5.4",
        "hls.js": "^1.5.14",
        "idb-keyval": "^6.2.1",
        "immer": "^10.1.1",
@ -4717,6 +4718,31 @@
        "url": "https://github.com/sponsors/rawify"
      }
    },
+    "node_modules/framer-motion": {
+      "version": "11.5.4",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.5.4.tgz",
+      "integrity": "sha512-E+tb3/G6SO69POkdJT+3EpdMuhmtCh9EWuK4I1DnIC23L7tFPrl8vxP+LSovwaw6uUr73rUbpb4FgK011wbRJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/fs.realpath": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
--- a/web/package.json
+++ b/web/package.json
@ -43,6 +43,7 @@
    "copy-to-clipboard": "^3.3.3",
    "date-fns": "^3.6.0",
    "embla-carousel-react": "^8.2.0",
+    "framer-motion": "^11.5.4",
    "hls.js": "^1.5.14",
    "idb-keyval": "^6.2.1",
    "immer": "^10.1.1",
--- a/web/src/components/camera/CameraImage.tsx
+++ b/web/src/components/camera/CameraImage.tsx
@ -93,6 +93,7 @@ export default function CameraImage({
            "rounded-lg md:rounded-2xl",
          )}
          onLoad={handleImageLoad}
+          loading="lazy"
        />
      ) : (
        <div className="pt-6 text-center">
--- a/web/src/components/card/AnimatedEventCard.tsx
+++ b/web/src/components/card/AnimatedEventCard.tsx
@ -91,13 +91,17 @@ export function AnimatedEventCard({
  const [alertVideos] = usePersistence("alertVideos", true);

  const aspectRatio = useMemo(() => {
-    if (!config || !Object.keys(config.cameras).includes(event.camera)) {
+    if (
+      !config ||
+      !alertVideos ||
+      !Object.keys(config.cameras).includes(event.camera)
+    ) {
      return 16 / 9;
    }

    const detect = config.cameras[event.camera].detect;
    return detect.width / detect.height;
-  }, [config, event]);
+  }, [alertVideos, config, event]);

  return (
    <Tooltip>
--- a/web/src/components/card/ExportCard.tsx
+++ b/web/src/components/card/ExportCard.tsx
@ -2,8 +2,8 @@ import ActivityIndicator from "../indicators/activity-indicator";
 import { LuTrash } from "react-icons/lu";
 import { Button } from "../ui/button";
 import { useCallback, useState } from "react";
-import { isDesktop } from "react-device-detect";
-import { FaDownload, FaPlay } from "react-icons/fa";
+import { isDesktop, isMobile } from "react-device-detect";
+import { FaDownload, FaPlay, FaShareAlt } from "react-icons/fa";
 import Chip from "../indicators/Chip";
 import { Skeleton } from "../ui/skeleton";
 import {
@ -19,6 +19,7 @@ import { DeleteClipType, Export } from "@/types/export";
 import { MdEditSquare } from "react-icons/md";
 import { baseUrl } from "@/api/baseUrl";
 import { cn } from "@/lib/utils";
+import { shareOrCopy } from "@/utils/browserUtil";

 type ExportProps = {
  className: string;
@ -81,7 +82,13 @@ export default function ExportCard({
          }
        }}
      >
-        <DialogContent>
+        <DialogContent
+          onOpenAutoFocus={(e) => {
+            if (isMobile) {
+              e.preventDefault();
+            }
+          }}
+        >
          <DialogTitle>Rename Export</DialogTitle>
          <DialogDescription>
            Enter a new name for this export.
@ -89,7 +96,7 @@ export default function ExportCard({
          {editName && (
            <>
              <Input
-                className="mt-3"
+                className="text-md mt-3"
                type="search"
                placeholder={editName?.original}
                value={
@ -147,6 +154,19 @@ export default function ExportCard({
          <div>
            <div className="absolute inset-0 rounded-lg bg-black bg-opacity-60 md:rounded-2xl" />
            <div className="absolute right-1 top-1 flex items-center gap-2">
+              {!exportedRecording.in_progress && (
+                <Chip
+                  className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500"
+                  onClick={() =>
+                    shareOrCopy(
+                      `${baseUrl}exports?id=${exportedRecording.id}`,
+                      exportedRecording.name.replaceAll("_", " "),
+                    )
+                  }
+                >
+                  <FaShareAlt className="size-4 text-white" />
+                </Chip>
+              )}
              {!exportedRecording.in_progress && (
                <a
                  download
--- a/web/src/components/card/ReviewCard.tsx
+++ b/web/src/components/card/ReviewCard.tsx
@ -50,6 +50,7 @@ export default function ReviewCard({
  const formattedDate = useFormattedTimestamp(
    event.start_time,
    config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p",
+    config?.ui.timezone,
  );
  const isSelected = useMemo(
    () =>
--- a/web/src/components/card/SearchThumbnail.tsx
+++ b/web/src/components/card/SearchThumbnail.tsx
@ -42,6 +42,7 @@ export default function SearchThumbnail({
  const formattedDate = useFormattedTimestamp(
    searchResult.start_time,
    config?.ui.time_format == "24hour" ? "%b %-d, %H:%M" : "%b %-d, %I:%M %p",
+    config?.ui.timezone,
  );

  return (
--- a/web/src/components/filter/CameraGroupSelector.tsx
+++ b/web/src/components/filter/CameraGroupSelector.tsx
@ -7,8 +7,13 @@ import { Button } from "../ui/button";
 import { useCallback, useMemo, useState } from "react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import { LuPencil, LuPlus } from "react-icons/lu";
-import { Dialog, DialogContent, DialogTitle } from "../ui/dialog";
-import { Drawer, DrawerContent } from "../ui/drawer";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog";
 import { Input } from "../ui/input";
 import { Separator } from "../ui/separator";
 import {
@ -24,6 +29,7 @@ import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
+  DropdownMenuPortal,
  DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
 import {
@ -53,6 +59,13 @@ import { cn } from "@/lib/utils";
 import * as LuIcons from "react-icons/lu";
 import IconPicker, { IconName, IconRenderer } from "../icons/IconPicker";
 import { isValidIconName } from "@/utils/iconUtil";
+import {
+  MobilePage,
+  MobilePageContent,
+  MobilePageDescription,
+  MobilePageHeader,
+  MobilePageTitle,
+} from "../mobile/MobilePage";

 type CameraGroupSelectorProps = {
  className?: string;
@ -278,6 +291,7 @@ function NewGroupDialog({
  const onSave = () => {
    setOpen(false);
    setEditState("none");
+    setEditingGroupName("");
  };

  const onCancel = () => {
@ -290,8 +304,11 @@ function NewGroupDialog({
    setEditState("edit");
  }, []);

-  const Overlay = isDesktop ? Dialog : Drawer;
-  const Content = isDesktop ? DialogContent : DrawerContent;
+  const Overlay = isDesktop ? Dialog : MobilePage;
+  const Content = isDesktop ? DialogContent : MobilePageContent;
+  const Header = isDesktop ? DialogHeader : MobilePageHeader;
+  const Description = isDesktop ? DialogDescription : MobilePageDescription;
+  const Title = isDesktop ? DialogTitle : MobilePageTitle;

  return (
    <>
@ -308,16 +325,36 @@ function NewGroupDialog({
        }}
      >
        <Content
-          className={`min-w-0 ${isMobile ? "max-h-[90%] w-full rounded-t-2xl p-3" : "max-h-dvh w-6/12 overflow-y-hidden"}`}
+          className={cn(
+            "scrollbar-container overflow-y-auto",
+            isDesktop && "my-4 flex max-h-dvh w-6/12 flex-col",
+            isMobile && "px-4",
+          )}
        >
-          <div className="scrollbar-container my-4 flex flex-col overflow-y-auto">
-            {editState === "none" && (
-              <>
-                <div className="flex flex-row items-center justify-between py-2">
-                  <DialogTitle>Camera Groups</DialogTitle>
+          {editState === "none" && (
+            <>
+              <Header
+                className={cn(isDesktop && "mt-5", "justify-center")}
+                onClose={() => setOpen(false)}
+              >
+                <Title>Camera Groups</Title>
+                <Description className="sr-only">
+                  Edit camera groups
+                </Description>
+                <div
+                  className={cn(
+                    "absolute",
+                    isDesktop && "right-6 top-10",
+                    isMobile && "absolute right-0 top-4",
+                  )}
+                >
                  <Button
-                    variant="secondary"
-                    className="size-6 rounded-md bg-secondary-foreground p-1 text-background"
+                    size="sm"
+                    className={cn(
+                      isDesktop &&
+                        "size-6 rounded-md bg-secondary-foreground p-1 text-background",
+                      isMobile && "text-secondary-foreground",
+                    )}
                    onClick={() => {
                      setEditState("add");
                    }}
@ -325,6 +362,8 @@ function NewGroupDialog({
                    <LuPlus />
                  </Button>
                </div>
+              </Header>
+              <div className="flex flex-col gap-4 md:gap-3">
                {currentGroups.map((group) => (
                  <CameraGroupRow
                    key={group[0]}
@ -333,27 +372,36 @@ function NewGroupDialog({
                    onEditGroup={() => onEditGroup(group)}
                  />
                ))}
-              </>
-            )}
+              </div>
+            </>
+          )}

-            {editState != "none" && (
-              <>
-                <div className="mb-3 flex flex-row items-center justify-between">
-                  <DialogTitle>
-                    {editState == "add" ? "Add" : "Edit"} Camera Group
-                  </DialogTitle>
-                </div>
-                <CameraGroupEdit
-                  currentGroups={currentGroups}
-                  editingGroup={editingGroup}
-                  isLoading={isLoading}
-                  setIsLoading={setIsLoading}
-                  onSave={onSave}
-                  onCancel={onCancel}
-                />
-              </>
-            )}
-          </div>
+          {editState != "none" && (
+            <>
+              <Header
+                className="mt-2"
+                onClose={() => {
+                  setEditState("none");
+                  setEditingGroupName("");
+                }}
+              >
+                <Title>
+                  {editState == "add" ? "Add" : "Edit"} Camera Group
+                </Title>
+                <Description className="sr-only">
+                  Edit camera groups
+                </Description>
+              </Header>
+              <CameraGroupEdit
+                currentGroups={currentGroups}
+                editingGroup={editingGroup}
+                isLoading={isLoading}
+                setIsLoading={setIsLoading}
+                onSave={onSave}
+                onCancel={onCancel}
+              />
+            </>
+          )}
        </Content>
      </Overlay>
    </>
@ -372,6 +420,12 @@ export function EditGroupDialog({
  currentGroups,
  activeGroup,
 }: EditGroupDialogProps) {
+  const Overlay = isDesktop ? Dialog : MobilePage;
+  const Content = isDesktop ? DialogContent : MobilePageContent;
+  const Header = isDesktop ? DialogHeader : MobilePageHeader;
+  const Description = isDesktop ? DialogDescription : MobilePageDescription;
+  const Title = isDesktop ? DialogTitle : MobilePageTitle;
+
  // editing group and state

  const editingGroup = useMemo(() => {
@ -391,19 +445,24 @@ export function EditGroupDialog({
        position="top-center"
        closeButton={true}
      />
-      <Dialog
+      <Overlay
        open={open}
        onOpenChange={(open) => {
          setOpen(open);
        }}
      >
-        <DialogContent
-          className={`min-w-0 ${isMobile ? "max-h-[90%] w-full rounded-t-2xl p-3" : "max-h-dvh w-6/12 overflow-y-hidden"}`}
+        <Content
+          className={cn(
+            "min-w-0",
+            isDesktop && "max-h-dvh w-6/12 overflow-y-hidden",
+          )}
        >
-          <div className="scrollbar-container my-4 flex flex-col overflow-y-auto">
-            <div className="mb-3 flex flex-row items-center justify-between">
-              <DialogTitle>Edit Camera Group</DialogTitle>
-            </div>
+          <div className="scrollbar-container flex flex-col overflow-y-auto md:my-4">
+            <Header className="mt-2" onClose={() => setOpen(false)}>
+              <Title>Edit Camera Group</Title>
+              <Description className="sr-only">Edit camera group</Description>
+            </Header>
+
            <CameraGroupEdit
              currentGroups={currentGroups}
              editingGroup={editingGroup}
@ -413,8 +472,8 @@ export function EditGroupDialog({
              onCancel={() => setOpen(false)}
            />
          </div>
-        </DialogContent>
-      </Dialog>
+        </Content>
+      </Overlay>
    </>
  );
 }
@ -440,7 +499,7 @@ export function CameraGroupRow({
    <>
      <div
        key={group[0]}
-        className="transition-background my-1.5 flex flex-row items-center justify-between rounded-lg duration-100 md:p-1"
+        className="transition-background flex flex-row items-center justify-between rounded-lg duration-100 md:p-1"
      >
        <div className={`flex items-center`}>
          <p className="cursor-default">{group[0]}</p>
@ -472,12 +531,16 @@ export function CameraGroupRow({
              <DropdownMenuTrigger>
                <HiOutlineDotsVertical className="size-5" />
              </DropdownMenuTrigger>
-              <DropdownMenuContent>
-                <DropdownMenuItem onClick={onEditGroup}>Edit</DropdownMenuItem>
-                <DropdownMenuItem onClick={() => setDeleteDialogOpen(true)}>
-                  Delete
-                </DropdownMenuItem>
-              </DropdownMenuContent>
+              <DropdownMenuPortal>
+                <DropdownMenuContent>
+                  <DropdownMenuItem onClick={onEditGroup}>
+                    Edit
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => setDeleteDialogOpen(true)}>
+                    Delete
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenuPortal>
            </DropdownMenu>
          </>
        )}
@ -647,7 +710,7 @@ export function CameraGroupEdit({
              <FormLabel>Name</FormLabel>
              <FormControl>
                <Input
-                  className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                  className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                  placeholder="Enter a name..."
                  disabled={editingGroup !== undefined}
                  {...field}
@ -659,7 +722,7 @@ export function CameraGroupEdit({
        />

        <Separator className="my-2 flex bg-secondary" />
-        <div className="scrollbar-container max-h-[25dvh] overflow-y-auto md:max-h-[40dvh]">
+        <div className="scrollbar-container max-h-[40dvh] overflow-y-auto">
          <FormField
            control={form.control}
            name="cameras"
--- a/web/src/components/filter/ReviewFilterGroup.tsx
+++ b/web/src/components/filter/ReviewFilterGroup.tsx
@ -470,6 +470,7 @@ export function GeneralFilterContent({
        <div className="my-2.5 flex flex-col gap-2.5">
          {allLabels.map((item) => (
            <FilterSwitch
+              key={item}
              label={item.replaceAll("_", " ")}
              isChecked={currentLabels?.includes(item) ?? false}
              onCheckedChange={(isChecked) => {
@ -516,6 +517,7 @@ export function GeneralFilterContent({
            <div className="my-2.5 flex flex-col gap-2.5">
              {allZones.map((item) => (
                <FilterSwitch
+                  key={item}
                  label={item.replaceAll("_", " ")}
                  isChecked={currentZones?.includes(item) ?? false}
                  onCheckedChange={(isChecked) => {
--- a/web/src/components/mobile/MobilePage.tsx
+++ b/web/src/components/mobile/MobilePage.tsx
@ -0,0 +1,121 @@
+import { cn } from "@/lib/utils";
+import { isPWA } from "@/utils/isPWA";
+import { ReactNode, useEffect, useState } from "react";
+import { Button } from "../ui/button";
+import { IoMdArrowRoundBack } from "react-icons/io";
+import { motion, AnimatePresence } from "framer-motion";
+
+type MobilePageProps = {
+  children: ReactNode;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
+export function MobilePage({ children, open, onOpenChange }: MobilePageProps) {
+  const [isVisible, setIsVisible] = useState(open);
+
+  useEffect(() => {
+    if (open) {
+      setIsVisible(true);
+    }
+  }, [open]);
+
+  const handleAnimationComplete = () => {
+    if (!open) {
+      setIsVisible(false);
+      onOpenChange(false);
+    }
+  };
+
+  return (
+    <AnimatePresence>
+      {isVisible && (
+        <motion.div
+          className={cn(
+            "fixed inset-0 z-50 mb-12 bg-background",
+            isPWA && "mb-16",
+            "landscape:mb-14 landscape:md:mb-16",
+          )}
+          initial={{ x: "100%" }}
+          animate={{ x: open ? 0 : "100%" }}
+          exit={{ x: "100%" }}
+          transition={{ type: "spring", damping: 25, stiffness: 200 }}
+          onAnimationComplete={handleAnimationComplete}
+        >
+          {children}
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
+
+type MobileComponentProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export function MobilePageContent({
+  children,
+  className,
+  ...props
+}: MobileComponentProps) {
+  return (
+    <div className={cn("size-full", className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+export function MobilePageDescription({
+  children,
+  className,
+  ...props
+}: MobileComponentProps) {
+  return (
+    <p className={cn("text-sm text-muted-foreground", className)} {...props}>
+      {children}
+    </p>
+  );
+}
+
+interface MobilePageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  onClose: () => void;
+}
+
+export function MobilePageHeader({
+  children,
+  className,
+  onClose,
+  ...props
+}: MobilePageHeaderProps) {
+  return (
+    <div
+      className={cn(
+        "sticky top-0 z-50 mb-2 flex items-center justify-center bg-background p-4",
+        className,
+      )}
+      {...props}
+    >
+      <Button
+        className="absolute left-0 rounded-lg"
+        size="sm"
+        onClick={onClose}
+      >
+        <IoMdArrowRoundBack className="size-5 text-secondary-foreground" />
+      </Button>
+      <div className="flex flex-row text-center">{children}</div>
+    </div>
+  );
+}
+
+export function MobilePageTitle({
+  children,
+  className,
+  ...props
+}: MobileComponentProps) {
+  return (
+    <h2 className={cn("text-lg font-semibold", className)} {...props}>
+      {children}
+    </h2>
+  );
+}
--- a/web/src/components/overlay/CreateUserDialog.tsx
+++ b/web/src/components/overlay/CreateUserDialog.tsx
@ -74,7 +74,7 @@ export default function CreateUserDialog({
                  <FormLabel>User</FormLabel>
                  <FormControl>
                    <Input
-                      className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                      className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                      {...field}
                    />
                  </FormControl>
@ -89,7 +89,7 @@ export default function CreateUserDialog({
                  <FormLabel>Password</FormLabel>
                  <FormControl>
                    <Input
-                      className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                      className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                      type="password"
                      {...field}
                    />
--- a/web/src/components/overlay/ExportDialog.tsx
+++ b/web/src/components/overlay/ExportDialog.tsx
@ -273,7 +273,7 @@ export function ExportContent({
        />
      )}
      <Input
-        className="my-6"
+        className="text-md my-6"
        type="search"
        placeholder="Name the Export"
        value={name}
@ -431,7 +431,7 @@ function CustomTimeSelector({
          />
          <SelectSeparator className="bg-secondary" />
          <input
-            className="mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+            className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
            id="startTime"
            type="time"
            value={startClock}
@ -493,7 +493,7 @@ function CustomTimeSelector({
          />
          <SelectSeparator className="bg-secondary" />
          <input
-            className="mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+            className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
            id="startTime"
            type="time"
            value={endClock}
--- a/web/src/components/overlay/SetPasswordDialog.tsx
+++ b/web/src/components/overlay/SetPasswordDialog.tsx
@ -23,12 +23,12 @@ export default function SetPasswordDialog({

  return (
    <Dialog open={show} onOpenChange={onCancel}>
-      <DialogContent>
+      <DialogContent onOpenAutoFocus={(e) => e.preventDefault()}>
        <DialogHeader>
          <DialogTitle>Set Password</DialogTitle>
        </DialogHeader>
        <Input
-          className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+          className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
          type="password"
          value={password}
          onChange={(event) => setPassword(event.target.value)}
--- a/web/src/components/overlay/detail/AnnotationSettingsPane.tsx
+++ b/web/src/components/overlay/detail/AnnotationSettingsPane.tsx
@ -178,7 +178,7 @@ export function AnnotationSettingsPane({
                  <div className="flex flex-col">
                    <FormControl>
                      <Input
-                        className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                        className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                        placeholder="0"
                        {...field}
                      />
--- a/web/src/components/overlay/detail/ObjectLifecycle.tsx
+++ b/web/src/components/overlay/detail/ObjectLifecycle.tsx
@ -13,7 +13,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { ObjectLifecycleSequence } from "@/types/timeline";
 import Heading from "@/components/ui/heading";
-import { ReviewDetailPaneType, ReviewSegment } from "@/types/review";
+import { ReviewDetailPaneType } from "@/types/review";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import { getIconForLabel } from "@/utils/iconUtil";
@ -47,14 +47,16 @@ import { AnnotationSettingsPane } from "./AnnotationSettingsPane";
 import { TooltipPortal } from "@radix-ui/react-tooltip";

 type ObjectLifecycleProps = {
-  review: ReviewSegment;
+  className?: string;
  event: Event;
+  fullscreen?: boolean;
  setPane: React.Dispatch<React.SetStateAction<ReviewDetailPaneType>>;
 };

 export default function ObjectLifecycle({
-  review,
+  className,
  event,
+  fullscreen = false,
  setPane,
 }: ObjectLifecycleProps) {
  const { data: eventSequence } = useSWR<ObjectLifecycleSequence[]>([
@ -78,13 +80,13 @@ export default function ObjectLifecycle({
  const getZoneColor = useCallback(
    (zoneName: string) => {
      const zoneColor =
-        config?.cameras?.[review.camera]?.zones?.[zoneName]?.color;
+        config?.cameras?.[event.camera]?.zones?.[zoneName]?.color;
      if (zoneColor) {
        const reversed = [...zoneColor].reverse();
        return reversed;
      }
    },
-    [config, review],
+    [config, event],
  );

  const getZonePolygon = useCallback(
@ -93,7 +95,7 @@ export default function ObjectLifecycle({
        return;
      }
      const zonePoints =
-        config?.cameras[review.camera].zones[zoneName].coordinates;
+        config?.cameras[event.camera].zones[zoneName].coordinates;
      const imgElement = imgRef.current;
      const imgRect = imgElement.getBoundingClientRect();

@ -110,7 +112,7 @@ export default function ObjectLifecycle({
        }, [] as number[])
        .join(",");
    },
-    [config, imgRef, review],
+    [config, imgRef, event],
  );

  const [boxStyle, setBoxStyle] = useState<React.CSSProperties | null>(null);
@ -224,19 +226,21 @@ export default function ObjectLifecycle({
  }

  return (
-    <>
-      <div className={cn("flex items-center gap-2")}>
-        <Button
-          className="flex items-center gap-2.5 rounded-lg"
-          size="sm"
-          onClick={() => setPane("overview")}
-        >
-          <IoMdArrowRoundBack className="size-5 text-secondary-foreground" />
-          {isDesktop && <div className="text-primary">Back</div>}
-        </Button>
-      </div>
+    <div className={className}>
+      {!fullscreen && (
+        <div className={cn("flex items-center gap-2")}>
+          <Button
+            className="mb-2 mt-3 flex items-center gap-2.5 rounded-lg md:mt-0"
+            size="sm"
+            onClick={() => setPane("overview")}
+          >
+            <IoMdArrowRoundBack className="size-5 text-secondary-foreground" />
+            {isDesktop && <div className="text-primary">Back</div>}
+          </Button>
+        </div>
+      )}

-      <div className="relative mx-auto">
+      <div className="relative flex flex-row justify-center">
        <ImageLoadingIndicator
          className="absolute inset-0"
          imgLoaded={imgLoaded}
@ -249,7 +253,12 @@ export default function ObjectLifecycle({
            </div>
          </div>
        )}
-        <div className={cn(imgLoaded ? "visible" : "invisible")}>
+        <div
+          className={cn(
+            "relative inline-block",
+            imgLoaded ? "visible" : "invisible",
+          )}
+        >
          <img
            key={event.id}
            ref={imgRef}
@ -274,7 +283,7 @@ export default function ObjectLifecycle({
          {showZones &&
            lifecycleZones?.map((zone) => (
              <div
-                className="absolute left-0 top-0"
+                className="absolute inset-0 flex items-center justify-center"
                style={{
                  width: imgRef.current?.clientWidth,
                  height: imgRef.current?.clientHeight,
@ -283,6 +292,7 @@ export default function ObjectLifecycle({
              >
                <svg
                  viewBox={`0 0 ${imgRef.current?.width} ${imgRef.current?.height}`}
+                  className="absolute inset-0"
                >
                  <polygon
                    points={getZonePolygon(zone)}
@ -347,7 +357,10 @@ export default function ObjectLifecycle({
      )}

      <div className="relative flex flex-col items-center justify-center">
-        <Carousel className="m-0 w-full" setApi={setMainApi}>
+        <Carousel
+          className={cn("m-0 w-full", fullscreen && isDesktop && "w-[75%]")}
+          setApi={setMainApi}
+        >
          <CarouselContent>
            {eventSequence.map((item, index) => (
              <CarouselItem key={index}>
@ -455,7 +468,7 @@ export default function ObjectLifecycle({
          </CarouselContent>
        </Carousel>
      </div>
-      <div className="relative flex flex-col items-center justify-center">
+      <div className="relative mt-4 flex flex-col items-center justify-center">
        <Carousel
          opts={{
            align: "center",
@ -474,7 +487,10 @@ export default function ObjectLifecycle({
            {eventSequence.map((item, index) => (
              <CarouselItem
                key={index}
-                className={cn("basis-1/4 cursor-pointer pl-1 md:basis-[10%]")}
+                className={cn(
+                  "basis-1/4 cursor-pointer pl-1 md:basis-[10%]",
+                  fullscreen && "md:basis-16",
+                )}
                onClick={() => handleThumbnailClick(index)}
              >
                <div className="p-1">
@ -513,7 +529,7 @@ export default function ObjectLifecycle({
          <CarouselNext />
        </Carousel>
      </div>
-    </>
+    </div>
  );
 }

--- a/web/src/components/overlay/detail/ReviewDetailDialog.tsx
+++ b/web/src/components/overlay/detail/ReviewDetailDialog.tsx
@ -6,13 +6,6 @@ import {
  SheetHeader,
  SheetTitle,
 } from "../../ui/sheet";
-import {
-  Drawer,
-  DrawerContent,
-  DrawerDescription,
-  DrawerHeader,
-  DrawerTitle,
-} from "../../ui/drawer";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { useFormattedTimestamp } from "@/hooks/use-date-utils";
@ -20,12 +13,12 @@ import { getIconForLabel } from "@/utils/iconUtil";
 import { useApiHost } from "@/api";
 import { ReviewDetailPaneType, ReviewSegment } from "@/types/review";
 import { Event } from "@/types/event";
-import { useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { cn } from "@/lib/utils";
 import { FrigatePlusDialog } from "../dialog/FrigatePlusDialog";
 import ObjectLifecycle from "./ObjectLifecycle";
 import Chip from "@/components/indicators/Chip";
-import { FaDownload, FaImages } from "react-icons/fa";
+import { FaDownload, FaImages, FaShareAlt } from "react-icons/fa";
 import FrigatePlusIcon from "@/components/icons/FrigatePlusIcon";
 import { FaArrowsRotate } from "react-icons/fa6";
 import {
@ -34,6 +27,16 @@ import {
  TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { useNavigate } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { baseUrl } from "@/api/baseUrl";
+import { shareOrCopy } from "@/utils/browserUtil";
+import {
+  MobilePage,
+  MobilePageContent,
+  MobilePageDescription,
+  MobilePageHeader,
+  MobilePageTitle,
+} from "@/components/mobile/MobilePage";

 type ReviewDetailDialogProps = {
  review?: ReviewSegment;
@ -70,6 +73,7 @@ export default function ReviewDetailDialog({
    config?.ui.time_format == "24hour"
      ? "%b %-d %Y, %H:%M"
      : "%b %-d %Y, %I:%M %p",
+    config?.ui.timezone,
  );

  // content
@ -77,11 +81,19 @@ export default function ReviewDetailDialog({
  const [selectedEvent, setSelectedEvent] = useState<Event>();
  const [pane, setPane] = useState<ReviewDetailPaneType>("overview");

-  const Overlay = isDesktop ? Sheet : Drawer;
-  const Content = isDesktop ? SheetContent : DrawerContent;
-  const Header = isDesktop ? SheetHeader : DrawerHeader;
-  const Title = isDesktop ? SheetTitle : DrawerTitle;
-  const Description = isDesktop ? SheetDescription : DrawerDescription;
+  // dialog and mobile page
+
+  const [isOpen, setIsOpen] = useState(review != undefined);
+
+  useEffect(() => {
+    setIsOpen(review != undefined);
+  }, [review]);
+
+  const Overlay = isDesktop ? Sheet : MobilePage;
+  const Content = isDesktop ? SheetContent : MobilePageContent;
+  const Header = isDesktop ? SheetHeader : MobilePageHeader;
+  const Title = isDesktop ? SheetTitle : MobilePageTitle;
+  const Description = isDesktop ? SheetDescription : MobilePageDescription;

  if (!review) {
    return;
@ -90,7 +102,7 @@ export default function ReviewDetailDialog({
  return (
    <>
      <Overlay
-        open={review != undefined}
+        open={isOpen}
        onOpenChange={(open) => {
          if (!open) {
            setReview(undefined);
@ -111,19 +123,43 @@ export default function ReviewDetailDialog({

        <Content
          className={cn(
-            isDesktop
-              ? pane == "overview"
-                ? "sm:max-w-xl"
-                : "pt-2 sm:max-w-4xl"
-              : "max-h-[80dvh] overflow-hidden p-2 pb-4",
+            "scrollbar-container overflow-y-auto",
+            isDesktop && pane == "overview"
+              ? "sm:max-w-xl"
+              : "pt-2 sm:max-w-4xl",
+            isMobile && "px-4",
          )}
        >
-          <Header className="sr-only">
-            <Title>Review Item Details</Title>
-            <Description>Review item details</Description>
-          </Header>
+          <span tabIndex={0} className="sr-only" />
          {pane == "overview" && (
-            <div className="scrollbar-container mt-3 flex size-full flex-col gap-5 overflow-y-auto">
+            <Header className="justify-center" onClose={() => setIsOpen(false)}>
+              <Title>Review Item Details</Title>
+              <Description className="sr-only">Review item details</Description>
+              <div
+                className={cn(
+                  "absolute",
+                  isDesktop && "right-1 top-8",
+                  isMobile && "right-0 top-3",
+                )}
+              >
+                <Tooltip>
+                  <TooltipTrigger>
+                    <Button
+                      size="sm"
+                      onClick={() =>
+                        shareOrCopy(`${baseUrl}review?id=${review.id}`)
+                      }
+                    >
+                      <FaShareAlt className="size-4 text-secondary-foreground" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>Share this review item</TooltipContent>
+                </Tooltip>
+              </div>
+            </Header>
+          )}
+          {pane == "overview" && (
+            <div className="flex flex-col gap-5 md:mt-3">
              <div className="flex w-full flex-row">
                <div className="flex w-full flex-col gap-3">
                  <div className="flex flex-col gap-1.5">
@ -137,10 +173,10 @@ export default function ReviewDetailDialog({
                    <div className="text-sm">{formattedDate}</div>
                  </div>
                </div>
-                <div className="flex w-full flex-col gap-2">
-                  <div className="flex flex-col gap-1.5">
+                <div className="flex w-full flex-col items-center gap-2">
+                  <div className="flex w-full flex-col gap-1.5">
                    <div className="text-sm text-primary/40">Objects</div>
-                    <div className="flex flex-col items-start gap-2 text-sm capitalize">
+                    <div className="scrollbar-container flex max-h-32 flex-col items-start gap-2 overflow-y-auto text-sm capitalize">
                      {events?.map((event) => {
                        return (
                          <div
@ -159,7 +195,7 @@ export default function ReviewDetailDialog({
                    </div>
                  </div>
                  {review.data.zones.length > 0 && (
-                    <div className="flex flex-col gap-1.5">
+                    <div className="scrollbar-container flex max-h-32 w-full flex-col gap-1.5">
                      <div className="text-sm text-primary/40">Zones</div>
                      <div className="flex flex-col items-start gap-2 text-sm capitalize">
                        {review.data.zones.map((zone) => {
@ -199,11 +235,7 @@ export default function ReviewDetailDialog({

          {pane == "details" && selectedEvent && (
            <div className="scrollbar-container overflow-x-none mt-0 flex size-full flex-col gap-2 overflow-y-auto overflow-x-hidden">
-              <ObjectLifecycle
-                review={review}
-                event={selectedEvent}
-                setPane={setPane}
-              />
+              <ObjectLifecycle event={selectedEvent} setPane={setPane} />
            </div>
          )}
        </Content>
--- a/web/src/components/overlay/detail/SearchDetailDialog.tsx
+++ b/web/src/components/overlay/detail/SearchDetailDialog.tsx
@ -1,11 +1,4 @@
 import { isDesktop, isIOS, isMobile } from "react-device-detect";
-import {
-  Drawer,
-  DrawerContent,
-  DrawerDescription,
-  DrawerHeader,
-  DrawerTitle,
-} from "../../ui/drawer";
 import { SearchResult } from "@/types/search";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
@ -34,10 +27,23 @@ import { baseUrl } from "@/api/baseUrl";
 import { cn } from "@/lib/utils";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { ASPECT_VERTICAL_LAYOUT, ASPECT_WIDE_LAYOUT } from "@/types/record";
-import { FaRegListAlt, FaVideo } from "react-icons/fa";
-import FrigatePlusIcon from "@/components/icons/FrigatePlusIcon";
+import { FaImage, FaRegListAlt, FaVideo } from "react-icons/fa";
+import { FaRotate } from "react-icons/fa6";
+import ObjectLifecycle from "./ObjectLifecycle";
+import {
+  MobilePage,
+  MobilePageContent,
+  MobilePageDescription,
+  MobilePageHeader,
+  MobilePageTitle,
+} from "@/components/mobile/MobilePage";

-const SEARCH_TABS = ["details", "frigate+", "video"] as const;
+const SEARCH_TABS = [
+  "details",
+  "snapshot",
+  "video",
+  "object lifecycle",
+] as const;
 type SearchTab = (typeof SEARCH_TABS)[number];

 type SearchDetailDialogProps = {
@ -59,6 +65,14 @@ export default function SearchDetailDialog({
  const [page, setPage] = useState<SearchTab>("details");
  const [pageToggle, setPageToggle] = useOptimisticState(page, setPage, 100);

+  // dialog and mobile page
+
+  const [isOpen, setIsOpen] = useState(search != undefined);
+
+  useEffect(() => {
+    setIsOpen(search != undefined);
+  }, [search]);
+
  const searchTabs = useMemo(() => {
    if (!config || !search) {
      return [];
@ -66,8 +80,8 @@ export default function SearchDetailDialog({

    const views = [...SEARCH_TABS];

-    if (!config.plus.enabled || !search.has_snapshot) {
-      const index = views.indexOf("frigate+");
+    if (!search.has_snapshot) {
+      const index = views.indexOf("snapshot");
      views.splice(index, 1);
    }

@ -80,21 +94,31 @@ export default function SearchDetailDialog({
    return views;
  }, [config, search]);

+  useEffect(() => {
+    if (searchTabs.length == 0) {
+      return;
+    }
+
+    if (!searchTabs.includes(pageToggle)) {
+      setPage("details");
+    }
+  }, [pageToggle, searchTabs]);
+
  if (!search) {
    return;
  }

  // content

-  const Overlay = isDesktop ? Dialog : Drawer;
-  const Content = isDesktop ? DialogContent : DrawerContent;
-  const Header = isDesktop ? DialogHeader : DrawerHeader;
-  const Title = isDesktop ? DialogTitle : DrawerTitle;
-  const Description = isDesktop ? DialogDescription : DrawerDescription;
+  const Overlay = isDesktop ? Dialog : MobilePage;
+  const Content = isDesktop ? DialogContent : MobilePageContent;
+  const Header = isDesktop ? DialogHeader : MobilePageHeader;
+  const Title = isDesktop ? DialogTitle : MobilePageTitle;
+  const Description = isDesktop ? DialogDescription : MobilePageDescription;

  return (
    <Overlay
-      open={search != undefined}
+      open={isOpen}
      onOpenChange={(open) => {
        if (!open) {
          setSearch(undefined);
@ -102,15 +126,16 @@ export default function SearchDetailDialog({
      }}
    >
      <Content
-        className={
-          isDesktop
-            ? "sm:max-w-xl md:max-w-3xl lg:max-w-4xl xl:max-w-7xl"
-            : "max-h-[75dvh] overflow-hidden px-2 pb-4"
-        }
+        className={cn(
+          "scrollbar-container overflow-y-auto",
+          isDesktop &&
+            "max-h-[95dvh] sm:max-w-xl md:max-w-4xl lg:max-w-4xl xl:max-w-7xl",
+          isMobile && "px-4",
+        )}
      >
-        <Header className="sr-only">
+        <Header onClose={() => setIsOpen(false)}>
          <Title>Tracked Object Details</Title>
-          <Description>Tracked object details</Description>
+          <Description className="sr-only">Tracked object details</Description>
        </Header>
        <ScrollArea
          className={cn("w-full whitespace-nowrap", isMobile && "my-2")}
@ -136,8 +161,11 @@ export default function SearchDetailDialog({
                  aria-label={`Select ${item}`}
                >
                  {item == "details" && <FaRegListAlt className="size-4" />}
-                  {item == "frigate+" && <FrigatePlusIcon className="size-4" />}
+                  {item == "snapshot" && <FaImage className="size-4" />}
                  {item == "video" && <FaVideo className="size-4" />}
+                  {item == "object lifecycle" && (
+                    <FaRotate className="size-4" />
+                  )}
                  <div className="capitalize">{item}</div>
                </ToggleGroupItem>
              ))}
@ -153,9 +181,14 @@ export default function SearchDetailDialog({
            setSimilarity={setSimilarity}
          />
        )}
-        {page == "frigate+" && (
+        {page == "snapshot" && (
          <FrigatePlusDialog
-            upload={search as unknown as Event}
+            upload={
+              {
+                ...search,
+                plus_id: config?.plus?.enabled ? search.plus_id : "not_enabled",
+              } as unknown as Event
+            }
            dialog={false}
            onClose={() => {}}
            onEventUploaded={() => {
@ -164,6 +197,14 @@ export default function SearchDetailDialog({
          />
        )}
        {page == "video" && <VideoTab search={search} config={config} />}
+        {page == "object lifecycle" && (
+          <ObjectLifecycle
+            className="w-full"
+            event={search as unknown as Event}
+            fullscreen={true}
+            setPane={() => {}}
+          />
+        )}
      </Content>
    </Overlay>
  );
@ -195,6 +236,7 @@ function ObjectDetailsTab({
    config?.ui.time_format == "24hour"
      ? "%b %-d %Y, %H:%M"
      : "%b %-d %Y, %I:%M %p",
+    config?.ui.timezone,
  );

  const score = useMemo(() => {
@ -242,7 +284,7 @@ function ObjectDetailsTab({
  }, [desc, search]);

  return (
-    <div className="mt-3 flex size-full flex-col gap-5 md:mt-0">
+    <div className="flex flex-col gap-5">
      <div className="flex w-full flex-row">
        <div className="flex w-full flex-col gap-3">
          <div className="flex flex-col gap-1.5">
@ -270,7 +312,7 @@ function ObjectDetailsTab({
            <div className="text-sm">{formattedDate}</div>
          </div>
        </div>
-        <div className="flex w-full flex-col gap-2 px-6">
+        <div className="flex w-full flex-col gap-2 pl-6">
          <img
            className="aspect-video select-none rounded-lg object-contain transition-opacity"
            style={
--- a/web/src/components/overlay/dialog/FrigatePlusDialog.tsx
+++ b/web/src/components/overlay/dialog/FrigatePlusDialog.tsx
@ -13,6 +13,7 @@ import { Event } from "@/types/event";
 import { FrigateConfig } from "@/types/frigateConfig";
 import axios from "axios";
 import { useCallback, useMemo, useState } from "react";
+import { isDesktop } from "react-device-detect";
 import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
 import useSWR from "swr";

@ -34,6 +35,9 @@ export function FrigatePlusDialog({

  // layout

+  const Title = isDesktop ? DialogTitle : "div";
+  const Description = isDesktop ? DialogDescription : "div";
+
  const grow = useMemo(() => {
    if (!config || !upload) {
      return "";
@ -79,60 +83,74 @@ export function FrigatePlusDialog({

  const content = (
    <TransformWrapper minScale={1.0} wheel={{ smoothStep: 0.005 }}>
-      <DialogHeader>
-        <DialogTitle>Submit To Frigate+</DialogTitle>
-        <DialogDescription>
-          Objects in locations you want to avoid are not false positives.
-          Submitting them as false positives will confuse the model.
-        </DialogDescription>
-      </DialogHeader>
-      <TransformComponent
-        wrapperStyle={{
-          width: "100%",
-          height: "100%",
-        }}
-        contentStyle={{
-          position: "relative",
-          width: "100%",
-          height: "100%",
-        }}
-      >
-        {upload?.id && (
-          <img
-            className={`w-full ${grow} bg-black`}
-            src={`${baseUrl}api/media/events/${upload?.id}/snapshot.jpg`}
-            alt={`${upload?.label}`}
-          />
-        )}
-      </TransformComponent>
+      <div className="flex flex-col space-y-3">
+        <DialogHeader
+          className={state == "submitted" ? "sr-only" : "text-left"}
+        >
+          <Title
+            className={
+              !isDesktop
+                ? "text-lg font-semibold leading-none tracking-tight"
+                : undefined
+            }
+          >
+            Submit To Frigate+
+          </Title>
+          <Description
+            className={!isDesktop ? "text-sm text-muted-foreground" : undefined}
+          >
+            Objects in locations you want to avoid are not false positives.
+            Submitting them as false positives will confuse the model.
+          </Description>
+        </DialogHeader>
+        <TransformComponent
+          wrapperStyle={{
+            width: "100%",
+            height: "100%",
+          }}
+          contentStyle={{
+            position: "relative",
+            width: "100%",
+            height: "100%",
+          }}
+        >
+          {upload?.id && (
+            <img
+              className={`w-full ${grow} bg-black`}
+              src={`${baseUrl}api/media/events/${upload?.id}/snapshot.jpg`}
+              alt={`${upload?.label}`}
+            />
+          )}
+        </TransformComponent>

-      <DialogFooter>
-        {state == "reviewing" && (
-          <>
-            {dialog && <Button onClick={onClose}>Cancel</Button>}
-            <Button
-              className="bg-success"
-              onClick={() => {
-                setState("uploading");
-                onSubmitToPlus(false);
-              }}
-            >
-              This is a {upload?.label}
-            </Button>
-            <Button
-              className="text-white"
-              variant="destructive"
-              onClick={() => {
-                setState("uploading");
-                onSubmitToPlus(true);
-              }}
-            >
-              This is not a {upload?.label}
-            </Button>
-          </>
-        )}
-        {state == "uploading" && <ActivityIndicator />}
-      </DialogFooter>
+        <DialogFooter className="flex flex-row justify-end gap-2">
+          {state == "reviewing" && (
+            <>
+              {dialog && <Button onClick={onClose}>Cancel</Button>}
+              <Button
+                className="bg-success"
+                onClick={() => {
+                  setState("uploading");
+                  onSubmitToPlus(false);
+                }}
+              >
+                This is a {upload?.label}
+              </Button>
+              <Button
+                className="text-white"
+                variant="destructive"
+                onClick={() => {
+                  setState("uploading");
+                  onSubmitToPlus(true);
+                }}
+              >
+                This is not a {upload?.label}
+              </Button>
+            </>
+          )}
+          {state == "uploading" && <ActivityIndicator />}
+        </DialogFooter>
+      </div>
    </TransformWrapper>
  );

--- a/web/src/components/player/PreviewPlayer.tsx
+++ b/web/src/components/player/PreviewPlayer.tsx
@ -539,6 +539,7 @@ function PreviewFramesPlayer({
      <img
        ref={imgRef}
        className={`size-full rounded-lg bg-black object-contain md:rounded-2xl`}
+        loading="lazy"
        onLoad={onImageLoaded}
      />
      {previewFrames?.length === 0 && (
--- a/web/src/components/player/PreviewThumbnailPlayer.tsx
+++ b/web/src/components/player/PreviewThumbnailPlayer.tsx
@ -168,6 +168,7 @@ export default function PreviewThumbnailPlayer({
  const formattedDate = useFormattedTimestamp(
    review.start_time,
    config?.ui.time_format == "24hour" ? "%b %-d, %H:%M" : "%b %-d, %I:%M %p",
+    config?.ui?.timezone,
  );

  return (
--- a/web/src/components/settings/ZoneEditPane.tsx
+++ b/web/src/components/settings/ZoneEditPane.tsx
@ -373,7 +373,7 @@ export default function ZoneEditPane({
                <FormLabel>Name</FormLabel>
                <FormControl>
                  <Input
-                    className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                    className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                    placeholder="Enter a name..."
                    {...field}
                  />
@ -395,7 +395,7 @@ export default function ZoneEditPane({
                <FormLabel>Inertia</FormLabel>
                <FormControl>
                  <Input
-                    className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                    className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                    placeholder="3"
                    {...field}
                  />
@ -417,7 +417,7 @@ export default function ZoneEditPane({
                <FormLabel>Loitering Time</FormLabel>
                <FormControl>
                  <Input
-                    className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                    className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                    placeholder="0"
                    {...field}
                  />
--- a/web/src/hooks/use-api-filter.ts
+++ b/web/src/hooks/use-api-filter.ts
@ -65,11 +65,11 @@ export function useApiFilterArgs<
    const filter: { [key: string]: unknown } = {};

    rawParams.forEach((value, key) => {
-      if (isNaN(parseFloat(value))) {
+      if (value != "true" && value != "false" && isNaN(parseFloat(value))) {
        filter[key] = value.includes(",") ? value.split(",") : [value];
      } else {
        if (value != undefined) {
-          filter[key] = `${value}`;
+          filter[key] = JSON.parse(value);
        }
      }
    });
--- a/web/src/hooks/use-date-utils.ts
+++ b/web/src/hooks/use-date-utils.ts
@ -2,12 +2,17 @@ import { FrigateConfig } from "@/types/frigateConfig";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import { useMemo } from "react";

-export function useFormattedTimestamp(timestamp: number, format: string) {
+export function useFormattedTimestamp(
+  timestamp: number,
+  format: string,
+  timezone?: string,
+) {
  const formattedTimestamp = useMemo(() => {
    return formatUnixTimestampToDateTime(timestamp, {
+      timezone,
      strftime_fmt: format,
    });
-  }, [format, timestamp]);
+  }, [format, timestamp, timezone]);

  return formattedTimestamp;
 }
--- a/web/src/hooks/use-overlay-state.tsx
+++ b/web/src/hooks/use-overlay-state.tsx
@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
 import { usePersistence } from "./use-persistence";

 export function useOverlayState<S>(
@ -103,33 +103,29 @@ export function useHashState<S extends string>(): [

 export function useSearchEffect(
  key: string,
-  callback: (value: string) => void,
+  callback: (value: string) => boolean,
 ) {
-  const location = useLocation();
+  const [searchParams, setSearchParams] = useSearchParams();

  const param = useMemo(() => {
-    if (!location || !location.search || location.search.length == 0) {
+    const param = searchParams.get(key);
+
+    if (!param) {
      return undefined;
    }

-    const params = location.search.substring(1).split("&");
-
-    const foundParam = params
-      .find((p) => p.includes("=") && p.split("=")[0] == key)
-      ?.split("=");
-
-    if (foundParam && foundParam.length === 2) {
-      return [foundParam[0], decodeURIComponent(foundParam[1])];
-    }
-
-    return undefined;
-  }, [location, key]);
+    return [key, decodeURIComponent(param)];
+  }, [searchParams, key]);

  useEffect(() => {
    if (!param) {
      return;
    }

-    callback(param[1]);
-  }, [param, callback]);
+    const remove = callback(param[1]);
+
+    if (remove) {
+      setSearchParams();
+    }
+  }, [param, callback, setSearchParams]);
 }
--- a/web/src/pages/Events.tsx
+++ b/web/src/pages/Events.tsx
@ -1,5 +1,5 @@
 import ActivityIndicator from "@/components/indicators/activity-indicator";
-import useApiFilter from "@/hooks/use-api-filter";
+import { useApiFilterArgs } from "@/hooks/use-api-filter";
 import { useCameraPreviews } from "@/hooks/use-camera-previews";
 import { useTimezone } from "@/hooks/use-date-utils";
 import { useOverlayState, useSearchEffect } from "@/hooks/use-overlay-state";
@ -54,6 +54,8 @@ export default function Events() {
        }
      })
      .catch(() => {});
+
+    return true;
  });

  const [startTime, setStartTime] = useState<number>();
@ -69,7 +71,7 @@ export default function Events() {
  // review filter

  const [reviewFilter, setReviewFilter, reviewSearchParams] =
-    useApiFilter<ReviewFilter>();
+    useApiFilterArgs<ReviewFilter>();

  useSearchEffect("group", (reviewGroup) => {
    if (config && reviewGroup && reviewGroup != "default") {
@ -83,7 +85,11 @@ export default function Events() {
          cameras: group.cameras,
        });
      }
+
+      return true;
    }
+
+    return false;
  });

  const onUpdateFilter = useCallback(
--- a/web/src/pages/Explore.tsx
+++ b/web/src/pages/Explore.tsx
@ -43,6 +43,7 @@ export default function Explore() {
    setSearch(`similarity:${similarityId}`);
    // @ts-expect-error we want to clear this
    setSearchFilter({ ...searchFilter, similarity_search_id: undefined });
+    return false;
  });

  useEffect(() => {
--- a/web/src/pages/Exports.tsx
+++ b/web/src/pages/Exports.tsx
@ -13,6 +13,7 @@ import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Toaster } from "@/components/ui/sonner";
+import { useSearchEffect } from "@/hooks/use-overlay-state";
 import { cn } from "@/lib/utils";
 import { DeleteClipType, Export } from "@/types/export";
 import axios from "axios";
@ -46,6 +47,20 @@ function Exports() {
    );
  }, [exports, search]);

+  // Viewing
+
+  const [selected, setSelected] = useState<Export>();
+  const [selectedAspect, setSelectedAspect] = useState(0.0);
+
+  useSearchEffect("id", (id) => {
+    if (!exports) {
+      return false;
+    }
+
+    setSelected(exports.find((exp) => exp.id == id));
+    return true;
+  });
+
  // Deleting

  const [deleteClip, setDeleteClip] = useState<DeleteClipType | undefined>();
@ -91,11 +106,6 @@ function Exports() {
    [mutate],
  );

-  // Viewing
-
-  const [selected, setSelected] = useState<Export>();
-  const [selectedAspect, setSelectedAspect] = useState(0.0);
-
  return (
    <div className="flex size-full flex-col gap-2 overflow-hidden px-1 pt-2 md:p-2">
      <Toaster closeButton={true} />
@ -165,7 +175,7 @@ function Exports() {
      {exports && (
        <div className="flex w-full items-center justify-center p-2">
          <Input
-            className="w-full bg-muted md:w-1/3"
+            className="text-md w-full bg-muted md:w-1/3"
            placeholder="Search"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
--- a/web/src/pages/Live.tsx
+++ b/web/src/pages/Live.tsx
@ -29,7 +29,11 @@ function Live() {
      if (group) {
        setCameraGroup(cameraGroup);
      }
+
+      return true;
    }
+
+    return false;
  });

  // fullscreen
--- a/web/src/utils/browserUtil.ts
+++ b/web/src/utils/browserUtil.ts
@ -0,0 +1,16 @@
+import copy from "copy-to-clipboard";
+import { toast } from "sonner";
+
+export function shareOrCopy(url: string, title?: string) {
+  if (window.isSecureContext && "share" in navigator) {
+    navigator.share({
+      url: url,
+      title: title,
+    });
+  } else {
+    copy(url);
+    toast.success("Copied URL to clipboard.", {
+      position: "top-center",
+    });
+  }
+}
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@ -641,7 +641,7 @@ function DetectionReview({
      >
        {filter?.before == undefined && (
          <NewReviewData
-            className="pointer-events-none absolute left-1/2 z-50 -translate-x-1/2"
+            className="pointer-events-none absolute left-1/2 z-[49] -translate-x-1/2"
            contentRef={contentRef}
            reviewItems={currentItems}
            itemsToReview={loading ? 0 : itemsToReview}
--- a/web/src/views/explore/ExploreView.tsx
+++ b/web/src/views/explore/ExploreView.tsx
@ -17,7 +17,7 @@ import useImageLoaded from "@/hooks/use-image-loaded";
 import ActivityIndicator from "@/components/indicators/activity-indicator";

 type ExploreViewProps = {
-  onSelectSearch: (searchResult: SearchResult) => void;
+  onSelectSearch: (searchResult: SearchResult, index: number) => void;
 };

 export default function ExploreView({ onSelectSearch }: ExploreViewProps) {
@ -60,7 +60,7 @@ export default function ExploreView({ onSelectSearch }: ExploreViewProps) {
  }

  return (
-    <div className="scrollbar-container mx-2 space-y-4 overflow-x-hidden">
+    <div className="mx-2 space-y-4">
      {Object.entries(eventsByLabel).map(([label, filteredEvents]) => (
        <ThumbnailRow
          key={label}
@ -76,7 +76,7 @@ export default function ExploreView({ onSelectSearch }: ExploreViewProps) {
 type ThumbnailRowType = {
  objectType: string;
  searchResults?: SearchResult[];
-  onSelectSearch: (searchResult: SearchResult) => void;
+  onSelectSearch: (searchResult: SearchResult, index: number) => void;
 };

 function ThumbnailRow({
@ -145,7 +145,7 @@ function ThumbnailRow({

 type ExploreThumbnailImageProps = {
  event: SearchResult;
-  onSelectSearch: (searchResult: SearchResult) => void;
+  onSelectSearch: (searchResult: SearchResult, index: number) => void;
 };
 function ExploreThumbnailImage({
  event,
@ -176,7 +176,7 @@ function ExploreThumbnailImage({
        loading={isSafari ? "eager" : "lazy"}
        draggable={false}
        src={`${apiHost}api/events/${event.id}/thumbnail.jpg`}
-        onClick={() => onSelectSearch(event)}
+        onClick={() => onSelectSearch(event, 0)}
        onLoad={() => {
          onImgLoad();
        }}
--- a/web/src/views/search/SearchView.tsx
+++ b/web/src/views/search/SearchView.tsx
@ -13,11 +13,15 @@ import {
 import { cn } from "@/lib/utils";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { SearchFilter, SearchResult } from "@/types/search";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { isMobileOnly } from "react-device-detect";
 import { LuImage, LuSearchX, LuText, LuXCircle } from "react-icons/lu";
 import useSWR from "swr";
 import ExploreView from "../explore/ExploreView";
+import useKeyboardListener, {
+  KeyModifiers,
+} from "@/hooks/use-keyboard-listener";
+import scrollIntoView from "scroll-into-view-if-needed";

 type SearchViewProps = {
  search: string;
@ -59,8 +63,12 @@ export default function SearchView({

  // search interaction

-  const onSelectSearch = useCallback((item: SearchResult) => {
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
+
+  const onSelectSearch = useCallback((item: SearchResult, index: number) => {
    setSearchDetail(item);
+    setSelectedIndex(index);
  }, []);

  // confidence score - probably needs tweaking
@ -87,6 +95,56 @@ export default function SearchView({
    [searchResults, searchFilter],
  );

+  // keyboard listener
+
+  const onKeyboardShortcut = useCallback(
+    (key: string | null, modifiers: KeyModifiers) => {
+      if (!modifiers.down || !uniqueResults) {
+        return;
+      }
+
+      switch (key) {
+        case "ArrowLeft":
+          setSelectedIndex((prevIndex) => {
+            const newIndex =
+              prevIndex === null
+                ? uniqueResults.length - 1
+                : (prevIndex - 1 + uniqueResults.length) % uniqueResults.length;
+            setSearchDetail(uniqueResults[newIndex]);
+            return newIndex;
+          });
+          break;
+        case "ArrowRight":
+          setSelectedIndex((prevIndex) => {
+            const newIndex =
+              prevIndex === null ? 0 : (prevIndex + 1) % uniqueResults.length;
+            setSearchDetail(uniqueResults[newIndex]);
+            return newIndex;
+          });
+          break;
+      }
+    },
+    [uniqueResults],
+  );
+
+  useKeyboardListener(["ArrowLeft", "ArrowRight"], onKeyboardShortcut);
+
+  // scroll into view
+
+  useEffect(() => {
+    if (
+      selectedIndex !== null &&
+      uniqueResults &&
+      itemRefs.current?.[selectedIndex]
+    ) {
+      scrollIntoView(itemRefs.current[selectedIndex], {
+        block: "center",
+        behavior: "smooth",
+        scrollMode: "if-needed",
+      });
+    }
+  }, [selectedIndex, uniqueResults]);
+
  return (
    <div className="flex size-full flex-col pt-2 md:py-2">
      <Toaster closeButton={true} />
@ -156,12 +214,13 @@ export default function SearchView({
        {uniqueResults && (
          <div className="mt-2 grid w-full gap-2 px-1 sm:grid-cols-2 md:mx-2 md:grid-cols-4 md:gap-4 3xl:grid-cols-6">
            {uniqueResults &&
-              uniqueResults.map((value) => {
-                const selected = false;
+              uniqueResults.map((value, index) => {
+                const selected = selectedIndex === index;

                return (
                  <div
                    key={value.id}
+                    ref={(item) => (itemRefs.current[index] = item)}
                    data-start={value.start_time}
                    className="review-item relative rounded-lg"
                  >
@ -173,7 +232,7 @@ export default function SearchView({
                      <SearchThumbnail
                        searchResult={value}
                        findSimilar={() => setSimilaritySearch(value)}
-                        onClick={() => onSelectSearch(value)}
+                        onClick={() => onSelectSearch(value, index)}
                      />
                      {searchTerm && (
                        <div className={cn("absolute right-2 top-2 z-40")}>
@ -207,7 +266,7 @@ export default function SearchView({
                      )}
                    </div>
                    <div
-                      className={`review-item-ring pointer-events-none absolute inset-0 z-10 size-full rounded-lg outline outline-[3px] -outline-offset-[2.8px] ${selected ? `shadow-severity_alert outline-severity_alert` : "outline-transparent duration-500"}`}
+                      className={`review-item-ring pointer-events-none absolute inset-0 z-10 size-full rounded-lg outline outline-[3px] -outline-offset-[2.8px] ${selected ? `shadow-selected outline-selected` : "outline-transparent duration-500"}`}
                    />
                  </div>
                );
@ -215,7 +274,7 @@ export default function SearchView({
          </div>
        )}
        {!uniqueResults && !isLoading && (
-          <div className="flex size-full flex-col">
+          <div className="scrollbar-container flex size-full flex-col overflow-y-auto">
            <ExploreView onSelectSearch={onSelectSearch} />
          </div>
        )}
--- a/web/src/views/settings/NotificationsSettingsView.tsx
+++ b/web/src/views/settings/NotificationsSettingsView.tsx
@ -254,7 +254,7 @@ export default function NotificationView({
                    <FormLabel>Email</FormLabel>
                    <FormControl>
                      <Input
-                        className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark] md:w-72"
+                        className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark] md:w-72"
                        placeholder="example@email.com"
                        {...field}
                      />