Tracked Object Details pane tweaks (#20849)

* use grid view on desktop

* refactor description box to remove buttons and add row of action icon buttons

* add tooltips

* fix trigger creation

when using the search effect to create a trigger, the prefilled object will not exist in the config yet

* i18n

* set max width on thumbnail

web/public/locales/en/common.json

@@ -96,7 +96,9 @@
     "back": "Go back",
     "hide": "Hide {{item}}",
     "show": "Show {{item}}",
-    "ID": "ID"
+    "ID": "ID",
+    "none": "None",
+    "all": "All"
   },
   "list": {
     "two": "{{0}} and {{1}}",

web/src/components/overlay/CreateTriggerDialog.tsx

@@ -159,7 +159,7 @@ export default function CreateTriggerDialog({
   });
 
   const onSubmit = async (values: z.infer<typeof formSchema>) => {
-    if (trigger) {
+    if (trigger && existingTriggerNames.includes(trigger.name)) {
       onEdit({ ...values });
     } else {
       onCreate(

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

@@ -34,9 +34,11 @@ import ActivityIndicator from "@/components/indicators/activity-indicator";
 import {
   FaArrowRight,
   FaCheckCircle,
-  FaChevronDown,
   FaChevronLeft,
   FaChevronRight,
+  FaMicrophone,
+  FaCheck,
+  FaTimes,
 } from "react-icons/fa";
 import { TrackingDetails } from "./TrackingDetails";
 import { AnnotationSettingsPane } from "./AnnotationSettingsPane";
@@ -89,6 +91,7 @@ import { CameraNameLabel } from "@/components/camera/FriendlyNameLabel";
 import { DialogPortal } from "@radix-ui/react-dialog";
 import { useDetailStream } from "@/context/detail-stream-context";
 import { PiSlidersHorizontalBold } from "react-icons/pi";
+import { HiSparkles } from "react-icons/hi";
 
 const SEARCH_TABS = ["snapshot", "tracking_details"] as const;
 export type SearchTab = (typeof SEARCH_TABS)[number];
@@ -348,7 +351,12 @@ function DialogContentComponent({
       }
     />
   ) : (
-    <div className={cn(!isDesktop ? "mb-4 w-full md:max-w-lg" : "size-full")}>
+    <div
+      className={cn(
+        "max-w-lg",
+        !isDesktop ? "mb-4 w-full" : "mx-auto size-full",
+      )}
+    >
       <img
         className="w-full select-none rounded-lg object-contain transition-opacity"
         style={
@@ -367,16 +375,11 @@ function DialogContentComponent({
 
   if (isDesktop) {
     return (
-      <div className="flex h-full gap-4 overflow-hidden">
+      <div className="grid h-full w-full grid-cols-[60%_40%] gap-4">
-        <div
+        <div className="scrollbar-container min-w-0 overflow-y-auto overflow-x-hidden">
-          className={cn(
-            "scrollbar-container flex-[3] overflow-y-hidden",
-            !search.has_snapshot && "flex-[2]",
-          )}
-        >
           {snapshotElement}
         </div>
-        <div className="flex flex-col gap-4 overflow-hidden md:basis-2/5">
+        <div className="flex min-w-0 flex-col gap-4 pr-2">
           <TabsWithActions
             search={search}
             searchTabs={searchTabs}
@@ -389,7 +392,7 @@ function DialogContentComponent({
             setIsPopoverOpen={setIsPopoverOpen}
             dialogContainer={dialogContainer}
           />
-          <div className="scrollbar-container flex-1 overflow-y-auto">
+          <div className="scrollbar-container min-w-0 flex-1 overflow-y-auto overflow-x-hidden px-4">
             <ObjectDetailsTab
               search={search}
               config={config}
@@ -689,6 +692,8 @@ function ObjectDetailsTab({
   const [desc, setDesc] = useState(search?.data.description);
   const [isSubLabelDialogOpen, setIsSubLabelDialogOpen] = useState(false);
   const [isLPRDialogOpen, setIsLPRDialogOpen] = useState(false);
+  const [isEditingDesc, setIsEditingDesc] = useState(false);
+  const originalDescRef = useRef<string | null>(null);
 
   const handleDescriptionFocus = useCallback(() => {
     setInputFocused(true);
@@ -1119,6 +1124,23 @@ function ObjectDetailsTab({
   );
 
   const popoverContainerRef = useRef<HTMLDivElement | null>(null);
+  const canRegenerate = !!(
+    config?.cameras[search.camera].objects.genai.enabled && search.end_time
+  );
+  const showGenAIPlaceholder = !!(
+    config?.cameras[search.camera].objects.genai.enabled &&
+    !search.end_time &&
+    (config.cameras[search.camera].objects.genai.required_zones.length === 0 ||
+      search.zones.some((zone) =>
+        config.cameras[search.camera].objects.genai.required_zones.includes(
+          zone,
+        ),
+      )) &&
+    (config.cameras[search.camera].objects.genai.objects.length === 0 ||
+      config.cameras[search.camera].objects.genai.objects.includes(
+        search.label,
+      ))
+  );
   return (
     <div ref={popoverContainerRef} className="flex flex-col gap-5">
       <div className="flex w-full flex-row">
@@ -1379,75 +1401,68 @@ function ObjectDetailsTab({
           </div>
         )}
       <div className="flex flex-col gap-1.5">
-        {config?.cameras[search.camera].objects.genai.enabled &&
+        <div className="flex items-center justify-start gap-3">
-        !search.end_time &&
-        (config.cameras[search.camera].objects.genai.required_zones.length ===
-          0 ||
-          search.zones.some((zone) =>
-            config.cameras[search.camera].objects.genai.required_zones.includes(
-              zone,
-            ),
-          )) &&
-        (config.cameras[search.camera].objects.genai.objects.length === 0 ||
-          config.cameras[search.camera].objects.genai.objects.includes(
-            search.label,
-          )) ? (
-          <>
           <div className="text-sm text-primary/40">
             {t("details.description.label")}
           </div>
-            <div className="flex h-64 flex-col items-center justify-center gap-3 border p-4 text-sm text-primary/40">
+          <div className="flex items-center gap-3">
-              <div className="flex">
+            <Tooltip>
-                <ActivityIndicator />
+              <TooltipTrigger asChild>
-              </div>
+                <button
-              <div className="flex">{t("details.description.aiTips")}</div>
+                  aria-label={t("button.edit", { ns: "common" })}
-            </div>
+                  className="text-primary/40 hover:text-primary/80"
-          </>
+                  onClick={() => {
-        ) : (
+                    originalDescRef.current = desc ?? "";
-          <>
+                    setIsEditingDesc(true);
-            <div className="text-sm text-primary/40"></div>
+                  }}
-            <Textarea
+                >
-              className="text-md h-64"
+                  <FaPencilAlt className="size-4" />
-              placeholder={t("details.description.placeholder")}
+                </button>
-              value={desc}
+              </TooltipTrigger>
-              onChange={(e) => setDesc(e.target.value)}
+              <TooltipContent>
-              onFocus={handleDescriptionFocus}
+                {t("button.edit", { ns: "common" })}
-              onBlur={handleDescriptionBlur}
+              </TooltipContent>
-            />
+            </Tooltip>
-          </>
-        )}
 
-        <div className="flex w-full flex-row justify-end gap-2">
             {config?.cameras[search?.camera].audio_transcription.enabled &&
               search?.label == "speech" &&
               search?.end_time && (
-              <Button onClick={onTranscribe}>
+                <Tooltip>
-                <div className="flex gap-1">
+                  <TooltipTrigger asChild>
+                    <button
+                      aria-label={t("itemMenu.audioTranscription.label")}
+                      className="text-primary/40 hover:text-primary/80"
+                      onClick={onTranscribe}
+                    >
+                      <FaMicrophone className="size-4" />
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent>
                     {t("itemMenu.audioTranscription.label")}
-                </div>
+                  </TooltipContent>
-              </Button>
+                </Tooltip>
               )}
-          {config?.cameras[search.camera].objects.genai.enabled &&
+
-            search.end_time && (
+            {canRegenerate && (
-              <div className="flex items-start">
+              <div className="relative">
-                <Button
-                  className="rounded-r-none border-r-0"
-                  aria-label={t("details.button.regenerate.label")}
-                  onClick={() => regenerateDescription("thumbnails")}
-                >
-                  {t("details.button.regenerate.title")}
-                </Button>
-                {search.has_snapshot && (
                 <DropdownMenu>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
                       <DropdownMenuTrigger asChild>
-                      <Button
+                        <button
-                        className="rounded-l-none border-l-0 px-2"
+                          aria-label={t("details.button.regenerate.label")}
-                        aria-label={t("details.expandRegenerationMenu")}
+                          className="text-primary/40 hover:text-primary/80"
                         >
-                        <FaChevronDown className="size-3" />
+                          <HiSparkles className="size-4" />
-                      </Button>
+                        </button>
                       </DropdownMenuTrigger>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      {t("details.button.regenerate.title")}
+                    </TooltipContent>
+                  </Tooltip>
                   <DropdownMenuContent>
+                    {search.has_snapshot && (
                       <DropdownMenuItem
                         className="cursor-pointer"
                         aria-label={t("details.regenerateFromSnapshot")}
@@ -1455,6 +1470,7 @@ function ObjectDetailsTab({
                       >
                         {t("details.regenerateFromSnapshot")}
                       </DropdownMenuItem>
+                    )}
                     <DropdownMenuItem
                       className="cursor-pointer"
                       aria-label={t("details.regenerateFromThumbnails")}
@@ -1464,19 +1480,73 @@ function ObjectDetailsTab({
                     </DropdownMenuItem>
                   </DropdownMenuContent>
                 </DropdownMenu>
-                )}
               </div>
             )}
-          {((config?.cameras[search.camera].objects.genai.enabled &&
+          </div>
-            search.end_time) ||
+        </div>
-            !config?.cameras[search.camera].objects.genai.enabled) && (
+
-            <Button
+        {!isEditingDesc ? (
-              variant="select"
+          showGenAIPlaceholder ? (
+            <div className="flex h-32 flex-col items-center justify-center gap-3 border p-4 text-sm text-primary/40">
+              <div className="flex">
+                <ActivityIndicator />
+              </div>
+              <div className="flex">{t("details.description.aiTips")}</div>
+            </div>
+          ) : (
+            <div className="overflow-auto text-sm text-primary">
+              {desc || t("label.none", { ns: "common" })}
+            </div>
+          )
+        ) : (
+          <div className="flex flex-col gap-2">
+            <Textarea
+              className="text-md h-32"
+              placeholder={t("details.description.placeholder")}
+              value={desc}
+              onChange={(e) => setDesc(e.target.value)}
+              onFocus={handleDescriptionFocus}
+              onBlur={handleDescriptionBlur}
+              autoFocus
+            />
+            <div className="flex flex-row justify-end gap-4">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
                     aria-label={t("button.save", { ns: "common" })}
-              onClick={updateDescription}
+                    className="text-primary/40 hover:text-primary/80"
+                    onClick={() => {
+                      setIsEditingDesc(false);
+                      updateDescription();
+                    }}
                   >
+                    <FaCheck className="size-4" />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent>
                   {t("button.save", { ns: "common" })}
-            </Button>
+                </TooltipContent>
+              </Tooltip>
+
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    aria-label={t("button.cancel", { ns: "common" })}
+                    className="text-primary/40 hover:text-primary"
+                    onClick={() => {
+                      setIsEditingDesc(false);
+                      setDesc(originalDescRef.current ?? "");
+                    }}
+                  >
+                    <FaTimes className="size-4" />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  {t("button.cancel", { ns: "common" })}
+                </TooltipContent>
+              </Tooltip>
+            </div>
+          </div>
         )}
 
         <TextEntryDialog
@@ -1511,7 +1581,6 @@ function ObjectDetailsTab({
         />
       </div>
     </div>
-    </div>
   );
 }