More detail pane tweaks (#20681)

* More detail pane tweaks

* remove unneeded check

* add ability to submit frames to frigate+

* rename object lifecycle to tracking details

* add object mask creation to lifecycle item menu

* change tracking details icon

web/src/components/overlay/ObjectTrackOverlay.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useCallback } from "react";
-import { ObjectLifecycleSequence, LifecycleClassType } from "@/types/timeline";
+import { TrackingDetailsSequence, LifecycleClassType } from "@/types/timeline";
 import { FrigateConfig } from "@/types/frigateConfig";
 import useSWR from "swr";
 import { useDetailStream } from "@/context/detail-stream-context";
@@ -27,7 +27,7 @@ type PathPoint = {
   x: number;
   y: number;
   timestamp: number;
-  lifecycle_item?: ObjectLifecycleSequence;
+  lifecycle_item?: TrackingDetailsSequence;
   objectId: string;
 };
 
@@ -63,7 +63,7 @@ export default function ObjectTrackOverlay({
   );
 
   // Fetch timeline data for each object ID using fixed number of hooks
-  const { data: timelineData } = useSWR<ObjectLifecycleSequence[]>(
+  const { data: timelineData } = useSWR<TrackingDetailsSequence[]>(
     selectedObjectIds.length > 0
       ? `timeline?source_id=${selectedObjectIds.join(",")}&limit=1000`
       : null,
@@ -74,7 +74,7 @@ export default function ObjectTrackOverlay({
     // Group timeline entries by source_id
     if (!timelineData) return selectedObjectIds.map(() => []);
 
-    const grouped: Record<string, ObjectLifecycleSequence[]> = {};
+    const grouped: Record<string, TrackingDetailsSequence[]> = {};
     for (const entry of timelineData) {
       if (!grouped[entry.source_id]) {
         grouped[entry.source_id] = [];
@@ -152,9 +152,9 @@ export default function ObjectTrackOverlay({
         const eventSequencePoints: PathPoint[] =
           timelineData
             ?.filter(
-              (event: ObjectLifecycleSequence) => event.data.box !== undefined,
+              (event: TrackingDetailsSequence) => event.data.box !== undefined,
             )
-            .map((event: ObjectLifecycleSequence) => {
+            .map((event: TrackingDetailsSequence) => {
               const [left, top, width, height] = event.data.box!;
               return {
                 x: left + width / 2, // Center x
@@ -183,22 +183,22 @@ export default function ObjectTrackOverlay({
         const currentZones =
           timelineData
             ?.filter(
-              (event: ObjectLifecycleSequence) =>
+              (event: TrackingDetailsSequence) =>
                 event.timestamp <= effectiveCurrentTime,
             )
             .sort(
-              (a: ObjectLifecycleSequence, b: ObjectLifecycleSequence) =>
+              (a: TrackingDetailsSequence, b: TrackingDetailsSequence) =>
                 b.timestamp - a.timestamp,
             )[0]?.data?.zones || [];
 
         // Get current bounding box
         const currentBox = timelineData
           ?.filter(
-            (event: ObjectLifecycleSequence) =>
+            (event: TrackingDetailsSequence) =>
               event.timestamp <= effectiveCurrentTime && event.data.box,
           )
           .sort(
-            (a: ObjectLifecycleSequence, b: ObjectLifecycleSequence) =>
+            (a: TrackingDetailsSequence, b: TrackingDetailsSequence) =>
               b.timestamp - a.timestamp,
           )[0]?.data?.box;