Fix i18n plural for selected review count (#17864)

* Fix i18n plural for selected review count

* use selected count in explore

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",

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",

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",
+      "12hour": "MMM d, h:mm:ss aaa",
-      "24hour": "%b %-d, %H:%M:%S"
+      "24hour": "MMM d, HH:mm:ss"
     },
     "formattedTimestamp2": {
-      "12hour": "%m/%d %I:%M:%S%P",
+      "12hour": "MM/dd h:mm:ssa",
-      "24hour": "%d %b %H:%M:%S"
+      "24hour": "d MMM HH:mm:ss"
     },
-    "formattedTimestampExcludeSeconds": {
+    "formattedTimestampHourMinute": {
-      "12hour": "%b %-d, %I:%M %p",
+      "12hour": "h:mm aaa",
-      "24hour": "%b %-d, %H:%M"
+      "24hour": "HH:mm"
     },
-    "formattedTimestampWithYear": {
+    "formattedTimestampHourMinuteSecond": {
-      "12hour": "%b %-d %Y, %I:%M %p",
+      "12hour": "h:mm:ss aaa",
-      "24hour": "%b %-d %Y, %H:%M"
+      "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": {

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"
 }

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}}"

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"
     }
   }
 }

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>

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",
+    date_format: format,
-    time_style: "medium",
+    locale,
-    date_style: "medium",
   });
   const filename = `${camera}_${formattedDate}.mp4`;
 

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>

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 || []),

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"),

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.formattedTimestampMonthDayHourMinute.24hour", { ns: "common" })
-      : t("time.formattedTimestampExcludeSeconds.12hour", { ns: "common" }),
+      : t("time.formattedTimestampMonthDayHourMinute.12hour", { ns: "common" }),
     config?.ui.timezone,
   );
 

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 = (

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("_", " ")}

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]);
                   }}

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}

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("_", " ")}

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"

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

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"

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

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(

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"

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:
+          date_format: format,
-            config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p",
+          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:
+          date_format: format,
-            config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p",
+          locale,
         },
       );
     },
-    [config, updateTimes],
+    [config?.ui.timezone, format, locale, updateTimes],
   );
 
   const options = useMemo(() => {

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:
+          date_format: format,
-            config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p",
+          locale,
         },
       );
     },
-    [config, updateTimes],
+    [config?.ui.timezone, format, locale, updateTimes],
   );
 
   const options = useMemo(() => {

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();
 

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")

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.formattedTimestampMonthDayHourMinute.24hour", {
-          : t("time.formattedTimestampExcludeSeconds.12hour", { ns: "common" }),
+              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 && (

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("_", " "),
               })}

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")

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 />

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);

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

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);

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>

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"}

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,
                   })}

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.formattedTimestampMonthDayYearHourMinute.24hour", {
-      : t("time.formattedTimestampWithYear.12hour", { ns: "common" }),
+          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>

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.formattedTimestampMonthDayYearHourMinute.24hour", {
-      : t("time.formattedTimestampWithYear.12hour", { ns: "common" }),
+          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>

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 }) =>

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.formattedTimestampMonthDayHourMinute.24hour", { ns: "common" })
-      : t("time.formattedTimestampExcludeSeconds.12hour", { 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 || []),

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("_", " "),
           })}

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",
     );

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" })}

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, {
+          {formattedStartTime}
-            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"}`,
-          })}
         </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, {
+          {formattedEndTime}
-            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"}`,
-          })}
         </div>
       )}
     </>
@@ -92,27 +101,28 @@ export function Timestamp({
   timestampSpread,
   segmentKey,
 }: TimestampSegmentProps) {
+  const { t } = useTranslation(["common"]);
   const { data: config } = useSWR<FrigateConfig>("config");
 
-  const formattedTimestamp = useMemo(() => {
+  const timeFormat = config?.ui.time_format === "24hour" ? "24hour" : "12hour";
-    if (
+  const format = t(`time.formattedTimestampHourMinute.${timeFormat}`);
-      !(
-        timestamp.getMinutes() % timestampSpread === 0 &&
-        timestamp.getSeconds() === 0
-      )
-    ) {
-      return undefined;
-    }
 
-    return formatUnixTimestampToDateTime(timestamp.getTime() / 1000, {
+  const formattedTimestamp = useFormattedTimestamp(
-      timezone: config?.ui.timezone,
+    timestamp.getTime() / 1000,
-      strftime_fmt: config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p",
+    format,
-    });
+    config?.ui.timezone,
-  }, [config, timestamp, timestampSpread]);
+  );
+
+  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"

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);
+  const locale = useDateLocale();
-
-  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]);
 
   return (
     <DayPicker

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;
+}

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") {
+    if (config.ui.time_format !== "browser") {
-      return config.ui.time_format == "24hour";
+      return config.ui.time_format === "24hour";
     }
 
     return localeUses24HourTime;

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:
+        date_format: format,
-          config?.ui.time_format == "24hour"
+        locale,
-            ? `%H:%M${segmentDuration < 60 && !dense ? ":%S" : ""}`
-            : `%I:%M${segmentDuration < 60 && !dense ? ":%S" : ""} %p`,
       });
     },
-    [config, dense, segmentDuration],
+    [config?.ui.timezone, format, locale],
   );
 
   const updateDraggableElementPosition = useCallback(

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

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.formattedTimestampMonthDayYearHourMinute.24hour", {
-      : t("time.formattedTimestampWithYear.12hour", { ns: "common" }),
+          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>

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>

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"
     >

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>
           ))}

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: {
+  config: DateTimeStyle = {},
-    timezone?: string;
-    time_format?: "browser" | "12hour" | "24hour";
-    date_style?: "full" | "long" | "medium" | "short";
-    time_style?: "full" | "long" | "medium" | "short";
-    strftime_fmt?: string;
-  },
 ): 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 (date_format) {
-    if (strftime_fmt) {
+      const resolvedTimeZone = timezone || getResolvedTimeZone();
-      const offset = getUTCOffset(date, timezone || resolvedTimeZone);
+      let formatted = formatInTimeZone(date, resolvedTimeZone, date_format, {
-      const strftime_locale = strftime.timezone(offset);
+        locale: dateFnsLocale,
-      return strftime_locale(strftime_fmt, date);
+      });
+      // 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 formatter = new Intl.DateTimeFormat(localeCode, options);
-    const formattedDateTime = formatter.format(date);
+    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
+    // fallback if the browser does not support dateStyle/timeStyle
-    // This works even tough the timezone is undefined, it will use the runtime's default time zone
     if (!containsTime) {
       const dateOptions = {
         ...formatMap[date_style ?? ""]?.date,
@@ -185,10 +212,17 @@ export const formatUnixTimestampToDateTime = (
         hour12: options.hour12,
       };
 
-      return `${date.toLocaleDateString(
+      let fallbackFormatted = `${date.toLocaleDateString(
-        locale,
+        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;

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(

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>

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" />

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>

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",
         );

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",
         );

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) {

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.formattedTimestampMonthDayHourMinute.24hour", {
-          : t("time.formattedTimestampExcludeSeconds.12hour", { ns: "common" }),
+              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("_", " ")}

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")}

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>

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}

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, {
+              {formattedEarliestDate}
-                timezone: timezone,
-                strftime_fmt:
-                  config.ui.time_format === "24hour"
-                    ? "%d %b %Y, %H:%M"
-                    : "%B %d, %Y, %I:%M %p",
-              })}
             </div>
           )}
         </div>

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",
+        },
+      });
+    }),
   ],
 };