Fix i18n plural for selected review count (#17864 )

* Fix i18n plural for selected review count * use selected count in explore
Add missing i18n keys (#17861 )
2026-05-03 06:50:58 +00:00 · 2025-04-22 22:01:46 -05:00 · 2025-04-22 19:46:05 -06:00 · 2025-04-22 16:21:09 -06:00 · 2025-04-22 15:50:21 -06:00
68 changed files with 479 additions and 255 deletions
--- a/web/package-lock.json
+++ b/web/package-lock.json
@ -38,6 +38,7 @@
        "cmdk": "^1.0.0",
        "copy-to-clipboard": "^3.3.3",
        "date-fns": "^3.6.0",
+        "date-fns-tz": "^3.2.0",
        "embla-carousel-react": "^8.2.0",
        "framer-motion": "^11.5.4",
        "hls.js": "^1.5.20",
@ -4399,6 +4400,15 @@
        "url": "https://github.com/sponsors/kossnocorp"
      }
    },
+    "node_modules/date-fns-tz": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-3.2.0.tgz",
+      "integrity": "sha512-sg8HqoTEulcbbbVXeg84u5UnlsQa8GS5QXMqjjYIhS4abEVVKIUwe0/l/UhrZdKaL/W5eWZNlbTeEIiOXTcsBQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "date-fns": "^3.0.0 || ^4.0.0"
+      }
+    },
    "node_modules/debug": {
      "version": "4.4.0",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
--- a/web/package.json
+++ b/web/package.json
@ -44,6 +44,7 @@
    "cmdk": "^1.0.0",
    "copy-to-clipboard": "^3.3.3",
    "date-fns": "^3.6.0",
+    "date-fns-tz": "^3.2.0",
    "embla-carousel-react": "^8.2.0",
    "framer-motion": "^11.5.4",
    "hls.js": "^1.5.20",
--- a/web/public/locales/en/common.json
+++ b/web/public/locales/en/common.json
@ -41,22 +41,34 @@
    "second_one": "{{time}} second",
    "second_other": "{{time}} seconds",
    "formattedTimestamp": {
-      "12hour": "%b %-d, %I:%M:%S %p",
-      "24hour": "%b %-d, %H:%M:%S"
+      "12hour": "MMM d, h:mm:ss aaa",
+      "24hour": "MMM d, HH:mm:ss"
    },
    "formattedTimestamp2": {
-      "12hour": "%m/%d %I:%M:%S%P",
-      "24hour": "%d %b %H:%M:%S"
+      "12hour": "MM/dd h:mm:ssa",
+      "24hour": "d MMM HH:mm:ss"
    },
-    "formattedTimestampExcludeSeconds": {
-      "12hour": "%b %-d, %I:%M %p",
-      "24hour": "%b %-d, %H:%M"
+    "formattedTimestampHourMinute": {
+      "12hour": "h:mm aaa",
+      "24hour": "HH:mm"
    },
-    "formattedTimestampWithYear": {
-      "12hour": "%b %-d %Y, %I:%M %p",
-      "24hour": "%b %-d %Y, %H:%M"
+    "formattedTimestampHourMinuteSecond": {
+      "12hour": "h:mm:ss aaa",
+      "24hour": "HH:mm:ss"
    },
-    "formattedTimestampOnlyMonthAndDay": "%b %-d"
+    "formattedTimestampMonthDayHourMinute": {
+      "12hour": "MMM d, h:mm aaa",
+      "24hour": "MMM d, HH:mm"
+    },
+    "formattedTimestampMonthDayYearHourMinute": {
+      "12hour": "MMM d yyyy, h:mm aaa",
+      "24hour": "MMM d yyyy, HH:mm"
+    },
+    "formattedTimestampMonthDay": "MMM d",
+    "formattedTimestampFilename": {
+      "12hour": "MM-dd-yy-h-mm-ss-a",
+      "24hour": "MM-dd-yy-HH-mm-ss"
+    }
  },
  "unit": {
    "speed": {
--- a/web/public/locales/en/views/events.json
+++ b/web/public/locales/en/views/events.json
@ -31,5 +31,6 @@
    "label": "View new review items",
    "button": "New Items To Review"
  },
+  "selected": "{{count}} selected",
  "camera": "Camera"
 }
--- a/web/public/locales/en/views/settings.json
+++ b/web/public/locales/en/views/settings.json
@ -136,6 +136,7 @@
      "desc": "Frigate can recognize license plates on vehicles and automatically add the detected characters to the recognized_license_plate field or a known name as a sub_label to objects that are of type car. A common use case may be to read the license plates of cars pulling into a driveway or cars passing by on a street.",
      "readTheDocumentation": "Read the Documentation"
    },
+    "restart_required": "Restart required (Classification settings changed)",
    "toast": {
      "success": "Classification settings have been saved. Restart Frigate to apply your changes.",
      "error": "Failed to save config changes: {{errorMessage}}"
@ -178,6 +179,7 @@
    "filter": {
      "all": "All Masks and Zones"
    },
+    "restart_required": "Restart required (masks/zones changed)",
    "toast": {
      "success": {
        "copyCoordinates": "Copied coordinates for {{polyName}} to clipboard."
@ -583,6 +585,7 @@
      "loadingAvailableModels": "Loading available models...",
      "modelSelect": "Your available models on Frigate+ can be selected here. Note that only models compatible with your current detector configuration can be selected."
    },
+    "restart_required": "Restart required (Frigate+ model changed)",
    "toast": {
      "success": "Frigate+ settings have been saved. Restart Frigate to apply changes.",
      "error": "Failed to save config changes: {{errorMessage}}"
--- a/web/public/locales/en/views/system.json
+++ b/web/public/locales/en/views/system.json
@ -153,11 +153,17 @@
    "title": "Enrichments",
    "infPerSecond": "Inferences Per Second",
    "embeddings": {
+      "image_embedding": "Image Embedding",
+      "text_embedding": "Text Embedding",
+      "face_recognition": "Face Recognition",
+      "plate_recognition": "Plate Recognition",
      "image_embedding_speed": "Image Embedding Speed",
      "face_embedding_speed": "Face Embedding Speed",
      "face_recognition_speed": "Face Recognition Speed",
      "plate_recognition_speed": "Plate Recognition Speed",
-      "text_embedding_speed": "Text Embedding Speed"
+      "text_embedding_speed": "Text Embedding Speed",
+      "yolov9_plate_detection_speed": "YOLOv9 Plate Detection Speed",
+      "yolov9_plate_detection": "YOLOv9 Plate Detection"
    }
  }
 }
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@ -6,12 +6,13 @@ import Sidebar from "@/components/navigation/Sidebar";
 import { isDesktop, isMobile } from "react-device-detect";
 import Statusbar from "./components/Statusbar";
 import Bottombar from "./components/navigation/Bottombar";
-import { Suspense, lazy } from "react";
+import React, { Suspense, lazy } from "react";
 import { Redirect } from "./components/navigation/Redirect";
 import { cn } from "./lib/utils";
 import { isPWA } from "./utils/isPWA";
 import ProtectedRoute from "@/components/auth/ProtectedRoute";
 import { AuthProvider } from "@/context/auth-context";
+import { useTranslation } from "react-i18next";

 const Live = lazy(() => import("@/pages/Live"));
 const Events = lazy(() => import("@/pages/Events"));
@ -26,6 +27,13 @@ const Logs = lazy(() => import("@/pages/Logs"));
 const AccessDenied = lazy(() => import("@/pages/AccessDenied"));

 function App() {
+  const { i18n } = useTranslation();
+
+  // Set the lang attribute on the html element when language changes
+  React.useEffect(() => {
+    document.documentElement.lang = i18n.language;
+  }, [i18n.language]);
+
  return (
    <Providers>
      <AuthProvider>
--- a/web/src/components/button/DownloadVideoButton.tsx
+++ b/web/src/components/button/DownloadVideoButton.tsx
@ -4,6 +4,10 @@ import { FaDownload } from "react-icons/fa";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import { cn } from "@/lib/utils";
 import { useTranslation } from "react-i18next";
+import useSWR from "swr";
+import { FrigateConfig } from "@/types/frigateConfig";
+import { useDateLocale } from "@/hooks/use-date-locale";
+import { useMemo } from "react";

 type DownloadVideoButtonProps = {
  source: string;
@ -19,10 +23,17 @@ export function DownloadVideoButton({
  className,
 }: DownloadVideoButtonProps) {
  const { t } = useTranslation(["components/input"]);
+  const { data: config } = useSWR<FrigateConfig>("config");
+  const locale = useDateLocale();
+
+  const timeFormat = config?.ui.time_format === "24hour" ? "24hour" : "12hour";
+  const format = useMemo(() => {
+    return t(`time.formattedTimestampFilename.${timeFormat}`, { ns: "common" });
+  }, [t, timeFormat]);
+
  const formattedDate = formatUnixTimestampToDateTime(startTime, {
-    strftime_fmt: "%D-%T",
-    time_style: "medium",
-    date_style: "medium",
+    date_format: format,
+    locale,
  });
  const filename = `${camera}_${formattedDate}.mp4`;

--- a/web/src/components/card/ExportCard.tsx
+++ b/web/src/components/card/ExportCard.tsx
@ -222,7 +222,7 @@ export default function ExportCard({
          <Skeleton className="absolute inset-0 aspect-video rounded-lg md:rounded-2xl" />
        )}
        <div className="rounded-b-l pointer-events-none absolute inset-x-0 bottom-0 h-[20%] rounded-lg bg-gradient-to-t from-black/60 to-transparent md:rounded-2xl">
-          <div className="mx-3 flex h-full items-end justify-between pb-1 text-sm capitalize text-white">
+          <div className="mx-3 flex h-full items-end justify-between pb-1 text-sm text-white smart-capitalize">
            {exportedRecording.name.replaceAll("_", " ")}
          </div>
        </div>
--- a/web/src/components/card/ReviewCard.tsx
+++ b/web/src/components/card/ReviewCard.tsx
@ -52,7 +52,9 @@ export default function ReviewCard({
  const [imgRef, imgLoaded, onImgLoad] = useImageLoaded();
  const formattedDate = useFormattedTimestamp(
    event.start_time,
-    config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p",
+    config?.ui.time_format == "24hour"
+      ? t("time.formattedTimestampHourMinute.24hour", { ns: "common" })
+      : t("time.formattedTimestampHourMinute.12hour", { ns: "common" }),
    config?.ui.timezone,
  );
  const isSelected = useMemo(
@ -173,7 +175,7 @@ export default function ReviewCard({
              <div className="font-extra-light text-xs">{formattedDate}</div>
            </div>
          </TooltipTrigger>
-          <TooltipContent className="capitalize">
+          <TooltipContent className="smart-capitalize">
            {[
              ...new Set([
                ...(event.data.objects || []),
--- a/web/src/components/card/SearchThumbnail.tsx
+++ b/web/src/components/card/SearchThumbnail.tsx
@ -146,7 +146,7 @@ export default function SearchThumbnail({
              </TooltipTrigger>
            </div>
            <TooltipPortal>
-              <TooltipContent className="capitalize">
+              <TooltipContent className="smart-capitalize">
                {[searchResult.sub_label ?? objectLabel]
                  .filter(
                    (item) => item !== undefined && !item.includes("-verified"),
--- a/web/src/components/card/SearchThumbnailFooter.tsx
+++ b/web/src/components/card/SearchThumbnailFooter.tsx
@ -32,8 +32,8 @@ export default function SearchThumbnailFooter({
  const formattedDate = useFormattedTimestamp(
    searchResult.start_time,
    config?.ui.time_format == "24hour"
-      ? t("time.formattedTimestampExcludeSeconds.24hour", { ns: "common" })
-      : t("time.formattedTimestampExcludeSeconds.12hour", { ns: "common" }),
+      ? t("time.formattedTimestampMonthDayHourMinute.24hour", { ns: "common" })
+      : t("time.formattedTimestampMonthDayHourMinute.12hour", { ns: "common" }),
    config?.ui.timezone,
  );

--- a/web/src/components/filter/CalendarFilterButton.tsx
+++ b/web/src/components/filter/CalendarFilterButton.tsx
@ -32,7 +32,7 @@ export default function CalendarFilterButton({
  const [open, setOpen] = useState(false);
  const selectedDate = useFormattedTimestamp(
    day == undefined ? 0 : day?.getTime() / 1000 + 1,
-    t("time.formattedTimestampOnlyMonthAndDay", { ns: "common" }),
+    t("time.formattedTimestampMonthDay", { ns: "common" }),
  );

  const trigger = (
@ -103,7 +103,7 @@ export function CalendarRangeFilterButton({
  const selectedDate = useFormattedRange(
    range?.from == undefined ? 0 : range.from.getTime() / 1000 + 1,
    range?.to == undefined ? 0 : range.to.getTime() / 1000 - 1,
-    t("time.formattedTimestampOnlyMonthAndDay", { ns: "common" }),
+    t("time.formattedTimestampMonthDay", { ns: "common" }),
  );

  const trigger = (
--- a/web/src/components/filter/CameraGroupSelector.tsx
+++ b/web/src/components/filter/CameraGroupSelector.tsx
@ -196,7 +196,7 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
                  </Button>
                </TooltipTrigger>
                <TooltipPortal>
-                  <TooltipContent className="capitalize" side="right">
+                  <TooltipContent className="smart-capitalize" side="right">
                    {name}
                  </TooltipContent>
                </TooltipPortal>
@ -847,7 +847,7 @@ export function CameraGroupEdit({
                  <FormControl key={camera}>
                    <div className="flex items-center justify-between gap-1">
                      <Label
-                        className="mx-2 w-full cursor-pointer capitalize text-primary"
+                        className="mx-2 w-full cursor-pointer text-primary smart-capitalize"
                        htmlFor={camera.replaceAll("_", " ")}
                      >
                        {camera.replaceAll("_", " ")}
--- a/web/src/components/filter/CamerasFilterButton.tsx
+++ b/web/src/components/filter/CamerasFilterButton.tsx
@ -62,7 +62,7 @@ export function CamerasFilterButton({

  const trigger = (
    <Button
-      className="flex items-center gap-2 capitalize"
+      className="flex items-center gap-2 smart-capitalize"
      aria-label={t("cameras.label")}
      variant={selectedCameras?.length == undefined ? "default" : "select"}
      size="sm"
@ -172,7 +172,7 @@ export function CamerasFilterContent({
              return (
                <div
                  key={name}
-                  className="w-full cursor-pointer rounded-lg px-2 py-0.5 text-sm capitalize text-primary hover:bg-muted"
+                  className="w-full cursor-pointer rounded-lg px-2 py-0.5 text-sm text-primary smart-capitalize hover:bg-muted"
                  onClick={() => {
                    setCurrentCameras([...conf.cameras]);
                  }}
--- a/web/src/components/filter/FilterSwitch.tsx
+++ b/web/src/components/filter/FilterSwitch.tsx
@ -16,7 +16,7 @@ export default function FilterSwitch({
  return (
    <div className="flex items-center justify-between gap-1">
      <Label
-        className={`mx-2 w-full cursor-pointer capitalize text-primary ${disabled ? "text-secondary-foreground" : ""}`}
+        className={`mx-2 w-full cursor-pointer text-primary smart-capitalize ${disabled ? "text-secondary-foreground" : ""}`}
        htmlFor={label}
      >
        {label}
--- a/web/src/components/filter/LogSettingsButton.tsx
+++ b/web/src/components/filter/LogSettingsButton.tsx
@ -126,7 +126,7 @@ export function GeneralFilterContent({
          {["debug", "info", "warning", "error"].map((item) => (
            <div className="flex items-center justify-between" key={item}>
              <Label
-                className="mx-2 w-full cursor-pointer capitalize text-primary"
+                className="mx-2 w-full cursor-pointer text-primary smart-capitalize"
                htmlFor={item}
              >
                {item.replaceAll("_", " ")}
--- a/web/src/components/filter/ReviewActionGroup.tsx
+++ b/web/src/components/filter/ReviewActionGroup.tsx
@ -95,7 +95,12 @@ export default function ReviewActionGroup({

      <div className="absolute inset-x-2 inset-y-0 flex items-center justify-between gap-2 bg-background py-2 md:left-auto">
        <div className="mx-1 flex items-center justify-center text-sm text-muted-foreground">
-          <div className="p-1">{`${selectedReviews.length} selected`}</div>
+          <div className="p-1">
+            {t("selected", {
+              ns: "views/events",
+              count: selectedReviews.length,
+            })}
+          </div>
          <div className="p-1">{"|"}</div>
          <div
            className="cursor-pointer p-2 text-primary hover:rounded-lg hover:bg-secondary"
--- a/web/src/components/filter/ReviewFilterGroup.tsx
+++ b/web/src/components/filter/ReviewFilterGroup.tsx
@ -354,7 +354,7 @@ function GeneralFilterButton({
      variant={
        selectedLabels?.length || selectedZones?.length ? "select" : "default"
      }
-      className="flex items-center gap-2 capitalize"
+      className="flex items-center gap-2 smart-capitalize"
      aria-label={t("filter")}
    >
      <FaFilter
--- a/web/src/components/filter/SearchActionGroup.tsx
+++ b/web/src/components/filter/SearchActionGroup.tsx
@ -108,7 +108,12 @@ export default function SearchActionGroup({

      <div className="absolute inset-x-2 inset-y-0 flex items-center justify-between gap-2 bg-background py-2 md:left-auto">
        <div className="mx-1 flex items-center justify-center text-sm text-muted-foreground">
-          <div className="p-1">{`${selectedObjects.length} selected`}</div>
+          <div className="p-1">
+            {t("selected", {
+              ns: "views/events",
+              count: selectedObjects.length,
+            })}
+          </div>
          <div className="p-1">{"|"}</div>
          <div
            className="cursor-pointer p-2 text-primary hover:rounded-lg hover:bg-secondary"
--- a/web/src/components/filter/SearchFilterGroup.tsx
+++ b/web/src/components/filter/SearchFilterGroup.tsx
@ -285,7 +285,7 @@ function GeneralFilterButton({
    <Button
      size="sm"
      variant={selectedLabels?.length ? "select" : "default"}
-      className="flex items-center gap-2 capitalize"
+      className="flex items-center gap-2 smart-capitalize"
      aria-label={t("labels.label")}
    >
      <MdLabel
@ -457,7 +457,7 @@ function SortTypeButton({
          ? "select"
          : "default"
      }
-      className="flex items-center gap-2 capitalize"
+      className="flex items-center gap-2 smart-capitalize"
      aria-label={t("labels.label")}
    >
      <MdSort
--- a/web/src/components/filter/ZoneMaskFilter.tsx
+++ b/web/src/components/filter/ZoneMaskFilter.tsx
@ -22,7 +22,7 @@ export function ZoneMaskFilterButton({
    <Button
      size="sm"
      variant={selectedZoneMask?.length ? "select" : "default"}
-      className="flex items-center gap-2 capitalize"
+      className="flex items-center gap-2 smart-capitalize"
      aria-label={t("zoneMask.filterBy")}
    >
      <FaFilter
@ -96,7 +96,7 @@ export function GeneralFilterContent({
          {["zone", "motion_mask", "object_mask"].map((item) => (
            <div key={item} className="flex items-center justify-between">
              <Label
-                className="mx-2 w-full cursor-pointer capitalize text-primary"
+                className="mx-2 w-full cursor-pointer text-primary smart-capitalize"
                htmlFor={item}
              >
                {t(
--- a/web/src/components/graph/CombinedStorageGraph.tsx
+++ b/web/src/components/graph/CombinedStorageGraph.tsx
@ -191,7 +191,7 @@ export function CombinedStorageGraph({
          <TableBody>
            {series.map((item) => (
              <TableRow key={item.name}>
-                <TableCell className="flex flex-row items-center gap-2 font-medium capitalize">
+                <TableCell className="flex flex-row items-center gap-2 font-medium smart-capitalize">
                  {" "}
                  <div
                    className="size-3 rounded-md"
--- a/web/src/components/graph/LineGraph.tsx
+++ b/web/src/components/graph/LineGraph.tsx
@ -1,4 +1,5 @@
 import { useTheme } from "@/context/theme-provider";
+import { useDateLocale } from "@/hooks/use-date-locale";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import { useCallback, useEffect, useMemo } from "react";
@ -24,7 +25,7 @@ export function CameraLineGraph({
  updateTimes,
  data,
 }: CameraLineGraphProps) {
-  const { t } = useTranslation(["views/system"]);
+  const { t } = useTranslation(["views/system", "common"]);
  const { data: config } = useSWR<FrigateConfig>("config", {
    revalidateOnFocus: false,
  });
@ -43,18 +44,27 @@ export function CameraLineGraph({

  const { theme, systemTheme } = useTheme();

+  const locale = useDateLocale();
+
+  const timeFormat = config?.ui.time_format === "24hour" ? "24hour" : "12hour";
+  const format = useMemo(() => {
+    return t(`time.formattedTimestampHourMinute.${timeFormat}`, {
+      ns: "common",
+    });
+  }, [t, timeFormat]);
+
  const formatTime = useCallback(
    (val: unknown) => {
      return formatUnixTimestampToDateTime(
        updateTimes[Math.round(val as number)],
        {
          timezone: config?.ui.timezone,
-          strftime_fmt:
-            config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p",
+          date_format: format,
+          locale,
        },
      );
    },
-    [config, updateTimes],
+    [config?.ui.timezone, format, locale, updateTimes],
  );

  const options = useMemo(() => {
@ -170,18 +180,28 @@ export function EventsPerSecondsLineGraph({
    [data],
  );

+  const locale = useDateLocale();
+  const { t } = useTranslation(["common"]);
+
+  const timeFormat = config?.ui.time_format === "24hour" ? "24hour" : "12hour";
+  const format = useMemo(() => {
+    return t(`time.formattedTimestampHourMinute.${timeFormat}`, {
+      ns: "common",
+    });
+  }, [t, timeFormat]);
+
  const formatTime = useCallback(
    (val: unknown) => {
      return formatUnixTimestampToDateTime(
        updateTimes[Math.round(val as number) - 1],
        {
          timezone: config?.ui.timezone,
-          strftime_fmt:
-            config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p",
+          date_format: format,
+          locale,
        },
      );
    },
-    [config, updateTimes],
+    [config?.ui.timezone, format, locale, updateTimes],
  );

  const options = useMemo(() => {
--- a/web/src/components/graph/SystemGraph.tsx
+++ b/web/src/components/graph/SystemGraph.tsx
@ -1,10 +1,12 @@
 import { useTheme } from "@/context/theme-provider";
+import { useDateLocale } from "@/hooks/use-date-locale";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { Threshold } from "@/types/graph";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import { useCallback, useEffect, useMemo } from "react";
 import Chart from "react-apexcharts";
 import { isMobileOnly } from "react-device-detect";
+import { useTranslation } from "react-i18next";
 import useSWR from "swr";

 type ThresholdBarGraphProps = {
@ -45,6 +47,16 @@ export function ThresholdBarGraph({

  const { theme, systemTheme } = useTheme();

+  const locale = useDateLocale();
+  const { t } = useTranslation(["common"]);
+
+  const timeFormat = config?.ui.time_format === "24hour" ? "24hour" : "12hour";
+  const format = useMemo(() => {
+    return t(`time.formattedTimestampHourMinute.${timeFormat}`, {
+      ns: "common",
+    });
+  }, [t, timeFormat]);
+
  const formatTime = useCallback(
    (val: unknown) => {
      const dateIndex = Math.round(val as number);
@ -53,17 +65,16 @@ export function ThresholdBarGraph({
      if (dateIndex < 0) {
        timeOffset = 5 * Math.abs(dateIndex);
      }
-
      return formatUnixTimestampToDateTime(
        updateTimes[Math.max(1, dateIndex) - 1] - timeOffset,
        {
          timezone: config?.ui.timezone,
-          strftime_fmt:
-            config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p",
+          date_format: format,
+          locale,
        },
      );
    },
-    [config, updateTimes],
+    [config?.ui.timezone, format, locale, updateTimes],
  );

  const options = useMemo(() => {
--- a/web/src/components/indicators/Chip.tsx
+++ b/web/src/components/indicators/Chip.tsx
@ -72,7 +72,7 @@ export function LogChip({ severity, onClickSeverity }: LogChipProps) {
  return (
    <div className="min-w-16 lg:min-w-20">
      <span
-        className={`rounded-md px-1 py-[1px] text-xs capitalize ${onClickSeverity ? "cursor-pointer" : ""} ${severityClassName}`}
+        className={`rounded-md px-1 py-[1px] text-xs smart-capitalize ${onClickSeverity ? "cursor-pointer" : ""} ${severityClassName}`}
        onClick={(e) => {
          e.stopPropagation();

--- a/web/src/components/input/InputWithTags.tsx
+++ b/web/src/components/input/InputWithTags.tsx
@ -816,7 +816,7 @@ export default function InputWithTags({
                        .map((value, index) => (
                          <span
                            key={`${filterType}-${index}`}
-                            className="inline-flex items-center whitespace-nowrap rounded-full bg-green-100 px-2 py-0.5 text-sm capitalize text-green-800"
+                            className="inline-flex items-center whitespace-nowrap rounded-full bg-green-100 px-2 py-0.5 text-sm text-green-800 smart-capitalize"
                          >
                            {t("filter.label." + filterType)}:{" "}
                            {filterType === "labels"
@ -838,7 +838,7 @@ export default function InputWithTags({
                    : !(filterType == "event_id" && isSimilaritySearch) && (
                        <span
                          key={filterType}
-                          className="inline-flex items-center whitespace-nowrap rounded-full bg-green-100 px-2 py-0.5 text-sm capitalize text-green-800"
+                          className="inline-flex items-center whitespace-nowrap rounded-full bg-green-100 px-2 py-0.5 text-sm text-green-800 smart-capitalize"
                        >
                          {filterType === "event_id"
                            ? t("trackedObjectId")
--- a/web/src/components/menu/LiveContextMenu.tsx
+++ b/web/src/components/menu/LiveContextMenu.tsx
@ -45,6 +45,7 @@ import {
  useNotificationSuspend,
 } from "@/api/ws";
 import { useTranslation } from "react-i18next";
+import { useDateLocale } from "@/hooks/use-date-locale";

 type LiveContextMenuProps = {
  className?: string;
@ -235,18 +236,25 @@ export default function LiveContextMenu({
    }
  };

+  const locale = useDateLocale();
+
  const formatSuspendedUntil = (timestamp: string) => {
    // Some languages require a change in word order
    if (timestamp === "0") return t("time.untilForRestart", { ns: "common" });

-    const time = formatUnixTimestampToDateTime(Number.parseInt(timestamp), {
+    const time = formatUnixTimestampToDateTime(parseInt(timestamp), {
      time_style: "medium",
      date_style: "medium",
      timezone: config?.ui.timezone,
-      strftime_fmt:
+      date_format:
        config?.ui.time_format == "24hour"
-          ? t("time.formattedTimestampExcludeSeconds.24hour", { ns: "common" })
-          : t("time.formattedTimestampExcludeSeconds.12hour", { ns: "common" }),
+          ? t("time.formattedTimestampMonthDayHourMinute.24hour", {
+              ns: "common",
+            })
+          : t("time.formattedTimestampMonthDayHourMinute.12hour", {
+              ns: "common",
+            }),
+      locale: locale,
    });
    return t("time.untilForTime", { ns: "common", time });
  };
@ -257,7 +265,7 @@ export default function LiveContextMenu({
        <ContextMenuTrigger>{children}</ContextMenuTrigger>
        <ContextMenuContent>
          <div className="flex flex-col items-start gap-1 py-1 pl-2">
-            <div className="text-md capitalize text-primary-variant">
+            <div className="text-md text-primary-variant smart-capitalize">
              {camera.replaceAll("_", " ")}
            </div>
            {preferredLiveMode == "jsmpeg" && isRestreamed && (
--- a/web/src/components/overlay/CameraInfoDialog.tsx
+++ b/web/src/components/overlay/CameraInfoDialog.tsx
@ -83,7 +83,7 @@ export default function CameraInfoDialog({
      >
        <DialogContent>
          <DialogHeader>
-            <DialogTitle className="capitalize">
+            <DialogTitle className="smart-capitalize">
              {t("cameras.info.cameraProbeInfo", {
                camera: camera.name.replaceAll("_", " "),
              })}
--- a/web/src/components/overlay/ExportDialog.tsx
+++ b/web/src/components/overlay/ExportDialog.tsx
@ -288,7 +288,7 @@ export function ExportContent({
                id={opt}
                value={opt}
              />
-              <Label className="cursor-pointer capitalize" htmlFor={opt}>
+              <Label className="cursor-pointer smart-capitalize" htmlFor={opt}>
                {isNaN(parseInt(opt))
                  ? opt == "timeline"
                    ? t("export.time.fromTimeline")
--- a/web/src/components/overlay/FaceSelectionDialog.tsx
+++ b/web/src/components/overlay/FaceSelectionDialog.tsx
@ -91,7 +91,7 @@ export default function FaceSelectionDialog({
              )}
            >
              <SelectorItem
-                className="flex cursor-pointer gap-2 capitalize"
+                className="flex cursor-pointer gap-2 smart-capitalize"
                onClick={() => setNewFace(true)}
              >
                <LuPlus />
@ -100,7 +100,7 @@ export default function FaceSelectionDialog({
              {faceNames.map((faceName) => (
                <SelectorItem
                  key={faceName}
-                  className="flex cursor-pointer gap-2 capitalize"
+                  className="flex cursor-pointer gap-2 smart-capitalize"
                  onClick={() => onTrainAttempt(faceName)}
                >
                  <LuScanFace />
--- a/web/src/components/overlay/MobileCameraDrawer.tsx
+++ b/web/src/components/overlay/MobileCameraDrawer.tsx
@ -26,7 +26,7 @@ export default function MobileCameraDrawer({
    <Drawer open={cameraDrawer} onOpenChange={setCameraDrawer}>
      <DrawerTrigger asChild>
        <Button
-          className="rounded-lg capitalize"
+          className="rounded-lg smart-capitalize"
          aria-label={t("menu.live.cameras.title")}
          size="sm"
        >
@ -38,7 +38,7 @@ export default function MobileCameraDrawer({
          {allCameras.map((cam) => (
            <div
              key={cam}
-              className={`mx-4 w-full py-2 text-center capitalize ${cam == selected ? "rounded-lg bg-secondary" : ""}`}
+              className={`mx-4 w-full py-2 text-center smart-capitalize ${cam == selected ? "rounded-lg bg-secondary" : ""}`}
              onClick={() => {
                onSelectCamera(cam);
                setCameraDrawer(false);
--- a/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
+++ b/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
@ -324,7 +324,7 @@ export default function MobileReviewSettingsDrawer({
      >
        <DrawerTrigger asChild>
          <Button
-            className="rounded-lg capitalize"
+            className="rounded-lg smart-capitalize"
            aria-label={t("filters")}
            variant={
              filter?.labels || filter?.after || filter?.zones
--- a/web/src/components/overlay/MobileTimelineDrawer.tsx
+++ b/web/src/components/overlay/MobileTimelineDrawer.tsx
@ -23,7 +23,7 @@ export default function MobileTimelineDrawer({
    <Drawer open={drawer} onOpenChange={setDrawer}>
      <DrawerTrigger asChild>
        <Button
-          className="rounded-lg capitalize"
+          className="rounded-lg smart-capitalize"
          aria-label="Select timeline or events list"
          size="sm"
        >
@ -32,7 +32,7 @@ export default function MobileTimelineDrawer({
      </DrawerTrigger>
      <DrawerContent className="mx-1 flex max-h-[75dvh] flex-col items-center gap-2 overflow-hidden rounded-t-2xl px-4 pb-4">
        <div
-          className={`mx-4 w-full py-2 text-center capitalize ${selected == "timeline" ? "rounded-lg bg-secondary" : ""}`}
+          className={`mx-4 w-full py-2 text-center smart-capitalize ${selected == "timeline" ? "rounded-lg bg-secondary" : ""}`}
          onClick={() => {
            onSelect("timeline");
            setDrawer(false);
@ -41,7 +41,7 @@ export default function MobileTimelineDrawer({
          Timeline
        </div>
        <div
-          className={`mx-4 w-full py-2 text-center capitalize ${selected == "events" ? "rounded-lg bg-secondary" : ""}`}
+          className={`mx-4 w-full py-2 text-center smart-capitalize ${selected == "events" ? "rounded-lg bg-secondary" : ""}`}
          onClick={() => {
            onSelect("events");
            setDrawer(false);
--- a/web/src/components/overlay/detail/ObjectLifecycle.tsx
+++ b/web/src/components/overlay/detail/ObjectLifecycle.tsx
@ -572,13 +572,13 @@ export default function ObjectLifecycle({
                        </div>
                      </div>
                      <div className="mx-3 text-lg">
-                        <div className="flex flex-row items-center capitalize text-primary">
+                        <div className="flex flex-row items-center text-primary smart-capitalize">
                          {getLifecycleItemDescription(item)}
                        </div>
                        <div className="text-sm text-primary-variant">
                          {formatUnixTimestampToDateTime(item.timestamp, {
                            timezone: config.ui.timezone,
-                            strftime_fmt:
+                            date_format:
                              config.ui.time_format == "24hour"
                                ? t("time.formattedTimestamp2.24hour", {
                                    ns: "common",
@ -616,7 +616,7 @@ export default function ObjectLifecycle({
                                  )}
                                  <div
                                    key={index}
-                                    className="cursor-pointer capitalize"
+                                    className="cursor-pointer smart-capitalize"
                                    onClick={() => setSelectedZone(zone)}
                                  >
                                    {zone.replaceAll("_", " ")}
@ -722,7 +722,7 @@ export default function ObjectLifecycle({
                          />
                        </TooltipTrigger>
                        <TooltipPortal>
-                          <TooltipContent className="capitalize">
+                          <TooltipContent className="smart-capitalize">
                            {getLifecycleItemDescription(item)}
                          </TooltipContent>
                        </TooltipPortal>
--- a/web/src/components/overlay/detail/ObjectPath.tsx
+++ b/web/src/components/overlay/detail/ObjectPath.tsx
@ -100,7 +100,7 @@ export function ObjectPath({
            />
          </TooltipTrigger>
          <TooltipPortal>
-            <TooltipContent side="top" className="capitalize">
+            <TooltipContent side="top" className="smart-capitalize">
              {pos.lifecycle_item
                ? getLifecycleItemDescription(pos.lifecycle_item)
                : "Tracked point"}
--- a/web/src/components/overlay/detail/ObjectPathPlotter.tsx
+++ b/web/src/components/overlay/detail/ObjectPathPlotter.tsx
@ -223,7 +223,9 @@ export default function ObjectPathPlotter() {
                  }}
                />
                <span className="text-sm">
-                  <strong className="mr-1 capitalize">{event.label}</strong>
+                  <strong className="mr-1 smart-capitalize">
+                    {event.label}
+                  </strong>
                  {formatUnixTimestampToDateTime(event.start_time, {
                    timezone: config?.ui.timezone,
                  })}
--- a/web/src/components/overlay/detail/ReviewDetailDialog.tsx
+++ b/web/src/components/overlay/detail/ReviewDetailDialog.tsx
@ -96,8 +96,12 @@ export default function ReviewDetailDialog({
  const formattedDate = useFormattedTimestamp(
    review?.start_time ?? 0,
    config?.ui.time_format == "24hour"
-      ? t("time.formattedTimestampWithYear.24hour", { ns: "common" })
-      : t("time.formattedTimestampWithYear.12hour", { ns: "common" }),
+      ? t("time.formattedTimestampMonthDayYearHourMinute.24hour", {
+          ns: "common",
+        })
+      : t("time.formattedTimestampMonthDayYearHourMinute.12hour", {
+          ns: "common",
+        }),
    config?.ui.timezone,
  );

@ -229,7 +233,7 @@ export default function ReviewDetailDialog({
                    <div className="text-sm text-primary/40">
                      {t("details.camera")}
                    </div>
-                    <div className="text-sm capitalize">
+                    <div className="text-sm smart-capitalize">
                      {review.camera.replaceAll("_", " ")}
                    </div>
                  </div>
@ -245,12 +249,12 @@ export default function ReviewDetailDialog({
                    <div className="text-sm text-primary/40">
                      {t("details.objects")}
                    </div>
-                    <div className="scrollbar-container flex max-h-32 flex-col items-start gap-2 overflow-y-auto text-sm capitalize">
+                    <div className="scrollbar-container flex max-h-32 flex-col items-start gap-2 overflow-y-auto text-sm smart-capitalize">
                      {events?.map((event) => {
                        return (
                          <div
                            key={event.id}
-                            className="flex flex-row items-center gap-2 capitalize"
+                            className="flex flex-row items-center gap-2 smart-capitalize"
                          >
                            {getIconForLabel(
                              event.label,
@ -286,12 +290,12 @@ export default function ReviewDetailDialog({
                      <div className="text-sm text-primary/40">
                        {t("details.zones")}
                      </div>
-                      <div className="flex flex-col items-start gap-2 text-sm capitalize">
+                      <div className="flex flex-col items-start gap-2 text-sm smart-capitalize">
                        {review.data.zones.map((zone) => {
                          return (
                            <div
                              key={zone}
-                              className="flex flex-row items-center gap-2 capitalize"
+                              className="flex flex-row items-center gap-2 smart-capitalize"
                            >
                              {zone.replaceAll("_", " ")}
                            </div>
--- a/web/src/components/overlay/detail/SearchDetailDialog.tsx
+++ b/web/src/components/overlay/detail/SearchDetailDialog.tsx
@ -231,7 +231,7 @@ export default function SearchDetailDialog({
                  {item == "object_lifecycle" && (
                    <FaRotate className="size-4" />
                  )}
-                  <div className="capitalize">{t(`type.${item}`)}</div>
+                  <div className="smart-capitalize">{t(`type.${item}`)}</div>
                </ToggleGroupItem>
              ))}
            </ToggleGroup>
@ -320,8 +320,12 @@ function ObjectDetailsTab({
  const formattedDate = useFormattedTimestamp(
    search?.start_time ?? 0,
    config?.ui.time_format == "24hour"
-      ? t("time.formattedTimestampWithYear.24hour", { ns: "common" })
-      : t("time.formattedTimestampWithYear.12hour", { ns: "common" }),
+      ? t("time.formattedTimestampMonthDayYearHourMinute.24hour", {
+          ns: "common",
+        })
+      : t("time.formattedTimestampMonthDayYearHourMinute.12hour", {
+          ns: "common",
+        }),
    config?.ui.timezone,
  );

@ -707,7 +711,7 @@ function ObjectDetailsTab({
        <div className="flex w-full flex-col gap-3">
          <div className="flex flex-col gap-1.5">
            <div className="text-sm text-primary/40">{t("details.label")}</div>
-            <div className="flex flex-row items-center gap-2 text-sm capitalize">
+            <div className="flex flex-row items-center gap-2 text-sm smart-capitalize">
              {getIconForLabel(search.label, "size-4 text-primary")}
              {t(search.label, {
                ns: "objects",
@ -827,7 +831,7 @@ function ObjectDetailsTab({
          )}
          <div className="flex flex-col gap-1.5">
            <div className="text-sm text-primary/40">{t("details.camera")}</div>
-            <div className="text-sm capitalize">
+            <div className="text-sm smart-capitalize">
              {search.camera.replaceAll("_", " ")}
            </div>
          </div>
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@ -361,7 +361,7 @@ export default function LivePlayer({
                </TooltipTrigger>
              </div>
              <TooltipPortal>
-                <TooltipContent className="capitalize">
+                <TooltipContent className="smart-capitalize">
                  {[
                    ...new Set([
                      ...(objects || []).map(({ label, sub_label }) =>
--- a/web/src/components/player/PreviewThumbnailPlayer.tsx
+++ b/web/src/components/player/PreviewThumbnailPlayer.tsx
@ -170,8 +170,8 @@ export default function PreviewThumbnailPlayer({
  const formattedDate = useFormattedTimestamp(
    review.start_time,
    config?.ui.time_format == "24hour"
-      ? t("time.formattedTimestampExcludeSeconds.24hour", { ns: "common" })
-      : t("time.formattedTimestampExcludeSeconds.12hour", { ns: "common" }),
+      ? t("time.formattedTimestampMonthDayHourMinute.24hour", { ns: "common" })
+      : t("time.formattedTimestampMonthDayHourMinute.12hour", { ns: "common" }),
    config?.ui?.timezone,
  );

@ -262,7 +262,7 @@ export default function PreviewThumbnailPlayer({
                </div>
              </TooltipTrigger>
            </div>
-            <TooltipContent className="capitalize">
+            <TooltipContent className="smart-capitalize">
              {[
                ...new Set([
                  ...(review.data.objects || []),
--- a/web/src/components/settings/CameraStreamingDialog.tsx
+++ b/web/src/components/settings/CameraStreamingDialog.tsx
@ -185,7 +185,7 @@ export function CameraStreamingDialog({
  return (
    <DialogContent className="sm:max-w-[425px]">
      <DialogHeader className="mb-4">
-        <DialogTitle className="capitalize">
+        <DialogTitle className="smart-capitalize">
          {t("group.camera.setting.title", {
            cameraName: camera.replaceAll("_", " "),
          })}
--- a/web/src/components/settings/PolygonItem.tsx
+++ b/web/src/components/settings/PolygonItem.tsx
@ -222,7 +222,7 @@ export default function PolygonItem({
    saveToConfig(polygon);
    addMessage(
      "masks_zones",
-      "Restart required (masks/zones changed)",
+      t("masksAndZones.restart_required"),
      undefined,
      "masks_zones",
    );
--- a/web/src/components/settings/ZoneEditPane.tsx
+++ b/web/src/components/settings/ZoneEditPane.tsx
@ -933,7 +933,7 @@ export function ZoneObjectSelector({
          {allLabels.map((item) => (
            <div key={item} className="flex items-center justify-between">
              <Label
-                className="w-full cursor-pointer capitalize text-primary"
+                className="w-full cursor-pointer text-primary smart-capitalize"
                htmlFor={item}
              >
                {t(item, { ns: "objects" })}
--- a/web/src/components/timeline/segment-metadata.tsx
+++ b/web/src/components/timeline/segment-metadata.tsx
@ -1,6 +1,7 @@
+import { useFormattedTimestamp } from "@/hooks/use-date-utils";
 import { FrigateConfig } from "@/types/frigateConfig";
-import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import useSWR from "swr";

 type MinimapSegmentProps = {
@ -34,6 +35,24 @@ export function MinimapBounds({
  dense,
 }: MinimapSegmentProps) {
  const { data: config } = useSWR<FrigateConfig>("config");
+  const { t } = useTranslation(["common"]);
+  const timeFormat = config?.ui.time_format === "24hour" ? "24hour" : "12hour";
+
+  const formatKey = dense
+    ? `time.formattedTimestampHourMinute.${timeFormat}`
+    : `time.formattedTimestampMonthDayHourMinute.${timeFormat}`;
+
+  const formattedStartTime = useFormattedTimestamp(
+    alignedMinimapStartTime,
+    t(formatKey),
+    config?.ui.timezone,
+  );
+
+  const formattedEndTime = useFormattedTimestamp(
+    alignedMinimapEndTime,
+    t(formatKey),
+    config?.ui.timezone,
+  );

  return (
    <>
@ -42,23 +61,13 @@ export function MinimapBounds({
          className="pointer-events-none absolute inset-0 -bottom-7 z-20 flex w-full select-none scroll-mt-8 items-center justify-center text-center text-[10px] font-medium text-primary"
          ref={firstMinimapSegmentRef}
        >
-          {formatUnixTimestampToDateTime(alignedMinimapStartTime, {
-            timezone: config?.ui.timezone,
-            strftime_fmt: !dense
-              ? `%b %d, ${config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p"}`
-              : `${config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p"}`,
-          })}
+          {formattedStartTime}
        </div>
      )}

      {isLastSegmentInMinimap && (
        <div className="pointer-events-none absolute inset-0 -top-3 z-20 flex w-full select-none items-center justify-center text-center text-[10px] font-medium text-primary">
-          {formatUnixTimestampToDateTime(alignedMinimapEndTime, {
-            timezone: config?.ui.timezone,
-            strftime_fmt: !dense
-              ? `%b %d, ${config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p"}`
-              : `${config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p"}`,
-          })}
+          {formattedEndTime}
        </div>
      )}
    </>
@ -92,27 +101,28 @@ export function Timestamp({
  timestampSpread,
  segmentKey,
 }: TimestampSegmentProps) {
+  const { t } = useTranslation(["common"]);
  const { data: config } = useSWR<FrigateConfig>("config");

-  const formattedTimestamp = useMemo(() => {
-    if (
-      !(
-        timestamp.getMinutes() % timestampSpread === 0 &&
-        timestamp.getSeconds() === 0
-      )
-    ) {
-      return undefined;
-    }
+  const timeFormat = config?.ui.time_format === "24hour" ? "24hour" : "12hour";
+  const format = t(`time.formattedTimestampHourMinute.${timeFormat}`);

-    return formatUnixTimestampToDateTime(timestamp.getTime() / 1000, {
-      timezone: config?.ui.timezone,
-      strftime_fmt: config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p",
-    });
-  }, [config, timestamp, timestampSpread]);
+  const formattedTimestamp = useFormattedTimestamp(
+    timestamp.getTime() / 1000,
+    format,
+    config?.ui.timezone,
+  );
+
+  const shouldDisplay = useMemo(() => {
+    return (
+      timestamp.getMinutes() % timestampSpread === 0 &&
+      timestamp.getSeconds() === 0
+    );
+  }, [timestamp, timestampSpread]);

  return (
    <div className="absolute left-[15px] z-10 h-[8px]">
-      {!isFirstSegmentInMinimap && !isLastSegmentInMinimap && (
+      {!isFirstSegmentInMinimap && !isLastSegmentInMinimap && shouldDisplay && (
        <div
          key={`${segmentKey}_timestamp`}
          className="pointer-events-none select-none text-[8px] text-neutral_variant dark:text-neutral"
--- a/web/src/components/ui/calendar.tsx
+++ b/web/src/components/ui/calendar.tsx
@ -1,69 +1,18 @@
-import { useState, useEffect } from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { DayPicker } from "react-day-picker";
-import { Locale, enUS } from "date-fns/locale";
 import { cn } from "@/lib/utils";
 import { buttonVariants } from "@/components/ui/button";
-import i18n from "@/utils/i18n";
+import { useDateLocale } from "@/hooks/use-date-locale";

 export type CalendarProps = React.ComponentProps<typeof DayPicker>;

-// Map of locale codes to dynamic import functions
-const localeMap: Record<string, () => Promise<Locale>> = {
-  "zh-CN": () => import("date-fns/locale/zh-CN").then((module) => module.zhCN),
-  es: () => import("date-fns/locale/es").then((module) => module.es),
-  hi: () => import("date-fns/locale/hi").then((module) => module.hi),
-  fr: () => import("date-fns/locale/fr").then((module) => module.fr),
-  ar: () => import("date-fns/locale/ar").then((module) => module.ar),
-  pt: () => import("date-fns/locale/pt").then((module) => module.pt),
-  ru: () => import("date-fns/locale/ru").then((module) => module.ru),
-  de: () => import("date-fns/locale/de").then((module) => module.de),
-  ja: () => import("date-fns/locale/ja").then((module) => module.ja),
-  tr: () => import("date-fns/locale/tr").then((module) => module.tr),
-  it: () => import("date-fns/locale/it").then((module) => module.it),
-  nl: () => import("date-fns/locale/nl").then((module) => module.nl),
-  sv: () => import("date-fns/locale/sv").then((module) => module.sv),
-  cs: () => import("date-fns/locale/cs").then((module) => module.cs),
-  nb: () => import("date-fns/locale/nb").then((module) => module.nb),
-  ko: () => import("date-fns/locale/ko").then((module) => module.ko),
-  vi: () => import("date-fns/locale/vi").then((module) => module.vi),
-  fa: () => import("date-fns/locale/fa-IR").then((module) => module.faIR),
-  pl: () => import("date-fns/locale/pl").then((module) => module.pl),
-  uk: () => import("date-fns/locale/uk").then((module) => module.uk),
-  he: () => import("date-fns/locale/he").then((module) => module.he),
-  el: () => import("date-fns/locale/el").then((module) => module.el),
-  ro: () => import("date-fns/locale/ro").then((module) => module.ro),
-  hu: () => import("date-fns/locale/hu").then((module) => module.hu),
-  fi: () => import("date-fns/locale/fi").then((module) => module.fi),
-  da: () => import("date-fns/locale/da").then((module) => module.da),
-  sk: () => import("date-fns/locale/sk").then((module) => module.sk),
-};
-
 function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  ...props
 }: CalendarProps) {
-  const [locale, setLocale] = useState<Locale>(enUS);
-
-  useEffect(() => {
-    const loadLocale = async () => {
-      if (i18n.language === "en") {
-        setLocale(enUS);
-        return;
-      }
-
-      const localeLoader = localeMap[i18n.language];
-      if (localeLoader) {
-        const loadedLocale = await localeLoader();
-        setLocale(loadedLocale);
-      } else {
-        setLocale(enUS);
-      }
-    };
-    loadLocale();
-  }, [i18n.language]);
+  const locale = useDateLocale();

  return (
    <DayPicker
--- a/web/src/hooks/use-date-locale.ts
+++ b/web/src/hooks/use-date-locale.ts
@ -0,0 +1,64 @@
+import { useState, useEffect } from "react";
+import { enUS, Locale } from "date-fns/locale";
+import { useTranslation } from "react-i18next";
+
+// Map of locale codes to dynamic import functions
+const localeMap: Record<string, () => Promise<Locale>> = {
+  "zh-CN": () => import("date-fns/locale/zh-CN").then((module) => module.zhCN),
+  es: () => import("date-fns/locale/es").then((module) => module.es),
+  hi: () => import("date-fns/locale/hi").then((module) => module.hi),
+  fr: () => import("date-fns/locale/fr").then((module) => module.fr),
+  ar: () => import("date-fns/locale/ar").then((module) => module.ar),
+  pt: () => import("date-fns/locale/pt").then((module) => module.pt),
+  ru: () => import("date-fns/locale/ru").then((module) => module.ru),
+  de: () => import("date-fns/locale/de").then((module) => module.de),
+  ja: () => import("date-fns/locale/ja").then((module) => module.ja),
+  tr: () => import("date-fns/locale/tr").then((module) => module.tr),
+  it: () => import("date-fns/locale/it").then((module) => module.it),
+  nl: () => import("date-fns/locale/nl").then((module) => module.nl),
+  sv: () => import("date-fns/locale/sv").then((module) => module.sv),
+  cs: () => import("date-fns/locale/cs").then((module) => module.cs),
+  nb: () => import("date-fns/locale/nb").then((module) => module.nb),
+  ko: () => import("date-fns/locale/ko").then((module) => module.ko),
+  vi: () => import("date-fns/locale/vi").then((module) => module.vi),
+  fa: () => import("date-fns/locale/fa-IR").then((module) => module.faIR),
+  pl: () => import("date-fns/locale/pl").then((module) => module.pl),
+  uk: () => import("date-fns/locale/uk").then((module) => module.uk),
+  he: () => import("date-fns/locale/he").then((module) => module.he),
+  el: () => import("date-fns/locale/el").then((module) => module.el),
+  ro: () => import("date-fns/locale/ro").then((module) => module.ro),
+  hu: () => import("date-fns/locale/hu").then((module) => module.hu),
+  fi: () => import("date-fns/locale/fi").then((module) => module.fi),
+  da: () => import("date-fns/locale/da").then((module) => module.da),
+  sk: () => import("date-fns/locale/sk").then((module) => module.sk),
+};
+
+export function useDateLocale(): Locale {
+  const { i18n } = useTranslation();
+  const [locale, setLocale] = useState<Locale>(enUS);
+
+  useEffect(() => {
+    const loadLocale = async () => {
+      if (i18n.language === "en") {
+        setLocale(enUS);
+        return;
+      }
+
+      const localeLoader = localeMap[i18n.language];
+      if (localeLoader) {
+        try {
+          const loadedLocale = await localeLoader();
+          setLocale(loadedLocale);
+        } catch (error) {
+          setLocale(enUS);
+        }
+      } else {
+        setLocale(enUS);
+      }
+    };
+
+    loadLocale();
+  }, [i18n.language]);
+
+  return locale;
+}
--- a/web/src/hooks/use-date-utils.ts
+++ b/web/src/hooks/use-date-utils.ts
@ -1,33 +1,42 @@
 import { FrigateConfig } from "@/types/frigateConfig";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import { useMemo } from "react";
+import { useDateLocale } from "@/hooks/use-date-locale";

 export function useFormattedTimestamp(
  timestamp: number,
  format: string,
  timezone?: string,
 ) {
+  const locale = useDateLocale();
+
  const formattedTimestamp = useMemo(() => {
    return formatUnixTimestampToDateTime(timestamp, {
      timezone,
-      strftime_fmt: format,
+      date_format: format,
+      locale,
    });
-  }, [format, timestamp, timezone]);
+  }, [format, timestamp, timezone, locale]);

  return formattedTimestamp;
 }

 export function useFormattedRange(start: number, end: number, format: string) {
+  const locale = useDateLocale();
+
  const formattedStart = useMemo(() => {
    return formatUnixTimestampToDateTime(start, {
-      strftime_fmt: format,
+      date_format: format,
+      locale,
    });
-  }, [format, start]);
+  }, [format, start, locale]);
+
  const formattedEnd = useMemo(() => {
    return formatUnixTimestampToDateTime(end, {
-      strftime_fmt: format,
+      date_format: format,
+      locale,
    });
-  }, [format, end]);
+  }, [format, end, locale]);

  return `${formattedStart} - ${formattedEnd}`;
 }
@ -44,7 +53,7 @@ export function useTimezone(config: FrigateConfig | undefined) {
  }, [config]);
 }

-function use24HourTime(config: FrigateConfig | undefined) {
+export function use24HourTime(config: FrigateConfig | undefined) {
  const localeUses24HourTime = useMemo(
    () =>
      new Intl.DateTimeFormat(undefined, {
@ -60,8 +69,8 @@ function use24HourTime(config: FrigateConfig | undefined) {
      return false;
    }

-    if (config.ui.time_format != "browser") {
-      return config.ui.time_format == "24hour";
+    if (config.ui.time_format !== "browser") {
+      return config.ui.time_format === "24hour";
    }

    return localeUses24HourTime;
--- a/web/src/hooks/use-draggable-element.ts
+++ b/web/src/hooks/use-draggable-element.ts
@ -3,6 +3,8 @@ import { useTimelineUtils } from "./use-timeline-utils";
 import { FrigateConfig } from "@/types/frigateConfig";
 import useSWR from "swr";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
+import { useDateLocale } from "./use-date-locale";
+import { useTranslation } from "react-i18next";

 type DraggableElementProps = {
  contentRef: React.RefObject<HTMLElement>;
@ -162,17 +164,28 @@ function useDraggableElement({
    [segmentDuration, timelineStartAligned, segmentHeight],
  );

+  const { t } = useTranslation(["common"]);
+  const locale = useDateLocale();
+
+  const timeFormat = config?.ui.time_format === "24hour" ? "24hour" : "12hour";
+  const format = useMemo(() => {
+    const formatKey = `time.${
+      segmentDuration < 60 && !dense
+        ? "formattedTimestampHourMinuteSecond"
+        : "formattedTimestampHourMinute"
+    }.${timeFormat}`;
+    return t(formatKey);
+  }, [t, timeFormat, segmentDuration, dense]);
+
  const getFormattedTimestamp = useCallback(
    (segmentStartTime: number) => {
      return formatUnixTimestampToDateTime(segmentStartTime, {
        timezone: config?.ui.timezone,
-        strftime_fmt:
-          config?.ui.time_format == "24hour"
-            ? `%H:%M${segmentDuration < 60 && !dense ? ":%S" : ""}`
-            : `%I:%M${segmentDuration < 60 && !dense ? ":%S" : ""} %p`,
+        date_format: format,
+        locale,
      });
    },
-    [config, dense, segmentDuration],
+    [config?.ui.timezone, format, locale],
  );

  const updateDraggableElementPosition = useCallback(
--- a/web/src/pages/Exports.tsx
+++ b/web/src/pages/Exports.tsx
@ -151,7 +151,7 @@ function Exports() {
        <DialogContent
          className={cn("max-w-[80%]", isMobile && "landscape:max-w-[60%]")}
        >
-          <DialogTitle className="capitalize">
+          <DialogTitle className="smart-capitalize">
            {selected?.name?.replaceAll("_", " ")}
          </DialogTitle>
          <video
--- a/web/src/pages/FaceLibrary.tsx
+++ b/web/src/pages/FaceLibrary.tsx
@ -395,7 +395,7 @@ function LibrarySelector({

      <DropdownMenu>
        <DropdownMenuTrigger asChild>
-          <Button className="flex justify-between capitalize">
+          <Button className="flex justify-between smart-capitalize">
            {pageToggle || t("selectFace")}
            <span className="ml-2 text-primary-variant">
              ({(pageToggle && faceData?.[pageToggle]?.length) || 0})
@ -432,7 +432,7 @@ function LibrarySelector({
              className="group flex items-center justify-between"
            >
              <div
-                className="flex-grow cursor-pointer capitalize"
+                className="flex-grow cursor-pointer smart-capitalize"
                onClick={() => setPageToggle(face)}
              >
                {face}
@ -531,8 +531,12 @@ function TrainingGrid({
  const formattedDate = useFormattedTimestamp(
    selectedEvent?.start_time ?? 0,
    config?.ui.time_format == "24hour"
-      ? t("time.formattedTimestampWithYear.24hour", { ns: "common" })
-      : t("time.formattedTimestampWithYear.12hour", { ns: "common" }),
+      ? t("time.formattedTimestampMonthDayYearHourMinute.24hour", {
+          ns: "common",
+        })
+      : t("time.formattedTimestampMonthDayYearHourMinute.12hour", {
+          ns: "common",
+        }),
    config?.ui.timezone,
  );

@ -558,7 +562,7 @@ function TrainingGrid({
          </DialogHeader>
          <div className="flex flex-col gap-1.5">
            <div className="text-sm text-primary/40">{t("details.person")}</div>
-            <div className="text-sm capitalize">
+            <div className="text-sm smart-capitalize">
              {selectedEvent?.sub_label ?? "Unknown"}
            </div>
          </div>
@ -567,7 +571,7 @@ function TrainingGrid({
              <div className="text-sm text-primary/40">
                {t("details.confidence")}
              </div>
-              <div className="text-sm capitalize">
+              <div className="text-sm smart-capitalize">
                {Math.round(selectedEvent?.data?.sub_label_score || 0) * 100}%
              </div>
            </div>
@ -690,7 +694,7 @@ function FaceAttemptGroup({
      }}
    >
      <div className="flex flex-row justify-between">
-        <div className="select-none capitalize">
+        <div className="select-none smart-capitalize">
          Person
          {event?.sub_label
            ? `: ${event.sub_label} (${Math.round((event.data.sub_label_score || 0) * 100)}%)`
@ -869,7 +873,7 @@ function FaceAttempt({
        <div className="select-none p-2">
          <div className="flex w-full flex-row items-center justify-between gap-2">
            <div className="flex flex-col items-start text-xs text-primary-variant">
-              <div className="capitalize">{data.name}</div>
+              <div className="smart-capitalize">{data.name}</div>
              <div
                className={cn(
                  "",
@ -953,7 +957,7 @@ function FaceImage({ name, image, onDelete }: FaceImageProps) {
      <div className="rounded-b-lg bg-card p-2">
        <div className="flex w-full flex-row items-center justify-between gap-2">
          <div className="flex flex-col items-start text-xs text-primary-variant">
-            <div className="capitalize">{name}</div>
+            <div className="smart-capitalize">{name}</div>
          </div>
          <div className="flex flex-row items-start justify-end gap-5 md:gap-4">
            <Tooltip>
--- a/web/src/pages/Logs.tsx
+++ b/web/src/pages/Logs.tsx
@ -493,7 +493,7 @@ function Logs() {
                  data-nav-item={item}
                  aria-label={`Select ${item}`}
                >
-                  <div className="capitalize">{item}</div>
+                  <div className="smart-capitalize">{item}</div>
                </ToggleGroupItem>
              ))}
            </ToggleGroup>
@ -536,7 +536,7 @@ function Logs() {
        <div className="grid grid-cols-5 *:px-0 *:py-3 *:text-sm *:text-primary/40 md:grid-cols-12">
          <div className="col-span-3 lg:col-span-2">
            <div className="flex w-full flex-row items-center">
-              <div className="ml-1 min-w-16 capitalize lg:min-w-20">
+              <div className="ml-1 min-w-16 smart-capitalize lg:min-w-20">
                {t("logs.type.label")}
              </div>
              <div className="mr-3">{t("logs.type.timestamp")}</div>
--- a/web/src/pages/Settings.tsx
+++ b/web/src/pages/Settings.tsx
@ -219,7 +219,7 @@ export default function Settings() {
                    item: t("menu." + item),
                  })}
                >
-                  <div className="capitalize">{t("menu." + item)}</div>
+                  <div className="smart-capitalize">{t("menu." + item)}</div>
                </ToggleGroupItem>
              ))}
            </ToggleGroup>
@ -336,7 +336,7 @@ function CameraSelectButton({

  const trigger = (
    <Button
-      className="flex items-center gap-2 bg-selected capitalize hover:bg-selected"
+      className="flex items-center gap-2 bg-selected smart-capitalize hover:bg-selected"
      aria-label="Select a camera"
      size="sm"
    >
--- a/web/src/pages/System.tsx
+++ b/web/src/pages/System.tsx
@ -93,7 +93,7 @@ function System() {
              {item == "storage" && <LuHardDrive className="size-4" />}
              {item == "cameras" && <FaVideo className="size-4" />}
              {isDesktop && (
-                <div className="capitalize">{t(item + ".title")}</div>
+                <div className="smart-capitalize">{t(item + ".title")}</div>
              )}
            </ToggleGroupItem>
          ))}
--- a/web/src/utils/dateUtil.ts
+++ b/web/src/utils/dateUtil.ts
@ -1,5 +1,6 @@
-import strftime from "strftime";
 import { fromUnixTime, intervalToDuration, formatDuration } from "date-fns";
+import { Locale } from "date-fns/locale";
+import { formatInTimeZone } from "date-fns-tz";
 export const longToDate = (long: number): Date => new Date(long * 1000);
 export const epochToLong = (date: number): number => date / 1000;
 export const dateToLong = (date: Date): number => epochToLong(date.getTime());
@ -108,11 +109,19 @@ const getResolvedTimeZone = () => {
  }
 };

+type DateTimeStyle = {
+  timezone?: string;
+  time_format?: "browser" | "12hour" | "24hour";
+  date_style?: "full" | "long" | "medium" | "short";
+  time_style?: "full" | "long" | "medium" | "short";
+  date_format?: string;
+  locale?: string | Locale;
+};
 /**
 * Formats a Unix timestamp into a human-readable date/time string.
 *
 * The format of the output string is determined by a configuration object passed as an argument, which
- * may specify a time zone, 12- or 24-hour time, and various stylistic options for the date and time.
+ * may specify a time zone, 12- or 24-hour time, various stylistic options for the date and time, and a locale.
 * If these options are not specified, the function will use system defaults or sensible fallbacks.
 *
 * The function is robust to environments where the Intl API is not fully supported, and includes a
@ -126,53 +135,71 @@ const getResolvedTimeZone = () => {
 */
 export const formatUnixTimestampToDateTime = (
  unixTimestamp: number,
-  config: {
-    timezone?: string;
-    time_format?: "browser" | "12hour" | "24hour";
-    date_style?: "full" | "long" | "medium" | "short";
-    time_style?: "full" | "long" | "medium" | "short";
-    strftime_fmt?: string;
-  },
+  config: DateTimeStyle = {},
 ): string => {
-  const { timezone, time_format, date_style, time_style, strftime_fmt } =
+  const { timezone, time_format, date_style, time_style, date_format, locale } =
    config;
-  const locale = window.navigator?.language || "en-US";
+
+  // Determine the locale to use
+  let localeCode: string;
+  let dateFnsLocale: Locale | undefined;
+  if (typeof locale === "string") {
+    localeCode = locale;
+  } else if (locale && "code" in locale) {
+    localeCode = (locale as Locale).code || "en-US";
+    dateFnsLocale = locale as Locale;
+  } else {
+    localeCode = window.navigator?.language || "en-US";
+  }
+
  if (isNaN(unixTimestamp)) {
    return "Invalid time";
  }

  try {
    const date = new Date(unixTimestamp * 1000);
-    const resolvedTimeZone = getResolvedTimeZone();

-    // use strftime_fmt if defined in config
-    if (strftime_fmt) {
-      const offset = getUTCOffset(date, timezone || resolvedTimeZone);
-      const strftime_locale = strftime.timezone(offset);
-      return strftime_locale(strftime_fmt, date);
+    if (date_format) {
+      const resolvedTimeZone = timezone || getResolvedTimeZone();
+      let formatted = formatInTimeZone(date, resolvedTimeZone, date_format, {
+        locale: dateFnsLocale,
+      });
+      // Uppercase AM/PM for 12-hour formats
+      if (date_format.includes("a") || date_format.includes("aaa")) {
+        formatted = formatted.replace(/am|pm/gi, (match) =>
+          match.toUpperCase(),
+        );
+      }
+      return formatted;
    }

    // DateTime format options
    const options: Intl.DateTimeFormatOptions = {
      dateStyle: date_style,
      timeStyle: time_style,
-      hour12: time_format !== "browser" ? time_format == "12hour" : undefined,
+      hour12: time_format !== "browser" ? time_format === "12hour" : undefined,
    };

    // Only set timeZone option when resolvedTimeZone does not match UTC±HH:MM format, or when timezone is set in config
+    const resolvedTimeZone = getResolvedTimeZone();
    const isUTCOffsetFormat = /^UTC[+-]\d{2}:\d{2}$/.test(resolvedTimeZone);
    if (timezone || !isUTCOffsetFormat) {
      options.timeZone = timezone || resolvedTimeZone;
    }

-    const formatter = new Intl.DateTimeFormat(locale, options);
-    const formattedDateTime = formatter.format(date);
+    const formatter = new Intl.DateTimeFormat(localeCode, options);
+    let formattedDateTime = formatter.format(date);

-    // Regex to check for existence of time. This is needed because dateStyle/timeStyle is not always supported.
+    if (options.hour12) {
+      formattedDateTime = formattedDateTime.replace(/am|pm/gi, (match) =>
+        match.toUpperCase(),
+      );
+    }
+
+    // Regex to check for existence of time
    const containsTime = /\d{1,2}:\d{1,2}/.test(formattedDateTime);

-    // fallback if the browser does not support dateStyle/timeStyle in Intl.DateTimeFormat
-    // This works even tough the timezone is undefined, it will use the runtime's default time zone
+    // fallback if the browser does not support dateStyle/timeStyle
    if (!containsTime) {
      const dateOptions = {
        ...formatMap[date_style ?? ""]?.date,
@ -185,10 +212,17 @@ export const formatUnixTimestampToDateTime = (
        hour12: options.hour12,
      };

-      return `${date.toLocaleDateString(
-        locale,
+      let fallbackFormatted = `${date.toLocaleDateString(
+        localeCode,
        dateOptions,
-      )} ${date.toLocaleTimeString(locale, timeOptions)}`;
+      )} ${date.toLocaleTimeString(localeCode, timeOptions)}`;
+      // Uppercase AM/PM in fallback
+      if (options.hour12) {
+        fallbackFormatted = fallbackFormatted.replace(/am|pm/gi, (match) =>
+          match.toUpperCase(),
+        );
+      }
+      return fallbackFormatted;
    }

    return formattedDateTime;
--- a/web/src/utils/i18n.ts
+++ b/web/src/utils/i18n.ts
@ -80,7 +80,7 @@ i18n
          .join(" ");
      }

-      // For single keys, just capitalize and format
+      // For single keys, just smart-capitalize and format
      return key
        .split("_")
        .map(
--- a/web/src/views/explore/ExploreView.tsx
+++ b/web/src/views/explore/ExploreView.tsx
@ -151,7 +151,7 @@ function ThumbnailRow({

  return (
    <div className="rounded-lg bg-background_alt p-2 md:px-4">
-      <div className="flex flex-row items-center text-lg capitalize">
+      <div className="flex flex-row items-center text-lg smart-capitalize">
        {t(objectType, { ns: "objects" })}
        {searchResults && (
          <span className="ml-3 text-sm text-secondary-foreground">
@ -190,7 +190,7 @@ function ThumbnailRow({
              />
            </TooltipTrigger>
            <TooltipPortal>
-              <TooltipContent className="capitalize">
+              <TooltipContent className="smart-capitalize">
                <ExploreMoreLink objectType={objectType} />
              </TooltipContent>
            </TooltipPortal>
--- a/web/src/views/search/SearchView.tsx
+++ b/web/src/views/search/SearchView.tsx
@ -597,7 +597,7 @@ export default function SearchView({
                          <Tooltip>
                            <TooltipTrigger>
                              <Chip
-                                className={`flex select-none items-center justify-between space-x-1 bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500 text-xs capitalize text-white`}
+                                className={`flex select-none items-center justify-between space-x-1 bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500 text-xs text-white smart-capitalize`}
                              >
                                {value.search_source == "thumbnail" ? (
                                  <LuImage className="size-3" />
--- a/web/src/views/settings/CameraSettingsView.tsx
+++ b/web/src/views/settings/CameraSettingsView.tsx
@ -431,7 +431,7 @@ export default function CameraSettingsView({
                                          }}
                                        />
                                      </FormControl>
-                                      <FormLabel className="font-normal capitalize">
+                                      <FormLabel className="font-normal smart-capitalize">
                                        {zone.name.replaceAll("_", " ")}
                                      </FormLabel>
                                    </FormItem>
@ -536,7 +536,7 @@ export default function CameraSettingsView({
                                            }}
                                          />
                                        </FormControl>
-                                        <FormLabel className="font-normal capitalize">
+                                        <FormLabel className="font-normal smart-capitalize">
                                          {zone.name.replaceAll("_", " ")}
                                        </FormLabel>
                                      </FormItem>
--- a/web/src/views/settings/ClassificationSettingsView.tsx
+++ b/web/src/views/settings/ClassificationSettingsView.tsx
@ -165,7 +165,7 @@ export default function ClassificationSettingsView({
      .finally(() => {
        addMessage(
          "search_settings_restart",
-          `Restart required (Classification settings changed)`,
+          t("classification.restart_required"),
          undefined,
          "search_settings",
        );
--- a/web/src/views/settings/FrigatePlusSettingsView.tsx
+++ b/web/src/views/settings/FrigatePlusSettingsView.tsx
@ -158,7 +158,7 @@ export default function FrigatePlusSettingsView({
      .finally(() => {
        addMessage(
          "plus_restart",
-          "Restart required (Frigate+ model changed)",
+          t("frigatePlus.restart_required"),
          undefined,
          "plus_restart",
        );
--- a/web/src/views/settings/MasksAndZonesView.tsx
+++ b/web/src/views/settings/MasksAndZonesView.tsx
@ -194,11 +194,11 @@ export default function MasksAndZonesView({
    setUnsavedChanges(false);
    addMessage(
      "masks_zones",
-      "Restart required (masks/zones changed)",
+      t("masksAndZones.restart_required"),
      undefined,
      "masks_zones",
    );
-  }, [editingPolygons, setUnsavedChanges, addMessage]);
+  }, [t, editingPolygons, setUnsavedChanges, addMessage]);

  useEffect(() => {
    if (isLoading) {
--- a/web/src/views/settings/NotificationsSettingsView.tsx
+++ b/web/src/views/settings/NotificationsSettingsView.tsx
@ -44,6 +44,7 @@ import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import FilterSwitch from "@/components/filter/FilterSwitch";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Trans, useTranslation } from "react-i18next";
+import { useDateLocale } from "@/hooks/use-date-locale";

 const NOTIFICATION_SERVICE_WORKER = "notifications-worker.js";

@ -645,6 +646,8 @@ export function CameraNotificationSwitch({
    sendNotificationSuspend(0);
  };

+  const locale = useDateLocale();
+
  const formatSuspendedUntil = (timestamp: string) => {
    // Some languages require a change in word order
    if (timestamp === "0") return t("time.untilForRestart", { ns: "common" });
@ -653,10 +656,15 @@ export function CameraNotificationSwitch({
      time_style: "medium",
      date_style: "medium",
      timezone: config?.ui.timezone,
-      strftime_fmt:
+      date_format:
        config?.ui.time_format == "24hour"
-          ? t("time.formattedTimestampExcludeSeconds.24hour", { ns: "common" })
-          : t("time.formattedTimestampExcludeSeconds.12hour", { ns: "common" }),
+          ? t("time.formattedTimestampMonthDayHourMinute.24hour", {
+              ns: "common",
+            })
+          : t("time.formattedTimestampMonthDayHourMinute.12hour", {
+              ns: "common",
+            }),
+      locale: locale,
    });
    return t("time.untilForTime", { ns: "common", time });
  };
@ -672,7 +680,7 @@ export function CameraNotificationSwitch({
          )}
          <div className="flex flex-col">
            <Label
-              className="text-md cursor-pointer capitalize text-primary"
+              className="text-md cursor-pointer text-primary smart-capitalize"
              htmlFor="camera"
            >
              {camera.replaceAll("_", " ")}
--- a/web/src/views/settings/ObjectSettingsView.tsx
+++ b/web/src/views/settings/ObjectSettingsView.tsx
@ -197,7 +197,7 @@ export default function ObjectSettingsView({
                      <div className="mb-2 flex flex-col">
                        <div className="flex items-center gap-2">
                          <Label
-                            className="mb-0 cursor-pointer capitalize text-primary"
+                            className="mb-0 cursor-pointer text-primary smart-capitalize"
                            htmlFor={param}
                          >
                            {title}
@ -239,7 +239,7 @@ export default function ObjectSettingsView({
                      <div className="mb-2 flex flex-col">
                        <div className="flex items-center gap-2">
                          <Label
-                            className="mb-0 cursor-pointer capitalize text-primary"
+                            className="mb-0 cursor-pointer text-primary smart-capitalize"
                            htmlFor="debugdraw"
                          >
                            {t("debug.objectShapeFilterDrawing.title")}
--- a/web/src/views/system/CameraMetrics.tsx
+++ b/web/src/views/system/CameraMetrics.tsx
@ -259,7 +259,7 @@ export default function CameraMetrics({
                  )}
                  <div className="flex w-full flex-col gap-3">
                    <div className="flex flex-row items-center justify-between">
-                      <div className="text-sm font-medium capitalize text-muted-foreground">
+                      <div className="text-sm font-medium text-muted-foreground smart-capitalize">
                        {camera.name.replaceAll("_", " ")}
                      </div>
                      <Tooltip>
--- a/web/src/views/system/EnrichmentMetrics.tsx
+++ b/web/src/views/system/EnrichmentMetrics.tsx
@ -105,7 +105,7 @@ export default function EnrichmentMetrics({
            <>
              {embeddingInferenceTimeSeries.map((series) => (
                <div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
-                  <div className="mb-5 capitalize">{series.name}</div>
+                  <div className="mb-5 smart-capitalize">{series.name}</div>
                  {series.name.endsWith("Speed") ? (
                    <ThresholdBarGraph
                      key={series.name}
--- a/web/src/views/system/StorageMetrics.tsx
+++ b/web/src/views/system/StorageMetrics.tsx
@ -10,9 +10,8 @@ import {
 import useSWR from "swr";
 import { CiCircleAlert } from "react-icons/ci";
 import { FrigateConfig } from "@/types/frigateConfig";
-import { useTimezone } from "@/hooks/use-date-utils";
+import { useFormattedTimestamp, useTimezone } from "@/hooks/use-date-utils";
 import { RecordingsSummary } from "@/types/review";
-import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import { useTranslation } from "react-i18next";

 type CameraStorage = {
@ -70,6 +69,19 @@ export default function StorageMetrics({
      : null;
  }, [recordingsSummary]);

+  const timeFormat = config?.ui.time_format === "24hour" ? "24hour" : "12hour";
+  const format = useMemo(() => {
+    return t(`time.formattedTimestampMonthDayYearHourMinute.${timeFormat}`, {
+      ns: "common",
+    });
+  }, [t, timeFormat]);
+
+  const formattedEarliestDate = useFormattedTimestamp(
+    earliestDate || 0,
+    format,
+    timezone,
+  );
+
  if (!cameraStorage || !stats || !totalStorage || !config) {
    return;
  }
@ -114,13 +126,7 @@ export default function StorageMetrics({
              <span className="font-medium">
                {t("storage.recordings.earliestRecording")}
              </span>{" "}
-              {formatUnixTimestampToDateTime(earliestDate, {
-                timezone: timezone,
-                strftime_fmt:
-                  config.ui.time_format === "24hour"
-                    ? "%d %b %Y, %H:%M"
-                    : "%B %d, %Y, %I:%M %p",
-              })}
+              {formattedEarliestDate}
            </div>
          )}
        </div>
--- a/web/tailwind.config.cjs
+++ b/web/tailwind.config.cjs
@ -1,4 +1,7 @@
 /** @type {import('tailwindcss').Config} */
+
+const plugin = require("tailwindcss/plugin");
+
 module.exports = {
  darkMode: ["class"],
  content: [
@ -166,5 +169,16 @@ module.exports = {
    require("tailwindcss-animate"),
    // eslint-disable-next-line @typescript-eslint/no-var-requires
    require("tailwind-scrollbar")({ nocompatible: true }),
+    plugin(function ({ addUtilities }) {
+      addUtilities({
+        ".smart-capitalize": {
+          ':root[lang="ru"] &, :root[lang="ar"] &, :root[lang="he"] &, :root[lang="zh"] &, :root[lang="ja"] &, :root[lang="ko"] &, :root[lang="hi"] &, :root[lang="th"] &':
+            {
+              textTransform: "none",
+            },
+          textTransform: "capitalize",
+        },
+      });
+    }),
  ],
 };
Author	SHA1	Message	Date
Josh Hawkins	cee5d6e5ee	Fix i18n plural for selected review count (#17864 ) * Fix i18n plural for selected review count * use selected count in explore	2025-04-22 22:01:46 -05:00
Josh Hawkins	78c1694451	Add missing i18n keys (#17861 )	2025-04-22 19:46:05 -06:00
Nicolas Mowen	f9b2db4405	Implement smart capitalization based on locale (#17860 )	2025-04-22 16:21:09 -06:00
Josh Hawkins	b6e0e5698a	Proper i18n date/time handling (#17858 ) * install date-fns-tz * add date locale hook * refactor formatUnixTimestampToDateTime Use date-fns style instead of using strftime. This requires changing the i18n keys to the way date-fns represents dates (eg: "MMM d, h:mm:ss aaa" instead of "%b %-d, %H:%M" * refactor calendar to use new hook * fix useFormattedTimestamp to use new formatUnixTimestampToDateTime date_format * change i18n keys to new format * fix timeline * fix review * fix explore * fix metrics * fix notifications * fix face library * clean up	2025-04-22 15:50:21 -06:00