From eb51eb3c9d2667cff23ac0b004ab7de312dbe25d Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 24 Oct 2025 12:08:59 -0500
Subject: [PATCH] UI tweaks (#20649)

* match face wizard with camera and classification wizards

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

* remove footer on explore images and move to overlay

* use consistent overlay button styles

* spacing tweak

* ensure selected ring stays on top of gradients

* fix z-index

* match object lifecycle with details
---
 web/public/locales/en/views/faceLibrary.json  |   2 +-
 .../components/card/ClassificationCard.tsx    |   2 +-
 .../components/card/SearchThumbnailFooter.tsx |   4 +-
 .../components/menu/SearchResultActions.tsx   |  28 +-
 .../overlay/detail/FaceCreateWizardDialog.tsx |  16 +-
 .../overlay/detail/ObjectLifecycle.tsx        | 383 +++++++++++-------
 web/src/pages/Events.tsx                      |   1 +
 web/src/pages/FaceLibrary.tsx                 |  16 +-
 web/src/types/record.ts                       |   1 +
 .../classification/ModelTrainingView.tsx      |  10 +-
 web/src/views/events/EventView.tsx            |  18 +-
 web/src/views/recording/RecordingView.tsx     |   9 +-
 web/src/views/search/SearchView.tsx           |  60 +--
 13 files changed, 341 insertions(+), 209 deletions(-)

diff --git a/web/public/locales/en/views/faceLibrary.json b/web/public/locales/en/views/faceLibrary.json
index 08050977e..ce168c346 100644
--- a/web/public/locales/en/views/faceLibrary.json
+++ b/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."
   },
diff --git a/web/src/components/card/ClassificationCard.tsx b/web/src/components/card/ClassificationCard.tsx
index de99c60fe..15404db1b 100644
--- a/web/src/components/card/ClassificationCard.tsx
+++ b/web/src/components/card/ClassificationCard.tsx
@@ -305,7 +305,7 @@ export function GroupedClassificationCard({
               <div>
                 <ContentTitle
                   className={cn(
-                    "flex items-center gap-1 font-normal capitalize",
+                    "flex items-center gap-2 font-normal capitalize",
                     isMobile && "px-2",
                   )}
                 >
diff --git a/web/src/components/card/SearchThumbnailFooter.tsx b/web/src/components/card/SearchThumbnailFooter.tsx
index e23d1c3f6..9a6f4e6ee 100644
--- a/web/src/components/card/SearchThumbnailFooter.tsx
+++ b/web/src/components/card/SearchThumbnailFooter.tsx
@@ -42,11 +42,11 @@ export default function SearchThumbnailFooter({
   return (
     <div
       className={cn(
-        "flex w-full flex-row items-center justify-between gap-2",
+        "flex w-full flex-row items-center justify-between gap-2 text-white",
         columns > 4 && "items-start sm:flex-col lg:flex-row lg:items-center",
       )}
     >
-      <div className="flex flex-col items-start text-xs text-primary-variant">
+      <div className="flex flex-col items-start text-xs text-white/90 drop-shadow-lg">
         {searchResult.end_time ? (
           <TimeAgo time={searchResult.start_time * 1000} dense />
         ) : (
diff --git a/web/src/components/menu/SearchResultActions.tsx b/web/src/components/menu/SearchResultActions.tsx
index 2c928becf..99d9e4881 100644
--- a/web/src/components/menu/SearchResultActions.tsx
+++ b/web/src/components/menu/SearchResultActions.tsx
@@ -214,10 +214,14 @@ export default function SearchResultActions({
             searchResult.data.type == "object" && (
               <Tooltip>
                 <TooltipTrigger>
-                  <MdImageSearch
-                    className="size-5 cursor-pointer text-primary-variant hover:text-primary"
-                    onClick={findSimilar}
-                  />
+                  <div className="group relative inline-flex items-center justify-center">
+                    {/* blurred circular hover background */}
+                    <div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" />
+                    <MdImageSearch
+                      className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white"
+                      onClick={findSimilar}
+                    />
+                  </div>
                 </TooltipTrigger>
                 <TooltipContent>
                   {t("itemMenu.findSimilar.label")}
@@ -233,10 +237,13 @@ export default function SearchResultActions({
             !searchResult.plus_id && (
               <Tooltip>
                 <TooltipTrigger>
-                  <FrigatePlusIcon
-                    className="size-5 cursor-pointer text-primary-variant hover:text-primary"
-                    onClick={showSnapshot}
-                  />
+                  <div className="group relative inline-flex items-center justify-center">
+                    <div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" />
+                    <FrigatePlusIcon
+                      className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white"
+                      onClick={showSnapshot}
+                    />
+                  </div>
                 </TooltipTrigger>
                 <TooltipContent>
                   {t("itemMenu.submitToPlus.label")}
@@ -246,7 +253,10 @@ export default function SearchResultActions({
 
           <DropdownMenu>
             <DropdownMenuTrigger>
-              <FiMoreVertical className="size-5 cursor-pointer text-primary-variant hover:text-primary" />
+              <div className="group relative inline-flex items-center justify-center">
+                <div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" />
+                <FiMoreVertical className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white" />
+              </div>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">{menuItems}</DropdownMenuContent>
           </DropdownMenu>
diff --git a/web/src/components/overlay/detail/FaceCreateWizardDialog.tsx b/web/src/components/overlay/detail/FaceCreateWizardDialog.tsx
index 3ed512303..6436ef040 100644
--- a/web/src/components/overlay/detail/FaceCreateWizardDialog.tsx
+++ b/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")}
diff --git a/web/src/components/overlay/detail/ObjectLifecycle.tsx b/web/src/components/overlay/detail/ObjectLifecycle.tsx
index d335e35c9..0f1eaadf5 100644
--- a/web/src/components/overlay/detail/ObjectLifecycle.tsx
+++ b/web/src/components/overlay/detail/ObjectLifecycle.tsx
@@ -47,6 +47,7 @@ import { getLifecycleItemDescription } from "@/utils/lifecycleUtil";
 import { IoPlayCircleOutline } from "react-icons/io5";
 import { useTranslation } from "react-i18next";
 import { getTranslatedLabel } from "@/utils/i18n";
+import { Badge } from "@/components/ui/badge";
 
 type ObjectLifecycleProps = {
   className?: string;
@@ -355,6 +356,52 @@ export default function ObjectLifecycle({
     return idx === -1 ? 0 : idx;
   }, [eventSequence, timeIndex]);
 
+  // Calculate how far down the blue line should extend based on timeIndex
+  const calculateLineHeight = () => {
+    if (!eventSequence || eventSequence.length === 0) return 0;
+
+    const currentTime = timeIndex ?? 0;
+
+    // Find which events have been passed
+    let lastPassedIndex = -1;
+    for (let i = 0; i < eventSequence.length; i++) {
+      if (currentTime >= (eventSequence[i].timestamp ?? 0)) {
+        lastPassedIndex = i;
+      } else {
+        break;
+      }
+    }
+
+    // No events passed yet
+    if (lastPassedIndex < 0) return 0;
+
+    // All events passed
+    if (lastPassedIndex >= eventSequence.length - 1) return 100;
+
+    // Calculate percentage based on item position, not time
+    // Each item occupies an equal visual space regardless of time gaps
+    const itemPercentage = 100 / (eventSequence.length - 1);
+
+    // Find progress between current and next event for smooth transition
+    const currentEvent = eventSequence[lastPassedIndex];
+    const nextEvent = eventSequence[lastPassedIndex + 1];
+    const currentTimestamp = currentEvent.timestamp ?? 0;
+    const nextTimestamp = nextEvent.timestamp ?? 0;
+
+    // Calculate interpolation between the two events
+    const timeBetween = nextTimestamp - currentTimestamp;
+    const timeElapsed = currentTime - currentTimestamp;
+    const interpolation = timeBetween > 0 ? timeElapsed / timeBetween : 0;
+
+    // Base position plus interpolated progress to next item
+    return Math.min(
+      100,
+      lastPassedIndex * itemPercentage + interpolation * itemPercentage,
+    );
+  };
+
+  const blueLineHeight = calculateLineHeight();
+
   if (!config) {
     return <ActivityIndicator />;
   }
@@ -569,7 +616,7 @@ export default function ObjectLifecycle({
       <div className="mt-4">
         <div
           className={cn(
-            "rounded-md bg-secondary p-2 outline outline-[3px] -outline-offset-[2.8px] outline-transparent duration-500",
+            "rounded-md bg-secondary p-3 outline outline-[3px] -outline-offset-[2.8px] outline-transparent duration-500",
           )}
         >
           <div className="flex w-full items-center justify-between">
@@ -581,10 +628,12 @@ export default function ObjectLifecycle({
               }}
               role="button"
             >
-              {getIconForLabel(
-                event.label,
-                "size-6 text-primary dark:text-white",
-              )}
+              <div className={cn("ml-1 rounded-full bg-muted-foreground p-2")}>
+                {getIconForLabel(
+                  event.label,
+                  "size-6 text-primary dark:text-white",
+                )}
+              </div>
               <div className="flex items-end gap-2">
                 <span>{getTranslatedLabel(event.label)}</span>
                 <span className="text-secondary-foreground">
@@ -602,147 +651,79 @@ export default function ObjectLifecycle({
                 {t("detail.noObjectDetailData", { ns: "views/events" })}
               </div>
             ) : (
-              <div className="mx-2 mt-4 space-y-2">
-                {eventSequence.map((item, idx) => {
-                  const isActive =
-                    Math.abs((timeIndex ?? 0) - (item.timestamp ?? 0)) <= 0.5;
-                  const formattedEventTimestamp = config
-                    ? formatUnixTimestampToDateTime(item.timestamp ?? 0, {
-                        timezone: config.ui.timezone,
-                        date_format:
-                          config.ui.time_format == "24hour"
-                            ? t(
-                                "time.formattedTimestampHourMinuteSecond.24hour",
-                                { ns: "common" },
-                              )
-                            : t(
-                                "time.formattedTimestampHourMinuteSecond.12hour",
-                                { ns: "common" },
-                              ),
-                        time_style: "medium",
-                        date_style: "medium",
-                      })
-                    : "";
+              <div className="-pb-2 relative mx-2">
+                <div className="absolute -top-2 bottom-8 left-4 z-0 w-0.5 -translate-x-1/2 bg-secondary-foreground" />
+                <div
+                  className="absolute left-4 top-2 z-[5] max-h-[calc(100%-3rem)] w-0.5 -translate-x-1/2 bg-selected transition-all duration-300"
+                  style={{ height: `${blueLineHeight}%` }}
+                />
+                <div className="space-y-2">
+                  {eventSequence.map((item, idx) => {
+                    const isActive =
+                      Math.abs((timeIndex ?? 0) - (item.timestamp ?? 0)) <= 0.5;
+                    const formattedEventTimestamp = config
+                      ? formatUnixTimestampToDateTime(item.timestamp ?? 0, {
+                          timezone: config.ui.timezone,
+                          date_format:
+                            config.ui.time_format == "24hour"
+                              ? t(
+                                  "time.formattedTimestampHourMinuteSecond.24hour",
+                                  { ns: "common" },
+                                )
+                              : t(
+                                  "time.formattedTimestampHourMinuteSecond.12hour",
+                                  { ns: "common" },
+                                ),
+                          time_style: "medium",
+                          date_style: "medium",
+                        })
+                      : "";
 
-                  const ratio =
-                    Array.isArray(item.data.box) && item.data.box.length >= 4
-                      ? (
-                          aspectRatio *
-                          (item.data.box[2] / item.data.box[3])
-                        ).toFixed(2)
-                      : "N/A";
-                  const areaPx =
-                    Array.isArray(item.data.box) && item.data.box.length >= 4
-                      ? Math.round(
-                          (config.cameras[event.camera]?.detect?.width ?? 0) *
-                            (config.cameras[event.camera]?.detect?.height ??
-                              0) *
-                            (item.data.box[2] * item.data.box[3]),
-                        )
-                      : undefined;
-                  const areaPct =
-                    Array.isArray(item.data.box) && item.data.box.length >= 4
-                      ? (item.data.box[2] * item.data.box[3]).toFixed(4)
-                      : undefined;
+                    const ratio =
+                      Array.isArray(item.data.box) && item.data.box.length >= 4
+                        ? (
+                            aspectRatio *
+                            (item.data.box[2] / item.data.box[3])
+                          ).toFixed(2)
+                        : "N/A";
+                    const areaPx =
+                      Array.isArray(item.data.box) && item.data.box.length >= 4
+                        ? Math.round(
+                            (config.cameras[event.camera]?.detect?.width ?? 0) *
+                              (config.cameras[event.camera]?.detect?.height ??
+                                0) *
+                              (item.data.box[2] * item.data.box[3]),
+                          )
+                        : undefined;
+                    const areaPct =
+                      Array.isArray(item.data.box) && item.data.box.length >= 4
+                        ? (item.data.box[2] * item.data.box[3]).toFixed(4)
+                        : undefined;
 
-                  return (
-                    <div
-                      key={`${item.timestamp}-${item.source_id ?? ""}-${idx}`}
-                      role="button"
-                      onClick={() => {
-                        setTimeIndex(item.timestamp ?? 0);
-                        handleSetBox(
-                          item.data.box ?? [],
-                          item.data.attribute_box,
-                        );
-                        setLifecycleZones(item.data.zones);
-                        setSelectedZone("");
-                      }}
-                      className={cn(
-                        "flex cursor-pointer flex-col gap-1 rounded-md p-2 text-sm text-primary-variant",
-                        isActive
-                          ? "bg-secondary-highlight font-semibold text-primary outline-[1.5px] -outline-offset-[1.1px] outline-primary/40 dark:font-normal"
-                          : "duration-500",
-                      )}
-                    >
-                      <div className="flex items-center gap-2">
-                        <div className="flex size-7 items-center justify-center">
-                          <LifecycleIcon
-                            lifecycleItem={item}
-                            className="size-5"
-                          />
-                        </div>
-                        <div className="flex w-full flex-row justify-between">
-                          <div>{getLifecycleItemDescription(item)}</div>
-                          <div className={cn("p-1 text-sm")}>
-                            {formattedEventTimestamp}
-                          </div>
-                        </div>
-                      </div>
-
-                      <div className="ml-8 mt-1 flex flex-wrap items-center gap-3 text-sm text-secondary-foreground">
-                        <div className="flex flex-col gap-1">
-                          <div className="flex items-center gap-1">
-                            <span className="text-muted-foreground">
-                              {t(
-                                "objectLifecycle.lifecycleItemDesc.header.ratio",
-                              )}
-                            </span>
-                            <span className="font-medium text-foreground">
-                              {ratio}
-                            </span>
-                          </div>
-
-                          <div className="flex items-center gap-1">
-                            <span className="text-muted-foreground">
-                              {t(
-                                "objectLifecycle.lifecycleItemDesc.header.area",
-                              )}
-                            </span>
-                            {areaPx !== undefined && areaPct !== undefined ? (
-                              <span className="font-medium text-foreground">
-                                px: {areaPx} · %: {areaPct}
-                              </span>
-                            ) : (
-                              <span>N/A</span>
-                            )}
-                          </div>
-                          {item.class_type === "entered_zone" && (
-                            <div className="flex items-center gap-2">
-                              <span className="text-muted-foreground">
-                                {t(
-                                  "objectLifecycle.lifecycleItemDesc.header.zones",
-                                )}
-                              </span>
-                              <div className="flex flex-wrap items-center gap-2">
-                                {item.data.zones.map((zone, zidx) => (
-                                  <div
-                                    key={`${zone}-${zidx}`}
-                                    className="flex cursor-pointer items-center gap-1"
-                                    onClick={(e) => {
-                                      e.stopPropagation();
-                                      setSelectedZone(zone);
-                                    }}
-                                  >
-                                    <div
-                                      className="size-3 rounded"
-                                      style={{
-                                        backgroundColor: `rgb(${getZoneColor(zone)})`,
-                                      }}
-                                    />
-                                    <span className="smart-capitalize">
-                                      {zone.replaceAll("_", " ")}
-                                    </span>
-                                  </div>
-                                ))}
-                              </div>
-                            </div>
-                          )}
-                        </div>
-                      </div>
-                    </div>
-                  );
-                })}
+                    return (
+                      <LifecycleIconRow
+                        key={`${item.timestamp}-${item.source_id ?? ""}-${idx}`}
+                        item={item}
+                        isActive={isActive}
+                        formattedEventTimestamp={formattedEventTimestamp}
+                        ratio={ratio}
+                        areaPx={areaPx}
+                        areaPct={areaPct}
+                        onClick={() => {
+                          setTimeIndex(item.timestamp ?? 0);
+                          handleSetBox(
+                            item.data.box ?? [],
+                            item.data.attribute_box,
+                          );
+                          setLifecycleZones(item.data.zones);
+                          setSelectedZone("");
+                        }}
+                        setSelectedZone={setSelectedZone}
+                        getZoneColor={getZoneColor}
+                      />
+                    );
+                  })}
+                </div>
               </div>
             )}
           </div>
@@ -789,3 +770,117 @@ export function LifecycleIcon({
       return null;
   }
 }
+
+type LifecycleIconRowProps = {
+  item: ObjectLifecycleSequence;
+  isActive?: boolean;
+  formattedEventTimestamp: string;
+  ratio: string;
+  areaPx?: number;
+  areaPct?: string;
+  onClick: () => void;
+  setSelectedZone: (z: string) => void;
+  getZoneColor: (zoneName: string) => number[] | undefined;
+};
+
+function LifecycleIconRow({
+  item,
+  isActive,
+  formattedEventTimestamp,
+  ratio,
+  areaPx,
+  areaPct,
+  onClick,
+  setSelectedZone,
+  getZoneColor,
+}: LifecycleIconRowProps) {
+  const { t } = useTranslation(["views/explore"]);
+
+  return (
+    <div
+      role="button"
+      onClick={onClick}
+      className={cn(
+        "rounded-md p-2 text-sm text-primary-variant",
+        isActive && "bg-secondary-highlight font-semibold text-primary",
+        !isActive && "duration-500",
+      )}
+    >
+      <div className="flex items-center gap-2">
+        <div className="relative flex size-4 items-center justify-center">
+          <LuCircle
+            className={cn(
+              "relative z-10 ml-[1px] size-2.5 fill-secondary-foreground stroke-none",
+              isActive && "fill-selected duration-300",
+            )}
+          />
+        </div>
+
+        <div className="flex w-full flex-row justify-between">
+          <div className="flex flex-col">
+            <div>{getLifecycleItemDescription(item)}</div>
+            <div className="mt-1 flex flex-wrap items-center gap-2 text-sm text-secondary-foreground md:gap-5">
+              <div className="flex items-center gap-1">
+                <span className="text-primary-variant">
+                  {t("objectLifecycle.lifecycleItemDesc.header.ratio")}
+                </span>
+                <span className="font-medium text-primary">{ratio}</span>
+              </div>
+              <div className="flex items-center gap-1">
+                <span className="text-primary-variant">
+                  {t("objectLifecycle.lifecycleItemDesc.header.area")}
+                </span>
+                {areaPx !== undefined && areaPct !== undefined ? (
+                  <span className="font-medium text-primary">
+                    {t("information.pixels", { ns: "common", area: areaPx })} ·{" "}
+                    {areaPct}%
+                  </span>
+                ) : (
+                  <span>N/A</span>
+                )}
+              </div>
+
+              {item.data?.zones && item.data.zones.length > 0 && (
+                <div className="flex flex-wrap items-center gap-2">
+                  {item.data.zones.map((zone, zidx) => {
+                    const color = getZoneColor(zone)?.join(",") ?? "0,0,0";
+                    return (
+                      <Badge
+                        key={`${zone}-${zidx}`}
+                        variant="outline"
+                        className="inline-flex cursor-pointer items-center gap-2"
+                        onClick={(e: React.MouseEvent) => {
+                          e.stopPropagation();
+                          setSelectedZone(zone);
+                        }}
+                        style={{
+                          borderColor: `rgba(${color}, 0.6)`,
+                          background: `rgba(${color}, 0.08)`,
+                        }}
+                      >
+                        <span
+                          className="size-1 rounded-full"
+                          style={{
+                            display: "inline-block",
+                            width: 10,
+                            height: 10,
+                            backgroundColor: `rgb(${color})`,
+                          }}
+                        />
+                        <span className="smart-capitalize">
+                          {zone.replaceAll("_", " ")}
+                        </span>
+                      </Badge>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className={cn("p-1 text-sm")}>{formattedEventTimestamp}</div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/pages/Events.tsx b/web/src/pages/Events.tsx
index f4bc75a5a..bdb78e0d3 100644
--- a/web/src/pages/Events.tsx
+++ b/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,
           );
diff --git a/web/src/pages/FaceLibrary.tsx b/web/src/pages/FaceLibrary.tsx
index 677bb58e0..c01a0875a 100644
--- a/web/src/pages/FaceLibrary.tsx
+++ b/web/src/pages/FaceLibrary.tsx
@@ -858,14 +858,20 @@ function FaceAttemptGroup({
             faceNames={faceNames}
             onTrainAttempt={(name) => onTrainAttempt(data, name)}
           >
-            <AddFaceIcon className="size-7 cursor-pointer p-1 text-gray-200 hover:rounded-full hover:bg-primary-foreground/40" />
+            <div className="group relative inline-flex items-center justify-center">
+              <div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" />
+              <AddFaceIcon className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white" />
+            </div>
           </FaceSelectionDialog>
           <Tooltip>
             <TooltipTrigger>
-              <LuRefreshCw
-                className="size-7 cursor-pointer p-1 text-gray-200 hover:rounded-full hover:bg-primary-foreground/40"
-                onClick={() => onReprocess(data)}
-              />
+              <div className="group relative inline-flex items-center justify-center">
+                <div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" />
+                <LuRefreshCw
+                  className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white"
+                  onClick={() => onReprocess(data)}
+                />
+              </div>
             </TooltipTrigger>
             <TooltipContent>{t("button.reprocessFace")}</TooltipContent>
           </Tooltip>
diff --git a/web/src/types/record.ts b/web/src/types/record.ts
index a93029376..b662ce547 100644
--- a/web/src/types/record.ts
+++ b/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";
diff --git a/web/src/views/classification/ModelTrainingView.tsx b/web/src/views/classification/ModelTrainingView.tsx
index f313d6829..ed96406e6 100644
--- a/web/src/views/classification/ModelTrainingView.tsx
+++ b/web/src/views/classification/ModelTrainingView.tsx
@@ -811,7 +811,10 @@ function StateTrainGrid({
               image={data.filename}
               onRefresh={onRefresh}
             >
-              <TbCategoryPlus className="size-7 cursor-pointer p-1 text-gray-200 hover:rounded-full hover:bg-primary-foreground/40" />
+              <div className="group relative inline-flex items-center justify-center">
+                <div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" />
+                <TbCategoryPlus className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white" />
+              </div>
             </ClassificationSelectionDialog>
           </ClassificationCard>
         </div>
@@ -958,7 +961,10 @@ function ObjectTrainGrid({
                       image={data.filename}
                       onRefresh={onRefresh}
                     >
-                      <TbCategoryPlus className="size-7 cursor-pointer p-1 text-gray-200 hover:rounded-full hover:bg-primary-foreground/40" />
+                      <div className="group relative inline-flex items-center justify-center">
+                        <div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" />
+                        <TbCategoryPlus className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white" />
+                      </div>
                     </ClassificationSelectionDialog>
                   </>
                 )}
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index 83c080555..f2c2606df 100644
--- a/web/src/views/events/EventView.tsx
+++ b/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);
                           }
diff --git a/web/src/views/recording/RecordingView.tsx b/web/src/views/recording/RecordingView.tsx
index 4e0aa83ae..80671ea1b 100644
--- a/web/src/views/recording/RecordingView.tsx
+++ b/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(
diff --git a/web/src/views/search/SearchView.tsx b/web/src/views/search/SearchView.tsx
index 5cd36beab..6f2b3f86c 100644
--- a/web/src/views/search/SearchView.tsx
+++ b/web/src/views/search/SearchView.tsx
@@ -577,7 +577,7 @@ export default function SearchView({
                   >
                     <div
                       className={cn(
-                        "aspect-square w-full overflow-hidden rounded-t-lg border",
+                        "relative aspect-square w-full overflow-hidden rounded-lg",
                       )}
                     >
                       <SearchThumbnail
@@ -634,38 +634,38 @@ export default function SearchView({
                           </Tooltip>
                         </div>
                       )}
+                      <div className="absolute bottom-0 left-0 right-0 z-30 bg-gradient-to-t from-black/70 to-transparent p-2">
+                        <SearchThumbnailFooter
+                          searchResult={value}
+                          columns={columns}
+                          findSimilar={() => {
+                            if (config?.semantic_search.enabled) {
+                              setSimilaritySearch(value);
+                            }
+                          }}
+                          refreshResults={refresh}
+                          showObjectLifecycle={() =>
+                            onSelectSearch(value, false, "object_lifecycle")
+                          }
+                          showSnapshot={() =>
+                            onSelectSearch(value, false, "snapshot")
+                          }
+                          addTrigger={() => {
+                            if (
+                              config?.semantic_search.enabled &&
+                              value.data.type == "object"
+                            ) {
+                              navigate(
+                                `/settings?page=triggers&camera=${value.camera}&event_id=${value.id}`,
+                              );
+                            }
+                          }}
+                        />
+                      </div>
                     </div>
                     <div
-                      className={`review-item-ring pointer-events-none absolute inset-0 z-10 size-full rounded-lg outline outline-[3px] -outline-offset-[2.8px] ${selected ? `shadow-selected outline-selected` : "outline-transparent duration-500"}`}
+                      className={`review-item-ring pointer-events-none absolute inset-0 z-30 size-full rounded-lg outline outline-[3px] -outline-offset-[2.8px] ${selected ? `shadow-selected outline-selected` : "outline-transparent duration-500"}`}
                     />
-                    <div className="flex w-full grow items-center justify-between rounded-b-lg border border-t-0 bg-card p-3 text-card-foreground">
-                      <SearchThumbnailFooter
-                        searchResult={value}
-                        columns={columns}
-                        findSimilar={() => {
-                          if (config?.semantic_search.enabled) {
-                            setSimilaritySearch(value);
-                          }
-                        }}
-                        refreshResults={refresh}
-                        showObjectLifecycle={() =>
-                          onSelectSearch(value, false, "object_lifecycle")
-                        }
-                        showSnapshot={() =>
-                          onSelectSearch(value, false, "snapshot")
-                        }
-                        addTrigger={() => {
-                          if (
-                            config?.semantic_search.enabled &&
-                            value.data.type == "object"
-                          ) {
-                            navigate(
-                              `/settings?page=triggers&camera=${value.camera}&event_id=${value.id}`,
-                            );
-                          }
-                        }}
-                      />
-                    </div>
                   </div>
                 );
               })}