remove review detail dialog and link chip to detail stream in history

web/public/locales/en/views/faceLibrary.json

@@ -1,6 +1,6 @@
 {
   "description": {
-    "addFace": "Walk through adding a new collection to the Face Library.",
+    "addFace": "Add a new collection to the Face Library by uploading your first image.",
     "placeholder": "Enter a name for this collection",
     "invalidName": "Invalid name. Names can only include letters, numbers, spaces, apostrophes, underscores, and hyphens."
   },

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

@@ -102,17 +102,23 @@ export default function CreateFaceWizardDialog({
       }}
     >
       <Content
-        className={cn("flex flex-col gap-4", isDesktop ? "max-w-3xl" : "p-4")}
+        className={cn(
+          "flex flex-col gap-4",
+          isDesktop ? (step == 0 ? "max-w-xl" : "max-w-3xl") : "p-4",
+        )}
       >
-        <Header>
-          <Title>{t("button.addFace")}</Title>
-          {isDesktop && <Description>{t("description.addFace")}</Description>}
-        </Header>
         <StepIndicator
           steps={STEPS}
           currentStep={step}
           translationNameSpace="views/faceLibrary"
+          className="mb-4 justify-start"
+          variant="dots"
         />
+        <Header>
+          <Title>{t("button.addFace")}</Title>
+          {isDesktop && <Description>{t("description.addFace")}</Description>}
+        </Header>
+
         {step == 0 && (
           <TextEntry
             placeholder={t("description.placeholder")}

web/src/pages/Events.tsx

@@ -66,6 +66,7 @@ export default function Events() {
               camera: resp.data.camera,
               startTime,
               severity: resp.data.severity,
+              timelineType: "detail",
             },
             true,
           );

web/src/types/record.ts

@@ -37,6 +37,7 @@ export type RecordingStartingPoint = {
   camera: string;
   startTime: number;
   severity: ReviewSeverity;
+  timelineType?: "timeline" | "events" | "detail";
 };
 
 export type RecordingPlayerError = "stalled" | "startup";

web/src/views/events/EventView.tsx

@@ -53,8 +53,6 @@ import { cn } from "@/lib/utils";
 import { FilterList, LAST_24_HOURS_KEY } from "@/types/filter";
 import { GiSoundWaves } from "react-icons/gi";
 import useKeyboardListener from "@/hooks/use-keyboard-listener";
-import ReviewDetailDialog from "@/components/overlay/detail/ReviewDetailDialog";
-
 import { useTimelineZoom } from "@/hooks/use-timeline-zoom";
 import { useTranslation } from "react-i18next";
 
@@ -398,6 +396,7 @@ export default function EventView({
             onSelectAllReviews={onSelectAllReviews}
             setSelectedReviews={setSelectedReviews}
             pullLatestData={pullLatestData}
+            onOpenRecording={onOpenRecording}
           />
         )}
         {severity == "significant_motion" && (
@@ -441,6 +440,7 @@ type DetectionReviewProps = {
   onSelectAllReviews: () => void;
   setSelectedReviews: (reviews: ReviewSegment[]) => void;
   pullLatestData: () => void;
+  onOpenRecording: (recordingInfo: RecordingStartingPoint) => void;
 };
 function DetectionReview({
   contentRef,
@@ -460,15 +460,12 @@ function DetectionReview({
   onSelectAllReviews,
   setSelectedReviews,
   pullLatestData,
+  onOpenRecording,
 }: DetectionReviewProps) {
   const { t } = useTranslation(["views/events"]);
 
   const reviewTimelineRef = useRef<HTMLDivElement>(null);
 
-  // detail
-
-  const [reviewDetail, setReviewDetail] = useState<ReviewSegment>();
-
   // preview
 
   const [previewTime, setPreviewTime] = useState<number>();
@@ -688,8 +685,6 @@ function DetectionReview({
 
   return (
     <>
-      <ReviewDetailDialog review={reviewDetail} setReview={setReviewDetail} />
-
       <div
         ref={contentRef}
         className="no-scrollbar flex flex-1 flex-wrap content-start gap-2 overflow-y-auto md:gap-4"
@@ -750,7 +745,12 @@ function DetectionReview({
                           detail: boolean,
                         ) => {
                           if (detail) {
-                            setReviewDetail(review);
+                            onOpenRecording({
+                              camera: review.camera,
+                              startTime: review.start_time - REVIEW_PADDING,
+                              severity: review.severity,
+                              timelineType: "detail",
+                            });
                           } else {
                             onSelectReview(review, ctrl);
                           }

web/src/views/recording/RecordingView.tsx

@@ -53,6 +53,7 @@ import {
   ASPECT_VERTICAL_LAYOUT,
   ASPECT_WIDE_LAYOUT,
   RecordingSegment,
+  RecordingStartingPoint,
 } from "@/types/record";
 import { useResizeObserver } from "@/hooks/resize-observer";
 import { cn } from "@/lib/utils";
@@ -141,9 +142,15 @@ export function RecordingView({
 
   // timeline
 
+  const [recording] = useOverlayState<RecordingStartingPoint>(
+    "recording",
+    undefined,
+    false,
+  );
+
   const [timelineType, setTimelineType] = useOverlayState<TimelineType>(
     "timelineType",
-    "timeline",
+    recording?.timelineType ?? "timeline",
   );
 
   const chunkedTimeRange = useMemo(