Improve Details Settings (#20718)

* detail stream settings

* fix mobile landscape

* mobile landscape

* tweak

* tweaks

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

@@ -1,11 +1,15 @@
 import { useCallback, useState } from "react";
 import { Slider } from "@/components/ui/slider";
 import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover";
 import { useDetailStream } from "@/context/detail-stream-context";
 import axios from "axios";
 import { useSWRConfig } from "swr";
 import { toast } from "sonner";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
+import { LuInfo } from "react-icons/lu";
+import { cn } from "@/lib/utils";
+import { isMobile } from "react-device-detect";
 
 type Props = {
   className?: string;
@@ -65,30 +69,67 @@ export default function AnnotationOffsetSlider({ className }: Props) {
 
   return (
     <div
-      className={`absolute bottom-0 left-0 right-0 z-30 flex items-center gap-3 bg-background p-3 ${className ?? ""}`}
-      style={{ pointerEvents: "auto" }}
+      className={cn(
+        "flex flex-col gap-0.5",
+        isMobile && "landscape:gap-3",
+        className,
+      )}
     >
-      <div className="w-56 text-sm">
-        Annotation offset (ms): {annotationOffset}
+      <div
+        className={cn(
+          "flex items-center gap-3",
+          isMobile &&
+            "landscape:flex-col landscape:items-start landscape:gap-4",
+        )}
+      >
+        <div className="flex max-w-28 flex-row items-center gap-2 text-sm md:max-w-48">
+          <span className="max-w-24 md:max-w-44">
+            {t("trackingDetails.annotationSettings.offset.label")}:
+          </span>
+          <span className="text-primary-variant">{annotationOffset}</span>
+        </div>
+        <div className="w-full flex-1 landscape:flex">
+          <Slider
+            value={[annotationOffset]}
+            min={-1500}
+            max={1500}
+            step={50}
+            onValueChange={handleChange}
+          />
+        </div>
+        <div className="flex items-center gap-2">
+          <Button size="sm" variant="ghost" onClick={reset}>
+            {t("button.reset", { ns: "common" })}
+          </Button>
+          <Button size="sm" onClick={save} disabled={isSaving}>
+            {isSaving
+              ? t("button.saving", { ns: "common" })
+              : t("button.save", { ns: "common" })}
+          </Button>
+        </div>
       </div>
-      <div className="flex-1">
-        <Slider
-          value={[annotationOffset]}
-          min={-1500}
-          max={1500}
-          step={50}
-          onValueChange={handleChange}
-        />
-      </div>
-      <div className="flex items-center gap-2">
-        <Button size="sm" variant="ghost" onClick={reset}>
-          Reset
-        </Button>
-        <Button size="sm" onClick={save} disabled={isSaving}>
-          {isSaving
-            ? t("button.saving", { ns: "common" })
-            : t("button.save", { ns: "common" })}
-        </Button>
+      <div
+        className={cn(
+          "flex items-center gap-2 text-xs text-muted-foreground",
+          isMobile && "landscape:flex-col landscape:items-start",
+        )}
+      >
+        <Trans ns="views/explore">
+          trackingDetails.annotationSettings.offset.millisecondsToOffset
+        </Trans>
+        <Popover>
+          <PopoverTrigger asChild>
+            <button
+              className="focus:outline-none"
+              aria-label={t("trackingDetails.annotationSettings.offset.desc")}
+            >
+              <LuInfo className="size-4" />
+            </button>
+          </PopoverTrigger>
+          <PopoverContent className="w-80 text-sm">
+            {t("trackingDetails.annotationSettings.offset.desc")}
+          </PopoverContent>
+        </Popover>
       </div>
     </div>
   );

web/src/components/timeline/DetailStream.tsx

@@ -16,13 +16,21 @@ import ActivityIndicator from "../indicators/activity-indicator";
 import { Event } from "@/types/event";
 import { getIconForLabel } from "@/utils/iconUtil";
 import { ReviewSegment } from "@/types/review";
-import { LuChevronDown, LuCircle, LuChevronRight } from "react-icons/lu";
+import {
+  LuChevronDown,
+  LuCircle,
+  LuChevronRight,
+  LuSettings,
+} from "react-icons/lu";
 import { getTranslatedLabel } from "@/utils/i18n";
 import EventMenu from "@/components/timeline/EventMenu";
 import { FrigatePlusDialog } from "@/components/overlay/dialog/FrigatePlusDialog";
 import { cn } from "@/lib/utils";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import { Link } from "react-router-dom";
+import { Switch } from "@/components/ui/switch";
+import { usePersistence } from "@/hooks/use-persistence";
+import { isDesktop } from "react-device-detect";
 
 type DetailStreamProps = {
   reviewItems?: ReviewSegment[];
@@ -51,6 +59,11 @@ export default function DetailStream({
 
   const effectiveTime = currentTime + annotationOffset / 1000;
   const [upload, setUpload] = useState<Event | undefined>(undefined);
+  const [controlsExpanded, setControlsExpanded] = useState(false);
+  const [alwaysExpandActive, setAlwaysExpandActive] = usePersistence(
+    "detailStreamActiveExpanded",
+    true,
+  );
 
   const onSeekCheckPlaying = (timestamp: number) => {
     onSeek(timestamp, isPlaying);
@@ -168,7 +181,7 @@ export default function DetailStream({
   }
 
   return (
-    <div className="relative">
+    <>
       <FrigatePlusDialog
         upload={upload}
         onClose={() => setUpload(undefined)}
@@ -179,38 +192,80 @@ export default function DetailStream({
         }}
       />
 
-      <div
-        ref={scrollRef}
-        className="scrollbar-container h-[calc(100vh-70px)] overflow-y-auto"
-      >
-        <div className="space-y-4 py-2">
-          {reviewItems?.length === 0 ? (
-            <div className="py-8 text-center text-muted-foreground">
-              {t("detail.noDataFound")}
+      <div className="relative flex h-full flex-col">
+        <div
+          ref={scrollRef}
+          className="scrollbar-container flex-1 overflow-y-auto pb-14"
+        >
+          <div className="space-y-4 py-2">
+            {reviewItems?.length === 0 ? (
+              <div className="py-8 text-center text-muted-foreground">
+                {t("detail.noDataFound")}
+              </div>
+            ) : (
+              reviewItems?.map((review: ReviewSegment) => {
+                const id = `review-${review.id ?? review.start_time ?? Math.floor(review.start_time ?? 0)}`;
+                return (
+                  <ReviewGroup
+                    key={id}
+                    id={id}
+                    review={review}
+                    config={config}
+                    onSeek={onSeekCheckPlaying}
+                    effectiveTime={effectiveTime}
+                    isActive={activeReviewId == id}
+                    onActivate={() => setActiveReviewId(id)}
+                    onOpenUpload={(e) => setUpload(e)}
+                    alwaysExpandActive={alwaysExpandActive}
+                  />
+                );
+              })
+            )}
+          </div>
+        </div>
+
+        <div
+          className={cn(
+            "absolute bottom-0 left-0 right-0 z-30 rounded-t-md border border-secondary-highlight bg-background_alt shadow-md",
+            isDesktop && "border-b-0",
+          )}
+        >
+          <button
+            onClick={() => setControlsExpanded(!controlsExpanded)}
+            className="flex w-full items-center justify-between p-3"
+          >
+            <div className="flex items-center gap-2 text-sm font-medium">
+              <LuSettings className="size-4" />
+              <span>{t("detail.settings")}</span>
+            </div>
+            {controlsExpanded ? (
+              <LuChevronDown className="size-4 text-primary-variant" />
+            ) : (
+              <LuChevronRight className="size-4 text-primary-variant" />
+            )}
+          </button>
+          {controlsExpanded && (
+            <div className="space-y-3 px-3 pb-3">
+              <AnnotationOffsetSlider />
+              <div className="flex flex-col gap-1">
+                <div className="flex items-center justify-between">
+                  <label className="text-sm font-medium">
+                    {t("detail.alwaysExpandActive.title")}
+                  </label>
+                  <Switch
+                    checked={alwaysExpandActive}
+                    onCheckedChange={setAlwaysExpandActive}
+                  />
+                </div>
+                <div className="text-xs text-muted-foreground">
+                  {t("detail.alwaysExpandActive.desc")}
+                </div>
+              </div>
             </div>
-          ) : (
-            reviewItems?.map((review: ReviewSegment) => {
-              const id = `review-${review.id ?? review.start_time ?? Math.floor(review.start_time ?? 0)}`;
-              return (
-                <ReviewGroup
-                  key={id}
-                  id={id}
-                  review={review}
-                  config={config}
-                  onSeek={onSeekCheckPlaying}
-                  effectiveTime={effectiveTime}
-                  isActive={activeReviewId == id}
-                  onActivate={() => setActiveReviewId(id)}
-                  onOpenUpload={(e) => setUpload(e)}
-                />
-              );
-            })
           )}
         </div>
       </div>
-
-      <AnnotationOffsetSlider />
-    </div>
+    </>
   );
 }
 
@@ -223,6 +278,7 @@ type ReviewGroupProps = {
   onActivate?: () => void;
   onOpenUpload?: (e: Event) => void;
   effectiveTime?: number;
+  alwaysExpandActive?: boolean;
 };
 
 function ReviewGroup({
@@ -234,11 +290,19 @@ function ReviewGroup({
   onActivate,
   onOpenUpload,
   effectiveTime,
+  alwaysExpandActive = false,
 }: ReviewGroupProps) {
   const { t } = useTranslation("views/events");
   const [open, setOpen] = useState(false);
   const start = review.start_time ?? 0;
 
+  // Auto-expand when this review becomes active and alwaysExpandActive is enabled
+  useEffect(() => {
+    if (isActive && alwaysExpandActive) {
+      setOpen(true);
+    }
+  }, [isActive, alwaysExpandActive]);
+
   const displayTime = formatUnixTimestampToDateTime(start, {
     timezone: config.ui.timezone,
     date_format: