Add Greek (el) as beta locale

config/eslint/eslint.config.mjs

@@ -746,6 +746,7 @@ const config = defineConfig([
         'web/snippets/gib.js',
         // Generated language files - excluded from ESLint but still type-checked
         'src/languages/de.ts',
+        'src/languages/el.ts',
         'src/languages/es.ts',
         'src/languages/fr.ts',
         'src/languages/it.ts',

cspell.json

@@ -121,6 +121,7 @@
         "Ephermeral",
         "Erste",
         "Español",
+        "Ελληνικά",
         "Expatriot",
         "Expensable",
         "Expensi",
@@ -1082,6 +1083,7 @@
     "ignorePaths": [
         ".gitignore",
         "src/languages/de.ts",
+        "src/languages/el.ts",
         "src/languages/es.ts",
         "src/languages/fr.ts",
         "src/languages/it.ts",
@@ -1091,6 +1093,7 @@
         "src/languages/pt-BR.ts",
         "src/languages/zh-hans.ts",
         "prompts/translation/de.ts",
+        "prompts/translation/el.ts",
         "prompts/translation/es.ts",
         "prompts/translation/fr.ts",
         "prompts/translation/it.ts",

prompts/translation/el.ts

@@ -0,0 +1,31 @@
+import {Str} from 'expensify-common';
+
+import Glossary from './Glossary';
+
+// U+200B ZERO WIDTH SPACE — allows a clean 2-line wrap in the narrow LHN tab rail
+// without showing a hyphen. Preserve these code points when regenerating translations.
+const ZWSP = '\u200B';
+
+const greekGlossary = new Glossary([
+    // Branded product names
+    {sourceTerm: 'Expensify Card', targetTerm: 'Κάρτα Expensify', usage: 'Branded Expensify payment card'},
+
+    // LHN tab labels — single long words that otherwise wrap with a 1-character orphan
+    // or clip in the 72px navigation rail. Keep the embedded ZWSP at the break point.
+    {sourceTerm: 'Inbox', targetTerm: `Εισερχό${ZWSP}μενα`, usage: 'LHN tab label; keep the zero-width space so the word can wrap as Εισερχό/μενα'},
+    {sourceTerm: 'Account', targetTerm: `Λογαρια${ZWSP}σμός`, usage: 'LHN tab label; keep the zero-width space so the word can wrap as Λογαρια/σμός'},
+]);
+
+export default Str.dedent(`
+    When translating to Greek, follow these rules:
+
+    - Use polite/formal tone for user-facing text, consistent with standard Greek business software conventions.
+    - Keep UI labels concise and follow standard Greek capitalization rules (only sentence-initial words and proper nouns are capitalized).
+    - Pay close attention to Greek grammatical gender and case agreement (nominative, genitive, accusative) when branded terms or nouns appear in different sentence positions.
+    - Apply correct Greek plural forms and noun-adjective agreement around numeric placeholders.
+    - For glossary terms that contain a zero-width space (U+200B), preserve that exact character in the translation. It is intentional and enables clean line wrapping in narrow UI.
+
+    Use the following glossary for canonical Greek translations of common terms:
+
+    ${greekGlossary.toXML()}
+`);

src/CONST/LOCALES.ts

@@ -17,6 +17,7 @@ const FULLY_SUPPORTED_LOCALES = {
  */
 const BETA_LOCALES = {
     DE: 'de',
+    EL: 'el',
     IT: 'it',
     JA: 'ja',
     NL: 'nl',
@@ -54,6 +55,7 @@ const LOCALE_TO_LANGUAGE_STRING = {
     [FULLY_SUPPORTED_LOCALES.ES]: 'Español',
     [FULLY_SUPPORTED_LOCALES.FR]: 'Français',
     [BETA_LOCALES.DE]: 'Deutsch',
+    [BETA_LOCALES.EL]: 'Ελληνικά',
     [BETA_LOCALES.IT]: 'Italiano',
     [BETA_LOCALES.JA]: '日本語',
     [BETA_LOCALES.NL]: 'Nederlands',

src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx

@@ -24,6 +24,33 @@ type BaseHTMLEngineProviderProps = ChildrenProps & {
     enableExperimentalBRCollapsing?: boolean;
 };
 
+/**
+ * Brand font family names allowed through react-native-render-html's whitelist.
+ * The library only keeps the first supported face from a CSS font stack, so without
+ * {@link HTML_FALLBACK_FONTS} the system fallbacks we add for non-Latin scripts are dropped.
+ */
+const HTML_SYSTEM_FONTS = Object.values(FontUtils.fontFamily.single).map((font) => font.fontFamily);
+
+/**
+ * Remap brand faces to their full platform stacks (with system fallbacks).
+ *
+ * react-native-render-html's font-family validator returns only the first whitelisted
+ * face (e.g. "Expensify Neue"), which has no Greek/Cyrillic glyphs. Returning the full
+ * multi-font stack here restores emoji + system sans-serif fallbacks for those scripts.
+ *
+ * Extra keys beyond sans-serif/serif/monospace are supported at runtime by the library
+ * even though the published TS type is narrower.
+ */
+const CSS_SANS_SERIF = 'sans-serif';
+const HTML_FALLBACK_FONTS = {
+    [CSS_SANS_SERIF]: FontUtils.fontFamily.platform.EXP_NEUE.fontFamily,
+    serif: FontUtils.fontFamily.platform.EXP_NEW_KANSAS_MEDIUM.fontFamily,
+    monospace: FontUtils.fontFamily.platform.MONOSPACE.fontFamily,
+    [FontUtils.fontFamily.single.EXP_NEUE.fontFamily]: FontUtils.fontFamily.platform.EXP_NEUE.fontFamily,
+    [FontUtils.fontFamily.single.MONOSPACE.fontFamily]: FontUtils.fontFamily.platform.MONOSPACE.fontFamily,
+    [FontUtils.fontFamily.single.EXP_NEW_KANSAS_MEDIUM.fontFamily]: FontUtils.fontFamily.platform.EXP_NEW_KANSAS_MEDIUM.fontFamily,
+};
+
 // We are using the explicit composite architecture for performance gains.
 // Configuration for RenderHTML is handled in a top-level component providing
 // context to RenderHTMLSource components. See https://git.io/JRcZb
@@ -218,7 +245,8 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim
             baseStyle={styles.webViewStyles.baseFontStyle}
             tagsStyles={styles.webViewStyles.tagStyles}
             enableCSSInlineProcessing={false}
-            systemFonts={Object.values(FontUtils.fontFamily.single).map((font) => font.fontFamily)}
+            systemFonts={HTML_SYSTEM_FONTS}
+            fallbackFonts={HTML_FALLBACK_FONTS}
             htmlParserOptions={{
                 recognizeSelfClosing: true,
             }}

src/components/SignInButtons/AppleSignIn/AppleSignInLocales.ts

@@ -50,6 +50,7 @@ const APPLE_SIGN_IN_LOCALES = {
 
 const MAP_EXFY_LOCALE_TO_APPLE_LOCALE: Record<Locale, ValueOf<typeof APPLE_SIGN_IN_LOCALES>> = {
     [LOCALES.DE]: APPLE_SIGN_IN_LOCALES.de_DE,
+    [LOCALES.EL]: APPLE_SIGN_IN_LOCALES.el_GR,
     [LOCALES.EN]: APPLE_SIGN_IN_LOCALES.en_US,
     [LOCALES.ES]: APPLE_SIGN_IN_LOCALES.es_ES,
     [LOCALES.FR]: APPLE_SIGN_IN_LOCALES.fr_FR,

src/languages/IntlStore.ts

@@ -13,6 +13,7 @@ import {setDefaultOptions} from 'date-fns';
 import Onyx from 'react-native-onyx';
 
 import type de from './de';
+import type el from './el';
 import type en from './en';
 import type es from './es';
 import type fr from './fr';
@@ -62,6 +63,17 @@ class IntlStore {
                           this.dateUtilsCache.set(LOCALES.DE, module.de);
                       }),
                   ]),
+        [LOCALES.EL]: () =>
+            this.cache.has(LOCALES.EL)
+                ? Promise.all([Promise.resolve(), Promise.resolve()])
+                : Promise.all([
+                      import('./el').then((module: DynamicModule<typeof el>) => {
+                          this.cache.set(LOCALES.EL, flattenObject(extractModuleDefaultExport(module)));
+                      }),
+                      import('date-fns/locale/el').then((module) => {
+                          this.dateUtilsCache.set(LOCALES.EL, module.el);
+                      }),
+                  ]),
         [LOCALES.EN]: () =>
             this.cache.has(LOCALES.EN)
                 ? Promise.all([Promise.resolve(), Promise.resolve()])