From 57f328e9e5c037e3000e08d0f227fbb3a10a112a Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 6 Nov 2025 07:39:06 -0600
Subject: [PATCH] improve annotation offset popver

---
 web/public/locales/en/views/explore.json      |  2 +-
 .../overlay/detail/AnnotationSettingsPane.tsx | 70 +++++++------------
 .../overlay/detail/SearchDetailDialog.tsx     | 13 ++--
 3 files changed, 32 insertions(+), 53 deletions(-)

diff --git a/web/public/locales/en/views/explore.json b/web/public/locales/en/views/explore.json
index 24248ffa3..afc81eaa6 100644
--- a/web/public/locales/en/views/explore.json
+++ b/web/public/locales/en/views/explore.json
@@ -74,7 +74,7 @@
         "label": "Annotation Offset",
         "desc": "This data comes from your camera's detect feed but is overlayed on images from the the record feed. It is unlikely that the two streams are perfectly in sync. As a result, the bounding box and the footage will not line up perfectly. You can use this setting to offset the annotations forward or backward in time to better align them with the recorded footage.",
         "millisecondsToOffset": "Milliseconds to offset detect annotations by. <em>Default: 0</em>",
-        "tips": "TIP: Imagine there is an event clip with a person walking from left to right. If the event timeline bounding box is consistently to the left of the person then the value should be decreased. Similarly, if a person is walking from left to right and the bounding box is consistently ahead of the person then the value should be increased.",
+        "tips": "Lower the value if the video playback is ahead of the boxes and path points, and increase the value if the video playback is behind them. This value can be negative.",
         "toast": {
           "success": "Annotation offset for {{camera}} has been saved to the config file. Restart Frigate to apply your changes."
         }
diff --git a/web/src/components/overlay/detail/AnnotationSettingsPane.tsx b/web/src/components/overlay/detail/AnnotationSettingsPane.tsx
index 94c44ecdf..ce619c8fb 100644
--- a/web/src/components/overlay/detail/AnnotationSettingsPane.tsx
+++ b/web/src/components/overlay/detail/AnnotationSettingsPane.tsx
@@ -1,6 +1,4 @@
 import Heading from "@/components/ui/heading";
-import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
 import { Event } from "@/types/event";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -8,7 +6,6 @@ import axios from "axios";
 import { useCallback, useState } from "react";
 import { useForm } from "react-hook-form";
 import { LuExternalLink } from "react-icons/lu";
-import { PiWarningCircle } from "react-icons/pi";
 import { Link } from "react-router-dom";
 import { toast } from "sonner";
 import useSWR from "swr";
@@ -31,15 +28,11 @@ import { useDocDomain } from "@/hooks/use-doc-domain";
 
 type AnnotationSettingsPaneProps = {
   event: Event;
-  showZones: boolean;
-  setShowZones: React.Dispatch<React.SetStateAction<boolean>>;
   annotationOffset: number;
   setAnnotationOffset: React.Dispatch<React.SetStateAction<number>>;
 };
 export function AnnotationSettingsPane({
   event,
-  showZones,
-  setShowZones,
   annotationOffset,
   setAnnotationOffset,
 }: AnnotationSettingsPaneProps) {
@@ -144,21 +137,7 @@ export function AnnotationSettingsPane({
       <Heading as="h4" className="my-2">
         {t("trackingDetails.annotationSettings.title")}
       </Heading>
-      <div className="flex flex-col">
-        <div className="flex flex-row items-center justify-start gap-2 p-3">
-          <Switch
-            id="show-zones"
-            checked={showZones}
-            onCheckedChange={setShowZones}
-          />
-          <Label className="cursor-pointer" htmlFor="show-zones">
-            {t("trackingDetails.annotationSettings.showAllZones.title")}
-          </Label>
-        </div>
-        <div className="text-sm text-muted-foreground">
-          {t("trackingDetails.annotationSettings.showAllZones.desc")}
-        </div>
-      </div>
+
       <Separator className="my-2 flex bg-secondary" />
       <Form {...form}>
         <form
@@ -169,17 +148,17 @@ export function AnnotationSettingsPane({
             control={form.control}
             name="annotationOffset"
             render={({ field }) => (
-              <FormItem>
-                <FormLabel>
-                  {t("trackingDetails.annotationSettings.offset.label")}
-                </FormLabel>
-                <div className="flex flex-col gap-3 md:flex-row-reverse md:gap-8">
-                  <div className="flex flex-row items-center gap-3 rounded-lg bg-destructive/50 p-3 text-sm text-primary-variant md:my-5">
-                    <PiWarningCircle className="size-24" />
-                    <div>
-                      <Trans ns="views/explore">
-                        trackingDetails.annotationSettings.offset.desc
-                      </Trans>
+              <FormItem className="flex flex-row items-start justify-between space-x-2">
+                <div className="flex flex-col gap-1">
+                  <FormLabel>
+                    {t("trackingDetails.annotationSettings.offset.label")}
+                  </FormLabel>
+                  <FormDescription>
+                    <Trans ns="views/explore">
+                      trackingDetails.annotationSettings.offset.millisecondsToOffset
+                    </Trans>
+                    <div className="mt-2">
+                      {t("trackingDetails.annotationSettings.offset.tips")}
                       <div className="mt-2 flex items-center text-primary">
                         <Link
                           to={getLocaleDocUrl("configuration/reference")}
@@ -192,23 +171,26 @@ export function AnnotationSettingsPane({
                         </Link>
                       </div>
                     </div>
-                  </div>
-                  <div className="flex flex-col">
+                  </FormDescription>
+                </div>
+                <div className="flex flex-col gap-3">
+                  {/* <div className="flex flex-row items-center gap-3 rounded-lg bg-destructive/50 p-3 text-sm text-primary-variant md:my-5">
+                    <PiWarningCircle className="size-24" />
+                    <div>
+                      <Trans ns="views/explore">
+                        trackingDetails.annotationSettings.offset.desc
+                      </Trans>
+
+                    </div>
+                  </div> */}
+                  <div className="min-w-24">
                     <FormControl>
                       <Input
-                        className="text-md 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 text-center hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                         placeholder="0"
                         {...field}
                       />
                     </FormControl>
-                    <FormDescription>
-                      <Trans ns="views/explore">
-                        trackingDetails.annotationSettings.offset.millisecondsToOffset
-                      </Trans>
-                      <div className="mt-2">
-                        {t("trackingDetails.annotationSettings.offset.tips")}
-                      </div>
-                    </FormDescription>
                   </div>
                 </div>
                 <FormMessage />
diff --git a/web/src/components/overlay/detail/SearchDetailDialog.tsx b/web/src/components/overlay/detail/SearchDetailDialog.tsx
index 67f2259c6..235c3fdd4 100644
--- a/web/src/components/overlay/detail/SearchDetailDialog.tsx
+++ b/web/src/components/overlay/detail/SearchDetailDialog.tsx
@@ -33,7 +33,6 @@ import {
 } from "react-icons/fa";
 import { TrackingDetails } from "./TrackingDetails";
 import { AnnotationSettingsPane } from "./AnnotationSettingsPane";
-import { LuSettings } from "react-icons/lu";
 import { DetailStreamProvider } from "@/context/detail-stream-context";
 import {
   MobilePage,
@@ -76,6 +75,7 @@ import { getTranslatedLabel } from "@/utils/i18n";
 import { CameraNameLabel } from "@/components/camera/CameraNameLabel";
 import { DialogPortal } from "@radix-ui/react-dialog";
 import { useDetailStream } from "@/context/detail-stream-context";
+import { PiSlidersHorizontalBold } from "react-icons/pi";
 
 const SEARCH_TABS = ["snapshot", "tracking_details"] as const;
 export type SearchTab = (typeof SEARCH_TABS)[number];
@@ -108,7 +108,7 @@ function TabsWithActions({
   if (!search) return null;
 
   return (
-    <div className="flex items-center justify-between gap-2">
+    <div className="flex items-center justify-between gap-1">
       <ScrollArea className="flex-1 whitespace-nowrap">
         <div className="mb-2 flex flex-row md:mb-0">
           <ToggleGroup
@@ -173,7 +173,6 @@ function AnnotationSettingsPopover({
 }: AnnotationSettingsPopoverProps) {
   const { t } = useTranslation(["views/explore"]);
   const { annotationOffset, setAnnotationOffset } = useDetailStream();
-  const [showZones, setShowZones] = useState(true);
 
   const ignoreNextOpenRef = useRef(false);
 
@@ -218,18 +217,16 @@ function AnnotationSettingsPopover({
           <Button
             type="button"
             className="size-7 p-1.5"
-            variant={open ? "select" : "default"}
+            variant={open ? "select" : "ghost"}
             aria-label={t("trackingDetails.adjustAnnotationSettings")}
             aria-expanded={open}
           >
-            <LuSettings className="size-5" />
+            <PiSlidersHorizontalBold className="size-5" />
           </Button>
         </PopoverTrigger>
-        <PopoverContent className="w-[90vw] max-w-2xl p-0" align="end">
+        <PopoverContent className="w-[90vw] max-w-md p-0" align="end">
           <AnnotationSettingsPane
             event={search as unknown as Event}
-            showZones={showZones}
-            setShowZones={setShowZones}
             annotationOffset={annotationOffset}
             setAnnotationOffset={(value) => {
               if (typeof value === "function") {