Merge f00dd5c7af into f3c09ae169

docs/docs/configuration/advanced/system.md

@@ -72,10 +72,10 @@ Variables prefixed with `FRIGATE_` can be referenced in config fields that suppo
 
 Navigate to <NavPath path="Settings > System > Environment variables" /> to add or edit environment variables.
 
-| Field             | Description                                               |
-| ----------------- | --------------------------------------------------------- |
-| **Variable name** | The environment variable name (e.g., `FRIGATE_MQTT_USER`) |
-| **Value**         | The value for the variable                                |
+| Field     | Description                                               |
+| --------- | --------------------------------------------------------- |
+| **Key**   | The environment variable name (e.g., `FRIGATE_MQTT_USER`) |
+| **Value** | The value for the variable                                |
 
 Variables defined here can be referenced elsewhere in your configuration using the `{FRIGATE_VARIABLE_NAME}` syntax.
 

frigate/embeddings/maintainer.py

@@ -200,9 +200,6 @@ class EmbeddingMaintainer(threading.Thread):
             )
 
         for model_config in self.config.classification.custom.values():
-            if not model_config.enabled:
-                continue
-
             self.realtime_processors.append(
                 CustomStateClassificationProcessor(
                     self.config, model_config, self.requestor, self.metrics
@@ -335,25 +332,6 @@ class EmbeddingMaintainer(threading.Thread):
         for processor in self.post_processors:
             processor.update_config(topic, payload)
 
-    def _remove_custom_classification_processor(self, model_name: str) -> None:
-        """Shut down and drop any running processor for a custom model."""
-        remaining = []
-        for processor in self.realtime_processors:
-            if (
-                isinstance(
-                    processor,
-                    (
-                        CustomStateClassificationProcessor,
-                        CustomObjectClassificationProcessor,
-                    ),
-                )
-                and processor.model_config.name == model_name
-            ):
-                processor.shutdown()
-            else:
-                remaining.append(processor)
-        self.realtime_processors = remaining
-
     def _handle_custom_classification_update(
         self, topic: str, model_config: Any
     ) -> None:
@@ -361,7 +339,23 @@ class EmbeddingMaintainer(threading.Thread):
         model_name = topic.split("/")[-1]
 
         if model_config is None:
-            self._remove_custom_classification_processor(model_name)
+            remaining = []
+            for processor in self.realtime_processors:
+                if (
+                    isinstance(
+                        processor,
+                        (
+                            CustomStateClassificationProcessor,
+                            CustomObjectClassificationProcessor,
+                        ),
+                    )
+                    and processor.model_config.name == model_name
+                ):
+                    processor.shutdown()
+                else:
+                    remaining.append(processor)
+            self.realtime_processors = remaining
+
             logger.info(
                 f"Successfully removed classification processor for model: {model_name}"
             )
@@ -369,13 +363,6 @@ class EmbeddingMaintainer(threading.Thread):
 
         self.config.classification.custom[model_name] = model_config
 
-        # A disabled model must not run; tear down any existing processor and
-        # do not register a new one.
-        if not model_config.enabled:
-            self._remove_custom_classification_processor(model_name)
-            logger.info(f"Disabled classification processor for model: {model_name}")
-            return
-
         # Check if processor already exists
         for processor in self.realtime_processors:
             if isinstance(
@@ -715,11 +702,7 @@ class EmbeddingMaintainer(threading.Thread):
             and "license_plate" not in camera_config.objects.track
         )
 
-        has_enabled_custom = any(
-            c.enabled for c in self.config.classification.custom.values()
-        )
-
-        if not dedicated_lpr_enabled and not has_enabled_custom:
+        if not dedicated_lpr_enabled and len(self.config.classification.custom) == 0:
             # no active features that use this data
             return
 

frigate/test/test_classification_enabled.py

@@ -1,106 +0,0 @@
-"""Tests that disabled custom classification models are not registered or run."""
-
-import sys
-import unittest
-from unittest.mock import MagicMock
-
-# Mock TFLite before importing the maintainer / classification modules
-_MOCK_MODULES = [
-    "tflite_runtime",
-    "tflite_runtime.interpreter",
-    "ai_edge_litert",
-    "ai_edge_litert.interpreter",
-]
-for mod in _MOCK_MODULES:
-    if mod not in sys.modules:
-        sys.modules[mod] = MagicMock()
-
-from frigate.data_processing.real_time.custom_classification import (  # noqa: E402
-    CustomObjectClassificationProcessor,
-)
-from frigate.embeddings.maintainer import EmbeddingMaintainer  # noqa: E402
-
-
-class TestCustomClassificationEnabledGating(unittest.TestCase):
-    """A model with enabled: false must not keep a processor registered."""
-
-    def _make_maintainer(self) -> EmbeddingMaintainer:
-        # Bypass the heavy __init__; only the attributes touched by the
-        # config update path are needed for these tests.
-        maintainer = EmbeddingMaintainer.__new__(EmbeddingMaintainer)
-        maintainer.realtime_processors = []
-        maintainer.config = MagicMock()
-        maintainer.config.classification.custom = {}
-        maintainer.requestor = MagicMock()
-        maintainer.metrics = MagicMock()
-        maintainer.event_metadata_publisher = MagicMock()
-        return maintainer
-
-    def _make_model_config(self, name: str, enabled: bool) -> MagicMock:
-        model_config = MagicMock()
-        model_config.name = name
-        model_config.enabled = enabled
-        model_config.state_config = None
-        return model_config
-
-    def _make_processor(self, name: str) -> MagicMock:
-        processor = MagicMock(spec=CustomObjectClassificationProcessor)
-        processor.model_config = MagicMock()
-        processor.model_config.name = name
-        return processor
-
-    def test_disabled_update_tears_down_existing_processor(self):
-        """Toggling a running model to disabled shuts down and drops its processor."""
-        maintainer = self._make_maintainer()
-        processor = self._make_processor("atli")
-        maintainer.realtime_processors = [processor]
-
-        maintainer._handle_custom_classification_update(
-            "config/classification/custom/atli",
-            self._make_model_config("atli", enabled=False),
-        )
-
-        processor.shutdown.assert_called_once()
-        self.assertEqual(maintainer.realtime_processors, [])
-
-    def test_disabled_update_does_not_register_processor(self):
-        """A disabled model that has no processor is never registered."""
-        maintainer = self._make_maintainer()
-
-        maintainer._handle_custom_classification_update(
-            "config/classification/custom/atli",
-            self._make_model_config("atli", enabled=False),
-        )
-
-        self.assertEqual(maintainer.realtime_processors, [])
-
-    def test_disabled_update_leaves_other_processors_untouched(self):
-        """Disabling one model must not affect other running processors."""
-        maintainer = self._make_maintainer()
-        other = self._make_processor("simbi")
-        maintainer.realtime_processors = [other]
-
-        maintainer._handle_custom_classification_update(
-            "config/classification/custom/atli",
-            self._make_model_config("atli", enabled=False),
-        )
-
-        other.shutdown.assert_not_called()
-        self.assertEqual(maintainer.realtime_processors, [other])
-
-    def test_removed_model_tears_down_processor(self):
-        """A None payload (model deleted) still shuts down its processor."""
-        maintainer = self._make_maintainer()
-        processor = self._make_processor("atli")
-        maintainer.realtime_processors = [processor]
-
-        maintainer._handle_custom_classification_update(
-            "config/classification/custom/atli", None
-        )
-
-        processor.shutdown.assert_called_once()
-        self.assertEqual(maintainer.realtime_processors, [])
-
-
-if __name__ == "__main__":
-    unittest.main()

web/public/locales/en/common.json

@@ -21,6 +21,7 @@
     "1hour": "1 hour",
     "12hours": "12 hours",
     "24hours": "24 hours",
+    "custom": "Custom...",
     "pm": "pm",
     "am": "am",
     "yr": "{{time}}yr",

web/public/locales/en/views/settings.json

@@ -1191,8 +1191,15 @@
       "1hour": "Suspend for 1 hour",
       "12hours": "Suspend for 12 hours",
       "24hours": "Suspend for 24 hours",
+      "custom": "Suspend until...",
       "untilRestart": "Suspend until restart"
     },
+    "customSuspension": {
+      "title": "Custom suspension time",
+      "description": "Suspend notifications for this camera until the selected time.",
+      "untilLabel": "Suspend until",
+      "invalidTime": "Pick a time in the future."
+    },
     "cancelSuspension": "Cancel Suspension",
     "toast": {
       "success": {
@@ -1490,14 +1497,7 @@
       "keyLabel": "Key",
       "valueLabel": "Value",
       "keyPlaceholder": "New key",
-      "remove": "Remove",
-      "providerNameLabel": "Provider name",
-      "providerNamePlaceholder": "e.g., openai",
-      "variableNameLabel": "Variable name",
-      "variableNamePlaceholder": "e.g., MY_VARIABLE",
-      "loggerNameLabel": "Logger name",
-      "loggerNamePlaceholder": "e.g., frigate.record",
-      "keyPatternError": "Use only letters, numbers, hyphens, and underscores (no spaces)"
+      "remove": "Remove"
     },
     "knownPlates": {
       "namePlaceholder": "e.g., Wife's Car",

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

@@ -7,13 +7,7 @@ const environmentVars: SectionConfigOverrides = {
     advancedFields: [],
     uiSchema: {
       additionalProperties: {
-        "ui:options": {
-          size: "lg",
-          additionalPropertyKeyLabel:
-            "configForm.additionalProperties.variableNameLabel",
-          additionalPropertyKeyPlaceholder:
-            "configForm.additionalProperties.variableNamePlaceholder",
-        },
+        "ui:options": { size: "lg" },
       },
     },
   },

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

@@ -9,15 +9,7 @@ const genai: SectionConfigOverrides = {
     uiSchema: {
       "ui:options": { disableNestedCard: true },
       "*": {
-        "ui:options": {
-          disableNestedCard: true,
-          additionalPropertyKeyLabel:
-            "configForm.additionalProperties.providerNameLabel",
-          additionalPropertyKeyPlaceholder:
-            "configForm.additionalProperties.providerNamePlaceholder",
-          additionalPropertyKeyPattern: "^[a-zA-Z0-9_-]+$",
-          preventKeyRename: true,
-        },
+        "ui:options": { disableNestedCard: true },
         "ui:order": [
           "provider",
           "api_key",

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

@@ -12,13 +12,7 @@ const logger: SectionConfigOverrides = {
       },
       logs: {
         additionalProperties: {
-          "ui:options": {
-            enumI18nPrefix: "logger.logLevel",
-            additionalPropertyKeyLabel:
-              "configForm.additionalProperties.loggerNameLabel",
-            additionalPropertyKeyPlaceholder:
-              "configForm.additionalProperties.loggerNamePlaceholder",
-          },
+          "ui:options": { enumI18nPrefix: "logger.logLevel" },
         },
       },
     },

web/src/components/config-form/sectionExtras/NotificationsSettingsExtras.tsx

@@ -23,7 +23,7 @@ import {
   useState,
 } from "react";
 import { useForm } from "react-hook-form";
-import { LuCheck, LuExternalLink, LuX } from "react-icons/lu";
+import { LuCheck, LuChevronDown, LuExternalLink, LuX } from "react-icons/lu";
 import { CiCircleAlert } from "react-icons/ci";
 import { Link } from "react-router-dom";
 import { toast } from "sonner";
@@ -35,12 +35,12 @@ import {
   useNotificationTest,
 } from "@/api/ws";
 import {
-  Select,
-  SelectTrigger,
-  SelectValue,
-  SelectContent,
-  SelectItem,
-} from "@/components/ui/select";
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import { use24HourTime } from "@/hooks/use-date-utils";
 import FilterSwitch from "@/components/filter/FilterSwitch";
@@ -51,6 +51,7 @@ import { useDocDomain } from "@/hooks/use-doc-domain";
 import { isPWA } from "@/utils/isPWA";
 import { isIOS } from "react-device-detect";
 import { CameraNameLabel } from "@/components/camera/FriendlyNameLabel";
+import CustomSuspensionDialog from "@/components/overlay/dialog/CustomSuspensionDialog";
 import { useIsAdmin } from "@/hooks/use-is-admin";
 import { cn } from "@/lib/utils";
 import cloneDeep from "lodash/cloneDeep";
@@ -756,6 +757,8 @@ export function CameraNotificationSwitch({
     }
   }, [notificationSuspendUntil, notificationState]);
 
+  const [customDialogOpen, setCustomDialogOpen] = useState(false);
+
   const handleSuspend = (duration: string) => {
     setIsSuspended(true);
     if (duration == "off") {
@@ -765,6 +768,11 @@ export function CameraNotificationSwitch({
     }
   };
 
+  const handleCustomSuspend = (totalMinutes: number) => {
+    setIsSuspended(true);
+    sendNotificationSuspend(totalMinutes);
+  };
+
   const handleCancelSuspension = () => {
     sendNotification("ON");
     sendNotificationSuspend(0);
@@ -824,34 +832,41 @@ export function CameraNotificationSwitch({
       </div>
 
       {!isSuspended ? (
-        <Select onValueChange={handleSuspend}>
-          <SelectTrigger className="w-auto">
-            <SelectValue placeholder={t("notification.suspendTime.suspend")} />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="5">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button size="sm" variant="outline" className="flex gap-2">
+              {t("notification.suspendTime.suspend")}
+              <LuChevronDown className="h-4 w-4 opacity-50" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem onClick={() => handleSuspend("5")}>
               {t("notification.suspendTime.5minutes")}
-            </SelectItem>
-            <SelectItem value="10">
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => handleSuspend("10")}>
               {t("notification.suspendTime.10minutes")}
-            </SelectItem>
-            <SelectItem value="30">
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => handleSuspend("30")}>
               {t("notification.suspendTime.30minutes")}
-            </SelectItem>
-            <SelectItem value="60">
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => handleSuspend("60")}>
               {t("notification.suspendTime.1hour")}
-            </SelectItem>
-            <SelectItem value="840">
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => handleSuspend("840")}>
               {t("notification.suspendTime.12hours")}
-            </SelectItem>
-            <SelectItem value="1440">
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => handleSuspend("1440")}>
               {t("notification.suspendTime.24hours")}
-            </SelectItem>
-            <SelectItem value="off">
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => handleSuspend("off")}>
               {t("notification.suspendTime.untilRestart")}
-            </SelectItem>
-          </SelectContent>
-        </Select>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={() => setCustomDialogOpen(true)}>
+              {t("notification.suspendTime.custom")}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
       ) : (
         <Button
           variant="destructive"
@@ -861,6 +876,12 @@ export function CameraNotificationSwitch({
           {t("notification.cancelSuspension")}
         </Button>
       )}
+
+      <CustomSuspensionDialog
+        open={customDialogOpen}
+        onOpenChange={setCustomDialogOpen}
+        onConfirm={handleCustomSuspend}
+      />
     </div>
   );
 }

web/src/components/config-form/theme/templates/WrapIfAdditionalTemplate.tsx

@@ -6,14 +6,12 @@ import {
   StrictRJSFSchema,
   WrapIfAdditionalTemplateProps,
 } from "@rjsf/utils";
-import { useEffect, useMemo, useState, type FocusEvent } from "react";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { cn } from "@/lib/utils";
 import { useTranslation } from "react-i18next";
 import { LuTrash2 } from "react-icons/lu";
-import type { ConfigFormContext } from "@/types/configForm";
 
 export function WrapIfAdditionalTemplate<
   T = unknown,
@@ -32,7 +30,6 @@ export function WrapIfAdditionalTemplate<
     onKeyRenameBlur,
     readonly,
     required,
-    registry,
     schema,
     uiSchema,
   } = props;
@@ -41,55 +38,6 @@ export function WrapIfAdditionalTemplate<
 
   const additional = ADDITIONAL_PROPERTY_FLAG in schema;
 
-  const uiOptions = getUiOptions(uiSchema);
-  const keyIsReadonly = uiOptions.additionalPropertyKeyReadonly === true;
-
-  const keyLabelKey =
-    typeof uiOptions.additionalPropertyKeyLabel === "string"
-      ? uiOptions.additionalPropertyKeyLabel
-      : undefined;
-  const keyPlaceholderKey =
-    typeof uiOptions.additionalPropertyKeyPlaceholder === "string"
-      ? uiOptions.additionalPropertyKeyPlaceholder
-      : undefined;
-  const keyPattern =
-    typeof uiOptions.additionalPropertyKeyPattern === "string"
-      ? uiOptions.additionalPropertyKeyPattern
-      : undefined;
-  const preventKeyRename = uiOptions.preventKeyRename === true;
-
-  const formContext = registry?.formContext as ConfigFormContext | undefined;
-
-  // optionally, lock the key once it's been saved
-  const baseline = formContext?.baselineFormData;
-  const keyLocked =
-    preventKeyRename &&
-    typeof label === "string" &&
-    !!baseline &&
-    Object.prototype.hasOwnProperty.call(baseline, label);
-
-  // controlled key value so we can validate live and block invalid renames.
-  const [keyValue, setKeyValue] = useState<string>(label ?? "");
-  useEffect(() => {
-    setKeyValue(label ?? "");
-  }, [label]);
-
-  const keyRegex = useMemo(
-    () => (keyPattern ? new RegExp(keyPattern) : undefined),
-    [keyPattern],
-  );
-  const keyError = useMemo(() => {
-    if (!keyRegex || keyLocked) return null;
-    if (!keyRegex.test(keyValue)) {
-      return t("configForm.additionalProperties.keyPatternError", {
-        ns: "views/settings",
-        defaultValue:
-          "Use only letters, numbers, hyphens, and underscores (no spaces)",
-      });
-    }
-    return null;
-  }, [keyRegex, keyLocked, keyValue, t]);
-
   if (!additional) {
     return (
       <div className={classNames} style={style}>
@@ -99,26 +47,20 @@ export function WrapIfAdditionalTemplate<
   }
 
   const keyId = `${id}-key`;
-  const keyLabel = keyLabelKey
-    ? t(keyLabelKey, { ns: "views/settings" })
-    : t("configForm.additionalProperties.keyLabel", { ns: "views/settings" });
+  const keyLabel = t("configForm.additionalProperties.keyLabel", {
+    ns: "views/settings",
+  });
   const valueLabel = t("configForm.additionalProperties.valueLabel", {
     ns: "views/settings",
   });
-  const keyPlaceholder = keyPlaceholderKey
-    ? t(keyPlaceholderKey, { ns: "views/settings" })
-    : t("configForm.additionalProperties.keyPlaceholder", {
-        ns: "views/settings",
-      });
+  const keyPlaceholder = t("configForm.additionalProperties.keyPlaceholder", {
+    ns: "views/settings",
+  });
   const removeLabel = t("configForm.additionalProperties.remove", {
     ns: "views/settings",
   });
-
-  const commitKeyRename = (e: FocusEvent<HTMLInputElement>) => {
-    if (readonly) return;
-    if (keyError) return;
-    onKeyRenameBlur?.(e);
-  };
+  const uiOptions = getUiOptions(uiSchema);
+  const keyIsReadonly = uiOptions.additionalPropertyKeyReadonly === true;
 
   return (
     <div
@@ -128,30 +70,23 @@ export function WrapIfAdditionalTemplate<
       {!keyIsReadonly && (
         <div className="col-span-12 space-y-2 md:col-span-2">
           {displayLabel && <Label htmlFor={keyId}>{keyLabel}</Label>}
-          {keyLocked ? (
+          {keyIsReadonly ? (
             <div
               id={keyId}
-              className="flex items-center break-all text-sm text-primary-variant"
+              className="flex items-center text-sm text-muted-foreground"
             >
               {label}
             </div>
           ) : (
-            <>
-              <Input
-                id={keyId}
-                name={keyId}
-                required={required}
-                value={keyValue}
-                placeholder={keyPlaceholder}
-                disabled={disabled || readonly}
-                onChange={(e) => setKeyValue(e.target.value)}
-                onBlur={!readonly ? commitKeyRename : undefined}
-                aria-invalid={keyError ? true : undefined}
-              />
-              {keyError && (
-                <p className="text-xs text-destructive">{keyError}</p>
-              )}
-            </>
+            <Input
+              id={keyId}
+              name={keyId}
+              required={required}
+              defaultValue={label}
+              placeholder={keyPlaceholder}
+              disabled={disabled || readonly}
+              onBlur={!readonly ? onKeyRenameBlur : undefined}
+            />
           )}
         </div>
       )}

web/src/components/menu/LiveContextMenu.tsx

@@ -50,6 +50,7 @@ import { use24HourTime } from "@/hooks/use-date-utils";
 import { useIsAdmin } from "@/hooks/use-is-admin";
 import { CameraNameLabel } from "../camera/FriendlyNameLabel";
 import { LiveStreamMetadata } from "@/types/live";
+import CustomSuspensionDialog from "@/components/overlay/dialog/CustomSuspensionDialog";
 
 type LiveContextMenuProps = {
   className?: string;
@@ -238,6 +239,8 @@ export default function LiveContextMenu({
     }
   }, [notificationSuspendUntil, notificationState]);
 
+  const [customDialogOpen, setCustomDialogOpen] = useState(false);
+
   const handleSuspend = (duration: string) => {
     if (duration === "off") {
       sendNotification("OFF");
@@ -534,6 +537,16 @@ export default function LiveContextMenu({
                             >
                               {t("time.24hours", { ns: "common" })}
                             </ContextMenuItem>
+                            <ContextMenuItem
+                              disabled={!isEnabled}
+                              onClick={
+                                isEnabled
+                                  ? () => setCustomDialogOpen(true)
+                                  : undefined
+                              }
+                            >
+                              {t("time.custom", { ns: "common" })}
+                            </ContextMenuItem>
                             <ContextMenuItem
                               disabled={!isEnabled}
                               onClick={
@@ -566,6 +579,12 @@ export default function LiveContextMenu({
           streamMetadata={streamMetadata}
         />
       </Dialog>
+
+      <CustomSuspensionDialog
+        open={customDialogOpen}
+        onOpenChange={setCustomDialogOpen}
+        onConfirm={(minutes) => sendNotificationSuspend(minutes)}
+      />
     </div>
   );
 }

web/src/components/overlay/ReviewActivityCalendar.tsx

@@ -1,6 +1,12 @@
 import { RecordingsSummary, ReviewSummary } from "@/types/review";
 import { Calendar } from "../ui/calendar";
-import { ButtonHTMLAttributes, useEffect, useMemo, useRef } from "react";
+import {
+  ButtonHTMLAttributes,
+  ComponentProps,
+  useEffect,
+  useMemo,
+  useRef,
+} from "react";
 import { FaCircle } from "react-icons/fa";
 import { getUTCOffset } from "@/utils/dateUtil";
 import { type DayButtonProps } from "react-day-picker";
@@ -156,12 +162,14 @@ type TimezoneAwareCalendarProps = {
   timezone?: string;
   selectedDay?: Date;
   onSelect: (day?: Date) => void;
+  disabled?: ComponentProps<typeof Calendar>["disabled"];
   recordingsSummary?: RecordingsSummary;
 };
 export function TimezoneAwareCalendar({
   timezone,
   selectedDay,
   onSelect,
+  disabled,
   recordingsSummary,
 }: TimezoneAwareCalendarProps) {
   const [weekStartsOn] = useUserPersistence("weekStartsOn", 0);
@@ -187,7 +195,7 @@ export function TimezoneAwareCalendar({
       timezone ? Math.round(getUTCOffset(new Date(), timezone)) : undefined,
     [timezone],
   );
-  const disabledDates = useMemo(() => {
+  const defaultDisabledDates = useMemo(() => {
     const tomorrow = new Date();
 
     if (timezoneOffset) {
@@ -205,6 +213,7 @@ export function TimezoneAwareCalendar({
     future.setFullYear(tomorrow.getFullYear() + 10);
     return { from: tomorrow, to: future };
   }, [timezoneOffset]);
+  const disabledDates = disabled ?? defaultDisabledDates;
 
   const today = useMemo(() => {
     if (!timezoneOffset) {

web/src/components/overlay/dialog/CustomSuspensionDialog.tsx

@@ -0,0 +1,167 @@
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { isDesktop } from "react-device-detect";
+import { FaCalendarAlt } from "react-icons/fa";
+import useSWR from "swr";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Label } from "@/components/ui/label";
+import { TimezoneAwareCalendar } from "@/components/overlay/ReviewActivityCalendar";
+import { FrigateConfig } from "@/types/frigateConfig";
+import { useFormattedTimestamp } from "@/hooks/use-date-utils";
+
+type CustomSuspensionDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: (minutes: number) => void;
+};
+
+const ONE_HOUR_MS = 60 * 60 * 1000;
+
+function pad(n: number): string {
+  return n.toString().padStart(2, "0");
+}
+
+function isValidDate(d: Date): boolean {
+  return !Number.isNaN(d.getTime());
+}
+
+export default function CustomSuspensionDialog({
+  open,
+  onOpenChange,
+  onConfirm,
+}: CustomSuspensionDialogProps) {
+  const { t } = useTranslation(["views/settings"]);
+  const { data: config } = useSWR<FrigateConfig>("config");
+
+  const [until, setUntil] = useState<Date>(
+    () => new Date(Date.now() + ONE_HOUR_MS),
+  );
+  const [calendarOpen, setCalendarOpen] = useState(false);
+
+  useEffect(() => {
+    if (open) setUntil(new Date(Date.now() + ONE_HOUR_MS));
+  }, [open]);
+
+  const formattedDate = useFormattedTimestamp(
+    isValidDate(until) ? Math.floor(until.getTime() / 1000) : 0,
+    t("time.formattedTimestampMonthDayYear.24hour", { ns: "common" }),
+    config?.ui.timezone,
+  );
+
+  const isFuture = isValidDate(until) && until.getTime() > Date.now();
+
+  const handleApply = () => {
+    if (!isFuture) return;
+    onConfirm(Math.ceil((until.getTime() - Date.now()) / 60_000));
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t("notification.customSuspension.title")}</DialogTitle>
+          <DialogDescription>
+            {t("notification.customSuspension.description")}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-2">
+          <Label>{t("notification.customSuspension.untilLabel")}</Label>
+          <div className="flex items-center gap-2 rounded-lg bg-secondary p-2 text-secondary-foreground">
+            <FaCalendarAlt />
+            <Popover open={calendarOpen} onOpenChange={setCalendarOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  className={`text-primary ${isDesktop ? "" : "text-xs"}`}
+                  variant={calendarOpen ? "select" : "default"}
+                  size="sm"
+                >
+                  {isValidDate(until) ? formattedDate : "—"}
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent
+                className="flex flex-col items-center"
+                disablePortal
+              >
+                <TimezoneAwareCalendar
+                  timezone={config?.ui.timezone}
+                  selectedDay={isValidDate(until) ? until : undefined}
+                  disabled={{
+                    before: new Date(new Date().setHours(0, 0, 0, 0)),
+                  }}
+                  onSelect={(day) => {
+                    if (!day) return;
+                    const next = new Date(day);
+                    const carry = isValidDate(until) ? until : new Date();
+                    next.setHours(
+                      carry.getHours(),
+                      carry.getMinutes(),
+                      carry.getSeconds(),
+                      0,
+                    );
+                    setUntil(next);
+                    setCalendarOpen(false);
+                  }}
+                />
+              </PopoverContent>
+            </Popover>
+            <input
+              className="text-md border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+              aria-label={t("notification.customSuspension.untilLabel")}
+              type="time"
+              value={
+                isValidDate(until)
+                  ? `${pad(until.getHours())}:${pad(until.getMinutes())}`
+                  : ""
+              }
+              step="60"
+              onChange={(e) => {
+                const [h, m] = e.target.value.split(":");
+                const hh = Number.parseInt(h ?? "", 10);
+                const mm = Number.parseInt(m ?? "", 10);
+                if (Number.isNaN(hh) || Number.isNaN(mm)) return;
+                const base = isValidDate(until) ? until : new Date();
+                const next = new Date(base);
+                next.setHours(hh, mm, 0, 0);
+                setUntil(next);
+              }}
+            />
+          </div>
+          {!isFuture && (
+            <p className="text-sm text-danger">
+              {t("notification.customSuspension.invalidTime")}
+            </p>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button type="button" onClick={() => onOpenChange(false)}>
+            {t("button.cancel", { ns: "common" })}
+          </Button>
+          <Button
+            variant="select"
+            type="button"
+            disabled={!isFuture}
+            onClick={handleApply}
+          >
+            {t("button.apply", { ns: "common" })}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}