(core) i18

Summary:
Adding initial work for localization support.

Summary in https://grist.quip.com/OtZKA6RHdQ6T/Internationalization-and-Localization

Test Plan: Not yet

Reviewers: paulfitz

Reviewed By: paulfitz

Subscribers: paulfitz

Differential Revision: https://phab.getgrist.com/D3633

app/client/ui/AddNewButton.ts

@@ -1,13 +1,14 @@
 import {theme, vars} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {dom, DomElementArg, Observable, styled} from "grainjs";
+import {t} from 'app/client/lib/localization';
 
 export function addNewButton(isOpen: Observable<boolean> | boolean = true, ...args: DomElementArg[]) {
   return cssAddNewButton(
     cssAddNewButton.cls('-open', isOpen),
     // Setting spacing as flex items allows them to shrink faster when there isn't enough space.
     cssLeftMargin(),
-    cssAddText('Add New'),
+    cssAddText(t('AddNew')),
     dom('div', {style: 'flex: 1 1 16px'}),
     cssPlusButton(cssPlusIcon('Plus')),
     dom('div', {style: 'flex: 0 1 16px'}),

app/client/ui/DocMenu.ts

@@ -29,6 +29,7 @@ import {Document, Workspace} from 'app/common/UserAPI';
 import {computed, Computed, dom, DomArg, DomContents, IDisposableOwner,
         makeTestId, observable, Observable} from 'grainjs';
 import {buildTemplateDocs} from 'app/client/ui/TemplateDocs';
+import {t} from 'app/client/lib/localization';
 import {localStorageBoolObs} from 'app/client/lib/localStorageObs';
 import {bigBasicButton} from 'app/client/ui2018/buttons';
 import sortBy = require('lodash/sortBy');
@@ -104,10 +105,10 @@ function createLoadedDocMenu(owner: IDisposableOwner, home: HomeModel) {
                 null :
                 css.docListHeader(
                   (
-                    page === 'all' ? 'All Documents' :
+                    page === 'all' ? t('AllDocuments') :
                     page === 'templates' ?
                       dom.domComputed(use => use(home.featuredTemplates).length > 0, (hasFeaturedTemplates) =>
-                        hasFeaturedTemplates ? 'More Examples & Templates' : 'Examples & Templates'
+                        hasFeaturedTemplates ? t('MoreExamplesAndTemplates') : t('ExamplesAndTemplates')
                     ) :
                     page === 'trash' ? 'Trash' :
                     workspace && [css.docHeaderIcon('Folder'), workspaceName(home.app, workspace)]
@@ -267,7 +268,7 @@ function buildOtherSites(home: HomeModel) {
     return css.otherSitesBlock(
       dom.autoDispose(hideOtherSitesObs),
       css.otherSitesHeader(
-        'Other Sites',
+        t('OtherSites'),
         dom.domComputed(hideOtherSitesObs, (collapsed) =>
           collapsed ? css.otherSitesHeaderIcon('Expand') : css.otherSitesHeaderIcon('Collapse')
         ),
@@ -275,11 +276,11 @@ function buildOtherSites(home: HomeModel) {
         testId('other-sites-header'),
       ),
       dom.maybe((use) => !use(hideOtherSitesObs), () => {
-        const onPersonalSite = Boolean(home.app.currentOrg?.owner);
-        const siteName = onPersonalSite ? 'your personal site' : `the ${home.app.currentOrgName} site`;
+        const personal = Boolean(home.app.currentOrg?.owner);
+        const siteName = home.app.currentOrgName;
         return [
           dom('div',
-            `You are on ${siteName}. You also have access to the following sites:`,
+            t('OtherSitesWelcome', { siteName, context: personal ? 'personal' : '' }),
             testId('other-sites-message')
           ),
           css.otherSitesButtons(

app/client/ui/HomeIntro.ts

@@ -1,3 +1,4 @@
+import {t} from 'app/client/lib/localization';
 import {getLoginOrSignupUrl, urlState} from 'app/client/models/gristUrlState';
 import {HomeModel} from 'app/client/models/HomeModel';
 import {productPill} from 'app/client/ui/AppHeader';
@@ -111,7 +112,7 @@ function makePersonalIntro(homeModel: HomeModel, user: FullUser) {
 function makeAnonIntro(homeModel: HomeModel) {
   const signUp = cssLink({href: getLoginOrSignupUrl()}, 'Sign up');
   return [
-    css.docListHeader(`Welcome to Grist!`, testId('welcome-title')),
+    css.docListHeader(t('Welcome'), testId('welcome-title')),
     cssIntroLine('Get started by exploring templates, or creating your first Grist document.'),
     cssIntroLine(signUp, ' to save your work.',
       (shouldHideUiElement('helpCenter') ? null : [' Visit our ', helpCenterLink(), ' to learn more.']),

app/client/ui/setupPage.ts

@@ -1,4 +1,5 @@
 import {get as getBrowserGlobals} from 'app/client/lib/browserGlobals';
+import {setupLocale} from 'app/client/lib/localization';
 import {AppModel, TopAppModelImpl} from 'app/client/models/AppModel';
 import {setUpErrorHandling} from 'app/client/models/errors';
 import {buildSnackbarDom} from 'app/client/ui/NotifyUI';
@@ -19,6 +20,8 @@ export function setupPage(buildPage: (appModel: AppModel) => DomContents) {
   attachCssRootVars(topAppModel.productFlavor);
   addViewportTag();
 
+  void setupLocale();
+
   // Add globals needed by test utils.
   G.window.gristApp = {
     testNumPendingApiRequests: () => BaseAPI.numPendingRequests(),