Review genai improvements (#20387)

* Add padding to when genai popup shows

* Move popup to timeline for mobile

* Improve UI

* Use genai title for notification

web/src/components/card/ReviewCard.tsx

@@ -6,7 +6,7 @@ import { getIconForLabel } from "@/utils/iconUtil";
 import { isDesktop, isIOS, isSafari } from "react-device-detect";
 import useSWR from "swr";
 import TimeAgo from "../dynamic/TimeAgo";
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import useImageLoaded from "@/hooks/use-image-loaded";
 import ImageLoadingIndicator from "../indicators/ImageLoadingIndicator";
 import { FaCompactDisc } from "react-icons/fa";
@@ -36,15 +36,16 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import { capitalizeFirstLetter } from "@/utils/stringUtil";
 import { buttonVariants } from "../ui/button";
 import { Trans, useTranslation } from "react-i18next";
+import { cn } from "@/lib/utils";
 
 type ReviewCardProps = {
   event: ReviewSegment;
-  currentTime: number;
+  activeReviewItem?: ReviewSegment;
   onClick?: () => void;
 };
 export default function ReviewCard({
   event,
-  currentTime,
+  activeReviewItem,
   onClick,
 }: ReviewCardProps) {
   const { t } = useTranslation(["components/dialog"]);
@@ -57,12 +58,6 @@ export default function ReviewCard({
       : t("time.formattedTimestampHourMinute.12hour", { ns: "common" }),
     config?.ui.timezone,
   );
-  const isSelected = useMemo(
-    () =>
-      event.start_time <= currentTime &&
-      (event.end_time ?? Date.now() / 1000) >= currentTime,
-    [event, currentTime],
-  );
 
   const [optionsOpen, setOptionsOpen] = useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
@@ -139,7 +134,12 @@ export default function ReviewCard({
       />
       <img
         ref={imgRef}
-        className={`size-full rounded-lg ${isSelected ? "outline outline-[3px] outline-offset-1 outline-selected" : ""} ${imgLoaded ? "visible" : "invisible"}`}
+        className={cn(
+          "size-full rounded-lg",
+          activeReviewItem?.id == event.id &&
+            "outline outline-[3px] outline-offset-1 outline-selected",
+          imgLoaded ? "visible" : "invisible",
+        )}
         src={`${baseUrl}${event.thumb_path.replace("/media/frigate/", "")}`}
         loading={isSafari ? "eager" : "lazy"}
         style={

web/src/components/overlay/chip/GenAISummaryChip.tsx

@@ -21,8 +21,9 @@ export function GenAISummaryChip({ review, onClick }: GenAISummaryChipProps) {
   return (
     <div
       className={cn(
-        "absolute left-1/2 top-8 z-30 flex max-w-[90vw] -translate-x-[50%] cursor-pointer select-none items-center gap-2 rounded-full bg-card p-2 text-sm transition-all duration-500",
+        "absolute left-1/2 top-8 z-30 flex max-w-[90vw] -translate-x-[50%] cursor-pointer select-none items-center gap-2 rounded-full p-2 text-sm transition-all duration-500",
         isVisible ? "translate-y-0 opacity-100" : "-translate-y-4 opacity-0",
+        isDesktop ? "bg-card" : "bg-secondary-foreground",
       )}
       onClick={onClick}
     >