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={cn(
-            "scrollbar-container flex-[3] overflow-y-hidden",
-            !search.has_snapshot && "flex-[2]",
-          )}
-        >
+      <div className="grid h-full w-full grid-cols-[60%_40%] gap-4">
+        <div className="scrollbar-container min-w-0 overflow-y-auto overflow-x-hidden">
           {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 &&
-        !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">
-                <ActivityIndicator />
-              </div>
-              <div className="flex">{t("details.description.aiTips")}</div>
-            </div>
-          </>
-        ) : (
-          <>
-            <div className="text-sm text-primary/40"></div>
-            <Textarea
-              className="text-md h-64"
-              placeholder={t("details.description.placeholder")}
-              value={desc}
-              onChange={(e) => setDesc(e.target.value)}
-              onFocus={handleDescriptionFocus}
-              onBlur={handleDescriptionBlur}
-            />
-          </>
-        )}
-
-        <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}>
-                <div className="flex gap-1">
-                  {t("itemMenu.audioTranscription.label")}
-                </div>
-              </Button>
-            )}
-          {config?.cameras[search.camera].objects.genai.enabled &&
-            search.end_time && (
-              <div className="flex items-start">
-                <Button
-                  className="rounded-r-none border-r-0"
-                  aria-label={t("details.button.regenerate.label")}
-                  onClick={() => regenerateDescription("thumbnails")}
+        <div className="flex items-center justify-start gap-3">
+          <div className="text-sm text-primary/40">
+            {t("details.description.label")}
+          </div>
+          <div className="flex items-center gap-3">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  aria-label={t("button.edit", { ns: "common" })}
+                  className="text-primary/40 hover:text-primary/80"
+                  onClick={() => {
+                    originalDescRef.current = desc ?? "";
+                    setIsEditingDesc(true);
+                  }}
                 >
-                  {t("details.button.regenerate.title")}
-                </Button>
-                {search.has_snapshot && (
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <Button
-                        className="rounded-l-none border-l-0 px-2"
-                        aria-label={t("details.expandRegenerationMenu")}
-                      >
-                        <FaChevronDown className="size-3" />
-                      </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent>
+                  <FaPencilAlt className="size-4" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>
+                {t("button.edit", { ns: "common" })}
+              </TooltipContent>
+            </Tooltip>
+
+            {config?.cameras[search?.camera].audio_transcription.enabled &&
+              search?.label == "speech" &&
+              search?.end_time && (
+                <Tooltip>
+                  <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")}
+                  </TooltipContent>
+                </Tooltip>
+              )}
+
+            {canRegenerate && (
+              <div className="relative">
+                <DropdownMenu>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <DropdownMenuTrigger asChild>
+                        <button
+                          aria-label={t("details.button.regenerate.label")}
+                          className="text-primary/40 hover:text-primary/80"
+                        >
+                          <HiSparkles className="size-4" />
+                        </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,61 +1470,115 @@ function ObjectDetailsTab({
                       >
                         {t("details.regenerateFromSnapshot")}
                       </DropdownMenuItem>
-                      <DropdownMenuItem
-                        className="cursor-pointer"
-                        aria-label={t("details.regenerateFromThumbnails")}
-                        onClick={() => regenerateDescription("thumbnails")}
-                      >
-                        {t("details.regenerateFromThumbnails")}
-                      </DropdownMenuItem>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                )}
+                    )}
+                    <DropdownMenuItem
+                      className="cursor-pointer"
+                      aria-label={t("details.regenerateFromThumbnails")}
+                      onClick={() => regenerateDescription("thumbnails")}
+                    >
+                      {t("details.regenerateFromThumbnails")}
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
               </div>
             )}
-          {((config?.cameras[search.camera].objects.genai.enabled &&
-            search.end_time) ||
-            !config?.cameras[search.camera].objects.genai.enabled) && (
-            <Button
-              variant="select"
-              aria-label={t("button.save", { ns: "common" })}
-              onClick={updateDescription}
-            >
-              {t("button.save", { ns: "common" })}
-            </Button>
-          )}
-
-          <TextEntryDialog
-            open={isSubLabelDialogOpen}
-            setOpen={setIsSubLabelDialogOpen}
-            title={t("details.editSubLabel.title")}
-            description={
-              search.label
-                ? t("details.editSubLabel.desc", {
-                    label: search.label,
-                  })
-                : t("details.editSubLabel.descNoLabel")
-            }
-            onSave={handleSubLabelSave}
-            defaultValue={search?.sub_label || ""}
-            allowEmpty={true}
-          />
-          <TextEntryDialog
-            open={isLPRDialogOpen}
-            setOpen={setIsLPRDialogOpen}
-            title={t("details.editLPR.title")}
-            description={
-              search.label
-                ? t("details.editLPR.desc", {
-                    label: search.label,
-                  })
-                : t("details.editLPR.descNoLabel")
-            }
-            onSave={handleLPRSave}
-            defaultValue={search?.data.recognized_license_plate || ""}
-            allowEmpty={true}
-          />
+          </div>
         </div>
+
+        {!isEditingDesc ? (
+          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" })}
+                    className="text-primary/40 hover:text-primary/80"
+                    onClick={() => {
+                      setIsEditingDesc(false);
+                      updateDescription();
+                    }}
+                  >
+                    <FaCheck className="size-4" />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  {t("button.save", { ns: "common" })}
+                </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
+          open={isSubLabelDialogOpen}
+          setOpen={setIsSubLabelDialogOpen}
+          title={t("details.editSubLabel.title")}
+          description={
+            search.label
+              ? t("details.editSubLabel.desc", {
+                  label: search.label,
+                })
+              : t("details.editSubLabel.descNoLabel")
+          }
+          onSave={handleSubLabelSave}
+          defaultValue={search?.sub_label || ""}
+          allowEmpty={true}
+        />
+        <TextEntryDialog
+          open={isLPRDialogOpen}
+          setOpen={setIsLPRDialogOpen}
+          title={t("details.editLPR.title")}
+          description={
+            search.label
+              ? t("details.editLPR.desc", {
+                  label: search.label,
+                })
+              : t("details.editLPR.descNoLabel")
+          }
+          onSave={handleLPRSave}
+          defaultValue={search?.data.recognized_license_plate || ""}
+          allowEmpty={true}
+        />
       </div>
     </div>
   );