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

@@ -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/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",
                   )}
                 >

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 />
         ) : (

web/src/components/menu/SearchResultActions.tsx

@@ -214,10 +214,14 @@ export default function SearchResultActions({
             searchResult.data.type == "object" && (
               <Tooltip>
                 <TooltipTrigger>
+                  <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="size-5 cursor-pointer text-primary-variant hover:text-primary"
+                      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>
+                  <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="size-5 cursor-pointer text-primary-variant hover:text-primary"
+                      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>

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/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"
             >
+              <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,7 +651,13 @@ export default function ObjectLifecycle({
                 {t("detail.noObjectDetailData", { ns: "views/events" })}
               </div>
             ) : (
-              <div className="mx-2 mt-4 space-y-2">
+              <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;
@@ -646,9 +701,14 @@ export default function ObjectLifecycle({
                         : undefined;
 
                     return (
-                    <div
+                      <LifecycleIconRow
                         key={`${item.timestamp}-${item.source_id ?? ""}-${idx}`}
-                      role="button"
+                        item={item}
+                        isActive={isActive}
+                        formattedEventTimestamp={formattedEventTimestamp}
+                        ratio={ratio}
+                        areaPx={areaPx}
+                        areaPct={areaPct}
                         onClick={() => {
                           setTimeIndex(item.timestamp ?? 0);
                           handleSetBox(
@@ -658,92 +718,13 @@ export default function ObjectLifecycle({
                           setLifecycleZones(item.data.zones);
                           setSelectedZone("");
                         }}
-                      className={cn(
+                        setSelectedZone={setSelectedZone}
-                        "flex cursor-pointer flex-col gap-1 rounded-md p-2 text-sm text-primary-variant",
+                        getZoneColor={getZoneColor}
-                        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>
                     );
                   })}
                 </div>
+              </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>
+  );
+}

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/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>
+              <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="size-7 cursor-pointer p-1 text-gray-200 hover:rounded-full hover:bg-primary-foreground/40"
+                  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>

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/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>
                   </>
                 )}

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(

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,11 +634,7 @@ export default function SearchView({
                           </Tooltip>
                         </div>
                       )}
-                    </div>
+                      <div className="absolute bottom-0 left-0 right-0 z-30 bg-gradient-to-t from-black/70 to-transparent p-2">
-                    <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"}`}
-                    />
-                    <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}
@@ -667,6 +663,10 @@ export default function SearchView({
                         />
                       </div>
                     </div>
+                    <div
+                      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>
                 );
               })}
           </div>