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

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(