Fix browser time format handling (#22694)

* implement hook to return resolved "24hour" | "12hour" string

delegate to existing use24HourTime(), which correctly detects the browser's locale preference via Intl.DateTimeFormat

* update frontend to use use24HourTime(config) or useTimeFormat(config) instead of directly comparing config.ui.time_format

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

@@ -43,6 +43,7 @@ import {
   SelectItem,
 } from "@/components/ui/select";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
+import { use24HourTime } from "@/hooks/use-date-utils";
 import FilterSwitch from "@/components/filter/FilterSwitch";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Trans, useTranslation } from "react-i18next";
@@ -752,6 +753,7 @@ export function CameraNotificationSwitch({
   };
 
   const locale = useDateLocale();
+  const is24Hour = use24HourTime(config);
 
   const formatSuspendedUntil = (timestamp: string) => {
     if (timestamp === "0") return t("time.untilForRestart", { ns: "common" });
@@ -760,14 +762,13 @@ export function CameraNotificationSwitch({
       time_style: "medium",
       date_style: "medium",
       timezone: config?.ui.timezone,
-      date_format:
-        config?.ui.time_format == "24hour"
-          ? t("time.formattedTimestampMonthDayHourMinute.24hour", {
-              ns: "common",
-            })
-          : t("time.formattedTimestampMonthDayHourMinute.12hour", {
-              ns: "common",
-            }),
+      date_format: is24Hour
+        ? t("time.formattedTimestampMonthDayHourMinute.24hour", {
+            ns: "common",
+          })
+        : t("time.formattedTimestampMonthDayHourMinute.12hour", {
+            ns: "common",
+          }),
       locale: locale,
     });
     return t("time.untilForTime", { ns: "common", time });