fix: normalize "original" locale to "en" for datetime formatting

front_end/src/app/(main)/(home)/components/research_and_updates.tsx

@@ -5,6 +5,8 @@ import Link from "next/link";
 import { getLocale, getTranslations } from "next-intl/server";
 import { FC } from "react";
 
+import { normalizeIntlLocale } from "@/utils/formatters/date";
+
 import WithServerComponentErrorBoundary from "@/components/server_component_error_boundary";
 import Button from "@/components/ui/button";
 import { NotebookPost } from "@/types/post";
@@ -26,7 +28,7 @@ type Props = {
 
 const ResearchAndUpdates: FC<Props> = async ({ posts, className }) => {
   const t = await getTranslations();
-  const locale = await getLocale();
+  const locale = normalizeIntlLocale(await getLocale());
 
   return (
     <section className={className}>

front_end/src/components/consumer_post_card/upcoming_cp.tsx

@@ -4,6 +4,7 @@ import { FC } from "react";
 
 import RelativeTime from "@/components/ui/relative_time";
 import cn from "@/utils/core/cn";
+import { normalizeIntlLocale } from "@/utils/formatters/date";
 
 type Props = {
   cpRevealsOn: string;
@@ -12,7 +13,7 @@ type Props = {
 
 const UpcomingCP: FC<Props> = ({ cpRevealsOn, className }) => {
   const t = useTranslations();
-  const locale = useLocale();
+  const locale = normalizeIntlLocale(useLocale());
   return (
     <div className={cn("w-full text-center", className)}>
       <span>{t("cpRevealed")} </span>

front_end/src/components/cp_reveal_time/cp_reveal_time.tsx

@@ -3,6 +3,7 @@ import { useLocale, useTranslations } from "next-intl";
 import React, { FC } from "react";
 
 import RelativeTime from "@/components/ui/relative_time";
+import { normalizeIntlLocale } from "@/utils/formatters/date";
 
 type Props = {
   cpRevealTime: string;
@@ -16,7 +17,7 @@ const CPRevealTime: FC<Props> = ({
   className = "",
 }) => {
   const t = useTranslations();
-  const locale = useLocale();
+  const locale = normalizeIntlLocale(useLocale());
 
   if (hiddenUntilView) {
     const revealDate = new Date(cpRevealTime);

front_end/src/components/ui/local_daytime.tsx

@@ -2,21 +2,14 @@ import { useLocale } from "next-intl";
 import { FC } from "react";
 
 import RelativeTime from "@/components/ui/relative_time";
-import { formatDate } from "@/utils/formatters/date";
+import { formatDate, normalizeIntlLocale } from "@/utils/formatters/date";
 
 type Props = {
   date?: string;
 };
 
 const LocalDaytime: FC<Props> = ({ date }) => {
-  let locale = useLocale();
-  if (locale === "original") {
-    // For some reason, when the locale is "original" (Untranslated), the the server and client
-    //  endup with different values for  the localValue variable. This is a workaround to
-    // make sure the dates render correctly on both and default to English locale when
-    // in Untranslated mode
-    locale = "en";
-  }
+  const locale = normalizeIntlLocale(useLocale());
   const localValue = date ? formatDate(locale, new Date(date)) : "";
 
   return (

front_end/src/utils/formatters/date.ts

@@ -92,7 +92,7 @@ export function formatDate(locale: string, date: Date) {
   return intlFormat(
     new Date(date),
     { year: "numeric", month: "short", day: "numeric" },
-    { locale }
+    { locale: normalizeIntlLocale(locale) }
   );
 }
 
@@ -106,7 +106,7 @@ export function formatDatetime(locale: string, date: Date) {
       hour: "numeric",
       minute: "numeric",
     },
-    { locale }
+    { locale: normalizeIntlLocale(locale) }
   );
 }
 
@@ -133,7 +133,7 @@ export function formatRelativeDate(
   let dateStr: string = "";
   if (Math.abs(delta) < relCutoff) {
     dateStr = intlFormatDistance(date, now, {
-      locale,
+      locale: normalizeIntlLocale(locale),
       numeric: "always",
       style: short ? "short" : "long",
     });
@@ -189,6 +189,15 @@ export function formatDurationToShortStr(duration: Duration): string {
   return str;
 }
 
+/**
+ * Normalizes the app locale for use with the browser's Intl API.
+ * The "original" locale (Untranslated mode) is not a valid BCP 47 tag,
+ * so it falls back to the OS language. This maps it to "en" instead.
+ */
+export function normalizeIntlLocale(locale: string): string {
+  return locale === "original" ? "en" : locale;
+}
+
 export const getDateFnsLocale = (locale: string) => {
   switch (locale) {
     case "es":