chore: Adds localization behind internal feature flag

.gitignore

@@ -27,6 +27,7 @@ packages/responses/dist
 packages/sncrypto-common/dist
 packages/sncrypto-web/dist
 packages/snjs/dist
+packages/i18n/dist
 
 **/.pnp.*
 **/.yarn/*

packages/.locale-state.metadata

@@ -0,0 +1,4 @@
+{
+  "project": "fe-standardnotes",
+  "locale": "ac161306578fcd17ec1c93f67b26c6d4516d4232"
+}

packages/desktop/app/javascripts/Main/Localization/MainProcessLocalization.ts

@@ -0,0 +1,61 @@
+import { addLocale, LocaleData, setDefaultLang, useLocale } from 'ttag'
+import fs from 'fs/promises'
+import path from 'path'
+import { NativeLocalizationState } from '@standardnotes/snjs'
+import { reinitializeStrings } from '../Strings'
+
+const DEFAULT_LOCALE = 'en_US'
+
+const loadedLocales = new Set<string>()
+let appliedLocale = DEFAULT_LOCALE
+let onStringsReloaded: (() => void) | undefined
+
+setDefaultLang(DEFAULT_LOCALE)
+
+export function registerMainProcessLocalizationCallbacks(callbacks: { onStringsReloaded: () => void }): void {
+  onStringsReloaded = callbacks.onStringsReloaded
+}
+
+const WEB_LOCALE_FILE_PATTERN = /^(config\/locales|[a-z]{2,3}_[A-Za-z0-9]{2,4})\.json$/
+
+function getLocalesDirectory(): string {
+  return path.join(__dirname, 'locales')
+}
+
+export async function readWebLocaleFile(relativePath: string): Promise<string> {
+  if (!WEB_LOCALE_FILE_PATTERN.test(relativePath)) {
+    throw new Error(`Invalid web locale file: ${relativePath}`)
+  }
+
+  return fs.readFile(path.join(__dirname, 'web', 'locales', relativePath), 'utf8')
+}
+
+async function activateLocale(locale: string): Promise<void> {
+  if (locale !== DEFAULT_LOCALE && !loadedLocales.has(locale)) {
+    const filePath = path.join(getLocalesDirectory(), `${locale}.json`)
+    const contents = await fs.readFile(filePath, 'utf8')
+    addLocale(locale, JSON.parse(contents) as LocaleData)
+    loadedLocales.add(locale)
+  }
+
+  useLocale(locale)
+}
+
+export async function syncMainProcessLocalization(state: NativeLocalizationState): Promise<void> {
+  const locale = state.localizationEnabled && state.locale ? state.locale : DEFAULT_LOCALE
+  if (locale === appliedLocale) {
+    return
+  }
+
+  try {
+    await activateLocale(locale)
+    appliedLocale = locale
+  } catch (error) {
+    console.error(`Failed to load desktop locale pack for ${locale}`, error)
+    useLocale(DEFAULT_LOCALE)
+    appliedLocale = DEFAULT_LOCALE
+  }
+
+  reinitializeStrings()
+  onStringsReloaded?.()
+}

packages/desktop/app/javascripts/Main/Menus/Menus.ts

@@ -323,7 +323,7 @@ function windowMenu(store: Store, trayManager: TrayManager, reload: () => void):
     role: Roles.Window,
     submenu: [
       menuRole(str().minimize, Roles.Minimize),
-      menuRole(str().close, Roles.Close),
+      menuRole(isMac() ? str().closeWindow : str().close, Roles.Close),
       Separator,
       ...(isMac() ? macWindowItems() : [minimizeToTrayItem(store, trayManager, reload)]),
     ],

packages/desktop/app/javascripts/Main/Remote/RemoteBridge.ts

@@ -21,6 +21,8 @@ import { Component, PackageManagerInterface } from '../Packages/PackageManagerIn
 import { SearchManagerInterface } from '../Search/SearchManagerInterface'
 import { RemoteDataInterface } from './DataInterface'
 import { MediaManagerInterface } from '../Media/MediaManagerInterface'
+import { readWebLocaleFile, syncMainProcessLocalization } from '../Localization/MainProcessLocalization'
+import { NativeLocalizationState } from '@standardnotes/snjs'
 
 /**
  * Read https://github.com/electron/remote to understand how electron/remote works.
@@ -92,6 +94,8 @@ export class RemoteBridge implements CrossProcessBridge {
       getHomeServerLogs: this.getHomeServerLogs.bind(this),
       getHomeServerUrl: this.getHomeServerUrl.bind(this),
       getHomeServerLastErrorMessage: this.getHomeServerLastErrorMessage.bind(this),
+      syncMainProcessLocalization: this.syncMainProcessLocalization.bind(this),
+      readWebLocaleFile: this.readWebLocaleFile.bind(this),
     }
   }
 
@@ -302,4 +306,12 @@ export class RemoteBridge implements CrossProcessBridge {
   async getHomeServerLastErrorMessage(): Promise<string | undefined> {
     return this.homeServerManager.getHomeServerLastErrorMessage()
   }
+
+  async syncMainProcessLocalization(state: NativeLocalizationState): Promise<void> {
+    await syncMainProcessLocalization(state)
+  }
+
+  async readWebLocaleFile(relativePath: string): Promise<string> {
+    return readWebLocaleFile(relativePath)
+  }
 }

packages/desktop/app/javascripts/Main/Strings/index.ts

@@ -23,6 +23,11 @@ export function initializeStrings(_locale: string): void {
   strings = createStrings()
 }
 
+/** Rebuilds menu/tray strings after the active ttag locale changes. */
+export function reinitializeStrings(): void {
+  strings = createStrings()
+}
+
 export function str(): Strings {
   if (isDev()) {
     if (!strings) {

packages/desktop/app/javascripts/Main/Strings/strings.ts

@@ -54,6 +54,7 @@ export function createStrings(): Strings {
       clearCacheAndReload: c('B8.MobileDesktopShared.Desktop.Menu.Label').t`Clear Cache and Reload`,
       speech: c('B8.MobileDesktopShared.Desktop.Menu.Label').t`Speech`,
       close: c('B8.MobileDesktopShared.Desktop.Menu.Label').t`Close`,
+      closeWindow: c('B8.MobileDesktopShared.Desktop.Menu.Label').t`Close Window`,
       minimize: c('B8.MobileDesktopShared.Desktop.Menu.Label').t`Minimize`,
       zoom: c('B8.MobileDesktopShared.Desktop.Menu.Label').t`Zoom`,
       bringAllToFront: c('B8.MobileDesktopShared.Desktop.Menu.Label').t`Bring All to Front`,

packages/desktop/app/javascripts/Main/Strings/types.ts

@@ -50,6 +50,7 @@ interface AppMenuStrings {
   clearCacheAndReload: string
   speech: string
   close: string
+  closeWindow: string
   minimize: string
   zoom: string
   bringAllToFront: string

packages/desktop/app/javascripts/Main/TrayManager.ts

@@ -12,11 +12,13 @@ export interface TrayManager {
   shouldMinimizeToTray(): boolean
   createTrayIcon(): void
   destroyTrayIcon(): void
+  reloadLabels(): void
 }
 
 export function createTrayManager(window: Electron.BrowserWindow, store: Store): TrayManager {
   let tray: Tray | undefined
   let updateContextMenu: (() => void) | undefined
+  let applyTrayLabels: (() => void) | undefined
 
   function showWindow() {
     window.show()
@@ -70,6 +72,15 @@ export function createTrayManager(window: Electron.BrowserWindow, store: Store):
         },
       ])
 
+      applyTrayLabels = function applyTrayLabels() {
+        trayContextMenu.getMenuItemById(SHOW_WINDOW_ID)!.label = str().show
+        trayContextMenu.getMenuItemById(HIDE_WINDOW_ID)!.label = str().hide
+        const quitItem = trayContextMenu.items.find((item) => item.role === 'quit')
+        if (quitItem) {
+          quitItem.label = str().quit
+        }
+      }
+
       updateContextMenu = function updateContextMenu() {
         if (window.isVisible()) {
           trayContextMenu.getMenuItemById(SHOW_WINDOW_ID)!.visible = false
@@ -105,6 +116,12 @@ export function createTrayManager(window: Electron.BrowserWindow, store: Store):
       tray!.destroy()
       tray = undefined
       updateContextMenu = undefined
+      applyTrayLabels = undefined
+    },
+
+    reloadLabels() {
+      applyTrayLabels?.()
+      updateContextMenu?.()
     },
   }
 }

packages/desktop/app/javascripts/Main/Window.ts

@@ -27,6 +27,7 @@ import { initializeZoomManager } from './ZoomManager'
 import { HomeServerManager } from './HomeServer/HomeServerManager'
 import { FilesManager } from './File/FilesManager'
 import { DirectoryManager } from './Directory/DirectoryManager'
+import { registerMainProcessLocalizationCallbacks } from './Localization/MainProcessLocalization'
 
 const WINDOW_DEFAULT_WIDTH = 1100
 const WINDOW_DEFAULT_HEIGHT = 800
@@ -224,6 +225,13 @@ async function createWindowServices(window: Electron.BrowserWindow, appState: Ap
     spellcheckerManager,
   })
 
+  registerMainProcessLocalizationCallbacks({
+    onStringsReloaded: () => {
+      menuManager.reload()
+      trayManager.reloadLabels()
+    },
+  })
+
   const fileBackupsManager = new FilesBackupManager(appState, window.webContents, filesManager)
 
   return {

packages/desktop/app/javascripts/Renderer/CrossProcessBridge.ts

@@ -4,6 +4,7 @@ import {
   HomeServerManagerInterface,
 } from '@web/Application/Device/DesktopSnjsExports'
 import { Component } from '../Main/Packages/PackageManagerInterface'
+import { NativeLocalizationState } from '@standardnotes/snjs'
 
 export interface CrossProcessBridge extends FileBackupsDevice, DirectoryManagerInterface, HomeServerManagerInterface {
   get extServerHost(): string
@@ -25,4 +26,6 @@ export interface CrossProcessBridge extends FileBackupsDevice, DirectoryManagerI
   onSearch(text: string): void
   destroyAllData(): void
   askForMediaAccess(type: 'camera' | 'microphone'): Promise<boolean>
+  syncMainProcessLocalization(state: NativeLocalizationState): Promise<void>
+  readWebLocaleFile(relativePath: string): Promise<string>
 }

packages/desktop/desktop.webpack.common.js

@@ -102,6 +102,10 @@ module.exports = function ({ onlyTranspileTypescript = false, experimentalFeatur
             from: 'app/icon',
             to: 'icon',
           },
+          {
+            from: 'locales',
+            to: 'locales',
+          },
         ],
       }),
     ],

packages/desktop/locales/config/locales.json

@@ -0,0 +1,10 @@
+{
+  "zh_CN": "简体中文",
+  "en_US": "English",
+  "fr_FR": "Français",
+  "de_DE": "Deutsch",
+  "ja_JP": "日本語",
+  "pt_BR": "Português (Brasil)",
+  "es_LA": "Español (Latinoamérica)",
+  "tr_TR": "Türkçe"
+}