Miscellaneous fixes (#22924)

* apply annotation offset to frigate+ submission frame time

* fix broken docs links with hash fragments that resolve wrong on reload

* undo

* use recording snapshot for frigate+ frame submission from VideoControls

rather than a canvas grab/paint, which may not always align with an ffmpeg snapshot due to keyframes

* add more docs links

- display docs link for main sections on collapsible fields

* dialog button consistency

web/src/components/overlay/detail/TrackingDetails.tsx

@@ -636,6 +636,13 @@ export function TrackingDetails({
     return axios.post(`/${event.camera}/plus/${currentTime}`);
   }, [event.camera, currentTime]);
 
+  const getSnapshotUrlForPlus = useCallback(() => {
+    if (!currentTime) {
+      return undefined;
+    }
+    return `${apiHost}api/${event.camera}/recordings/${currentTime}/snapshot.jpg?height=500`;
+  }, [apiHost, event.camera, currentTime]);
+
   if (!config) {
     return <ActivityIndicator />;
   }
@@ -683,6 +690,7 @@ export function TrackingDetails({
                 onTimeUpdate={handleTimeUpdate}
                 onSeekToTime={handleSeekToTime}
                 onUploadFrame={onUploadFrameToPlus}
+                getSnapshotUrl={getSnapshotUrlForPlus}
                 onPlaying={() => setIsVideoLoading(false)}
                 setFullResolution={setFullResolution}
                 toggleFullscreen={toggleFullscreen}
@@ -867,6 +875,7 @@ export function TrackingDetails({
                             getZoneColor={getZoneColor}
                             effectiveTime={effectiveTime}
                             isTimelineActive={isWithinEventRange}
+                            annotationOffset={annotationOffset}
                           />
                         </div>
                       );
@@ -890,6 +899,7 @@ type LifecycleIconRowProps = {
   getZoneColor: (zoneName: string) => number[] | undefined;
   effectiveTime?: number;
   isTimelineActive?: boolean;
+  annotationOffset: number;
 };
 
 function LifecycleIconRow({
@@ -900,6 +910,7 @@ function LifecycleIconRow({
   getZoneColor,
   effectiveTime,
   isTimelineActive,
+  annotationOffset,
 }: LifecycleIconRowProps) {
   const { t } = useTranslation(["views/explore", "components/player"]);
   const { data: config } = useSWR<FrigateConfig>("config");
@@ -1206,7 +1217,7 @@ function LifecycleIconRow({
                         className="cursor-pointer"
                         onSelect={async () => {
                           const resp = await axios.post(
-                            `/${item.camera}/plus/${item.timestamp}`,
+                            `/${item.camera}/plus/${item.timestamp + annotationOffset / 1000}`,
                           );
 
                           if (resp && resp.status == 200) {