Merge remote-tracking branch 'origin/master' into dev

web/src/components/card/ClassificationCard.tsx

@@ -1,12 +1,20 @@
 import { baseUrl } from "@/api/baseUrl";
 import useContextMenu from "@/hooks/use-contextmenu";
+import { useOverlayState } from "@/hooks/use-overlay-state";
 import { cn } from "@/lib/utils";
 import {
   ClassificationItemData,
   ClassificationThreshold,
   ClassifiedEvent,
 } from "@/types/classification";
-import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { isDesktop, isIOS, isMobile, isMobileOnly } from "react-device-detect";
 import { useTranslation } from "react-i18next";
 import TimeAgo from "../dynamic/TimeAgo";
@@ -16,6 +24,7 @@ import { LuSearch, LuInfo } from "react-icons/lu";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { useNavigate } from "react-router-dom";
 import { HiSquare2Stack } from "react-icons/hi2";
+import scrollIntoView from "scroll-into-view-if-needed";
 import { ImageShadowOverlay } from "../overlay/ImageShadowOverlay";
 import {
   Dialog,
@@ -85,9 +94,14 @@ export const ClassificationCard = forwardRef<
 
   // interaction
 
+  const cardRef = useRef<HTMLDivElement | null>(null);
   const imgRef = useRef<HTMLImageElement | null>(null);
 
-  useContextMenu(imgRef, () => {
+  useImperativeHandle(ref, () => cardRef.current!);
+
+  // Listen on the whole card, since overlays cover most of the image
+
+  useContextMenu(cardRef, () => {
     onClick(data, true);
   });
 
@@ -101,9 +115,9 @@ export const ClassificationCard = forwardRef<
 
   return (
     <div
-      ref={ref}
+      ref={cardRef}
       className={cn(
-        "relative flex size-full flex-col overflow-hidden rounded-lg outline outline-[3px]",
+        "relative flex size-full select-none flex-col overflow-hidden rounded-lg outline outline-[3px]",
         className,
         selected
           ? "shadow-selected outline-selected"
@@ -117,11 +131,7 @@ export const ClassificationCard = forwardRef<
         }
         onClick(data, isMeta);
       }}
-      onContextMenu={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        onClick(data, true);
-      }}
+      style={isIOS ? { WebkitTouchCallout: "none" } : undefined}
     >
       <img
         ref={imgRef}
@@ -130,14 +140,6 @@ export const ClassificationCard = forwardRef<
           imgClassName,
           isMobile && "w-full",
         )}
-        style={
-          isIOS
-            ? {
-                WebkitUserSelect: "none",
-                WebkitTouchCallout: "none",
-              }
-            : undefined
-        }
         draggable={false}
         loading="lazy"
         onLoad={() => setImageLoaded(true)}
@@ -156,7 +158,7 @@ export const ClassificationCard = forwardRef<
         </div>
       )}
       <div className="absolute bottom-0 left-0 right-0 h-[50%] bg-gradient-to-t from-black/60 to-transparent" />
-      <div className="absolute bottom-0 flex w-full select-none flex-row items-center justify-between gap-2 p-2">
+      <div className="absolute bottom-0 flex w-full flex-row items-center justify-between gap-2 p-2">
         <div
           className={cn(
             "flex flex-col items-start text-white",
@@ -216,6 +218,41 @@ export function GroupedClassificationCard({
   const { t } = useTranslation(["views/explore", i18nLibrary]);
   const [detailOpen, setDetailOpen] = useState(false);
 
+  // Explore stores this event in history state so going back can point out the
+  // card the user came from
+
+  const cardRef = useRef<HTMLDivElement | null>(null);
+  const [returnEventId, setReturnEventId] = useOverlayState<string | undefined>(
+    "returnEventId",
+  );
+  const [highlighted, setHighlighted] = useState(false);
+
+  useEffect(() => {
+    if (!returnEventId || classifiedEvent?.id !== returnEventId) {
+      return;
+    }
+
+    setReturnEventId(undefined, true);
+    setHighlighted(true);
+  }, [classifiedEvent?.id, returnEventId, setReturnEventId]);
+
+  useEffect(() => {
+    if (!highlighted) {
+      return;
+    }
+
+    if (cardRef.current) {
+      scrollIntoView(cardRef.current, {
+        block: "center",
+        behavior: "smooth",
+        scrollMode: "if-needed",
+      });
+    }
+
+    const timeout = setTimeout(() => setHighlighted(false), 3000);
+    return () => clearTimeout(timeout);
+  }, [highlighted]);
+
   // If the component unmounts while the detail overlay is open, we need to
   // pop the history state that was pushed by useHistoryBack, otherwise it
   // leaves a stale entry that breaks back navigation.
@@ -308,9 +345,10 @@ export function GroupedClassificationCard({
   return (
     <>
       <ClassificationCard
+        ref={cardRef}
         data={bestItem}
         threshold={threshold}
-        selected={selectedItems.includes(bestItem.filename)}
+        selected={highlighted || selectedItems.includes(bestItem.filename)}
         clickable={true}
         i18nLibrary={i18nLibrary}
         count={group.length}
@@ -404,13 +442,19 @@ export function GroupedClassificationCard({
                     isMobile && "absolute right-4 top-8",
                   )}
                 >
-                  <Tooltip>
+                  <Tooltip open={isDesktop ? undefined : false}>
                     <TooltipTrigger asChild>
                       <div
                         className="cursor-pointer"
                         tabIndex={-1}
+                        aria-label={t("details.item.button.viewInExplore", {
+                          ns: "views/explore",
+                        })}
                         onClick={() => {
-                          navigate(`/explore?event_id=${classifiedEvent.id}`);
+                          setReturnEventId(classifiedEvent.id, true);
+                          navigate(`/explore?event_id=${classifiedEvent.id}`, {
+                            state: { canGoBack: true },
+                          });
                         }}
                       >
                         <LuSearch className="size-4 text-secondary-foreground" />

web/src/components/config-form/section-configs/notifications.ts

@@ -8,6 +8,23 @@ const notifications: SectionConfigOverrides = {
     fieldGroups: {},
     hiddenFields: ["enabled_in_config"],
     advancedFields: [],
+    fieldMessages: [
+      {
+        key: "profile-base-notifications-disabled",
+        field: "enabled",
+        messageKey: "configMessages.notifications.profileBaseDisabled",
+        severity: "warning",
+        position: "after",
+        condition: (ctx) =>
+          !!ctx.profileName &&
+          ctx.formData?.enabled === true &&
+          !Object.values(ctx.fullConfig.cameras).some(
+            (camera) =>
+              camera.enabled_in_config &&
+              camera.notifications.enabled_in_config,
+          ),
+      },
+    ],
   },
   global: {
     uiSchema: {

web/src/components/config-form/section-configs/record.ts

@@ -31,6 +31,21 @@ const record: SectionConfigOverrides = {
         },
       },
     ],
+    fieldMessages: [
+      {
+        key: "profile-base-record-disabled",
+        field: "enabled",
+        messageKey: "configMessages.record.profileBaseDisabled",
+        severity: "warning",
+        position: "after",
+        docLink:
+          "/configuration/profiles#why-cant-a-profile-enable-recording-when-its-disabled-in-the-base-config",
+        condition: (ctx) =>
+          !!ctx.profileName &&
+          ctx.formData?.enabled === true &&
+          ctx.fullCameraConfig?.record.enabled_in_config === false,
+      },
+    ],
     fieldDocs: {
       "alerts.pre_capture":
         "/configuration/record#pre-capture-and-post-capture",

web/src/components/config-form/section-configs/types.ts

@@ -8,6 +8,7 @@ export type MessageConditionContext = {
   fullCameraConfig?: CameraConfig;
   level: "global" | "camera";
   cameraName?: string;
+  profileName?: string;
   formData: ConfigSectionData;
 };
 

web/src/components/config-form/sections/BaseSection.tsx

@@ -649,9 +649,10 @@ export function ConfigSection({
           : undefined,
       level: effectiveLevel,
       cameraName,
+      profileName,
       formData: currentFormData as ConfigSectionData,
     };
-  }, [config, currentFormData, effectiveLevel, cameraName]);
+  }, [config, currentFormData, effectiveLevel, cameraName, profileName]);
 
   const { activeMessages, activeFieldMessages } = useConfigMessages(
     sectionConfig.messages,

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

@@ -844,6 +844,7 @@ export function TrackingDetails({
                       <div className="text-sm text-secondary-foreground">
                         <Link
                           to={`/explore?recognized_license_plate=${event.data.recognized_license_plate}`}
+                          state={{ canGoBack: true }}
                           className="text-sm"
                         >
                           {event.data.recognized_license_plate}

web/src/components/timeline/DetailStream.tsx

@@ -727,6 +727,7 @@ function EventList({
                     <div className="text-sm text-secondary-foreground">
                       <Link
                         to={`/explore?recognized_license_plate=${event.data.recognized_license_plate}`}
+                        state={{ canGoBack: true }}
                         className="text-sm"
                       >
                         {event.data.recognized_license_plate}

web/src/components/timeline/EventMenu.tsx

@@ -135,7 +135,9 @@ export default function EventMenu({
             <DropdownMenuItem
               className="cursor-pointer"
               onSelect={() => {
-                navigate(`/explore?event_id=${event.id}`);
+                navigate(`/explore?event_id=${event.id}`, {
+                  state: { canGoBack: true },
+                });
               }}
             >
               {t("details.item.button.viewInExplore")}
@@ -177,6 +179,7 @@ export default function EventMenu({
                   else
                     navigate(
                       `/explore?search_type=similarity&event_id=${event.id}`,
+                      { state: { canGoBack: true } },
                     );
                 }}
               >