Miscellaneous Fixes (0.17 beta) (#21474)

* disable modal on dropdown menu in explore

* add another example case for when classification overrides a sub label

* update ollama docs link

* Improve handling of automatic playback for recordings

* Improve ollama documentation

* Don't fall out when all recording segments exist

* clarify coral docs

* improve initial scroll to active item in detail stream

* i18n fixes

* remove console warning

* detail stream scrolling fixes for HA/iOS

* Improve usability of GenAI summary dialog and make clicking on the description directly open it

* Review card too

* Use empty card with dynamic text for review based on the user's config

---------

Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>

web/src/components/card/EmptyCard.tsx

@@ -2,15 +2,18 @@ import React from "react";
 import { Button } from "../ui/button";
 import Heading from "../ui/heading";
 import { Link } from "react-router-dom";
+import { cn } from "@/lib/utils";
 
 type EmptyCardProps = {
+  className?: string;
   icon: React.ReactNode;
   title: string;
-  description: string;
+  description?: string;
   buttonText?: string;
   link?: string;
 };
 export function EmptyCard({
+  className,
   icon,
   title,
   description,
@@ -18,10 +21,12 @@ export function EmptyCard({
   link,
 }: EmptyCardProps) {
   return (
-    <div className="flex flex-col items-center gap-2">
+    <div className={cn("flex flex-col items-center gap-2", className)}>
       {icon}
       <Heading as="h4">{title}</Heading>
-      <div className="mb-3 text-secondary-foreground">{description}</div>
+      {description && (
+        <div className="mb-3 text-secondary-foreground">{description}</div>
+      )}
       {buttonText?.length && (
         <Button size="sm" variant="select">
           <Link to={link ?? "#"}>{buttonText}</Link>

web/src/components/card/ReviewCard.tsx

@@ -39,6 +39,7 @@ import { Trans, useTranslation } from "react-i18next";
 import { cn } from "@/lib/utils";
 import { LuCircle } from "react-icons/lu";
 import { MdAutoAwesome } from "react-icons/md";
+import { GenAISummaryDialog } from "../overlay/chip/GenAISummaryChip";
 
 type ReviewCardProps = {
   event: ReviewSegment;
@@ -219,12 +220,14 @@ export default function ReviewCard({
         />
       </div>
       {event.data.metadata?.title && (
-        <div className="flex items-center gap-1.5 rounded bg-secondary/50">
-          <MdAutoAwesome className="size-3 shrink-0 text-primary" />
-          <span className="truncate text-xs text-primary">
-            {event.data.metadata.title}
-          </span>
-        </div>
+        <GenAISummaryDialog review={event}>
+          <div className="flex items-center gap-1.5 rounded bg-secondary/50 hover:underline">
+            <MdAutoAwesome className="size-3 shrink-0 text-primary" />
+            <span className="truncate text-xs text-primary">
+              {event.data.metadata.title}
+            </span>
+          </div>
+        </GenAISummaryDialog>
       )}
     </div>
   );

web/src/components/menu/SearchResultActions.tsx

@@ -195,7 +195,7 @@ export default function SearchResultActions({
         </ContextMenu>
       ) : (
         <>
-          <DropdownMenu>
+          <DropdownMenu modal={false}>
             <DropdownMenuTrigger asChild>
               <BlurredIconButton aria-label={t("itemMenu.more.aria")}>
                 <FiMoreVertical className="size-5" />

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

@@ -6,16 +6,15 @@ import {
   ThreatLevel,
   THREAT_LEVEL_LABELS,
 } from "@/types/review";
-import { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { isDesktop } from "react-device-detect";
 import { useTranslation } from "react-i18next";
 import { MdAutoAwesome } from "react-icons/md";
 
 type GenAISummaryChipProps = {
   review?: ReviewSegment;
-  onClick: () => void;
 };
-export function GenAISummaryChip({ review, onClick }: GenAISummaryChipProps) {
+export function GenAISummaryChip({ review }: GenAISummaryChipProps) {
   const [isVisible, setIsVisible] = useState(false);
 
   useEffect(() => {
@@ -29,7 +28,6 @@ export function GenAISummaryChip({ review, onClick }: GenAISummaryChipProps) {
         isVisible ? "translate-y-0 opacity-100" : "-translate-y-4 opacity-0",
         isDesktop ? "bg-card" : "bg-secondary-foreground",
       )}
-      onClick={onClick}
     >
       <MdAutoAwesome className="shrink-0" />
       <span className="truncate">{review?.data.metadata?.title}</span>
@@ -40,10 +38,12 @@ export function GenAISummaryChip({ review, onClick }: GenAISummaryChipProps) {
 type GenAISummaryDialogProps = {
   review?: ReviewSegment;
   onOpen?: (open: boolean) => void;
+  children: React.ReactNode;
 };
 export function GenAISummaryDialog({
   review,
   onOpen,
+  children,
 }: GenAISummaryDialogProps) {
   const { t } = useTranslation(["views/explore"]);
 
@@ -104,7 +104,7 @@ export function GenAISummaryDialog({
   return (
     <Overlay open={open} onOpenChange={setOpen}>
       <Trigger asChild>
-        <GenAISummaryChip review={review} onClick={() => setOpen(true)} />
+        <div>{children}</div>
       </Trigger>
       <Content
         className={cn(
@@ -115,6 +115,10 @@ export function GenAISummaryDialog({
         )}
       >
         {t("aiAnalysis.title")}
+        <div className="text-sm text-primary/40">
+          {t("details.title.label")}
+        </div>
+        <div className="text-sm">{aiAnalysis.title}</div>
         <div className="text-sm text-primary/40">
           {t("details.description.label")}
         </div>

web/src/components/timeline/DetailStream.tsx

@@ -25,10 +25,13 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import { Link } from "react-router-dom";
 import { Switch } from "@/components/ui/switch";
 import { useUserPersistence } from "@/hooks/use-user-persistence";
-import { isDesktop } from "react-device-detect";
+import { isDesktop, isIOS, isMobile } from "react-device-detect";
 import { resolveZoneName } from "@/hooks/use-zone-friendly-name";
 import { PiSlidersHorizontalBold } from "react-icons/pi";
 import { MdAutoAwesome } from "react-icons/md";
+import { isPWA } from "@/utils/isPWA";
+import { isInIframe } from "@/utils/isIFrame";
+import { GenAISummaryDialog } from "../overlay/chip/GenAISummaryChip";
 
 type DetailStreamProps = {
   reviewItems?: ReviewSegment[];
@@ -100,7 +103,25 @@ export default function DetailStream({
     }
   }, [reviewItems, activeReviewId, effectiveTime]);
 
-  // Auto-scroll to current time
+  // Initial scroll to active review (runs immediately when user selects, not during playback)
+  useEffect(() => {
+    if (!scrollRef.current || !activeReviewId || userInteracting || isPlaying)
+      return;
+
+    const element = scrollRef.current.querySelector(
+      `[data-review-id="${activeReviewId}"]`,
+    ) as HTMLElement;
+
+    if (element) {
+      setProgrammaticScroll();
+      scrollIntoView(element, {
+        scrollMode: "if-needed",
+        behavior: isMobile && isIOS && !isPWA && isInIframe ? "auto" : "smooth",
+      });
+    }
+  }, [activeReviewId, setProgrammaticScroll, userInteracting, isPlaying]);
+
+  // Auto-scroll to current time during playback
   useEffect(() => {
     if (!scrollRef.current || userInteracting || !isPlaying) return;
     // Prefer the review whose range contains the effectiveTime. If none
@@ -145,7 +166,8 @@ export default function DetailStream({
           setProgrammaticScroll();
           scrollIntoView(element, {
             scrollMode: "if-needed",
-            behavior: "smooth",
+            behavior:
+              isMobile && isIOS && !isPWA && isInIframe ? "auto" : "smooth",
           });
         }
       }
@@ -417,7 +439,18 @@ function ReviewGroup({
                       {review.data.metadata.title}
                     </TooltipContent>
                   </Tooltip>
-                  <span className="truncate">{review.data.metadata.title}</span>
+                  <GenAISummaryDialog
+                    review={review}
+                    onOpen={(open) => {
+                      if (open) {
+                        onSeek(review.start_time, false);
+                      }
+                    }}
+                  >
+                    <span className="truncate hover:underline">
+                      {review.data.metadata.title}
+                    </span>
+                  </GenAISummaryDialog>
                 </div>
               )}
               <div className="flex flex-row items-center gap-1.5">
@@ -782,21 +815,27 @@ function LifecycleItem({
               <div className="flex flex-col gap-1">
                 <div className="flex items-start gap-1">
                   <span className="text-muted-foreground">
-                    {t("trackingDetails.lifecycleItemDesc.header.score")}
+                    {t("trackingDetails.lifecycleItemDesc.header.score", {
+                      ns: "views/explore",
+                    })}
                   </span>
                   <span className="font-medium text-foreground">{score}</span>
                 </div>
 
                 <div className="flex items-start gap-1">
                   <span className="text-muted-foreground">
-                    {t("trackingDetails.lifecycleItemDesc.header.ratio")}
+                    {t("trackingDetails.lifecycleItemDesc.header.ratio", {
+                      ns: "views/explore",
+                    })}
                   </span>
                   <span className="font-medium text-foreground">{ratio}</span>
                 </div>
 
                 <div className="flex items-start gap-1">
                   <span className="text-muted-foreground">
-                    {t("trackingDetails.lifecycleItemDesc.header.area")}{" "}
+                    {t("trackingDetails.lifecycleItemDesc.header.area", {
+                      ns: "views/explore",
+                    })}{" "}
                     {attributeAreaPx !== undefined &&
                       attributeAreaPct !== undefined && (
                         <span className="text-muted-foreground">
@@ -806,7 +845,7 @@ function LifecycleItem({
                   </span>
                   {areaPx !== undefined && areaPct !== undefined ? (
                     <span className="font-medium text-foreground">
-                      {areaPx} {t("pixels", { ns: "common" })}{" "}
+                      {areaPx} {t("information.pixels", { ns: "common" })}{" "}
                       <span className="text-secondary-foreground">·</span>{" "}
                       {areaPct}%
                     </span>
@@ -819,7 +858,9 @@ function LifecycleItem({
                   attributeAreaPct !== undefined && (
                     <div className="flex items-start gap-1">
                       <span className="text-muted-foreground">
-                        {t("trackingDetails.lifecycleItemDesc.header.area")}{" "}
+                        {t("trackingDetails.lifecycleItemDesc.header.area", {
+                          ns: "views/explore",
+                        })}{" "}
                         {attributeAreaPx !== undefined &&
                           attributeAreaPct !== undefined && (
                             <span className="text-muted-foreground">
@@ -828,7 +869,8 @@ function LifecycleItem({
                           )}
                       </span>
                       <span className="font-medium text-foreground">
-                        {attributeAreaPx} {t("pixels", { ns: "common" })}{" "}
+                        {attributeAreaPx}{" "}
+                        {t("information.pixels", { ns: "common" })}{" "}
                         <span className="text-secondary-foreground">·</span>{" "}
                         {attributeAreaPct}%
                       </span>

web/src/components/timeline/MotionReviewTimeline.tsx

@@ -111,7 +111,7 @@ export function MotionReviewTimeline({
 
   const getRecordingAvailability = useCallback(
     (time: number): boolean | undefined => {
-      if (!noRecordingRanges?.length) return undefined;
+      if (noRecordingRanges == undefined) return undefined;
 
       return !noRecordingRanges.some(
         (range) => time >= range.start_time && time < range.end_time,