Review changes

2026-10-24 07:24:42 +03:00 · 2026-05-23 21:32:02 +03:00
parent 263554a5f6
commit df40d9e2b5
6 changed files with 137 additions and 218 deletions
@@ -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) {
@@ -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;
-    setTab("duration");
-    setHours(1);
-    setMinutes(0);
-    setUntil(new Date(Date.now() + ONE_HOUR_MS));
+    if (open) setUntil(new Date(Date.now() + ONE_HOUR_MS));
  }, [open]);

-  const totalMinutes = useMemo(() => {
-    if (tab === "duration") {
-      return Math.max(0, Math.floor(hours) * 60 + Math.floor(minutes));
-    }
-    if (!isValidDate(until)) return 0;
-    return Math.ceil((until.getTime() - Date.now()) / 60_000);
-  }, [hours, minutes, tab, until]);
+  const formattedDate = useFormattedTimestamp(
+    isValidDate(until) ? Math.floor(until.getTime() / 1000) : 0,
+    t("time.formattedTimestampMonthDayYear.24hour", { ns: "common" }),
+    config?.ui.timezone,
+  );

-  const canApply = useMemo(() => totalMinutes > 0, [totalMinutes]);
+  const isFuture = isValidDate(until) && until.getTime() > Date.now();

-  const handleApply = useCallback(() => {
-    if (!canApply) return;
-    onConfirm(totalMinutes);
+  const handleApply = () => {
+    if (!isFuture) return;
+    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)}>
-          <TabsList className="grid w-full grid-cols-2">
-            <TabsTrigger value="duration">
-              {t("notification.customSuspension.tabDuration")}
-            </TabsTrigger>
-            <TabsTrigger value="untilTime">
-              {t("notification.customSuspension.tabUntilTime")}
-            </TabsTrigger>
-          </TabsList>
-
-          <TabsContent value="duration" className="pt-4">
-            <div className="flex gap-4">
-              <div className="flex flex-col gap-1">
-                <Label htmlFor="suspend-hours">
-                  {t("notification.customSuspension.hours")}
-                </Label>
-                <Input
-                  id="suspend-hours"
-                  type="number"
-                  min={0}
-                  max={999}
-                  value={hours}
-                  onChange={(e) => setHours(parsePositive(e.target.value))}
-                />
-              </div>
-              <div className="flex flex-col gap-1">
-                <Label htmlFor="suspend-minutes">
-                  {t("notification.customSuspension.minutes")}
-                </Label>
-                <Input
-                  id="suspend-minutes"
-                  type="number"
-                  min={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);
+        <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);
                  }}
                />
-              </div>
-              {!canApply && (
-                <p className="text-sm text-danger">
-                  {t("notification.customSuspension.invalidTime")}
-                </p>
-              )}
-            </div>
-          </TabsContent>
-        </Tabs>
+              </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("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>