Review changes

web/public/locales/en/common.json

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

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

@@ -1083,20 +1083,14 @@
       "1hour": "Suspend for 1 hour",
       "12hours": "Suspend for 12 hours",
       "24hours": "Suspend for 24 hours",
-      "custom": "Suspend for custom time\u2026",
+      "custom": "Suspend until...",
       "untilRestart": "Suspend until restart"
     },
     "customSuspension": {
       "title": "Custom suspension time",
-      "description": "Choose how long notifications should stay suspended for this camera.",
+      "description": "Suspend notifications for this camera until the selected time.",
-      "tabDuration": "Duration",
-      "tabUntilTime": "Until time",
-      "hours": "Hours",
-      "minutes": "Minutes",
       "untilLabel": "Suspend until",
-      "invalidTime": "Pick a time in the future.",
+      "invalidTime": "Pick a time in the future."
-      "apply": "Apply",
-      "cancel": "Cancel"
     },
     "cancelSuspension": "Cancel Suspension",
     "toast": {

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

@@ -740,16 +740,8 @@ export function CameraNotificationSwitch({
   }, [notificationSuspendUntil, notificationState]);
 
   const [customDialogOpen, setCustomDialogOpen] = useState(false);
-  // Doesn't actually represent the state of the Select
-  // Workaround for CustomSuspensionDialog (explained below at setSelectValue call site).
-  const [selectValue, setSelectValue] = useState<string>("");
 
   const handleSuspend = (duration: string) => {
-    if (duration === "custom") {
-      setSelectValue("custom");
-      setCustomDialogOpen(true);
-      return;
-    }
     setIsSuspended(true);
     if (duration == "off") {
       sendNotification("OFF");
@@ -822,37 +814,41 @@ export function CameraNotificationSwitch({
       </div>
 
       {!isSuspended ? (
-        <Select value={selectValue} onValueChange={handleSuspend}>
+        <div className="flex items-center gap-2">
-          <SelectTrigger className="w-auto">
+          <Select onValueChange={handleSuspend}>
-            <SelectValue placeholder={t("notification.suspendTime.suspend")} />
+            <SelectTrigger className="w-auto">
-          </SelectTrigger>
+              <SelectValue
-          <SelectContent>
+                placeholder={t("notification.suspendTime.suspend")}
-            <SelectItem value="5">
+              />
-              {t("notification.suspendTime.5minutes")}
+            </SelectTrigger>
-            </SelectItem>
+            <SelectContent>
-            <SelectItem value="10">
+              <SelectItem value="5">
-              {t("notification.suspendTime.10minutes")}
+                {t("notification.suspendTime.5minutes")}
-            </SelectItem>
+              </SelectItem>
-            <SelectItem value="30">
+              <SelectItem value="10">
-              {t("notification.suspendTime.30minutes")}
+                {t("notification.suspendTime.10minutes")}
-            </SelectItem>
+              </SelectItem>
-            <SelectItem value="60">
+              <SelectItem value="30">
-              {t("notification.suspendTime.1hour")}
+                {t("notification.suspendTime.30minutes")}
-            </SelectItem>
+              </SelectItem>
-            <SelectItem value="840">
+              <SelectItem value="60">
-              {t("notification.suspendTime.12hours")}
+                {t("notification.suspendTime.1hour")}
-            </SelectItem>
+              </SelectItem>
-            <SelectItem value="1440">
+              <SelectItem value="840">
-              {t("notification.suspendTime.24hours")}
+                {t("notification.suspendTime.12hours")}
-            </SelectItem>
+              </SelectItem>
-            <SelectItem value="custom">
+              <SelectItem value="1440">
-              {t("notification.suspendTime.custom")}
+                {t("notification.suspendTime.24hours")}
-            </SelectItem>
+              </SelectItem>
-            <SelectItem value="off">
+              <SelectItem value="off">
-              {t("notification.suspendTime.untilRestart")}
+                {t("notification.suspendTime.untilRestart")}
-            </SelectItem>
+              </SelectItem>
-          </SelectContent>
+            </SelectContent>
-        </Select>
+          </Select>
+          <Button size="sm" onClick={() => setCustomDialogOpen(true)}>
+            {t("notification.suspendTime.custom")}
+          </Button>
+        </div>
       ) : (
         <Button
           variant="destructive"
@@ -865,14 +861,7 @@ export function CameraNotificationSwitch({
 
       <CustomSuspensionDialog
         open={customDialogOpen}
-        onOpenChange={(open) => {
+        onOpenChange={setCustomDialogOpen}
-          setCustomDialogOpen(open);
-          // Radix treats `undefined` as "uncontrolled", which keeps the last
-          // internal selection. This results in an option "Suspend for custom time..." still
-          // being selected if the CustomSuspensionDialog is closed without applying the suspension
-          // So we explicitly set "" on CustomSuspensionDialog closure
-          if (!open) setSelectValue("");
-        }}
         onConfirm={handleCustomSuspend}
       />
     </div>

web/src/components/menu/LiveContextMenu.tsx

@@ -242,10 +242,6 @@ export default function LiveContextMenu({
   const [customDialogOpen, setCustomDialogOpen] = useState(false);
 
   const handleSuspend = (duration: string) => {
-    if (duration === "custom") {
-      setCustomDialogOpen(true);
-      return;
-    }
     if (duration === "off") {
       sendNotification("OFF");
     } else {
@@ -545,7 +541,7 @@ export default function LiveContextMenu({
                               disabled={!isEnabled}
                               onClick={
                                 isEnabled
-                                  ? () => handleSuspend("custom")
+                                  ? () => setCustomDialogOpen(true)
                                   : undefined
                               }
                             >

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,11 +162,13 @@ type TimezoneAwareCalendarProps = {
   timezone?: string;
   selectedDay?: Date;
   onSelect: (day?: Date) => void;
+  disabled?: ComponentProps<typeof Calendar>["disabled"];
 };
 export function TimezoneAwareCalendar({
   timezone,
   selectedDay,
   onSelect,
+  disabled,
 }: TimezoneAwareCalendarProps) {
   const [weekStartsOn] = useUserPersistence("weekStartsOn", 0);
 
@@ -169,7 +177,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) {
@@ -187,6 +195,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

@@ -1,7 +1,8 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+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,
@@ -11,15 +12,15 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Label } from "@/components/ui/label";
-import { Calendar } from "@/components/ui/calendar";
+import { TimezoneAwareCalendar } from "@/components/overlay/ReviewActivityCalendar";
+import { FrigateConfig } from "@/types/frigateConfig";
+import { useFormattedTimestamp } from "@/hooks/use-date-utils";
 
 type CustomSuspensionDialogProps = {
   open: boolean;
@@ -37,53 +38,36 @@ function isValidDate(d: Date): boolean {
   return !Number.isNaN(d.getTime());
 }
 
-function parsePositive(value: string): number {
-  const n = Number.parseInt(value, 10);
-  if (Number.isNaN(n)) return 0;
-  return Math.max(0, n);
-}
-
-type Tabs = "duration" | "untilTime";
-
 export default function CustomSuspensionDialog({
   open,
   onOpenChange,
   onConfirm,
 }: CustomSuspensionDialogProps) {
   const { t } = useTranslation(["views/settings"]);
+  const { data: config } = useSWR<FrigateConfig>("config");
 
-  const [tab, setTab] = useState<Tabs>("duration");
-  const [hours, setHours] = useState<number>(1);
-  const [minutes, setMinutes] = useState<number>(0);
   const [until, setUntil] = useState<Date>(
     () => new Date(Date.now() + ONE_HOUR_MS),
   );
   const [calendarOpen, setCalendarOpen] = useState(false);
 
-  // Reset to defaults whenever the dialog re-opens.
   useEffect(() => {
-    if (!open) return;
+    if (open) setUntil(new Date(Date.now() + ONE_HOUR_MS));
-    setTab("duration");
-    setHours(1);
-    setMinutes(0);
-    setUntil(new Date(Date.now() + ONE_HOUR_MS));
   }, [open]);
 
-  const totalMinutes = useMemo(() => {
+  const formattedDate = useFormattedTimestamp(
-    if (tab === "duration") {
+    isValidDate(until) ? Math.floor(until.getTime() / 1000) : 0,
-      return Math.max(0, Math.floor(hours) * 60 + Math.floor(minutes));
+    t("time.formattedTimestampMonthDayYear.24hour", { ns: "common" }),
-    }
+    config?.ui.timezone,
-    if (!isValidDate(until)) return 0;
+  );
-    return Math.ceil((until.getTime() - Date.now()) / 60_000);
-  }, [hours, minutes, tab, until]);
 
-  const canApply = useMemo(() => totalMinutes > 0, [totalMinutes]);
+  const isFuture = isValidDate(until) && until.getTime() > Date.now();
 
-  const handleApply = useCallback(() => {
+  const handleApply = () => {
-    if (!canApply) return;
+    if (!isFuture) return;
-    onConfirm(totalMinutes);
+    onConfirm(Math.ceil((until.getTime() - Date.now()) / 60_000));
     onOpenChange(false);
-  }, [canApply, onConfirm, onOpenChange, totalMinutes]);
+  };
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -95,139 +79,86 @@ export default function CustomSuspensionDialog({
           </DialogDescription>
         </DialogHeader>
 
-        <Tabs value={tab} onValueChange={(v) => setTab(v as Tabs)}>
+        <div className="flex flex-col gap-2">
-          <TabsList className="grid w-full grid-cols-2">
+          <Label>{t("notification.customSuspension.untilLabel")}</Label>
-            <TabsTrigger value="duration">
+          <div className="flex items-center gap-2 rounded-lg bg-secondary p-2 text-secondary-foreground">
-              {t("notification.customSuspension.tabDuration")}
+            <FaCalendarAlt />
-            </TabsTrigger>
+            <Popover open={calendarOpen} onOpenChange={setCalendarOpen}>
-            <TabsTrigger value="untilTime">
+              <PopoverTrigger asChild>
-              {t("notification.customSuspension.tabUntilTime")}
+                <Button
-            </TabsTrigger>
+                  className={`text-primary ${isDesktop ? "" : "text-xs"}`}
-          </TabsList>
+                  variant={calendarOpen ? "select" : "default"}
-
+                  size="sm"
-          <TabsContent value="duration" className="pt-4">
+                >
-            <div className="flex gap-4">
+                  {isValidDate(until) ? formattedDate : "—"}
-              <div className="flex flex-col gap-1">
+                </Button>
-                <Label htmlFor="suspend-hours">
+              </PopoverTrigger>
-                  {t("notification.customSuspension.hours")}
+              <PopoverContent
-                </Label>
+                className="flex flex-col items-center"
-                <Input
+                disablePortal
-                  id="suspend-hours"
+              >
-                  type="number"
+                <TimezoneAwareCalendar
-                  min={0}
+                  timezone={config?.ui.timezone}
-                  max={999}
+                  selectedDay={isValidDate(until) ? until : undefined}
-                  value={hours}
+                  disabled={{
-                  onChange={(e) => setHours(parsePositive(e.target.value))}
+                    before: new Date(new Date().setHours(0, 0, 0, 0)),
-                />
+                  }}
-              </div>
+                  onSelect={(day) => {
-              <div className="flex flex-col gap-1">
+                    if (!day) return;
-                <Label htmlFor="suspend-minutes">
+                    const next = new Date(day);
-                  {t("notification.customSuspension.minutes")}
+                    const carry = isValidDate(until) ? until : new Date();
-                </Label>
+                    next.setHours(
-                <Input
+                      carry.getHours(),
-                  id="suspend-minutes"
+                      carry.getMinutes(),
-                  type="number"
+                      carry.getSeconds(),
-                  min={0}
+                      0,
-                  max={59}
+                    );
-                  value={minutes}
-                  onChange={(e) => setMinutes(parsePositive(e.target.value))}
-                />
-              </div>
-            </div>
-          </TabsContent>
-
-          <TabsContent value="untilTime" className="pt-4">
-            <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)
-                        ? until.toLocaleDateString(undefined, {
-                            year: "numeric",
-                            month: "short",
-                            day: "numeric",
-                          })
-                        : "—"}
-                    </Button>
-                  </PopoverTrigger>
-                  <PopoverContent
-                    className="flex flex-col items-center"
-                    disablePortal
-                  >
-                    <Calendar
-                      mode="single"
-                      selected={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);
-                        // If `until` is invalid, don't propagate
-                        // NaN hours/minutes into the new date - fall back to now.
-                        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) => {
-                    // Ignore anything that doesn't parse to a real HH:MM pair.
-                    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);
+                    setCalendarOpen(false);
                   }}
                 />
-              </div>
+              </PopoverContent>
-              {!canApply && (
+            </Popover>
-                <p className="text-sm text-danger">
+            <input
-                  {t("notification.customSuspension.invalidTime")}
+              className="text-md border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
-                </p>
+              aria-label={t("notification.customSuspension.untilLabel")}
-              )}
+              type="time"
-            </div>
+              value={
-          </TabsContent>
+                isValidDate(until)
-        </Tabs>
+                  ? `${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("notification.customSuspension.cancel")}
+            {t("button.cancel", { ns: "common" })}
           </Button>
           <Button
             variant="select"
             type="button"
-            disabled={!canApply}
+            disabled={!isFuture}
             onClick={handleApply}
           >
-            {t("notification.customSuspension.apply")}
+            {t("button.apply", { ns: "common" })}
           </Button>
         </DialogFooter>
       </DialogContent>