feat: Add date/time template options to template titles

shared/i18n/index.ts

@@ -1,6 +1,7 @@
 import i18n from "i18next";
 import backend from "i18next-http-backend";
 import { initReactI18next } from "react-i18next";
+import { unicodeBCP47toCLDR, unicodeCLDRtoBCP47 } from "../utils/date";
 
 // Note: Updating the available languages? Make sure to also update the
 // locales array in app/utils/i18n.js to enable translation for timestamps.
@@ -77,14 +78,8 @@ export const languageOptions = [
 
 export const languages: string[] = languageOptions.map((i) => i.value);
 
-// Languages are stored in en_US format in the database, however the
-// frontend translation framework (i18next) expects en-US
-const underscoreToDash = (text: string) => text.replace("_", "-");
-
-const dashToUnderscore = (text: string) => text.replace("-", "_");
-
 export const initI18n = (defaultLanguage = "en_US") => {
-  const lng = underscoreToDash(defaultLanguage);
+  const lng = unicodeCLDRtoBCP47(defaultLanguage);
   i18n
     .use(backend)
     .use(initReactI18next)
@@ -94,7 +89,7 @@ export const initI18n = (defaultLanguage = "en_US") => {
         // this must match the path defined in routes. It's the path that the
         // frontend UI code will hit to load missing translations.
         loadPath: (languages: string[]) =>
-          `/locales/${dashToUnderscore(languages[0])}.json`,
+          `/locales/${unicodeBCP47toCLDR(languages[0])}.json`,
       },
       interpolation: {
         escapeValue: false,
@@ -104,7 +99,7 @@ export const initI18n = (defaultLanguage = "en_US") => {
       },
       lng,
       fallbackLng: lng,
-      supportedLngs: languages.map(underscoreToDash),
+      supportedLngs: languages.map(unicodeCLDRtoBCP47),
       // Uncomment when debugging translation framework, otherwise it's noisy
       keySeparator: false,
     });