verified icon, recognized plate, and clicking tweaks

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

@@ -94,6 +94,10 @@ export default function ObjectLifecycle({
     );
   }, [config, event]);
 
+  const label = event.sub_label
+    ? event.sub_label
+    : getTranslatedLabel(event.label);
+
   const getZoneColor = useCallback(
     (zoneName: string) => {
       const zoneColor =
@@ -635,10 +639,18 @@ export default function ObjectLifecycle({
                 )}
               </div>
               <div className="flex items-end gap-2">
-                <span>{getTranslatedLabel(event.label)}</span>
+                <span>{label}</span>
                 <span className="text-secondary-foreground">
                   {formattedStart ?? ""} - {formattedEnd ?? ""}
                 </span>
+                {event.data?.recognized_license_plate && (
+                  <>
+                    ·{" "}
+                    <span className="text-sm text-secondary-foreground">
+                      {event.data.recognized_license_plate}
+                    </span>
+                  </>
+                )}
               </div>
             </div>
           </div>

web/src/components/timeline/DetailStream.tsx

@@ -254,7 +254,9 @@ function ReviewGroup({
 
   const rawIconLabels: string[] = [
     ...(fetchedEvents
-      ? fetchedEvents.map((e) => e.label)
+      ? fetchedEvents.map((e) =>
+          e.sub_label ? e.label + "-verified" : e.label,
+        )
       : (review.data?.objects ?? [])),
     ...(review.data?.audio ?? []),
   ];
@@ -317,7 +319,7 @@ function ReviewGroup({
           <div className="ml-1 flex flex-col items-start gap-1.5">
             <div className="flex flex-row gap-3">
               <div className="text-sm font-medium">{displayTime}</div>
-              <div className="flex items-center gap-2">
+              <div className="relative flex items-center gap-2 text-white">
                 {iconLabels.slice(0, 5).map((lbl, idx) => (
                   <div
                     key={`${lbl}-${idx}`}
@@ -427,6 +429,8 @@ function EventList({
 
   const isSelected = selectedObjectIds.includes(event.id);
 
+  const label = event.sub_label || getTranslatedLabel(event.label);
+
   const handleObjectSelect = (event: Event | undefined) => {
     if (event) {
       // onSeek(event.start_time ?? 0);
@@ -466,28 +470,43 @@ function EventList({
             "bg-secondary-highlight",
         )}
       >
-        <div className="ml-1.5 flex w-full items-center justify-between">
+        <div className="ml-1.5 flex w-full items-end justify-between">
-          <div
+          <div className="flex flex-1 items-center gap-2 text-sm font-medium">
-            className="flex items-center gap-2 text-sm font-medium"
-            onClick={(e) => {
-              e.stopPropagation();
-              handleObjectSelect(isSelected ? undefined : event);
-            }}
-            role="button"
-          >
             <div
               className={cn(
-                "rounded-full p-1",
+                "relative rounded-full p-1 text-white",
                 isSelected ? "bg-selected" : "bg-muted-foreground",
               )}
+              onClick={(e) => {
+                e.stopPropagation();
+                handleObjectSelect(isSelected ? undefined : event);
+              }}
             >
-              {getIconForLabel(event.label, "size-3 text-white")}
+              {getIconForLabel(
+                event.sub_label ? event.label + "-verified" : event.label,
+                "size-3 text-white",
+              )}
             </div>
-            <div className="flex items-end gap-2">
+            <div
-              <span>{getTranslatedLabel(event.label)}</span>
+              className="flex flex-1 items-center gap-2"
+              onClick={(e) => {
+                e.stopPropagation();
+                onSeek(event.start_time ?? 0);
+              }}
+              role="button"
+            >
+              <span>{label}</span>
+              {event.data?.recognized_license_plate && (
+                <>
+                  ·{" "}
+                  <span className="text-sm text-secondary-foreground">
+                    {event.data.recognized_license_plate}
+                  </span>
+                </>
+              )}
             </div>
           </div>
-          <div className="mr-2 flex flex-1 flex-row justify-end">
+          <div className="mr-2 flex flex-row justify-end">
             <EventMenu
               event={event}
               config={config}

web/src/types/event.ts

@@ -22,6 +22,7 @@ export interface Event {
     area: number;
     ratio: number;
     type: "object" | "audio" | "manual";
+    recognized_license_plate?: string;
     path_data: [number[], number][];
   };
 }