Merge 9fe9345263 into 1f1d546326

web/src/components/menu/SearchResultActions.tsx

@@ -99,7 +99,7 @@ export default function SearchResultActions({
           </a>
         </MenuItem>
       )}
-      {searchResult.has_snapshot && (
+      {searchResult.has_snapshot && searchResult?.data?.type === "object" && (
         <MenuItem aria-label={t("itemMenu.downloadSnapshot.aria")}>
           <a
             className="flex items-center"
@@ -111,6 +111,7 @@ export default function SearchResultActions({
         </MenuItem>
       )}
       {searchResult.has_snapshot &&
+        searchResult?.data?.type === "object" &&
         config?.cameras[searchResult.camera].snapshots.clean_copy && (
           <MenuItem aria-label={t("itemMenu.downloadCleanSnapshot.aria")}>
             <a

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

@@ -81,7 +81,7 @@ export default function DetailActionsMenu({
       </DropdownMenuTrigger>
       <DropdownMenuPortal>
         <DropdownMenuContent align="end">
-          {search.has_snapshot && (
+          {search.has_snapshot && search?.data?.type === "object" && (
             <DropdownMenuItem>
               <a
                 className="w-full"
@@ -95,7 +95,8 @@ export default function DetailActionsMenu({
             </DropdownMenuItem>
           )}
           {search.has_snapshot &&
-            config?.cameras[search.camera].snapshots.clean_copy && (
+            config?.cameras[search.camera].snapshots.clean_copy &&
+            search?.data?.type === "object" && (
               <DropdownMenuItem>
                 <a
                   className="w-full"

web/src/components/settings/PolygonCanvas.tsx

@@ -258,7 +258,7 @@ export function PolygonCanvas({
     const updatedPolygons = [...polygons];
     const activePolygon = updatedPolygons[activePolygonIndex];
 
-    if (containerRef.current && !activePolygon.isFinished) {
+    if (containerRef.current && activePolygon && !activePolygon.isFinished) {
       containerRef.current.style.cursor = "crosshair";
     }
   };

web/src/components/settings/PolygonItem.tsx

@@ -329,7 +329,7 @@ export default function PolygonItem({
 
       <div
         key={index}
-        className="transition-background my-1.5 flex flex-row items-center justify-between rounded-lg p-1 duration-100"
+        className="transition-background relative my-1.5 flex flex-row items-center justify-between rounded-lg p-1 duration-100"
         data-index={index}
         onMouseEnter={() => setHoveredPolygonIndex(index)}
         onMouseLeave={() => setHoveredPolygonIndex(null)}
@@ -341,7 +341,7 @@ export default function PolygonItem({
         }}
       >
         <div
-          className={`flex items-center ${
+          className={`flex min-w-0 items-center ${
             hoveredPolygonIndex === index
               ? "text-primary"
               : "text-primary-variant"
@@ -359,7 +359,7 @@ export default function PolygonItem({
                     type="button"
                     onClick={handleToggleEnabled}
                     disabled={isLoading || polygon.enabled_in_config === false}
-                    className="mr-2 cursor-pointer border-none bg-transparent p-0 transition-opacity hover:opacity-70 disabled:cursor-not-allowed disabled:opacity-50"
+                    className="mr-2 shrink-0 cursor-pointer border-none bg-transparent p-0 transition-opacity hover:opacity-70 disabled:cursor-not-allowed disabled:opacity-50"
                   >
                     <PolygonItemIcon
                       className="size-5"
@@ -469,7 +469,15 @@ export default function PolygonItem({
           </>
         )}
         {!isMobile && hoveredPolygonIndex === index && (
-          <div className="flex flex-row items-center gap-2">
+          <div
+            className="absolute inset-y-0 right-0 flex flex-row items-center gap-2 rounded-r-lg pl-8 pr-1"
+            style={{
+              background:
+                polygon.color.length === 3
+                  ? `linear-gradient(to right, transparent 0%, rgba(${polygon.color[2]},${polygon.color[1]},${polygon.color[0]},0.85) 40%)`
+                  : "linear-gradient(to right, transparent 0%, rgba(220,0,0,0.85) 40%)",
+            }}
+          >
             <Tooltip>
               <TooltipTrigger asChild>
                 <IconWrapper

web/src/views/explore/ExploreView.tsx

@@ -23,6 +23,7 @@ import { FrigateConfig } from "@/types/frigateConfig";
 import { useTranslation } from "react-i18next";
 import { getTranslatedLabel } from "@/utils/i18n";
 import { LuSearchX } from "react-icons/lu";
+import { getIconForLabel } from "@/utils/iconUtil";
 
 type ExploreViewProps = {
   setSearchDetail: (search: SearchResult | undefined) => void;
@@ -149,6 +150,9 @@ function ThumbnailRow({
   return (
     <div className="rounded-lg bg-background_alt p-2 md:px-4">
       <div className="flex flex-row items-center text-lg smart-capitalize">
+        {labelType === "audio"
+          ? getIconForLabel("", labelType, "size-4 mr-1")
+          : null}
         {getTranslatedLabel(label, labelType)}
         {searchResults && (
           <span className="ml-3 text-sm text-secondary-foreground">

web/src/views/settings/MasksAndZonesView.tsx

@@ -64,6 +64,9 @@ export default function MasksAndZonesView({
   );
   const containerRef = useRef<HTMLDivElement | null>(null);
   const [editPane, setEditPane] = useState<PolygonType | undefined>(undefined);
+  const editPaneRef = useRef(editPane);
+  editPaneRef.current = editPane;
+  const prevScaledRef = useRef<{ w: number; h: number } | null>(null);
   const [activeLine, setActiveLine] = useState<number | undefined>();
   const [snapPoints, setSnapPoints] = useState(false);
 
@@ -350,12 +353,36 @@ export default function MasksAndZonesView({
         ...globalObjectMasks,
         ...objectMasks,
       ]);
-      setEditingPolygons([
-        ...zones,
-        ...motionMasks,
-        ...globalObjectMasks,
-        ...objectMasks,
-      ]);
+      // Don't overwrite editingPolygons during editing – layout shifts
+      // from switching to the edit pane can trigger a resize which
+      // recalculates scaledWidth/scaledHeight and would discard the
+      // newly-added polygon. Instead, rescale existing points
+      // proportionally.
+      if (editPaneRef.current === undefined) {
+        setEditingPolygons([
+          ...zones,
+          ...motionMasks,
+          ...globalObjectMasks,
+          ...objectMasks,
+        ]);
+      } else if (
+        prevScaledRef.current &&
+        (prevScaledRef.current.w !== scaledWidth ||
+          prevScaledRef.current.h !== scaledHeight)
+      ) {
+        const prevW = prevScaledRef.current.w;
+        const prevH = prevScaledRef.current.h;
+        setEditingPolygons((prev) =>
+          prev.map((poly) => ({
+            ...poly,
+            points: poly.points.map(([x, y]) => [
+              (x / prevW) * scaledWidth,
+              (y / prevH) * scaledHeight,
+            ]),
+          })),
+        );
+      }
+      prevScaledRef.current = { w: scaledWidth, h: scaledHeight };
     }
     // we know that these deps are correct
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -431,7 +458,7 @@ export default function MasksAndZonesView({
       {cameraConfig && editingPolygons && (
         <div className="flex size-full flex-col md:flex-row">
           <Toaster position="top-center" closeButton={true} />
-          <div className="scrollbar-container order-last mb-2 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mr-3 md:mt-0 md:w-3/12">
+          <div className="scrollbar-container order-last mb-2 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mr-3 md:mt-0 md:w-3/12 md:min-w-0 md:shrink-0">
             {editPane == "zone" && (
               <ZoneEditPane
                 polygons={editingPolygons}
@@ -707,7 +734,7 @@ export default function MasksAndZonesView({
           <div
             ref={containerRef}
             className={cn(
-              "flex max-h-[50%] md:h-dvh md:max-h-full md:w-7/12 md:grow",
+              "flex max-h-[50%] min-w-0 md:h-dvh md:max-h-full md:w-7/12 md:grow",
               isDesktop && "md:mr-3",
             )}
           >