(core) updates from grist-core

.gitignore

@@ -10,6 +10,7 @@
 /landing.db
 /docs/
 /sandbox_venv*
+/.vscode/
 
 # Build helper files.
 /.build*

app/client/aclui/ACLUsers.ts

@@ -15,7 +15,7 @@ import {cssMenu, cssMenuWrap, defaultMenuOptions, IPopupOptions, setPopupToCreat
 import {getUserRoleText} from 'app/common/UserAPI';
 import {makeT} from 'app/client/lib/localization';
 
-const t = makeT('aclui.ViewAsDropdown');
+const t = makeT("ACLUsers");
 
 function isSpecialEmail(email: string) {
   return email === ANONYMOUS_USER_EMAIL || email === EVERYONE_EMAIL;
@@ -56,13 +56,13 @@ export class ACLUsersPopup extends Disposable {
         cssUsers.cls(''),
         cssHeader(t('View As'), dom.show(this._shareUsers.length > 0)),
         dom.forEach(this._shareUsers, buildRow),
-        (this._attributeTableUsers.length > 0) ? cssHeader(t('UsersFrom')) : null,
+        (this._attributeTableUsers.length > 0) ? cssHeader(t("Users from table")) : null,
         dom.forEach(this._attributeTableUsers, buildExampleUserRow),
         // Include example users only if there are not many "real" users.
         // It might be better to have an expandable section with these users, collapsed
         // by default, but that's beyond my UI ken.
         (this._shareUsers.length + this._attributeTableUsers.length < 5) ? [
-          (this._exampleUsers.length > 0) ? cssHeader(t('ExampleUsers')) : null,
+          (this._exampleUsers.length > 0) ? cssHeader(t("Example Users")) : null,
           dom.forEach(this._exampleUsers, buildExampleUserRow)
         ] : null,
         (el) => { setTimeout(() => el.focus(), 0); },

app/client/aclui/AccessRules.ts

@@ -55,7 +55,7 @@ import {
 import {makeT} from 'app/client/lib/localization';
 import isEqual = require('lodash/isEqual');
 
-const t = makeT('aclui.AccessRules');
+const t = makeT('AccessRules');
 
 // tslint:disable:max-classes-per-file no-console
 
@@ -329,21 +329,21 @@ export class AccessRules extends Disposable {
         bigBasicButton({disabled: true}, dom.hide(this._savingEnabled),
           dom.text((use) => {
             const s = use(this._ruleStatus);
-            return s === RuleStatus.CheckPending ? t('Checking') :
-              s === RuleStatus.Unchanged ? t('Saved') : t('Invalid');
+            return s === RuleStatus.CheckPending ? t("Checking...") :
+              s === RuleStatus.Unchanged ? t("Saved") : t("Invalid");
           }),
           testId('rules-non-save')
         ),
-        bigPrimaryButton(t('Save'), dom.show(this._savingEnabled),
+        bigPrimaryButton(t("Save"), dom.show(this._savingEnabled),
           dom.on('click', () => this.save()),
           testId('rules-save'),
         ),
-        bigBasicButton(t('Reset'), dom.show(use => use(this._ruleStatus) !== RuleStatus.Unchanged),
+        bigBasicButton(t("Reset"), dom.show(use => use(this._ruleStatus) !== RuleStatus.Unchanged),
           dom.on('click', () => this.update()),
           testId('rules-revert'),
         ),
 
-        bigBasicButton(t('AddTableRules'), cssDropdownIcon('Dropdown'), {style: 'margin-left: auto'},
+        bigBasicButton(t("Add Table Rules"), cssDropdownIcon('Dropdown'), {style: 'margin-left: auto'},
           menu(() =>
             this.allTableIds.map((tableId) =>
               // Add the table on a timeout, to avoid disabling the clicked menu item
@@ -375,15 +375,15 @@ export class AccessRules extends Disposable {
       shadowScroll(
         dom.maybe(use => use(this._userAttrRules).length, () =>
           cssSection(
-            cssSectionHeading(t('UserAttributes')),
+            cssSectionHeading(t("User Attributes")),
             cssTableRounded(
               cssTableHeaderRow(
                 cssCell1(cssCell.cls('-rborder'), cssCell.cls('-center'), cssColHeaderCell('Name')),
                 cssCell4(
                   cssColumnGroup(
-                    cssCell1(cssColHeaderCell(t('AttributeToLookUp'))),
-                    cssCell1(cssColHeaderCell(t('LookupTable'))),
-                    cssCell1(cssColHeaderCell(t('LookupColumn'))),
+                    cssCell1(cssColHeaderCell(t("Attribute to Look Up"))),
+                    cssCell1(cssColHeaderCell(t("Lookup Table"))),
+                    cssCell1(cssColHeaderCell(t("Lookup Column"))),
                     cssCellIcon(),
                   ),
                 ),
@@ -520,7 +520,7 @@ export class AccessRules extends Disposable {
     for (const tableId of tableIds) {
       // We don't know what the table's name was, just its tableId.
       // Hopefully, the user will understand.
-      const title = t('RemoveRulesMentioningTable', { tableId });
+      const title = t('Remove {{- tableId }} rules', { tableId });
       const button = bigBasicButton(title, cssRemoveIcon('Remove'), dom.on('click', async () => {
         await Promise.all(this._tableRules.get()
           .filter(rules => rules.tableId === tableId)
@@ -546,7 +546,7 @@ export class AccessRules extends Disposable {
     };
     for (const colId of colIds) {
       // TODO: we could translate tableId to table name in this case.
-      const title = t('RemoveRulesMentioningColumn', { tableId, colId });
+      const title = t('Remove column {{- colId }} from {{- tableId }} rules', { tableId, colId });
       const button = bigBasicButton(title, cssRemoveIcon('Remove'), dom.on('click', async () => {
         await Promise.all(this._tableRules.get()
           .filter(rules => rules.tableId === tableId)
@@ -562,7 +562,7 @@ export class AccessRules extends Disposable {
     names: string[]
   ) {
     for (const name of names) {
-      const title = t('RemoveUserAttribute', {name});
+      const title = t('Remove {{- name }} user attribute', {name});
       const button = bigBasicButton(title, cssRemoveIcon('Remove'), dom.on('click', async () => {
         await Promise.all(this._userAttrRules.get()
           .filter(rule => rule.name.get() === name)
@@ -628,13 +628,13 @@ class TableRules extends Disposable {
   public buildDom() {
     return cssSection(
       cssSectionHeading(
-        dom('span', t('RulesForTable'), cssTableName(this._accessRules.getTableTitle(this.tableId))),
+        dom('span', t("Rules for table "), cssTableName(this._accessRules.getTableTitle(this.tableId))),
         cssIconButton(icon('Dots'), {style: 'margin-left: auto'},
           menu(() => [
-            menuItemAsync(() => this._addColumnRuleSet(), t('AddColumnRule')),
-            menuItemAsync(() => this._addDefaultRuleSet(), t('AddDefaultRule'),
+            menuItemAsync(() => this._addColumnRuleSet(), t("Add Column Rule")),
+            menuItemAsync(() => this._addDefaultRuleSet(), t("Add Default Rule"),
               dom.cls('disabled', use => Boolean(use(this._defaultRuleSet)))),
-            menuItemAsync(() => this.remove(), t('DeleteTableRules')),
+            menuItemAsync(() => this._accessRules.removeTableRules(this), t("Delete Table Rules")),
           ]),
           testId('rule-table-menu-btn'),
         ),
@@ -762,7 +762,7 @@ class TableRules extends Disposable {
 class SpecialRules extends TableRules {
   public buildDom() {
     return cssSection(
-      cssSectionHeading(t('SpecialRules'), testId('rule-table-header')),
+      cssSectionHeading(t("Special Rules"), testId('rule-table-header')),
       this.buildColumnRuleSets(),
       this.buildErrors(),
       testId('rule-table'),
@@ -1009,17 +1009,18 @@ class DefaultObsRuleSet extends ObsRuleSet {
 function getSpecialRuleDescription(type: string): string {
   switch (type) {
     case 'AccessRules':
-      return t('AccessRulesDescription');
+      return t("Allow everyone to view Access Rules.");
     case 'FullCopies':
-      return t('FullCopiesDescription');
+      return t(`Allow everyone to copy the entire document, or view it in full in fiddle mode.
+Useful for examples and templates, but not for sensitive data.`);
     default: return type;
   }
 }
 
 function getSpecialRuleName(type: string): string {
   switch (type) {
-    case 'AccessRules': return t('AccessRulesName');
-    case 'FullCopies': return t('FullCopies');
+    case 'AccessRules': return t("Permission to view Access Rules");
+    case 'FullCopies': return t("Permission to access the document in full when needed");
     default: return type;
   }
 }
@@ -1157,7 +1158,7 @@ class ObsUserAttributeRule extends Disposable {
       cssCell1(cssCell.cls('-rborder'),
         cssCellContent(
           cssInput(this._name, async (val) => this._name.set(val),
-            {placeholder: t('AttributeNamePlaceholder')},
+            {placeholder: t("Attribute name")},
             (this._options.focus ? (elem) => { setTimeout(() => elem.focus(), 0); } : null),
             testId('rule-userattr-name'),
           ),
@@ -1444,7 +1445,7 @@ class ObsRulePart extends Disposable {
             wide ? cssCell4.cls('') : null,
             this._memoEditor = aclMemoEditor(this._memo,
               {
-                placeholder: t('MemoEditorPlaceholder'),
+                placeholder: t("Type a message..."),
               },
               dom.onKeyDown({
                 // Match the behavior of the formula editor.

app/client/aclui/PermissionsWidget.ts

@@ -15,7 +15,7 @@ import {makeT} from 'app/client/lib/localization';
 // One of the strings 'read', 'update', etc.
 export type PermissionKey = keyof PartialPermissionSet;
 
-const t = makeT('aclui.PermissionsWidget');
+const t = makeT('PermissionsWidget');
 
 /**
  * Renders a box for each of availableBits, and a dropdown with a description and some shortcuts.
@@ -64,13 +64,13 @@ export function permissionsWidget(
           null
         ),
         // If the set matches any recognized pattern, mark that item with a tick (checkmark).
-        cssMenuItem(() => setPermissions(allowAll), tick(isEqual(pset.get(), allowAll)), t('AllowAll'),
+        cssMenuItem(() => setPermissions(allowAll), tick(isEqual(pset.get(), allowAll)), t("Allow All"),
           dom.cls('disabled', options.disabled)
         ),
-        cssMenuItem(() => setPermissions(denyAll), tick(isEqual(pset.get(), denyAll)), t('DenyAll'),
+        cssMenuItem(() => setPermissions(denyAll), tick(isEqual(pset.get(), denyAll)), t("Deny All"),
           dom.cls('disabled', options.disabled)
         ),
-        cssMenuItem(() => setPermissions(readOnly), tick(isEqual(pset.get(), readOnly)), t('ReadOnly'),
+        cssMenuItem(() => setPermissions(readOnly), tick(isEqual(pset.get(), readOnly)), t("Read Only"),
           dom.cls('disabled', options.disabled)
         ),
         cssMenuItem(() => setPermissions(empty),

app/client/components/ActionLog.ts

@@ -47,7 +47,7 @@ const state = {
   DEFAULT: 'default'
 };
 
-const t = makeT('components.ActionLog');
+const t = makeT('ActionLog');
 
 export class ActionLog extends dispose.Disposable implements IDomComponent {
 
@@ -227,7 +227,7 @@ export class ActionLog extends dispose.Disposable implements IDomComponent {
   }
 
   private _buildLogDom() {
-    this._loadActionSummaries().catch((error) => gristNotify(t("ActionLogFailed")));
+    this._loadActionSummaries().catch((error) => gristNotify(t("Action Log failed to load")));
     return dom('div.action_log',
         dom('div.preference_item',
             koForm.checkbox(this._showAllTables,
@@ -395,7 +395,7 @@ export class ActionLog extends dispose.Disposable implements IDomComponent {
         const newName = tableRename[1];
         if (!newName) {
           // TODO - find a better way to send informative notifications.
-          gristNotify(t('TableRemovedInAction', {tableId:tableId, actionNum: action.actionNum}));
+          gristNotify(t("Table {{tableId}} was subsequently removed in action #{{actionNum}}", {tableId:tableId, actionNum: action.actionNum}));
           return;
         }
         tableId = newName;
@@ -406,7 +406,7 @@ export class ActionLog extends dispose.Disposable implements IDomComponent {
       // Check is this row was removed - if so there's no reason to go on.
       if (td.removeRows.indexOf(rowId) >= 0) {
           // TODO - find a better way to send informative notifications.
-        gristNotify(t("RowRemovedInAction", {actionNum}));
+        gristNotify(t("This row was subsequently removed in action {{action.actionNum}}", {actionNum}));
         return;
       }
 
@@ -416,7 +416,7 @@ export class ActionLog extends dispose.Disposable implements IDomComponent {
         const newName = columnRename[1];
         if (!newName) {
           // TODO - find a better way to send informative notifications.
-          gristNotify(t("ColumnRemovedInAction", {colId, actionNum: action.actionNum}));
+          gristNotify(t("Column {{colId}} was subsequently removed in action #{{action.actionNum}}", {colId, actionNum: action.actionNum}));
           return;
         }
         colId = newName;

app/client/components/ChartView.ts

@@ -50,7 +50,7 @@ const DONUT_DEFAULT_TEXT_SIZE = 24;
 
 const testId = makeTestId('test-chart-');
 
-const t = makeT('components.ChartView');
+const t = makeT('ChartView');
 
 function isPieLike(chartType: string) {
   return ['pie', 'donut'].includes(chartType);
@@ -655,8 +655,8 @@ export class ChartConfig extends GrainJSDisposable {
           testId('error-bars'),
         ),
         dom.domComputed(this._optionsObj.prop('errorBars'), (value: ChartOptions["errorBars"]) =>
-          value === 'symmetric' ? cssRowHelp(t('EachYFollowedByOne')) :
-          value === 'separate' ? cssRowHelp(t('EachYFollowedByTwo')) :
+          value === 'symmetric' ? cssRowHelp(t("Each Y series is followed by a series for the length of error bars.")) :
+          value === 'separate' ? cssRowHelp(t("Each Y series is followed by two series, for top and bottom error bars.")) :
           null
         ),
       ]),
@@ -669,7 +669,7 @@ export class ChartConfig extends GrainJSDisposable {
           select(this._groupDataColId, this._groupDataOptions),
           testId('group-by-column'),
         ),
-        cssHintRow(t('CreateSeparateSeries')),
+        cssHintRow(t("Create separate series for each value of the selected column.")),
       ]),
 
       // TODO: user should select x axis before widget reach page
@@ -677,7 +677,7 @@ export class ChartConfig extends GrainJSDisposable {
       cssRow(
         select(
           this._xAxis, this._columnsOptions,
-          { defaultLabel: t('PickColumn') }
+          { defaultLabel: t("Pick a column") }
         ),
         testId('x-axis'),
       ),
@@ -773,7 +773,7 @@ export class ChartConfig extends GrainJSDisposable {
   private async _setGroupDataColumn(colId: string) {
     const viewFields = this._section.viewFields.peek().peek();
 
-    await this._gristDoc.docData.bundleActions(t('SelectedNewGroupDataColumns'), async () => {
+    await this._gristDoc.docData.bundleActions(t("selected new group data columns"), async () => {
       this._freezeXAxis.set(true);
       this._freezeYAxis.set(true);
       try {
@@ -872,7 +872,7 @@ export class ChartConfig extends GrainJSDisposable {
   private async _setAggregation(val: boolean) {
     try {
       this._freezeXAxis.set(true);
-      await this._gristDoc.docData.bundleActions(t("ToggleChartAggregation"), async () => {
+      await this._gristDoc.docData.bundleActions(t("Toggle chart aggregation"), async () => {
         if (val) {
           await this._doAggregation();
         } else {

app/client/components/CodeEditorPanel.ts

@@ -9,7 +9,7 @@ import {makeT} from 'app/client/lib/localization';
 const hljs           = require('highlight.js/lib/core');
 hljs.registerLanguage('python', require('highlight.js/lib/languages/python'));
 
-const t = makeT('components.CodeEditorPanel');
+const t = makeT('CodeEditorPanel');
 
 export class CodeEditorPanel extends DisposableWithEvents {
   private _schema = Observable.create(this, '');
@@ -28,8 +28,8 @@ export class CodeEditorPanel extends DisposableWithEvents {
     return dom('div.g-code-panel.clipboard',
       {tabIndex: "-1"},
       dom.maybe(this._denied, () => dom('div.g-code-panel-denied',
-        dom('h2', dom.text(t('AccessDenied'))),
-        dom('div', dom.text(t('CodeViewOnlyFullAccess'))),
+        dom('h2', dom.text(t("Access denied"))),
+        dom('div', dom.text(t("Code View is available only when you have full document access."))),
       )),
       dom.maybe(this._schema, (schema) => {
         // The reason to scope and rebuild instead of using `kd.text(schema)` is because

app/client/components/DataTables.ts

@@ -16,7 +16,7 @@ import {makeT} from 'app/client/lib/localization';
 
 const testId = makeTestId('test-raw-data-');
 
-const t = makeT('components.DataTables');
+const t = makeT('DataTables');
 
 export class DataTables extends Disposable {
   private _tables: Observable<TableRec[]>;
@@ -45,7 +45,7 @@ export class DataTables extends Disposable {
       cssTableList(
         /***************  List section **********/
         testId('list'),
-        cssHeader(t('RawDataTables')),
+        cssHeader(t("Raw Data Tables")),
         cssList(
           dom.forEach(this._tables, tableRec =>
             cssItem(
@@ -65,11 +65,11 @@ export class DataTables extends Disposable {
                       testId('table-id'),
                       dom.text(tableRec.tableId),
                     ),
-                    { title : t('ClickToCopy') },
+                    { title : t("Click to copy") },
                     dom.on('click', async (e, d) => {
                       e.stopImmediatePropagation();
                       e.preventDefault();
-                      showTransientTooltip(d, t('TableIDCopied'), {
+                      showTransientTooltip(d, t("Table ID copied to clipboard"), {
                         key: 'copy-table-id'
                       });
                       await copyToClipboard(tableRec.tableId.peek());
@@ -127,7 +127,7 @@ export class DataTables extends Disposable {
     return [
       menuItem(
         () => this._duplicateTable(table),
-        t('DuplicateTable'),
+        t("Duplicate Table"),
         testId('menu-duplicate-table'),
         dom.cls('disabled', use =>
           use(isReadonly) ||
@@ -144,7 +144,7 @@ export class DataTables extends Disposable {
           use(docModel.visibleTables.getObservable()).length <= 1 && !use(table.isHidden)
         ))
       ),
-      dom.maybe(isReadonly, () => menuText(t("NoEditAccess"))),
+      dom.maybe(isReadonly, () => menuText(t("You do not have edit access to this document"))),
     ];
   }
 
@@ -160,7 +160,7 @@ export class DataTables extends Disposable {
     function doRemove() {
       return docModel.docData.sendAction(['RemoveTable', r.tableId()]);
     }
-    confirmModal(t("DeleteData", {formattedTableName : r.formattedTableName()}), 'Delete', doRemove);
+    confirmModal(t("Delete {{formattedTableName}} data, and remove it from all pages?", {formattedTableName : r.formattedTableName()}), 'Delete', doRemove);
   }
 
   private _tableRows(table: TableRec) {

app/client/components/DocumentUsage.ts

@@ -13,7 +13,7 @@ import {canUpgradeOrg} from 'app/common/roles';
 import {Computed, Disposable, dom, DomContents, DomElementArg, makeTestId, styled} from 'grainjs';
 import {makeT} from 'app/client/lib/localization';
 
-const t = makeT('components.DocumentUsage');
+const t = makeT('DocumentUsage');
 
 const testId = makeTestId('test-doc-usage-');
 
@@ -60,7 +60,7 @@ export class DocumentUsage extends Disposable {
       // Invalid row limits are currently treated as if they are undefined.
       const maxValue = maxRows && maxRows > 0 ? maxRows : undefined;
       return {
-        name: t('Rows'),
+        name: t("Rows"),
         currentValue: typeof rowCount !== 'object' ? undefined : rowCount.total,
         maximumValue: maxValue ?? DEFAULT_MAX_ROWS,
         unit: 'rows',
@@ -75,7 +75,7 @@ export class DocumentUsage extends Disposable {
       // Invalid data size limits are currently treated as if they are undefined.
       const maxValue = maxSize && maxSize > 0 ? maxSize : undefined;
       return {
-        name: t('DataSize'),
+        name: t("Data Size"),
         currentValue: typeof dataSize !== 'number' ? undefined : dataSize,
         maximumValue: maxValue ?? DEFAULT_MAX_DATA_SIZE,
         unit: 'MB',
@@ -97,7 +97,7 @@ export class DocumentUsage extends Disposable {
       // Invalid attachments size limits are currently treated as if they are undefined.
       const maxValue = maxSize && maxSize > 0 ? maxSize : undefined;
       return {
-        name: t('AttachmentsSize'),
+        name: t("Attachments Size"),
         currentValue: typeof attachmentsSize !== 'number' ? undefined : attachmentsSize,
         maximumValue: maxValue ?? DEFAULT_MAX_ATTACHMENTS_SIZE,
         unit: 'GB',
@@ -135,7 +135,7 @@ export class DocumentUsage extends Disposable {
 
   public buildDom() {
     return dom('div',
-      cssHeader(t('Usage'), testId('heading')),
+      cssHeader(t("Usage"), testId('heading')),
       dom.domComputed(this._areAllMetricsPending, (isLoading) => {
         if (isLoading) { return cssSpinner(loadingSpinner(), testId('loading')); }
 
@@ -149,7 +149,7 @@ export class DocumentUsage extends Disposable {
     return dom.domComputed((use) => {
       const isAccessDenied = use(this._isAccessDenied);
       if (isAccessDenied === null) { return null; }
-      if (isAccessDenied) { return buildMessage(t('UsageStatisticsOnlyFullAccess')); }
+      if (isAccessDenied) { return buildMessage(t("Usage statistics are only available to users with full access to the document data.")); }
 
       const org = use(this._currentOrg);
       const product = use(this._currentProduct);
@@ -237,12 +237,12 @@ export function buildUpgradeMessage(
   variant: 'short' | 'long',
   onUpgrade: () => void,
 ) {
-  if (!canUpgrade) { return t('LimitContactSiteOwner'); }
+  if (!canUpgrade) { return t("Contact the site owner to upgrade the plan to raise limits."); }
 
-  const upgradeLinkText = t('UpgradeLinkText')
+  const upgradeLinkText = t("start your 30-day free trial of the Pro plan.")
   // TODO i18next
   return [
-    variant === 'short' ? null : t('ForHigherLimits'),
+    variant === 'short' ? null : t("For higher limits, "),
     buildUpgradeLink(
       variant === 'short' ? capitalizeFirstWord(upgradeLinkText) : upgradeLinkText,
       () => onUpgrade(),

app/client/components/Drafts.ts

@@ -273,7 +273,7 @@ class NotificationAdapter extends Disposable implements Notification {
   }
   public showUndoDiscard() {
     const notifier = this._doc.app.topAppModel.notifier;
-    const notification = notifier.createUserMessage(t("UndoDiscard"), {
+    const notification = notifier.createUserMessage(t("Undo discard"), {
       message: () =>
         discardNotification(
           dom.on("click", () => {
@@ -421,7 +421,7 @@ const styledTooltip = styled('div', `
 function cellTooltip(clb: () => any) {
   return function (ctl: ITooltipControl) {
     return styledTooltip(
-      cssLink(t('RestoreLastEdit'),
+      cssLink(t("Restore last edit"),
         dom.on('mousedown', (ev) => { ev.preventDefault(); ctl.close(); clb(); }),
         testId('draft-tooltip'),
       ),
@@ -440,7 +440,7 @@ const styledNotification = styled('div', `
 `);
 function discardNotification(...args: IDomArgs<TagElem<"div">>) {
   return styledNotification(
-    t("UndoDiscard"),
+    t("Undo discard"),
     testId("draft-notification"),
     ...args
   );

app/client/components/GristDoc.ts

@@ -87,7 +87,7 @@ import * as ko from 'knockout';
 import cloneDeepWith = require('lodash/cloneDeepWith');
 import isEqual = require('lodash/isEqual');
 
-const t = makeT('components.GristDoc');
+const t = makeT('GristDoc');
 
 const G = getBrowserGlobals('document', 'window');
 
@@ -314,7 +314,7 @@ export class GristDoc extends DisposableWithEvents {
     const importSourceElems = ImportSourceElement.fromArray(this.docPluginManager.pluginsList);
     const importMenuItems = [
       {
-        label: t('ImportFromFile'),
+        label: t("Import from file"),
         action: () => Importer.selectAndImport(this, importSourceElems, null, createPreview),
       },
       ...importSourceElems.map(importSourceElem => ({
@@ -599,7 +599,7 @@ export class GristDoc extends DisposableWithEvents {
       }
     }
     const res = await docData.bundleActions(
-      t("AddedNewLinkedSection", {viewName}),
+      t("Added new linked section to view {{viewName}}", {viewName}),
       () => this.addWidgetToPageImpl(val, tableId ?? null)
     );
 
@@ -680,7 +680,7 @@ export class GristDoc extends DisposableWithEvents {
     }
 
     return await this._viewLayout!.freezeUntil(docData.bundleActions(
-      t("SavedLinkedSectionIn", {title:section.title(), name: viewModel.name()}),
+      t("Saved linked section {{title}} in view {{name}}", {title:section.title(), name: viewModel.name()}),
       async () => {
 
         // if table changes or a table is made a summary table, let's replace the view section by a

app/client/components/Importer.ts

@@ -36,7 +36,7 @@ import {labeledSquareCheckbox} from 'app/client/ui2018/checkbox';
 import {ACCESS_DENIED, AUTH_INTERRUPTED, canReadPrivateFiles, getGoogleCodeForReading} from 'app/client/ui/googleAuth';
 import debounce = require('lodash/debounce');
 
-const t = makeT('components.Importer');
+const t = makeT('Importer');
 
 
 // We expect a function for creating the preview GridView, to avoid the need to require the
@@ -631,7 +631,7 @@ export class Importer extends DisposableWithEvents {
                   cssMergeOptions(
                     cssMergeOptionsToggle(labeledSquareCheckbox(
                       updateExistingRecords,
-                      t('UpdateExistingRecords'),
+                      t("Update existing records"),
                       dom.autoDispose(updateRecordsListener),
                       testId('importer-update-existing-records')
                     )),
@@ -646,14 +646,14 @@ export class Importer extends DisposableWithEvents {
 
                       return [
                         cssMergeOptionsMessage(
-                          t('MergeRowsThatMatch'),
+                          t("Merge rows that match these fields:"),
                           testId('importer-merge-fields-message')
                         ),
                         multiSelect(
                           mergeCols,
                           section.viewFields().peek().map(f => ({label: f.label(), value: f.colId()})) ?? [],
                           {
-                            placeholder: t("SelectFieldsToMatch"),
+                            placeholder: t("Select fields to match on"),
                             error: hasInvalidMergeCols
                           },
                           dom.autoDispose(mergeColsListener),

app/client/components/PluginScreen.ts

@@ -7,7 +7,7 @@ import { PluginInstance } from 'app/common/PluginInstance';
 import { RenderTarget } from 'app/plugin/RenderOptions';
 import { Disposable, dom, DomContents, Observable, styled } from 'grainjs';
 
-const t = makeT('components.PluginScreen');
+const t = makeT('PluginScreen');
 
 /**
  * Rendering options for the PluginScreen modal.
@@ -55,7 +55,7 @@ export class PluginScreen extends Disposable {
   public renderError(message: string) {
     this.render([
       this._buildModalTitle(),
-      cssModalBody(t('ImportFailed'), message, testId('importer-error')),
+      cssModalBody(t("Import failed: "), message, testId('importer-error')),
       cssModalButtons(
         bigBasicButton('Close',
           dom.on('click', () => this.close()),

app/client/components/RecordLayout.js

@@ -41,7 +41,7 @@ var {menu} = require('../ui2018/menus');
 var {testId} = require('app/client/ui2018/cssVars');
 var {contextMenu} = require('app/client/ui/contextMenu');
 
-const t = makeT('components.RecordLayout');
+const t = makeT('RecordLayout');
 
 /**
  * Construct a RecordLayout.
@@ -263,7 +263,7 @@ RecordLayout.prototype.saveLayoutSpec = async function(layoutSpec) {
   // Use separate copies of addColAction, since sendTableActions modified each in-place.
   let addActions = gutil.arrayRepeat(addColNum, 0).map(() => addColAction.slice());
 
-  await docData.bundleActions(t('UpdatingRecordLayout'), () => {
+  await docData.bundleActions(t("Updating record layout."), () => {
     return Promise.try(() => {
       return addColNum > 0 ? docModel.dataTables[tableId].sendTableActions(addActions) : [];
     })

app/client/components/RecordLayoutEditor.js

@@ -6,7 +6,7 @@ var {makeT} = require('app/client/lib/localization');
 var commands = require('./commands');
 var LayoutEditor = require('./LayoutEditor');
 
-const t = makeT('components.RecordLayoutEditor');
+const t = makeT('RecordLayoutEditor');
 const {basicButton, cssButton, primaryButton} = require('app/client/ui2018/buttons');
 const {icon} = require('app/client/ui2018/icons');
 const {menu, menuDivider, menuItem} = require('app/client/ui2018/menus');
@@ -99,7 +99,7 @@ RecordLayoutEditor.prototype.buildEditorDom = function() {
         dom.maybe((use) => use(this._hiddenColumns).length > 0,
           () => menuDivider()),
         dom.forEach(this._hiddenColumns, (col) =>
-          menuItem(() => showField(col), t("ShowField", {label:col.label()}))
+          menuItem(() => showField(col), t("Show field {{- label}}", {label:col.label()}))
         ),
         testId('edit-layout-add-menu'),
       ]),

app/client/components/RefSelect.ts

@@ -14,7 +14,7 @@ import ko from 'knockout';
 import {menu, menuItem} from 'popweasel';
 import {makeT} from 'app/client/lib/localization';
 
-const t = makeT('components.RefSelect');
+const t = makeT('RefSelect');
 
 interface Item {
   label: string;
@@ -97,7 +97,7 @@ export class RefSelect extends Disposable {
           testId('ref-select-item'),
         )
       ),
-      cssAddLink(cssAddIcon('Plus'), t('AddColumn'),
+      cssAddLink(cssAddIcon('Plus'), t("Add Column"),
         menu(() => [
           ...this._validCols.peek()
             .filter((col) => !this._addedSet.peek().has(col.colId.peek()))
@@ -105,7 +105,7 @@ export class RefSelect extends Disposable {
               menuItem(() => this._addFormulaField({ label: col.label(), value: col.colId() }),
                 col.label.peek())
             ),
-          cssEmptyMenuText(t("NoColumnsAdd")),
+          cssEmptyMenuText(t("No columns to add")),
           testId('ref-select-menu'),
         ]),
         testId('ref-select-add'),

app/client/components/SelectionSummary.ts

@@ -16,7 +16,7 @@ import ko from 'knockout';
 import {Computed, Disposable, dom, makeTestId, Observable, styled, subscribe} from 'grainjs';
 import {makeT} from 'app/client/lib/localization';
 
-const t = makeT('components.SelectionSummary');
+const t = makeT('SelectionSummary');
 
 /**
  * A beginning and end index for a range of columns or rows.
@@ -266,7 +266,7 @@ export class SelectionSummary extends Disposable {
 
 async function doCopy(value: string, elem: Element) {
   await copyToClipboard(value);
-  showTransientTooltip(elem, t('CopiedClipboard'), {key: 'copy-selection-summary'});
+  showTransientTooltip(elem, t("Copied to clipboard"), {key: 'copy-selection-summary'});
 }
 
 const cssSummary = styled('div', `

app/client/components/TypeTransform.ts

@@ -20,7 +20,7 @@ import {UserAction} from 'app/common/DocActions';
 import {Computed, dom, fromKo, Observable} from 'grainjs';
 import {makeT} from 'app/client/lib/localization';
 
-const t = makeT('components.TypeTransformation');
+const t = makeT('TypeTransformation');
 
 // To simplify diff (avoid rearranging methods to satisfy private/public order).
 /* eslint-disable @typescript-eslint/member-ordering */
@@ -74,7 +74,7 @@ export class TypeTransform extends ColumnTransform {
             return basicButton(dom.on('click', () => this.editor.writeObservable()),
               t('Preview'), testId("type-transform-update"),
               dom.cls('disabled', (use) => use(disableButtons) || use(this.formulaUpToDate)),
-              { title: t('UpdateFormula') }
+              { title: t('Update formula (Shift+Enter)') }
             );
           } else {
             return basicButton(dom.on('click', () => { this._reviseTypeChange.set(true); }),

app/client/components/ValidationPanel.js

@@ -7,7 +7,7 @@ var kf = require('../lib/koForm');
 var AceEditor = require('./AceEditor');
 var {makeT} = require('app/client/lib/localization');
 
-const t = makeT('components.ValidationPanel');
+const t = makeT('ValidationPanel');
 
 /**
  * Document level configuration settings.
@@ -33,7 +33,7 @@ dispose.makeDisposable(ValidationPanel);
 ValidationPanel.prototype.onAddRule = function() {
   this.validationsTable.sendTableAction(["AddRecord", null, {
     tableRef: this.docTables.at(0).id(),
-    name: t("RuleLength", {length: this.validations.peekLength + 1}),
+    name: t("Rule {{length}}", {length: this.validations.peekLength + 1}),
     formula: ""
   }])
   .then(function() {
@@ -86,7 +86,7 @@ ValidationPanel.prototype.buildDom = function() {
             2, '',
             1, kf.buttonGroup(
               kf.button(() => editor.writeObservable(),
-                'Apply', { title: t('UpdateFormula')},
+                'Apply', { title: t("Update formula (Shift+Enter)")},
                 kd.toggleClass('disabled', editorUpToDate)
               )
             )

app/client/components/ViewConfigTab.js

@@ -19,7 +19,7 @@ const {makeT} = require('app/client/lib/localization');
 
 const testId = makeTestId('test-vconfigtab-');
 
-const t = makeT('components.ViewConfigTab');
+const t = makeT('ViewConfigTab');
 
 /**
  * Helper class that combines one ViewSection's data for building dom.
@@ -124,9 +124,9 @@ ViewConfigTab.prototype._buildAdvancedSettingsDom = function() {
     const table = sectionData.section.table();
     const isCollapsed = ko.observable(true);
     return [
-      kf.collapserLabel(isCollapsed, t('AdvancedSettings'), dom.testId('ViewConfig_advanced')),
+      kf.collapserLabel(isCollapsed, t("Advanced settings"), dom.testId('ViewConfig_advanced')),
       kf.helpRow(kd.hide(isCollapsed),
-        t('BigTablesMayBeMarked'),
+        t("Big tables may be marked as \"on-demand\" to avoid loading them into the data engine."),
         kd.style('text-align', 'left'),
         kd.style('margin-top', '1.5rem')
       ),
@@ -135,7 +135,7 @@ ViewConfigTab.prototype._buildAdvancedSettingsDom = function() {
       ),
       kf.row(kd.hide(isCollapsed),
         kf.buttonGroup(kf.button(() => this._makeOnDemand(table),
-          kd.text(() => table.onDemand() ? t('UnmarkOnDemandButton') : t('MakeOnDemandButton')),
+          kd.text(() => table.onDemand() ? t("Unmark On-Demand") : t("Make On-Demand")),
           dom.testId('ViewConfig_onDemandBtn')
         ))
       ),
@@ -152,9 +152,9 @@ ViewConfigTab.prototype._buildThemeDom = function() {
       return cssRow(
         dom.autoDispose(theme),
         select(theme, [
-          {label: t('Form'),        value: 'form'   },
-          {label: t('Compact'),     value: 'compact'},
-          {label: t('Blocks'),      value: 'blocks'  },
+          {label: t("Form"),        value: 'form'   },
+          {label: t("Compact"),     value: 'compact'},
+          {label: t("Blocks"),      value: 'blocks'  },
         ]),
         testId('detail-theme')
       );
@@ -173,7 +173,7 @@ ViewConfigTab.prototype._buildLayoutDom = function() {
       const layoutEditorObs = ko.computed(() => view && view.recordLayout && view.recordLayout.layoutEditor());
       return cssRow({style: 'margin-top: 16px;'},
         kd.maybe(layoutEditorObs, (editor) => editor.buildFinishButtons()),
-        primaryButton(t('EditCardLayout'),
+        primaryButton(t("Edit Card Layout"),
           dom.autoDispose(layoutEditorObs),
           dom.on('click', () => commands.allCommands.editLayout.run()),
           grainjsDom.hide(layoutEditorObs),
@@ -222,8 +222,8 @@ ViewConfigTab.prototype._buildCustomTypeItems = function() {
     // 3)
     showObs: () => activeSection().customDef.mode() === "plugin",
     buildDom: () => kd.scope(activeSection, ({customDef}) => dom('div',
-      kf.row(5, t("PluginColon"), 13, kf.text(customDef.pluginId, {}, {list: "list_plugin"}, dom.testId('ViewConfigTab_customView_pluginId'))),
-      kf.row(5, t("SectionColon"), 13, kf.text(customDef.sectionId, {}, {list: "list_section"},  dom.testId('ViewConfigTab_customView_sectionId'))),
+      kf.row(5, t("Plugin: "), 13, kf.text(customDef.pluginId, {}, {list: "list_plugin"}, dom.testId('ViewConfigTab_customView_pluginId'))),
+      kf.row(5, t("Section: "), 13, kf.text(customDef.sectionId, {}, {list: "list_section"},  dom.testId('ViewConfigTab_customView_sectionId'))),
       // For both `customPlugin` and `selectedSection` it is possible for the value not to be in the
       // list of options. Combining <datalist> and <input> allows both to freely edit the value with
       // keyboard and to select it from a list. Although the content of the list seems to be

app/client/components/duplicatePage.ts

@@ -15,7 +15,7 @@ import zip = require('lodash/zip');
 import zipObject = require('lodash/zipObject');
 import {makeT} from 'app/client/lib/localization';
 
-const t = makeT('components.duplicatePage');
+const t = makeT('duplicatePage');
 
 // Duplicate page with pageId. Starts by prompting user for a new name.
 export async function duplicatePage(gristDoc: GristDoc, pageId: number) {
@@ -30,7 +30,7 @@ export async function duplicatePage(gristDoc: GristDoc, pageId: number) {
         cssLabel("Name"),
         inputEl = cssInput({value: pageName + ' (copy)'}),
       ),
-      t("DoesNotCopyData"),
+      t("Note that this does not copy data, but creates another view of the same data."),
     ])
   ));
 }
@@ -41,7 +41,7 @@ async function makeDuplicate(gristDoc: GristDoc, pageId: number, pageName: strin
   const viewSections = sourceView.viewSections.peek().peek();
   let viewRef = 0;
   await gristDoc.docData.bundleActions(
-    t("DuplicatePageName", {pageName}),
+    t("Duplicate page {{pageName}}", {pageName}),
     async () => {
       // create new view and new sections
       const results = await createNewViewSections(gristDoc.docData, viewSections);

app/client/lib/ACUserManager.ts

@@ -18,7 +18,7 @@ import {createUserImage, cssUserImage} from "app/client/ui/UserImage";
 import {Computed, computed, dom, DomElementArg, Holder, IDisposableOwner, Observable, styled} from "grainjs";
 import {cssMenuItem} from "popweasel";
 
-const t = makeT('lib.ACUserManager');
+const t = makeT('ACUserManager');
 
 export interface ACUserItem extends ACItem {
   value: string;
@@ -109,10 +109,10 @@ export function buildACMemberEmail(
         cssUserImagePlus.cls('-invalid', (use) => !use(enableAdd),
         )),
       cssMemberText(
-        cssMemberPrimaryPlus(t("InviteNewMember")),
+        cssMemberPrimaryPlus(t("Invite new member")),
         cssMemberSecondaryPlus(
           // dom.text(use => `We'll email an invite to ${use(emailObs)}`)
-          dom.text(use => t('InviteEmail', {email: use(emailObs)})) // TODO i18next
+          dom.text(use => t("We'll email an invite to {{email}}", {email: use(emailObs)})) // TODO i18next
         )
       ),
       testId("um-add-email")
@@ -143,7 +143,7 @@ export function buildACMemberEmail(
     (emailInput = cssEmailInput(
       emailObs,
       {onInput: true, isValid},
-      {type: "email", placeholder: t("EmailInputPlaceholder")},
+      {type: "email", placeholder: t("Enter email address")},
       dom.on("input", acOpen),
       dom.on("focus", acOpen),
       dom.on("click", acOpen),

app/client/models/AppModel.ts

@@ -24,7 +24,7 @@ import {getOrgName, Organization, OrgError, UserAPI, UserAPIImpl} from 'app/comm
 import {getUserPrefObs, getUserPrefsObs} from 'app/client/models/UserPrefs';
 import {bundleChanges, Computed, Disposable, Observable, subscribe} from 'grainjs';
 
-const t = makeT('models.AppModel');
+const t = makeT('AppModel');
 
 // Reexported for convenience.
 export {reportError} from 'app/client/models/errors';
@@ -199,7 +199,7 @@ export class TopAppModelImpl extends Disposable implements TopAppModel {
         if (org.billingAccount && org.billingAccount.product &&
             org.billingAccount.product.name === 'suspended') {
           this.notifier.createUserMessage(
-            t('TeamSiteSuspended'),
+            t("This team site is suspended. Documents can be read, but not modified."),
             {actions: ['renew', 'personal']}
           );
         }

app/client/models/DocPageModel.ts

@@ -29,7 +29,7 @@ import {makeT} from 'app/client/lib/localization';
 
 // tslint:disable:no-console
 
-const t = makeT('models.DocPageModel');
+const t = makeT('DocPageModel');
 
 export interface DocInfo extends Document {
   isReadonly: boolean;
@@ -236,13 +236,14 @@ export class DocPageModelImpl extends Disposable implements DocPageModel {
     const isDenied = (err as any).code === 'ACL_DENY';
     const isDocOwner = isOwner(this.currentDoc.get());
     confirmModal(
-      t("ErrorAccessingDocument"),
+      t("Error accessing document"),
       t("Reload"),
       async () => window.location.reload(true),
-      isDocOwner ? t('ReloadingOrRecoveryMode', {error: err.message}) :
-        t('AccessError', {context: isDenied ? 'denied' : 'recover', error: err.message}),
+      isDocOwner ? t("You can try reloading the document, or using recovery mode. Recovery mode opens the document to be fully accessible to owners, and inaccessible to others. It also disables formulas. [{{error}}]", {error: err.message}) :
+        isDenied ? t('Sorry, access to this document has been denied. [{{error}}]', {error: err.message}) :
+        t("Document owners can attempt to recover the document. [{{error}}]", {error: err.message}),
       {  hideCancel: true,
-         extraButtons: (isDocOwner && !isDenied) ? bigBasicButton(t('EnterRecoveryMode'), dom.on('click', async () => {
+         extraButtons: (isDocOwner && !isDenied) ? bigBasicButton(t("Enter recovery mode"), dom.on('click', async () => {
            await this._api.getDocAPI(this.currentDocId.get()!).recover(true);
            window.location.reload(true);
          }), testId('modal-recovery-mode')) : null,
@@ -344,7 +345,7 @@ function addMenu(importSources: ImportSource[], gristDoc: GristDoc, isReadonly:
     menuItem(
       (elem) => openPageWidgetPicker(elem, gristDoc, (val) => gristDoc.addWidgetToPage(val).catch(reportError),
                                      {isNewPage: false, selectBy}),
-      menuIcon("Widget"), t("AddWidgetToPage"), testId('dp-add-widget-to-page'),
+      menuIcon("Widget"), t("Add Widget to Page"), testId('dp-add-widget-to-page'),
       // disable for readonly doc and all special views
       dom.cls('disabled', (use) => typeof use(gristDoc.activeViewId) !== 'number' || isReadonly),
     ),
@@ -361,7 +362,7 @@ function addMenu(importSources: ImportSource[], gristDoc: GristDoc, isReadonly:
         dom.cls('disabled', isReadonly)
       )
     ),
-    isReadonly ? menuText(t('NoEditAccess')) : null,
+    isReadonly ? menuText(t("You do not have edit access to this document")) : null,
     testId('dp-add-new-menu')
   ];
 }

app/client/models/UserManagerModel.ts

@@ -12,7 +12,7 @@ import {ANONYMOUS_USER_EMAIL, Document, EVERYONE_EMAIL, FullUser, getRealAccess,
 import {computed, Computed, Disposable, obsArray, ObsArray, observable, Observable} from 'grainjs';
 import some = require('lodash/some');
 
-const t = makeT('models.UserManagerModel');
+const t = makeT('UserManagerModel');
 
 export interface UserManagerModel {
   initData: PermissionData;                    // PermissionData used to initialize the UserManager
@@ -101,28 +101,28 @@ interface IBuildMemberOptions {
 export class UserManagerModelImpl extends Disposable implements UserManagerModel {
   // Select options for each individual user's role dropdown.
   public readonly userSelectOptions: IMemberSelectOption[] = [
-    { value: roles.OWNER,  label: t('Owner')  },
-    { value: roles.EDITOR, label: t('Editor') },
-    { value: roles.VIEWER, label: t('Viewer') }
+    { value: roles.OWNER,  label: t("Owner")  },
+    { value: roles.EDITOR, label: t("Editor") },
+    { value: roles.VIEWER, label: t("Viewer") }
   ];
   // Select options for each individual user's role dropdown in the org.
   public readonly orgUserSelectOptions: IOrgMemberSelectOption[] = [
-    { value: roles.OWNER,  label: t('Owner')  },
-    { value: roles.EDITOR, label: t('Editor') },
-    { value: roles.VIEWER, label: t('Viewer') },
-    { value: roles.MEMBER, label: t('NoDefaultAccess') },
+    { value: roles.OWNER,  label: t("Owner")  },
+    { value: roles.EDITOR, label: t("Editor") },
+    { value: roles.VIEWER, label: t("Viewer") },
+    { value: roles.MEMBER, label: t("No Default Access") },
   ];
   // Select options for the resource's maxInheritedRole dropdown.
   public readonly inheritSelectOptions: IMemberSelectOption[] = [
-    { value: roles.OWNER,  label: t('InFull')     },
-    { value: roles.EDITOR, label: t('ViewAndEdit') },
-    { value: roles.VIEWER, label: t('ViewOnly')   },
-    { value: null,         label: t('None')        }
+    { value: roles.OWNER,  label: t("In Full")     },
+    { value: roles.EDITOR, label: t("View & Edit") },
+    { value: roles.VIEWER, label: t("View Only")   },
+    { value: null,         label: t("None")        }
   ];
   // Select options for the public member's role dropdown.
   public readonly publicUserSelectOptions: IMemberSelectOption[] = [
-    { value: roles.EDITOR, label: t('Editor') },
-    { value: roles.VIEWER, label: t('Viewer') },
+    { value: roles.EDITOR, label: t("Editor") },
+    { value: roles.VIEWER, label: t("Viewer") },
   ];
 
   public activeUser: FullUser|null = this._options.activeUser ?? null;

app/client/ui/AccountPage.ts

@@ -58,13 +58,13 @@ export class AccountPage extends Disposable {
     const {enableCustomCss} = getGristConfig();
     return domComputed(this._userObs, (user) => user && (
       css.container(css.accountPage(
-        css.header(t('AccountSettings')),
+        css.header(t("Account settings")),
         css.dataRow(
-          css.inlineSubHeader(t('Email')),
+          css.inlineSubHeader(t("Email")),
           css.email(user.email),
         ),
         css.dataRow(
-          css.inlineSubHeader(t('Name')),
+          css.inlineSubHeader(t("Name")),
           domComputed(this._isEditingName, (isEditing) => (
             isEditing ? [
               transientInput(
@@ -78,13 +78,13 @@ export class AccountPage extends Disposable {
                 css.flexGrow.cls(''),
               ),
               css.textBtn(
-                css.icon('Settings'), t('Save'),
+                css.icon('Settings'), t("Save"),
                 // No need to save on 'click'. The transient input already does it on close.
               ),
             ] : [
               css.name(user.name),
               css.textBtn(
-                css.icon('Settings'), t('Edit'),
+                css.icon('Settings'), t("Edit"),
                 dom.on('click', () => this._isEditingName.set(true)),
               ),
             ]
@@ -93,7 +93,7 @@ export class AccountPage extends Disposable {
         ),
         // show warning for invalid name but not for the empty string
         dom.maybe(use => use(this._nameEdit) && !use(this._isNameValid), cssWarnings),
-        css.header(t('PasswordSecurity')),
+        css.header(t("Password & Security")),
         css.dataRow(
           css.inlineSubHeader(t("Login Method")),
           css.loginMethod(user.loginMethod),
@@ -106,24 +106,24 @@ export class AccountPage extends Disposable {
           css.dataRow(
             labeledSquareCheckbox(
               this._allowGoogleLogin,
-              t('AllowGoogleSigning'),
+              t("Allow signing in to this account with Google"),
               testId('allow-google-login-checkbox'),
             ),
             testId('allow-google-login'),
           ),
-          css.subHeader(t('TwoFactorAuth')),
+          css.subHeader(t("Two-factor authentication")),
           css.description(
-            t("TwoFactorAuthDescription")
+            t("Two-factor authentication is an extra layer of security for your Grist account designed to ensure that you're the only person who can access your account, even if someone knows your password.")
           ),
           dom.create(MFAConfig, user),
         ),
         // Custom CSS is incompatible with custom themes.
         enableCustomCss ? null : [
-          css.header(t('Theme')),
+          css.header(t("Theme")),
           dom.create(ThemeConfig, this._appModel),
         ],
-        css.header(t('API')),
-        css.dataRow(css.inlineSubHeader(t('APIKey')), css.content(
+        css.header(t("API")),
+        css.dataRow(css.inlineSubHeader(t("API Key")), css.content(
           dom.create(ApiKey, {
             apiKey: this._apiKey,
             onCreate: () => this._createApiKey(),
@@ -214,7 +214,7 @@ export function checkName(name: string): boolean {
  */
 function buildNameWarningsDom() {
   return css.warning(
-    t("WarningUsername"),
+    t("Names only allow letters, numbers and certain special characters"),
     testId('username-warning'),
   );
 }

app/client/ui/AccountWidget.ts

@@ -36,7 +36,7 @@ export class AccountWidget extends Disposable {
           cssUserIcon(createUserImage(user, 'medium', testId('user-icon')),
             menu(() => this._makeAccountMenu(user), {placement: 'bottom-end'}),
           ) :
-          cssSignInButton(t('SignIn'), icon('Collapse'), testId('user-signin'),
+          cssSignInButton(t("Sign in"), icon('Collapse'), testId('user-signin'),
             menu(() => this._makeAccountMenu(user), {placement: 'bottom-end'}),
           )
         )
@@ -57,24 +57,24 @@ export class AccountWidget extends Disposable {
     // The 'Document Settings' item, when there is an open document.
     const documentSettingsItem = (gristDoc ?
       menuItem(async () => (await loadGristDoc()).showDocSettingsModal(gristDoc.docInfo, this._docPageModel!),
-        t('DocumentSettings'),
+        t("Document Settings"),
         testId('dm-doc-settings')) :
       null);
 
     // The item to toggle mobile mode (presence of viewport meta tag).
     const mobileModeToggle = menuItem(viewport.toggleViewport,
       cssSmallDeviceOnly.cls(''),   // Only show this toggle on small devices.
-      t('ToggleMobileMode'),
+      t("Toggle Mobile Mode"),
       cssCheckmark('Tick', dom.show(viewport.viewportEnabled)),
       testId('usermenu-toggle-mobile'),
     );
 
     if (!user) {
       return [
-        menuItemLink({href: getLoginOrSignupUrl()}, t('SignIn')),
+        menuItemLink({href: getLoginOrSignupUrl()}, t("Sign in")),
         menuDivider(),
         documentSettingsItem,
-        menuItemLink({href: commonUrls.plans}, t('Pricing')),
+        menuItemLink({href: commonUrls.plans}, t("Pricing")),
         mobileModeToggle,
       ];
     }
@@ -88,14 +88,14 @@ export class AccountWidget extends Disposable {
           cssEmail(user.email, testId('usermenu-email'))
         )
       ),
-      menuItemLink(urlState().setLinkUrl({account: 'account'}), t('ProfileSettings')),
+      menuItemLink(urlState().setLinkUrl({account: 'account'}), t("Profile Settings")),
 
       documentSettingsItem,
 
       // Show 'Organization Settings' when on a home page of a valid org.
       (!this._docPageModel && currentOrg && this._appModel.isTeamSite ?
         menuItem(() => manageTeamUsers(currentOrg, user, this._appModel.api),
-                 roles.canEditAccess(currentOrg.access) ? t('ManageTeam') : t('AccessDetails'),
+                 roles.canEditAccess(currentOrg.access) ? t("Manage Team") : t("Access Details"),
                  testId('dm-org-access')) :
         // Don't show on doc pages, or for personal orgs.
         null),
@@ -111,7 +111,7 @@ export class AccountWidget extends Disposable {
       // org-listing UI below.
       this._appModel.topAppModel.isSingleOrg || shouldHideUiElement("multiAccounts") ? [] : [
         menuDivider(),
-        menuSubHeader(dom.text((use) => use(users).length > 1 ? t('SwitchAccounts') : t('Accounts'))),
+        menuSubHeader(dom.text((use) => use(users).length > 1 ? t("Switch Accounts") : t("Accounts"))),
         dom.forEach(users, (_user) => {
           if (_user.id === user.id) { return null; }
           return menuItem(() => this._switchAccount(_user),

app/client/ui/AddNewButton.ts

@@ -10,7 +10,7 @@ export function addNewButton(isOpen: Observable<boolean> | boolean = true, ...ar
     cssAddNewButton.cls('-open', isOpen),
     // Setting spacing as flex items allows them to shrink faster when there isn't enough space.
     cssLeftMargin(),
-    cssAddText(t('AddNew')),
+    cssAddText(t("Add New")),
     dom('div', {style: 'flex: 1 1 16px'}),
     cssPlusButton(cssPlusIcon('Plus')),
     dom('div', {style: 'flex: 0 1 16px'}),

app/client/ui/ApiKey.ts

@@ -55,7 +55,7 @@ export class ApiKey extends Disposable {
             },
             dom.attr('type', (use) => use(this._isHidden) ? 'password' : 'text'),
             testId('key'),
-            {title: t('ClickToShow')},
+            {title: t("Click to show")},
             dom.on('click', (_ev, el) => {
               this._isHidden.set(false);
               setTimeout(() => el.select(), 0);
@@ -67,7 +67,7 @@ export class ApiKey extends Disposable {
             this._inputArgs
           ),
           cssTextBtn(
-            cssTextBtnIcon('Remove'), t('Remove'),
+            cssTextBtnIcon('Remove'), t("Remove"),
             dom.on('click', () => this._showRemoveKeyModal()),
             testId('delete'),
             dom.boolAttr('disabled', (use) => use(this._loading) || this._anonymous)
@@ -76,9 +76,9 @@ export class ApiKey extends Disposable {
         description(this._getDescription(), testId('description')),
       )),
       dom.maybe((use) => !(use(this._apiKey) || this._anonymous), () => [
-        basicButton(t('Create'), dom.on('click', () => this._onCreate()), testId('create'),
+        basicButton(t("Create"), dom.on('click', () => this._onCreate()), testId('create'),
           dom.boolAttr('disabled', this._loading)),
-        description(t('ByGenerating'), testId('description')),
+        description(t("By generating an API key, you will be able to make API calls for your own account."), testId('description')),
       ]),
     );
   }
@@ -110,9 +110,9 @@ export class ApiKey extends Disposable {
 
   private _showRemoveKeyModal(): void {
     confirmModal(
-      t('RemoveAPIKey'), t('Remove'),
+      t("Remove API Key"), t("Remove"),
       () => this._onDelete(),
-      t("AboutToDeleteAPIKey")
+      t("You're about to delete an API key. This will cause all future requests using this API key to be rejected. Do you still want to delete?")
     );
   }
 }

app/client/ui/App.ts

@@ -93,8 +93,8 @@ export class App extends DisposableWithEvents {
         dom('table.g-help-table',
           dom('thead',
             dom('tr',
-              dom('th', t('Key')),
-              dom('th', t('Description'))
+              dom('th', t("Key")),
+              dom('th', t("Description"))
             )
           ),
           dom.forEach(commandList.groups, (group: any) => {
@@ -234,7 +234,7 @@ export class App extends DisposableWithEvents {
     if (message.match(/MemoryError|unmarshallable object/)) {
       if (err.message.length > 30) {
         // TLDR
-        err.message = t('MemoryError');
+        err.message = t("Memory Error");
       }
       this._mostRecentDocPageModel?.offerRecovery(err);
     }

app/client/ui/AppHeader.ts

@@ -57,11 +57,11 @@ export class AppHeader extends Disposable {
         this._orgName && cssDropdownIcon('Dropdown'),
         menu(() => [
           menuSubHeader(
-            this._appModel.isTeamSite ? t('TeamSite') : t('PersonalSite')
-              + (this._appModel.isLegacySite ? ` (${t('Legacy')})` : ''),
+            this._appModel.isTeamSite ? t("Team Site") : t("Personal Site")
+              + (this._appModel.isLegacySite ? ` (${t("Legacy")})` : ''),
             testId('orgmenu-title'),
           ),
-          menuItemLink(urlState().setLinkUrl({}), t('HomePage'), testId('orgmenu-home-page')),
+          menuItemLink(urlState().setLinkUrl({}), t("Home Page"), testId('orgmenu-home-page')),
 
           // Show 'Organization Settings' when on a home page of a valid org.
           (!this._docPageModel && currentOrg && !currentOrg.owner ?

app/client/ui/CellContextMenu.ts

@@ -20,14 +20,14 @@ export function CellContextMenu(rowOptions: IRowContextMenu, colOptions: IMultiC
 
   const numCols: number = colOptions.numColumns;
   const nameClearColumns = colOptions.isFiltered ?
-    t("ResetEntireColumns", {count: numCols}) :
-    t("ResetColumns", {count: numCols});
-  const nameDeleteColumns = t("DeleteColumns", {count: numCols});
+    t("Reset {{count}} entire columns", {count: numCols}) :
+    t("Reset {{count}} columns", {count: numCols});
+  const nameDeleteColumns = t("Delete {{count}} columns", {count: numCols});
 
   const numRows: number = rowOptions.numRows;
-  const nameDeleteRows = t("DeleteRows", {count: numRows});
+  const nameDeleteRows = t("Delete {{count}} rows", {count: numRows});
 
-  const nameClearCells = (numRows > 1 || numCols > 1) ? t('ClearValues') : t('ClearCell');
+  const nameClearCells = (numRows > 1 || numCols > 1) ? t("Clear values") : t("Clear cell");
 
   const result: Array<Element|null> = [];
 
@@ -43,9 +43,9 @@ export function CellContextMenu(rowOptions: IRowContextMenu, colOptions: IMultiC
     ...(
       (numCols > 1 || numRows > 1) ? [] : [
         menuDivider(),
-        menuItemCmd(allCommands.copyLink, t('CopyAnchorLink')),
+        menuItemCmd(allCommands.copyLink, t("Copy anchor link")),
         menuDivider(),
-        menuItemCmd(allCommands.filterByThisCellValue, t("FilterByValue")),
+        menuItemCmd(allCommands.filterByThisCellValue, t("Filter by this value")),
         menuItemCmd(allCommands.openDiscussion, 'Comment', dom.cls('disabled', (
          isReadonly || numRows === 0 || numCols === 0
         )), dom.hide(use => !use(COMMENTS()))) //TODO: i18next
@@ -60,19 +60,19 @@ export function CellContextMenu(rowOptions: IRowContextMenu, colOptions: IMultiC
         // When the view is sorted, any newly added records get shifts instantly at the top or
         // bottom. It could be very confusing for users who might expect the record to stay above or
         // below the active row. Thus in this case we show a single `insert row` command.
-        [menuItemCmd(allCommands.insertRecordAfter, t("InsertRow"),
+        [menuItemCmd(allCommands.insertRecordAfter, t("Insert row"),
                     dom.cls('disabled', disableInsert))] :
 
-        [menuItemCmd(allCommands.insertRecordBefore, t("InsertRowAbove"),
+        [menuItemCmd(allCommands.insertRecordBefore, t("Insert row above"),
                      dom.cls('disabled', disableInsert)),
-         menuItemCmd(allCommands.insertRecordAfter, t("InsertRowBelow"),
+         menuItemCmd(allCommands.insertRecordAfter, t("Insert row below"),
                      dom.cls('disabled', disableInsert))]
     ),
-    menuItemCmd(allCommands.duplicateRows, t("DuplicateRows", {count: numRows}),
+    menuItemCmd(allCommands.duplicateRows, t("Duplicate rows", {count: numRows}),
         dom.cls('disabled', disableInsert || numRows === 0)),
-    menuItemCmd(allCommands.insertFieldBefore, t("InsertColumnLeft"),
+    menuItemCmd(allCommands.insertFieldBefore, t("Insert column to the left"),
                 disableForReadonlyView),
-    menuItemCmd(allCommands.insertFieldAfter, t("InsertColumnRight"),
+    menuItemCmd(allCommands.insertFieldAfter, t("Insert column to the right"),
                 disableForReadonlyView),
 
 

app/client/ui/ColumnFilterMenu.ts

@@ -141,7 +141,7 @@ export function columnFilterMenu(owner: IDisposableOwner, opts: IFilterMenuOptio
         rangeInput(
           columnFilter.min, {
             isDateFilter,
-            placeholder: isDateFilter ? t('DateRangeMin') : t('RangeMin'),
+            placeholder: isDateFilter ? t("Start") : t("Min"),
             valueParser,
             valueFormatter,
             isSelected: isMinSelected,
@@ -154,7 +154,7 @@ export function columnFilterMenu(owner: IDisposableOwner, opts: IFilterMenuOptio
         rangeInput(
           columnFilter.max, {
             isDateFilter,
-            placeholder: isDateFilter ? t('DateRangeMax') : t('RangeMax'),
+            placeholder: isDateFilter ? t("End") : t("Max"),
             valueParser,
             valueFormatter,
             isSelected: isMaxSelected,
@@ -216,7 +216,7 @@ export function columnFilterMenu(owner: IDisposableOwner, opts: IFilterMenuOptio
         searchInput = cssSearch(
           searchValueObs, { onInput: true },
           testId('search-input'),
-          { type: 'search', placeholder: t('SearchValues') },
+          { type: 'search', placeholder: t('Search values') },
           dom.onKeyDown({
             Enter: () => {
               if (searchValueObs.get()) {
@@ -274,7 +274,7 @@ export function columnFilterMenu(owner: IDisposableOwner, opts: IFilterMenuOptio
       ),
       cssItemList(
         testId('list'),
-        dom.maybe(use => use(filteredValues).length === 0, () => cssNoResults(t('NoMatchingValues'))),
+        dom.maybe(use => use(filteredValues).length === 0, () => cssNoResults(t("No matching values"))),
         dom.domComputed(filteredValues, (values) => values.slice(0, model.limitShown).map(([key, value]) => (
           cssMenuItem(
             cssLabel(
@@ -310,17 +310,17 @@ export function columnFilterMenu(owner: IDisposableOwner, opts: IFilterMenuOptio
           }
           if (isAboveLimit) {
             return searchValue ? [
-              buildSummary(t('OtherMatching'), valuesBeyondLimit, false, model),
-              buildSummary(t('OtherNonMatching'), otherValues, true, model),
+              buildSummary(t("Other Matching"), valuesBeyondLimit, false, model),
+              buildSummary(t("Other Non-Matching"), otherValues, true, model),
             ] : [
-              buildSummary(t('OtherValues'), concat(otherValues, valuesBeyondLimit), false, model),
-              buildSummary(t('FutureValues'), [], true, model),
+              buildSummary(t("Other Values"), concat(otherValues, valuesBeyondLimit), false, model),
+              buildSummary(t("Future Values"), [], true, model),
             ];
           } else {
             return anyOtherValues ? [
               buildSummary(t('Others'), otherValues, true, model)
             ] : [
-              buildSummary(t('FutureValues'), [], true, model)
+              buildSummary(t("Future Values"), [], true, model)
             ];
           }
         }),

app/client/ui/CustomSectionConfig.ts

@@ -61,7 +61,7 @@ class ColumnPicker extends Disposable {
     return [
       cssLabel(
         this._column.title,
-        this._column.optional ? cssSubLabel(t('Optional')) : null,
+        this._column.optional ? cssSubLabel(t(" (optional)")) : null,
         testId('label-for-' + this._column.name),
       ),
       this._column.description ? cssHelp(
@@ -73,7 +73,7 @@ class ColumnPicker extends Disposable {
           properValue,
           options,
           {
-            defaultLabel: this._column.typeDesc != "any" ? t('PickAColumnWithType', {"columnType": this._column.typeDesc}) : t('PickAColumn')
+            defaultLabel: this._column.typeDesc != "any" ? t("Pick a {{columnType}} column", {"columnType": this._column.typeDesc}) : t("Pick a column")
           }
         ),
         testId('mapping-for-' + this._column.name),
@@ -105,7 +105,7 @@ class ColumnListPicker extends Disposable {
     return [
       cssRow(
         cssAddMapping(
-          cssAddIcon('Plus'), t('Add') + ' ' + this._column.title,
+          cssAddIcon('Plus'), t("Add") + ' ' + this._column.title,
           menu(() => {
             const otherColumns = this._getNotMappedColumns();
             const typedColumns = otherColumns.filter(this._typeFilter());
@@ -117,7 +117,7 @@ class ColumnListPicker extends Disposable {
                 col.label.peek(),
               )),
               wrongTypeCount > 0 ? menuText(
-                t("WrongTypesMenuText", {wrongTypeCount, columnType: this._column.type.toLowerCase(), count: wrongTypeCount}),
+                t("{{wrongTypeCount}} non-{{columnType}} columns are not shown", {wrongTypeCount, columnType: this._column.type.toLowerCase(), count: wrongTypeCount}),
                 testId('map-message-' + this._column.name)
               ) : null
             ];
@@ -370,17 +370,17 @@ export class CustomSectionConfig extends Disposable {
         return null;
       }
       switch(level) {
-        case AccessLevel.none: return cssConfirmLine(t("WidgetNoPermissison"));
-        case AccessLevel.read_table: return cssConfirmLine(t("WidgetNeedRead", {read: dom("b", "read")})); // TODO i18next
-        case AccessLevel.full: return cssConfirmLine(t("WidgetNeedFullAccess", {fullAccess: dom("b", "full access")})); // TODO i18next
+        case AccessLevel.none: return cssConfirmLine(t("Widget does not require any permissions."));
+        case AccessLevel.read_table: return cssConfirmLine(t("Widget needs to {{read}} the current table.", {read: dom("b", "read")})); // TODO i18next
+        case AccessLevel.full: return cssConfirmLine(t("Widget needs {{fullAccess}} to this document.", {fullAccess: dom("b", "full access")})); // TODO i18next
         default: throw new Error(`Unsupported ${level} access level`);
       }
     }
     // Options for access level.
     const levels: IOptionFull<string>[] = [
-      {label: t('NoDocumentAccess'), value: AccessLevel.none},
-      {label: t('ReadSelectedTable'), value: AccessLevel.read_table},
-      {label: t('FullDocumentAccess'), value: AccessLevel.full},
+      {label: t("No document access"), value: AccessLevel.none},
+      {label: t("Read selected table"), value: AccessLevel.read_table},
+      {label: t("Full document access"), value: AccessLevel.full},
     ];
     return dom(
       'div',
@@ -388,7 +388,7 @@ export class CustomSectionConfig extends Disposable {
       this._canSelect
         ? cssRow(
             select(this._selectedId, options, {
-              defaultLabel: t('SelectCustomWidget'),
+              defaultLabel: t("Select Custom Widget"),
               menuCssClass: cssMenu.className,
             }),
             testId('select')
@@ -399,7 +399,7 @@ export class CustomSectionConfig extends Disposable {
           cssTextInput(
             this._url,
             async value => this._url.set(value),
-            dom.attr('placeholder', t('EnterCustomURL')),
+            dom.attr('placeholder', t("Enter Custom URL")),
             testId('url')
           )
         ),
@@ -440,7 +440,7 @@ export class CustomSectionConfig extends Disposable {
       dom.maybe(this._hasConfiguration, () =>
         cssSection(
           textButton(
-            t('OpenConfiguration'),
+            t("Open configuration"),
             dom.on('click', () => this._openConfiguration()),
             testId('open-configuration')
           )
@@ -450,7 +450,7 @@ export class CustomSectionConfig extends Disposable {
         cssLink(
           dom.attr('href', 'https://support.getgrist.com/widget-custom'),
           dom.attr('target', '_blank'),
-          t('LearnMore')
+          t("Learn more about custom widgets")
         )
       ),
       dom.maybeOwned(use => use(this._section.columnsToMap), (owner, columns) => {

app/client/ui/DocHistory.ts

@@ -28,8 +28,8 @@ export class DocHistory extends Disposable implements IDomComponent {
 
   public buildDom() {
     const tabs = [
-      {value: 'activity', label: t('Activity')},
-      {value: 'snapshots', label: t('Snapshots')},
+      {value: 'activity', label: t("Activity")},
+      {value: 'snapshots', label: t("Snapshots")},
     ];
     return [
       cssSubTabs(
@@ -79,7 +79,7 @@ export class DocHistory extends Disposable implements IDomComponent {
     return dom(
       'div',
       dom.maybe(snapshotsDenied, () => cssSnapshotDenied(
-        t('SnapshotsUnavailable'),
+        t("Snapshots are unavailable."),
         testId('doc-history-error'))),
       // Note that most recent snapshots are first.
       dom.domComputed(snapshots, (snapshotList) => snapshotList.map((snapshot, index) => {
@@ -98,11 +98,11 @@ export class DocHistory extends Disposable implements IDomComponent {
             ),
             cssMenuDots(icon('Dots'),
               menu(() => [
-                  menuItemLink(setLink(snapshot), t('OpenSnapshot')),
-                  menuItemLink(setLink(snapshot, origUrlId), t('CompareToCurrent'),
-                    menuAnnotate(t('Beta'))),
-                  prevSnapshot && menuItemLink(setLink(prevSnapshot, snapshot.docId), t('CompareToPrevious'),
-                    menuAnnotate(t('Beta'))),
+                  menuItemLink(setLink(snapshot), t("Open Snapshot")),
+                  menuItemLink(setLink(snapshot, origUrlId), t("Compare to Current"),
+                    menuAnnotate(t("Beta"))),
+                  prevSnapshot && menuItemLink(setLink(prevSnapshot, snapshot.docId), t("Compare to Previous"),
+                    menuAnnotate(t("Beta"))),
                 ],
                 {placement: 'bottom-end', parentSelectorToMark: '.' + cssSnapshotCard.className}
               ),

app/client/ui/DocMenu.ts

@@ -71,8 +71,8 @@ function createLoadedDocMenu(owner: IDisposableOwner, home: HomeModel) {
   return css.docList(
     css.docMenu(
       dom.maybe(!home.app.currentFeatures.workspaces, () => [
-        css.docListHeader(t('ServiceNotAvailable')),
-        dom('span', t('NeedPaidPlan')),
+        css.docListHeader(t("This service is not available right now")),
+        dom('span', t("(The organization needs a paid plan)")),
       ]),
 
       // currentWS and showIntro observables change together. We capture both in one domComputed call.
@@ -98,7 +98,7 @@ function createLoadedDocMenu(owner: IDisposableOwner, home: HomeModel) {
             // TODO: this is shown on all pages, but there is a hack in currentWSPinnedDocs that
             // removes all pinned docs when on trash page.
             dom.maybe((use) => use(home.currentWSPinnedDocs).length > 0, () => [
-              css.docListHeader(css.pinnedDocsIcon('PinBig'), t('PinnedDocuments')),
+              css.docListHeader(css.pinnedDocsIcon('PinBig'), t("Pinned Documents")),
               createPinnedDocs(home, home.currentWSPinnedDocs),
             ]),
 
@@ -106,7 +106,7 @@ function createLoadedDocMenu(owner: IDisposableOwner, home: HomeModel) {
             dom.maybe((use) => page === 'templates' && use(home.featuredTemplates).length > 0, () => [
               css.featuredTemplatesHeader(
                 css.featuredTemplatesIcon('Idea'),
-                t('Featured'),
+                t("Featured"),
                 testId('featured-templates-header')
               ),
               createPinnedDocs(home, home.featuredTemplates, true),
@@ -118,12 +118,12 @@ function createLoadedDocMenu(owner: IDisposableOwner, home: HomeModel) {
                 null :
                 css.docListHeader(
                   (
-                    page === 'all' ? t('AllDocuments') :
+                    page === 'all' ? t("All Documents") :
                     page === 'templates' ?
                       dom.domComputed(use => use(home.featuredTemplates).length > 0, (hasFeaturedTemplates) =>
-                        hasFeaturedTemplates ? t('MoreExamplesAndTemplates') : t('ExamplesAndTemplates')
+                        hasFeaturedTemplates ? t("More Examples and Templates") : t("Examples and Templates")
                     ) :
-                    page === 'trash' ? t('Trash') :
+                    page === 'trash' ? t("Trash") :
                     workspace && [css.docHeaderIcon('Folder'), workspaceName(home.app, workspace)]
                   ),
                   testId('doc-header'),
@@ -138,9 +138,9 @@ function createLoadedDocMenu(owner: IDisposableOwner, home: HomeModel) {
                   ) :
                 (page === 'trash') ?
                   dom('div',
-                    css.docBlock(t('DocStayInTrash')),
+                    css.docBlock(t("Documents stay in Trash for 30 days, after which they get deleted permanently.")),
                     dom.maybe((use) => use(home.trashWorkspaces).length === 0, () =>
-                      css.docBlock(t("EmptyTrash"))
+                      css.docBlock(t("Trash is empty."))
                     ),
                     buildAllDocsBlock(home, home.trashWorkspaces, false, flashDocId, viewSettings),
                   ) :
@@ -155,7 +155,7 @@ function createLoadedDocMenu(owner: IDisposableOwner, home: HomeModel) {
                     ) :
                   workspace && !workspace.isSupportWorkspace && workspace.docs?.length === 0 ?
                   buildWorkspaceIntro(home) :
-                  css.docBlock(t('WorkspaceNotFound'))
+                  css.docBlock(t("Workspace not found"))
               )
             ]),
           ];
@@ -187,7 +187,7 @@ function buildAllDocsBlock(
 
         (ws.removedAt ?
           [
-            css.docRowUpdatedAt(t('Deleted', {at:getTimeFromNow(ws.removedAt)})),
+            css.docRowUpdatedAt(t("Deleted {{at}}", {at:getTimeFromNow(ws.removedAt)})),
             css.docMenuTrigger(icon('Dots')),
             menu(() => makeRemovedWsOptionsMenu(home, ws),
               {placement: 'bottom-end', parentSelectorToMark: '.' + css.docRowWrapper.className}),
@@ -221,7 +221,7 @@ function buildAllDocsTemplates(home: HomeModel, viewSettings: ViewSettings) {
       dom.autoDispose(hideTemplatesObs),
       css.templatesHeaderWrap(
         css.templatesHeader(
-          t('Examples&Templates'),
+          t("Examples & Templates"),
           dom.domComputed(hideTemplatesObs, (collapsed) =>
             collapsed ? css.templatesHeaderIcon('Expand') : css.templatesHeaderIcon('Collapse')
           ),
@@ -233,7 +233,7 @@ function buildAllDocsTemplates(home: HomeModel, viewSettings: ViewSettings) {
       dom.maybe((use) => !use(hideTemplatesObs), () => [
         buildTemplateDocs(home, templates, viewSettings),
         bigBasicButton(
-          t('DiscoverMoreTemplates'),
+          t("Discover More Templates"),
           urlState().setLinkUrl({homePage: 'templates'}),
           testId('all-docs-templates-discover-more'),
         )
@@ -281,7 +281,7 @@ function buildOtherSites(home: HomeModel) {
     return css.otherSitesBlock(
       dom.autoDispose(hideOtherSitesObs),
       css.otherSitesHeader(
-        t('OtherSites'),
+        t("Other Sites"),
         dom.domComputed(hideOtherSitesObs, (collapsed) =>
           collapsed ? css.otherSitesHeaderIcon('Expand') : css.otherSitesHeaderIcon('Collapse')
         ),
@@ -293,7 +293,8 @@ function buildOtherSites(home: HomeModel) {
         const siteName = home.app.currentOrgName;
         return [
           dom('div',
-            t('OtherSitesWelcome', { siteName, context: personal ? 'personal' : '' }),
+            personal ? t("You are on your personal site. You also have access to the following sites:") :
+              t("You are on the {{siteName}} site. You also have access to the following sites:", {siteName}),
             testId('other-sites-message')
           ),
           css.otherSitesButtons(
@@ -305,7 +306,7 @@ function buildOtherSites(home: HomeModel) {
               )
             ),
             testId('other-sites-buttons')
-          )
+          ),
         ];
       })
     );
@@ -329,8 +330,8 @@ function buildPrefs(
     // The Sort selector.
     options.hideSort ? null : dom.update(
       select<SortPref>(viewSettings.currentSort, [
-          {value: 'name', label: t('ByName')},
-          {value: 'date', label: t('ByDateModified')},
+          {value: 'name', label: t("By Name")},
+          {value: 'date', label: t("By Date Modified")},
         ],
         { buttonCssClass: css.sortSelector.className },
       ),
@@ -386,8 +387,8 @@ function buildWorkspaceDocBlock(home: HomeModel, workspace: Workspace, flashDocI
           ),
           css.docRowUpdatedAt(
             (doc.removedAt ?
-              t('Deleted', {at: getTimeFromNow(doc.removedAt)}) :
-              t('Edited', {at: getTimeFromNow(doc.updatedAt)})),
+              t("Deleted {{at}}", {at: getTimeFromNow(doc.removedAt)}) :
+              t("Edited {{at}}", {at: getTimeFromNow(doc.updatedAt)})),
             testId('doc-time')
           ),
           (doc.removedAt ?
@@ -421,7 +422,7 @@ function buildWorkspaceDocBlock(home: HomeModel, workspace: Workspace, flashDocI
               save: (val) => doRename(home, doc, val, flashDocId),
               close: () => renaming.set(null),
             }, testId('doc-name-editor')),
-            css.docRowUpdatedAt(t('Edited', {at: getTimeFromNow(doc.updatedAt)}), testId('doc-time')),
+            css.docRowUpdatedAt(t("Edited {{at}}", {at: getTimeFromNow(doc.updatedAt)}), testId('doc-time')),
           ),
         ),
         testId('doc')
@@ -462,9 +463,9 @@ export function makeDocOptionsMenu(home: HomeModel, doc: Document, renaming: Obs
   const orgAccess: roles.Role|null = org ? org.access : null;
 
   function deleteDoc() {
-    confirmModal(t('DeleteDoc', {name: doc.name}), t('Delete'),
+    confirmModal(t("Delete {{name}}", {name: doc.name}), t("Delete"),
       () => home.deleteDoc(doc.id, false).catch(reportError),
-      t('DocumentMoveToTrash'));
+      t("Document will be moved to Trash."));
   }
 
   async function manageUsers() {
@@ -487,7 +488,7 @@ export function makeDocOptionsMenu(home: HomeModel, doc: Document, renaming: Obs
       dom.cls('disabled', !roles.canEdit(doc.access)),
       testId('rename-doc')
     ),
-    menuItem(() => showMoveDocModal(home, doc), t('Move'),
+    menuItem(() => showMoveDocModal(home, doc), t("Move"),
       // Note that moving the doc requires ACL access on the doc. Moving a doc to a workspace
       // that confers descendant ACL access could otherwise increase the user's access to the doc.
       // By requiring the user to have ACL edit access on the doc to move it prevents using this
@@ -498,7 +499,7 @@ export function makeDocOptionsMenu(home: HomeModel, doc: Document, renaming: Obs
       dom.cls('disabled', !roles.canEditAccess(doc.access)),
       testId('move-doc')
     ),
-    menuItem(deleteDoc, t('Remove'),
+    menuItem(deleteDoc, t("Remove"),
       dom.cls('disabled', !roles.isOwner(doc)),
       testId('delete-doc')
     ),
@@ -515,22 +516,22 @@ export function makeDocOptionsMenu(home: HomeModel, doc: Document, renaming: Obs
 
 export function makeRemovedDocOptionsMenu(home: HomeModel, doc: Document, workspace: Workspace) {
   function hardDeleteDoc() {
-    confirmModal(t("DeleteForeverDoc", {name: doc.name}), t("DeleteForever"),
+    confirmModal(t("Permanently Delete \"{{name}}\"?", {name: doc.name}), t("Delete Forever"),
       () => home.deleteDoc(doc.id, true).catch(reportError),
-      t('DeleteDocPerma'));
+      t("Document will be permanently deleted."));
   }
 
   return [
-    menuItem(() => home.restoreDoc(doc), t('Restore'),
+    menuItem(() => home.restoreDoc(doc), t("Restore"),
       dom.cls('disabled', !roles.isOwner(doc) || !!workspace.removedAt),
       testId('doc-restore')
     ),
-    menuItem(hardDeleteDoc, t('DeleteForever'),
+    menuItem(hardDeleteDoc, t("Delete Forever"),
       dom.cls('disabled', !roles.isOwner(doc)),
       testId('doc-delete-forever')
     ),
     (workspace.removedAt ?
-      menuText(t('RestoreThisDocument')) :
+      menuText(t("To restore this document, restore the workspace first.")) :
       null
     )
   ];
@@ -538,16 +539,16 @@ export function makeRemovedDocOptionsMenu(home: HomeModel, doc: Document, worksp
 
 function makeRemovedWsOptionsMenu(home: HomeModel, ws: Workspace) {
   return [
-    menuItem(() => home.restoreWorkspace(ws), t('Restore'),
+    menuItem(() => home.restoreWorkspace(ws), t("Restore"),
       dom.cls('disabled', !roles.canDelete(ws.access)),
       testId('ws-restore')
     ),
-    menuItem(() => home.deleteWorkspace(ws.id, true), t('DeleteForever'),
+    menuItem(() => home.deleteWorkspace(ws.id, true), t("Delete Forever"),
       dom.cls('disabled', !roles.canDelete(ws.access) || ws.docs.length > 0),
       testId('ws-delete-forever')
     ),
     (ws.docs.length > 0 ?
-      menuText(t('DeleteWorkspaceForever')) :
+      menuText(t("You may delete a workspace forever once it has no documents in it.")) :
       null
     )
   ];
@@ -565,8 +566,8 @@ function showMoveDocModal(home: HomeModel, doc: Document) {
           const disabled = isCurrent || !isEditable;
           return css.moveDocListItem(
             css.moveDocListText(workspaceName(home.app, ws)),
-            isCurrent ? css.moveDocListHintText(t('CurrentWorkspace')) : null,
-            !isEditable ? css.moveDocListHintText(t('RequiresEditPermissions')) : null,
+            isCurrent ? css.moveDocListHintText(t("Current workspace")) : null,
+            !isEditable ? css.moveDocListHintText(t("Requires edit permissions")) : null,
             css.moveDocListItem.cls('-disabled', disabled),
             css.moveDocListItem.cls('-selected', (use) => use(selected) === ws.id),
             dom.on('click', () => disabled || selected.set(ws.id)),
@@ -576,11 +577,11 @@ function showMoveDocModal(home: HomeModel, doc: Document) {
       )
     );
     return {
-      title: t('MoveDocToWorkspace', {name: doc.name}),
+      title: t("Move {{name}} to workspace", {name: doc.name}),
       body,
       saveDisabled: Computed.create(owner, (use) => !use(selected)),
       saveFunc: async () => !selected.get() || home.moveDoc(doc.id, selected.get()!).catch(reportError),
-      saveLabel: t('Move'),
+      saveLabel: t("Move"),
     };
   });
 }

app/client/ui/DocTour.ts

@@ -20,8 +20,8 @@ export async function startDocTour(docData: DocData, docComm: DocComm, onFinishC
 }
 
 const invalidDocTour: IOnBoardingMsg[] = [{
-  title: t('InvalidDocTourTitle'),
-  body: t('InvalidDocTourBody'),
+  title: t("No valid document tour"),
+  body: t("Cannot construct a document tour from the data in this document. Ensure there is a table named GristDocTour with columns Title, Body, Placement, and Location."),
   selector: 'document',
   showHasModal: true,
 }];

app/client/ui/DocumentSettings.ts

@@ -42,23 +42,23 @@ export async function showDocSettingsModal(docInfo: DocInfoRec, docPageModel: Do
     const canChangeEngine = getSupportedEngineChoices().length > 0;
 
     return {
-      title: t('DocumentSettings'),
+      title: t("Document Settings"),
       body: [
-        cssDataRow(t('ThisDocumentID')),
+        cssDataRow(t("This document's ID (for API use):")),
         cssDataRow(dom('tt', docPageModel.currentDocId.get())),
-        cssDataRow(t('TimeZone')),
+        cssDataRow(t("Time Zone:")),
         cssDataRow(dom.create(buildTZAutocomplete, moment, timezoneObs, (val) => timezoneObs.set(val))),
-        cssDataRow(t('Locale')),
+        cssDataRow(t("Locale:")),
         cssDataRow(dom.create(buildLocaleSelect, localeObs)),
-        cssDataRow(t('Currency')),
+        cssDataRow(t("Currency:")),
         cssDataRow(dom.domComputed(localeObs, (l) =>
           dom.create(buildCurrencyPicker, currencyObs, (val) => currencyObs.set(val),
-            {defaultCurrencyLabel: t('LocalCurrency', {currency: getCurrency(l)})})
+            {defaultCurrencyLabel: t("Local currency ({{currency}})", {currency: getCurrency(l)})})
         )),
         canChangeEngine ? [
           // Small easter egg: you can click on the skull-and-crossbones to
           // force a reload of the document.
-          cssDataRow(t('EngineRisk', {span: 
+          cssDataRow(t("Engine (experimental {{span}} change at own risk):", {span: 
             dom('span', '☠',
               dom.style('cursor', 'pointer'),
               dom.on('click', async () => {
@@ -71,7 +71,7 @@ export async function showDocSettingsModal(docInfo: DocInfoRec, docPageModel: Do
       ],
       // Modal label is "Save", unless engine is changed. If engine is changed, the document will
       // need a reload to switch engines, so we replace the label with "Save and Reload".
-      saveLabel: dom.text((use) => (use(engineObs) === docSettings.engine) ? t('Save') : t('SaveAndReload')),
+      saveLabel: dom.text((use) => (use(engineObs) === docSettings.engine) ? t("Save") : t("Save and Reload")),
       saveFunc: async () => {
         await docInfo.updateColValues({
           timezone: timezoneObs.get(),

app/client/ui/DuplicateTable.ts

@@ -74,7 +74,7 @@ class DuplicateTableModal extends Disposable {
         input(
           this._newTableName,
           {onInput: true},
-          {placeholder: t('NewName')},
+          {placeholder: t("Name for new table")},
           (elem) => { setTimeout(() => { elem.focus(); }, 20); },
           dom.on('focus', (_ev, elem) => { elem.select(); }),
           dom.cls(cssInput.className),
@@ -85,19 +85,19 @@ class DuplicateTableModal extends Disposable {
         cssWarningIcon('Warning'),
 
         dom('div',
-         t("AdviceWithLink", {link: cssLink({href: commonUrls.helpLinkingWidgets, target: '_blank'}, 'Read More.')})
+         t("Instead of duplicating tables, it's usually better to segment data using linked views. {{link}}", {link: cssLink({href: commonUrls.helpLinkingWidgets, target: '_blank'}, 'Read More.')})
         ), //TODO: i18next
       ),
       cssField(
         cssCheckbox(
           this._includeData,
-          t('CopyAllData'),
+          t("Copy all data in addition to the table structure."),
           testId('copy-all-data'),
         ),
       ),
       dom.maybe(this._includeData, () => cssWarning(
         cssWarningIcon('Warning'),
-        dom('div', t('WarningACL')),
+        dom('div', t("Only the document default access rules will apply to the copy.")),
         testId('acl-warning'),
       )),
     ];

app/client/ui/ExampleInfo.ts

@@ -20,34 +20,34 @@ interface WelcomeCard {
 export const buildExamples = (): IExampleInfo[] => [{
   id: 1,    // Identifies the example in UserPrefs.seenExamples
   urlId: 'lightweight-crm',
-  title: t('Title', {context: "CRM"}),
+  title: t('Lightweight CRM'),
   imgUrl: 'https://www.getgrist.com/themes/grist/assets/images/use-cases/lightweight-crm.png',
   tutorialUrl: 'https://support.getgrist.com/lightweight-crm/',
   welcomeCard: {
-    title: t('WelcomeTitle', {context: "CRM"}),
-    text: t('WelcomeText', {context: "CRM"}),
-    tutorialName: t('WelcomeTutorialName', {context: "CRM"}),
+    title: t('Welcome to the Lightweight CRM template'),
+    text: t('Check out our related tutorial for how to link data, and create high-productivity layouts.'),
+    tutorialName: t("Tutorial: Create a CRM"),
   },
 }, {
   id: 2,    // Identifies the example in UserPrefs.seenExamples
   urlId: 'investment-research',
-  title: t('Title', {context: "investmentResearch"}),
+  title: t('Investment Research'),
   imgUrl: 'https://www.getgrist.com/themes/grist/assets/images/use-cases/data-visualization.png',
   tutorialUrl: 'https://support.getgrist.com/investment-research/',
   welcomeCard: {
-    title: t('WelcomeTitle', {context: "investmentResearch"}),
-    text: t('WelcomeText', {context: "investmentResearch"}),
-    tutorialName: t('WelcomeTutorialName', {context: "investmentResearch"}),
+    title: t("Welcome to the Investment Research template"),
+    text: t("Check out our related tutorial to learn how to create summary tables and charts, and to link charts dynamically."),
+    tutorialName: t("Tutorial: Analyze & Visualize"),
   },
 }, {
   id: 3,    // Identifies the example in UserPrefs.seenExamples
   urlId: 'afterschool-program',
-  title: t('Title', {context: "afterschool"}),
+  title: t('Afterschool Program'),
   imgUrl: 'https://www.getgrist.com/themes/grist/assets/images/use-cases/business-management.png',
   tutorialUrl: 'https://support.getgrist.com/afterschool-program/',
   welcomeCard: {
-    title: t('WelcomeTitle', {context: "afterschool"}),
-    text: t('WelcomeText', {context: "afterschool"}),
-    tutorialName: t('WelcomeTutorialName', {context: "afterschool"}),
+    title: t("Welcome to the Afterschool Program template"),
+    text: t("Check out our related tutorial for how to model business data, use formulas, and manage complexity."),
+    tutorialName: t("Tutorial: Manage Business Data"),
   },
 }];

app/client/ui/FieldConfig.ts

@@ -54,7 +54,7 @@ export function buildNameConfig(
   };
 
   return [
-    cssLabel(t('ColumnLabel')),
+    cssLabel(t("COLUMN LABEL AND ID")),
     cssRow(
       dom.cls(cssBlockedCursor.className, origColumn.disableModify),
       cssColLabelBlock(
@@ -84,7 +84,7 @@ export function buildNameConfig(
       )
     ),
     dom.maybe(isSummaryTable,
-      () => cssRow(t('ColumnOptionsLimited')))
+      () => cssRow(t("Column options are limited in summary tables.")))
   ];
 }
 
@@ -210,19 +210,19 @@ export function buildFormulaConfig(
   const behaviorName = Computed.create(owner, behavior, (use, type) => {
     if (use(isMultiSelect)) {
       const commonType = use(multiType);
-      if (commonType === 'formula') { return t('ColumnType', {context: 'formula', count: 2}); }
-      if (commonType === 'data') { return t('ColumnType', {context: 'data', count: 2}); }
-      if (commonType === 'mixed') { return t('ColumnType', {context: 'mixed', count: 2}); }
-      return t('ColumnType', {context: 'empty', count: 2});
+      if (commonType === 'formula') { return t('Formula Columns', {count: 2}); }
+      if (commonType === 'data') { return t('Data Columns', {count: 2}); }
+      if (commonType === 'mixed') { return t('Mixed Behavior'); }
+      return t('Empty Columns', {count: 2});
     } else {
-      if (type === 'formula') { return t('ColumnType', {context: 'formula', count: 1}); }
-      if (type === 'data') { return t('ColumnType', {context: 'data', count: 1}); }
-      return t('ColumnType', {context: 'empty', count: 1});
+      if (type === 'formula') { return t('Formula Columns', {count: 1}); }
+      if (type === 'data') { return t('Data Columns', {count: 1}); }
+      return t('Empty Columns', {count: 1});
     }
   });
   const behaviorIcon = Computed.create<IconName>(owner, (use) => {
-    return use(behaviorName) === t('ColumnType', {context: 'data', count: 2}) ||
-           use(behaviorName) === t('ColumnType', {context: 'data', count: 1}) ? "Database" : "Script";
+    return use(behaviorName) === t('Data Columns', {count: 2}) ||
+           use(behaviorName) === t('Data Columns', {count: 1}) ? "Database" : "Script";
   });
   const behaviorLabel = () => selectTitle(behaviorName, behaviorIcon);
 
@@ -231,26 +231,26 @@ export function buildFormulaConfig(
   // Converts data column to formula column.
   const convertDataColumnToFormulaOption = () => selectOption(
     () => (maybeFormula.set(true), formulaField?.focus()),
-    t('ConvertColumn', {context: 'formula'}), 'Script');
+    t("Clear and make into formula"), 'Script');
 
   // Converts to empty column and opens up the editor. (label is the same, but this is used when we have no formula)
   const convertTriggerToFormulaOption = () => selectOption(
     () => gristDoc.convertIsFormula([origColumn.id.peek()], {toFormula: true, noRecalc: true}),
-    t('ConvertColumn', {context: 'formula'}), 'Script');
+    t("Clear and make into formula"), 'Script');
 
   // Convert column to data.
   // This method is also available through a text button.
   const convertToData = () => gristDoc.convertIsFormula([origColumn.id.peek()], {toFormula: false, noRecalc: true});
   const convertToDataOption = () => selectOption(
     convertToData,
-    t('ConvertColumn', {context: 'data'}), 'Database',
+    t("Convert column to data"), 'Database',
     dom.cls('disabled', isSummaryTable)
     );
 
   // Clears the column
   const clearAndResetOption = () => selectOption(
     () => gristDoc.clearColumns([origColumn.id.peek()]),
-    t('ClearAndReset'), 'CrossSmall');
+    t("Clear and reset"), 'CrossSmall');
 
   // Actions on text buttons:
 
@@ -314,7 +314,7 @@ export function buildFormulaConfig(
     cssRow(formulaField = buildFormula(
       origColumn,
       buildEditor,
-      t('EnterFormula'),
+      t("Enter formula"),
       disableOtherActions,
       onSave,
       clearState)),
@@ -322,21 +322,21 @@ export function buildFormulaConfig(
   ];
 
   return dom.maybe(behavior, (type: BEHAVIOR) => [
-      cssLabel(t('ColumnBehavior')),
+      cssLabel(t("COLUMN BEHAVIOR")),
       ...(type === "empty" ? [
         menu(behaviorLabel(), [
           convertToDataOption(),
         ]),
         cssEmptySeparator(),
         cssRow(textButton(
-          t('SetFormula'),
+          t("Set formula"),
           dom.on("click", setFormula),
           dom.prop("disabled", disableOtherActions),
           testId("field-set-formula")
         )),
         cssRow(withInfoTooltip(
           textButton(
-            t('SetTriggerFormula'),
+            t("Set trigger formula"),
             dom.on("click", setTrigger),
             dom.prop("disabled", use => use(isSummaryTable) || use(disableOtherActions)),
             testId("field-set-trigger")
@@ -344,7 +344,7 @@ export function buildFormulaConfig(
           GristTooltips.setTriggerFormula(),
         )),
         cssRow(textButton(
-          t('MakeIntoDataColumn'),
+          t("Make into data column"),
           dom.on("click", convertToData),
           dom.prop("disabled", use => use(isSummaryTable) || use(disableOtherActions)),
           testId("field-set-data")
@@ -357,7 +357,7 @@ export function buildFormulaConfig(
         formulaBuilder(onSaveConvertToFormula),
         cssEmptySeparator(),
         cssRow(textButton(
-          t('ConvertColumn', {context: 'triggerformula'}),
+          t("Convert to trigger formula"),
           dom.on("click", convertFormulaToTrigger),
           dom.hide(maybeFormula),
           dom.prop("disabled", use => use(isSummaryTable) || use(disableOtherActions)),
@@ -377,7 +377,7 @@ export function buildFormulaConfig(
         ),
         // If data column is or wants to be a trigger formula:
         dom.maybe((use) => use(maybeTrigger) || use(origColumn.hasTriggerFormula), () => [
-          cssLabel(t('TriggerFormula')),
+          cssLabel(t("TRIGGER FORMULA")),
           formulaBuilder(onSaveConvertToTrigger),
           dom.create(buildFormulaTriggers, origColumn, {
             disabled: disableOtherActions,
@@ -389,7 +389,7 @@ export function buildFormulaConfig(
           cssEmptySeparator(),
           cssRow(withInfoTooltip(
             textButton(
-              t("SetTriggerFormula"),
+              t("Set trigger formula"),
               dom.on("click", convertDataColumnToTriggerColumn),
               dom.prop("disabled", disableOtherActions),
               testId("field-set-trigger")

app/client/ui/FieldMenus.ts

@@ -13,10 +13,10 @@ const t = makeT('FieldMenus');
 export function FieldSettingsMenu(useColOptions: boolean, disableSeparate: boolean, actions: IFieldOptions) {
   useColOptions = useColOptions || disableSeparate;
   return [
-    menuSubHeader(t('UsingSettings', {context: useColOptions ? 'common' : 'separate'})),
-    useColOptions ? menuItem(actions.useSeparate, t('Settings', {context: 'useseparate'}), dom.cls('disabled', disableSeparate)) : [
-      menuItem(actions.saveAsCommon, t('Settings', {context: 'savecommon'})),
-      menuItem(actions.revertToCommon, t('Settings', {context: 'revertcommon'})),
+    menuSubHeader(useColOptions ? t("Using common settings") : t("Using separate settings")),
+    useColOptions ? menuItem(actions.useSeparate, t("Use separate settings"), dom.cls('disabled', disableSeparate)) : [
+      menuItem(actions.saveAsCommon, t("Save as common settings")),
+      menuItem(actions.revertToCommon, t("Revert to common settings")),
     ]
   ];
 }

app/client/ui/FilterConfig.ts

@@ -87,7 +87,7 @@ export class FilterConfig extends Disposable {
         dom.domComputed((use) => {
           const filters = use(this._section.filters);
           return cssTextBtn(
-            t('AddColumn'),
+            t("Add Column"),
             addFilterMenu(filters, this._popupControls, {
               menuOptions: {
                 placement: 'bottom-end',

app/client/ui/GridOptions.ts

@@ -20,23 +20,23 @@ export class GridOptions extends Disposable {
   public buildDom() {
     const section = this._section;
     return [
-      cssLabel(t('GridOptions')),
+      cssLabel(t("Grid Options")),
       dom('div', [
         cssRow(
           checkbox(setSaveValueFromKo(this, section.optionsObj.prop('verticalGridlines'))),
-          t('VerticalGridlines'),
+          t("Vertical Gridlines"),
           testId('v-grid-button')
         ),
 
         cssRow(
           checkbox(setSaveValueFromKo(this, section.optionsObj.prop('horizontalGridlines'))),
-          t('HorizontalGridlines'),
+          t("Horizontal Gridlines"),
           testId('h-grid-button')
         ),
 
         cssRow(
           checkbox(setSaveValueFromKo(this, section.optionsObj.prop('zebraStripes'))),
-          t('ZebraStripes'),
+          t("Zebra Stripes"),
           testId('zebra-stripe-button')
         ),
 

app/client/ui/GridViewMenus.ts

@@ -26,13 +26,13 @@ interface IViewSection {
  */
 export function ColumnAddMenu(gridView: IView, viewSection: IViewSection) {
   return [
-    menuItem(() => gridView.addNewColumn(), t('AddColumn')),
+    menuItem(() => gridView.addNewColumn(), t("Add Column")),
     menuDivider(),
     ...viewSection.hiddenColumns().map((col: any) => menuItem(
       () => {
         gridView.showColumn(col.id(), viewSection.viewFields().peekLength);
         // .then(() => gridView.scrollPaneRight());
-      }, t('ShowColumn', {label: col.label()})))
+      }, t("Show column {{- label}}", {label: col.label()})))
   ];
 }
 export interface IMultiColumnContextMenu {
@@ -68,13 +68,13 @@ export function ColumnContextMenu(options: IColumnContextMenu) {
   const addToSortLabel = getAddToSortLabel(sortSpec, colId);
 
   return [
-    menuItemCmd(allCommands.fieldTabOpen, t('ColumnOptions')),
-    menuItem(filterOpenFunc, t('FilterData')),
+    menuItemCmd(allCommands.fieldTabOpen, t("Column Options")),
+    menuItem(filterOpenFunc, t("Filter Data")),
     menuDivider({style: 'margin-bottom: 0;'}),
     cssRowMenuItem(
       customMenuItem(
         allCommands.sortAsc.run,
-        dom('span', t('Sort'), {style: 'flex: 1  0 auto; margin-right: 8px;'},
+        dom('span', t("Sort"), {style: 'flex: 1  0 auto; margin-right: 8px;'},
             testId('sort-label')),
         icon('Sort', dom.style('transform', 'scaley(-1)')),
         'A-Z',
@@ -112,9 +112,9 @@ export function ColumnContextMenu(options: IColumnContextMenu) {
       ),
     ] : null,
     menuDivider({style: 'margin-bottom: 0; margin-top: 0;'}),
-    menuItem(allCommands.sortFilterTabOpen.run, t('MoreSortOptions'), testId('more-sort-options')),
+    menuItem(allCommands.sortFilterTabOpen.run, t("More sort options ..."), testId('more-sort-options')),
     menuDivider({style: 'margin-top: 0;'}),
-    menuItemCmd(allCommands.renameField, t('RenameColumn'), disableForReadonlyColumn),
+    menuItemCmd(allCommands.renameField, t("Rename column"), disableForReadonlyColumn),
     freezeMenuItemCmd(options),
     menuDivider(),
     MultiColumnMenu((options.disableFrozenMenu = true, options)),
@@ -135,29 +135,29 @@ export function MultiColumnMenu(options: IMultiColumnContextMenu) {
   const disableForReadonlyView = dom.cls('disabled', options.isReadonly);
   const num: number = options.numColumns;
   const nameClearColumns = options.isFiltered ?
-    t('ResetEntireColumns', {count: num}) :
-    t('ResetColumns', {count: num});
-  const nameDeleteColumns = t('DeleteColumns', {count: num});
-  const nameHideColumns = t('HideColumns', {count: num});
+    t('Reset {{count}} entire columns', {count: num}) :
+    t('Reset {{count}} columns', {count: num});
+  const nameDeleteColumns = t('Delete {{count}} columns', {count: num});
+  const nameHideColumns = t('Hide {{count}} columns', {count: num});
   const frozenMenu = options.disableFrozenMenu ? null : freezeMenuItemCmd(options);
   return [
     frozenMenu ? [frozenMenu, menuDivider()]: null,
     // Offered only when selection includes formula columns, and converts only those.
     (options.isFormula ?
-      menuItemCmd(allCommands.convertFormulasToData, t('ConvertFormulaToData'),
+      menuItemCmd(allCommands.convertFormulasToData, t("Convert formula to data"),
         disableForReadonlyColumn) : null),
 
     // With data columns selected, offer an additional option to clear out selected cells.
     (options.isFormula !== true ?
-      menuItemCmd(allCommands.clearValues, t('ClearValues'), disableForReadonlyColumn) : null),
+      menuItemCmd(allCommands.clearValues, t("Clear values"), disableForReadonlyColumn) : null),
 
     (!options.isRaw ? menuItemCmd(allCommands.hideFields, nameHideColumns, disableForReadonlyView) : null),
     menuItemCmd(allCommands.clearColumns, nameClearColumns, disableForReadonlyColumn),
     menuItemCmd(allCommands.deleteFields, nameDeleteColumns, disableForReadonlyColumn),
 
     menuDivider(),
-    menuItemCmd(allCommands.insertFieldBefore, t('InsertColumn', {to: 'left'}), disableForReadonlyView),
-    menuItemCmd(allCommands.insertFieldAfter, t('InsertColumn', {to: 'right'}), disableForReadonlyView)
+    menuItemCmd(allCommands.insertFieldBefore, t("Insert column to the {{to}}", {to: 'left'}), disableForReadonlyView),
+    menuItemCmd(allCommands.insertFieldAfter, t("Insert column to the {{to}}", {to: 'right'}), disableForReadonlyView)
   ];
 }
 
@@ -206,12 +206,14 @@ export function freezeAction(options: IMultiColumnContextMenu): { text: string;
 
       // if user clicked the first column or a column just after frozen set
       if (firstColumnIndex === 0 || firstColumnIndex === numFrozen) {
-        text = t('FreezeColumn', {count: 1});
+        text = t('Freeze {{count}} columns', {count: 1});
       } else {
         // else user clicked any other column that is farther, offer to freeze
         // proper number of column
         const properNumber = firstColumnIndex - numFrozen + 1;
-        text = t('FreezeColumn', {count: properNumber, context: numFrozen ? 'more' : '' });
+        text = numFrozen ?
+          t('Freeze {{count}} more columns', {count: properNumber}) :
+          t('Freeze {{count}} columns', {count: properNumber});
       }
       return {
         text,
@@ -220,12 +222,14 @@ export function freezeAction(options: IMultiColumnContextMenu): { text: string;
     } else if (isFrozenColumn) {
       // when user clicked last column in frozen set - offer to unfreeze this column
       if (firstColumnIndex + 1 === numFrozen) {
-        text = t('UnfreezeColumn', {count: 1});
+        text = t('Unfreeze {{count}} columns', {count: 1});
       } else {
         // else user clicked column that is not the last in a frozen set
         // offer to unfreeze proper number of columns
         const properNumber = numFrozen - firstColumnIndex;
-        text = t('UnfreezeColumn', {count: properNumber, context: properNumber === numFrozen ? 'all' : '' });
+        text = properNumber === numFrozen ?
+          t('Unfreeze all columns') :
+          t('Unfreeze {{count}} columns', {count: properNumber});
       }
       return {
         text,
@@ -236,20 +240,20 @@ export function freezeAction(options: IMultiColumnContextMenu): { text: string;
     }
   } else {
     if (isLastFrozenSet) {
-      text = t('UnfreezeColumn', {count: length});
+      text = t('Unfreeze {{count}} columns', {count: length});
       return {
         text,
         numFrozen : numFrozen - length
       };
     } else if (isFirstNormalSet) {
-      text = t('FreezeColumn', {count: length});
+      text = t('Freeze {{count}} columns', {count: length});
       return {
         text,
         numFrozen : numFrozen + length
       };
     } else if (isSpanSet) {
       const toFreeze = lastColumnIndex + 1 - numFrozen;
-      text = t('FreezeColumn', {count: toFreeze, context: 'more'});
+      text = t('Freeze {{count}} more columns', {count: toFreeze});
       return {
         text,
         numFrozen : numFrozen + toFreeze
@@ -278,9 +282,9 @@ function getAddToSortLabel(sortSpec: Sort.SortSpec, colId: number): string|undef
   if (sortSpec.length !== 0 && !isEqual(columnsInSpec, [colId])) {
     const index = columnsInSpec.indexOf(colId);
     if (index > -1) {
-      return t('AddToSort', {count: index + 1, context: 'added'});
+      return t("Sorted (#{{count}})", {count: index + 1});
     } else {
-      return t('AddToSort');
+      return t("Add to sort");
     }
   }
 }

app/client/ui/HomeIntro.ts

@@ -37,7 +37,7 @@ export function buildHomeIntro(homeModel: HomeModel): DomContents {
 export function buildWorkspaceIntro(homeModel: HomeModel): DomContents {
   const isViewer = homeModel.currentWS.get()?.access === roles.VIEWER;
   const isAnonym = !homeModel.app.currentValidUser;
-  const emptyLine = cssIntroLine(testId('empty-workspace-info'), t('EmptyWorkspace'));
+  const emptyLine = cssIntroLine(testId('empty-workspace-info'), t("This workspace is empty."));
   if (isAnonym || isViewer) {
     return emptyLine;
   } else {
@@ -58,38 +58,38 @@ function makeViewerTeamSiteIntro(homeModel: HomeModel) {
   const docLink = (dom.maybe(personalOrg, org => {
     return cssLink(
       urlState().setLinkUrl({org: org.domain ?? undefined}),
-      t('PersonalSite'),
+      t("personal site"),
       testId('welcome-personal-url'));
   }));
   return [
     css.docListHeader(
       dom.autoDispose(personalOrg),
-      t('WelcomeTo', {orgName: homeModel.app.currentOrgName}),
+      t("Welcome to {{orgName}}", {orgName: homeModel.app.currentOrgName}),
       productPill(homeModel.app.currentOrg, {large: true}),
       testId('welcome-title')
     ),
     cssIntroLine(
       testId('welcome-info'),
-      t('WelcomeInfoNoDocuments'),
+      t("You have read-only access to this site. Currently there are no documents."),
       dom('br'),
-      t('WelcomeInfoAppearHere'),
+      t("Any documents created in this site will appear here."),
     ),
     cssIntroLine(
-      t('WelcomeTextVistGrist'), docLink, '.',
+      t("Interested in using Grist outside of your team? Visit your free "), docLink, '.',
       testId('welcome-text')
     )
   ];
 }
 
 function makeTeamSiteIntro(homeModel: HomeModel) {
-  const sproutsProgram = cssLink({href: commonUrls.sproutsProgram, target: '_blank'}, t('SproutsProgram'));
+  const sproutsProgram = cssLink({href: commonUrls.sproutsProgram, target: '_blank'}, t("Sprouts Program"));
   return [
     css.docListHeader(
-      t('WelcomeTo', {orgName: homeModel.app.currentOrgName}),
+      t("Welcome to {{orgName}}", {orgName: homeModel.app.currentOrgName}),
       productPill(homeModel.app.currentOrg, {large: true}),
       testId('welcome-title')
     ),
-    cssIntroLine(t('TeamSiteIntroGetStarted')),
+    cssIntroLine(t("Get started by inviting your team and creating your first Grist document.")),
     (shouldHideUiElement('helpCenter') ? null :
       cssIntroLine(
         'Learn more in our ', helpCenterLink(), ', or find an expert via our ', sproutsProgram, '.',  // TODO i18n
@@ -102,10 +102,10 @@ function makeTeamSiteIntro(homeModel: HomeModel) {
 
 function makePersonalIntro(homeModel: HomeModel, user: FullUser) {
   return [
-    css.docListHeader(t('WelcomeUser', {name: user.name}), testId('welcome-title')),
-    cssIntroLine(t('PersonalIntroGetStarted')),
+    css.docListHeader(t("Welcome to Grist, {{name}}!", {name: user.name}), testId('welcome-title')),
+    cssIntroLine(t("Get started by creating your first Grist document.")),
     (shouldHideUiElement('helpCenter') ? null :
-      cssIntroLine(t('VisitHelpCenter', { link: helpCenterLink() }),
+      cssIntroLine(t("Visit our {{link}} to learn more.", { link: helpCenterLink() }),
         testId('welcome-text'))
     ),
     makeCreateButtons(homeModel),
@@ -113,19 +113,19 @@ function makePersonalIntro(homeModel: HomeModel, user: FullUser) {
 }
 
 function makeAnonIntro(homeModel: HomeModel) {
-  const signUp = cssLink({href: getLoginOrSignupUrl()}, t('SignUp'));
+  const signUp = cssLink({href: getLoginOrSignupUrl()}, t("Sign up"));
   return [
-    css.docListHeader(t('Welcome'), testId('welcome-title')),
-    cssIntroLine(t('AnonIntroGetStarted')),
+    css.docListHeader(t("Welcome to Grist!"), testId('welcome-title')),
+    cssIntroLine(t("Get started by exploring templates, or creating your first Grist document.")),
     cssIntroLine(signUp, ' to save your work. ', // TODO i18n
-      (shouldHideUiElement('helpCenter') ? null : t('VisitHelpCenter', { link: helpCenterLink() })),
+      (shouldHideUiElement('helpCenter') ? null : t("Visit our {{link}} to learn more.", { link: helpCenterLink() })),
       testId('welcome-text')),
     makeCreateButtons(homeModel),
   ];
 }
 
 function helpCenterLink() {
-  return cssLink({href: commonUrls.help, target: '_blank'}, cssInlineIcon('Help'), t('HelpCenter'));
+  return cssLink({href: commonUrls.help, target: '_blank'}, cssInlineIcon('Help'), t("Help Center"));
 }
 
 function buildButtons(homeModel: HomeModel, options: {
@@ -136,22 +136,22 @@ function buildButtons(homeModel: HomeModel, options: {
 }) {
   return cssBtnGroup(
     !options.invite ? null :
-    cssBtn(cssBtnIcon('Help'), t('InviteTeamMembers'), testId('intro-invite'),
+    cssBtn(cssBtnIcon('Help'), t("Invite Team Members"), testId('intro-invite'),
       cssButton.cls('-primary'),
       dom.on('click', () => manageTeamUsersApp(homeModel.app)),
     ),
     !options.templates ? null :
-    cssBtn(cssBtnIcon('FieldTable'), t('BrowseTemplates'), testId('intro-templates'),
+    cssBtn(cssBtnIcon('FieldTable'), t("Browse Templates"), testId('intro-templates'),
       cssButton.cls('-primary'),
       dom.hide(shouldHideUiElement("templates")),
       urlState().setLinkUrl({homePage: 'templates'}),
     ),
     !options.import ? null :
-    cssBtn(cssBtnIcon('Import'), t('ImportDocument'), testId('intro-import-doc'),
+    cssBtn(cssBtnIcon('Import'), t("Import Document"), testId('intro-import-doc'),
       dom.on('click', () => importDocAndOpen(homeModel)),
     ),
     !options.empty ? null :
-    cssBtn(cssBtnIcon('Page'), t('CreateEmptyDocument'), testId('intro-create-doc'),
+    cssBtn(cssBtnIcon('Page'), t("Create Empty Document"), testId('intro-create-doc'),
       dom.on('click', () => createDocAndOpen(homeModel)),
     ),
   );

app/client/ui/HomeLeftPane.ts

@@ -42,14 +42,14 @@ export function createHomeLeftPane(leftPanelOpen: Observable<boolean>, home: Hom
       cssPageEntry(
         cssPageEntry.cls('-selected', (use) => use(home.currentPage) === "all"),
         cssPageLink(cssPageIcon('Home'),
-          cssLinkText(t('AllDocuments')),
+          cssLinkText(t("All Documents")),
           urlState().setLinkUrl({ws: undefined, homePage: undefined}),
           testId('dm-all-docs'),
         ),
       ),
       dom.maybe(use => !use(home.singleWorkspace), () =>
         cssSectionHeader(
-          t('Workspaces'),
+          t("Workspaces"),
           // Give it a testId, because it's a good element to simulate "click-away" in tests.
           testId('dm-ws-label')
         ),
@@ -108,7 +108,7 @@ export function createHomeLeftPane(leftPanelOpen: Observable<boolean>, home: Hom
         cssPageEntry(
           dom.hide(shouldHideUiElement("templates")),
           cssPageEntry.cls('-selected', (use) => use(home.currentPage) === "templates"),
-          cssPageLink(cssPageIcon('FieldTable'), cssLinkText(t("ExamplesAndTemplates")),
+          cssPageLink(cssPageIcon('FieldTable'), cssLinkText(t("Examples & Templates")),
             urlState().setLinkUrl({homePage: "templates"}),
             testId('dm-templates-page'),
           ),
@@ -205,9 +205,9 @@ function addMenu(home: HomeModel, creating: Observable<boolean>): DomElementArg[
 
 function workspaceMenu(home: HomeModel, ws: Workspace, renaming: Observable<Workspace|null>) {
   function deleteWorkspace() {
-    confirmModal(t('WorkspaceDeleteTitle', {workspace: ws.name}), t('Delete'),
+    confirmModal(t("Delete {{workspace}} and all included documents?", {workspace: ws.name}), t("Delete"),
       () => home.deleteWorkspace(ws.id, false),
-      t('WorkspaceDeleteText'));
+      t("Workspace will be moved to Trash."));
   }
 
   async function manageWorkspaceUsers() {

app/client/ui/LeftPanelCommon.ts

@@ -34,7 +34,7 @@ export function createHelpTools(appModel: AppModel): DomContents {
   return cssSplitPageEntry(
     cssPageEntryMain(
       cssPageLink(cssPageIcon('Help'),
-        cssLinkText(t('HelpCenter')),
+        cssLinkText(t("Help Center")),
         dom.cls('tour-help-center'),
         dom.on('click', (ev) => beaconOpenMessage({appModel})),
         testId('left-feedback'),

app/client/ui/MakeCopyMenu.ts

@@ -26,29 +26,29 @@ export async function replaceTrunkWithFork(user: FullUser|null, doc: Document, a
   const trunkAccess = (await app.api.getDoc(origUrlId)).access;
   if (!roles.canEdit(trunkAccess)) {
     modal((ctl) => [
-      cssModalBody(t('CannotEditOriginal')),
+      cssModalBody(t("Replacing the original requires editing rights on the original document.")),
       cssModalButtons(
-        bigBasicButton(t('Cancel'), dom.on('click', () => ctl.close())),
+        bigBasicButton(t("Cancel"), dom.on('click', () => ctl.close())),
       )
     ]);
     return;
   }
   const docApi = app.api.getDocAPI(origUrlId);
   const cmp = await docApi.compareDoc(doc.id);
-  let titleText = t('UpdateOriginal');
-  let buttonText = t('Update');
-  let warningText = t('WarningOriginalWillBeUpdated');
+  let titleText = t("Update Original");
+  let buttonText = t("Update");
+  let warningText = t("The original version of this document will be updated.");
   if (cmp.summary === 'left' || cmp.summary === 'both') {
-    titleText = t('OriginalHasModifications');
-    buttonText = t('Overwrite');
-    warningText = `${warningText} ${t('WarningOverwriteOriginalChanges')}`;
+    titleText = t("Original Has Modifications");
+    buttonText = t("Overwrite");
+    warningText = `${warningText} ${t("Be careful, the original has changes not in this document. Those changes will be overwritten.")}`;
   } else if (cmp.summary === 'unrelated') {
-    titleText = t('OriginalLooksUnrelated');
-    buttonText = t('Overwrite');
-    warningText = `${warningText} ${t('WarningWillBeOverwritten')}`;
+    titleText = t("Original Looks Unrelated");
+    buttonText = t("Overwrite");
+    warningText = `${warningText} ${t("It will be overwritten, losing any content not in this document.")}`;
   } else if (cmp.summary === 'same') {
-    titleText = 'Original Looks Identical';
-    warningText = `${warningText} ${t('WarningAlreadyIdentical')}`;
+    titleText = t('Original Looks Identical');
+    warningText = `${warningText} ${t("However, it appears to be already identical.")}`;
   }
   confirmModal(titleText, buttonText,
     async () => {
@@ -66,8 +66,8 @@ function signupModal(message: string) {
   return modal((ctl) => [
     cssModalBody(message),
     cssModalButtons(
-      bigPrimaryButtonLink(t('SignUp'), {href: getLoginOrSignupUrl(), target: '_blank'}, testId('modal-signup')),
-      bigBasicButton(t('Cancel'), dom.on('click', () => ctl.close())),
+      bigPrimaryButtonLink(t("Sign up"), {href: getLoginOrSignupUrl(), target: '_blank'}, testId('modal-signup')),
+      bigBasicButton(t("Cancel"), dom.on('click', () => ctl.close())),
     ),
     cssModalWidth('normal'),
   ]);
@@ -96,7 +96,7 @@ function allowOtherOrgs(doc: Document, app: AppModel): boolean {
  */
 export async function makeCopy(doc: Document, app: AppModel, modalTitle: string): Promise<void> {
   if (!app.currentValidUser) {
-    signupModal(t('ToSaveSignUpAndReload'));
+    signupModal(t("To save your changes, please sign up, then reload this page."));
     return;
   }
   let orgs = allowOtherOrgs(doc, app) ? await app.api.getOrgs(true) : null;
@@ -150,7 +150,7 @@ class SaveCopyModal extends Disposable {
 
   public async save() {
     const ws = this._destWS.get();
-    if (!ws) { throw new Error(t('NoDestinationWorkspace')); }
+    if (!ws) { throw new Error(t("No destination workspace")); }
     const api = this._app.api;
     const org = this._destOrg.get();
     const docWorker = await api.getWorkerAPI('import');
@@ -173,7 +173,7 @@ class SaveCopyModal extends Disposable {
     return [
       cssField(
         cssLabel(t("Name")),
-        input(this._destName, {onInput: true}, {placeholder: t('EnterDocumentName')},  dom.cls(cssInput.className),
+        input(this._destName, {onInput: true}, {placeholder: t("Enter document name")},  dom.cls(cssInput.className),
           // modal dialog grabs focus after 10ms delay; so to focus this input, wait a bit longer
           // (see the TODO in app/client/ui2018/modals.ts about weasel.js and focus).
           (elem) => { setTimeout(() => { elem.focus(); }, 20); },
@@ -182,7 +182,7 @@ class SaveCopyModal extends Disposable {
       ),
       cssField(
         cssLabel(t("As Template")),
-        cssCheckbox(this._asTemplate, t('IncludeStructureWithoutData'),
+        cssCheckbox(this._asTemplate, t("Include the structure without any of the data."),
           testId('save-as-template'))
       ),
       // Show the team picker only when saving to other teams is allowed and there are other teams
@@ -199,7 +199,7 @@ class SaveCopyModal extends Disposable {
       // Show the workspace picker only when destOrg is a team site, because personal orgs do not have workspaces.
       dom.domComputed((use) => use(this._showWorkspaces) && use(this._workspaces), (wss) =>
         wss === false ? null :
-        wss && wss.length === 0 ? cssWarningText(t("NoWriteAccessToSite"),
+        wss && wss.length === 0 ? cssWarningText(t("You do not have write access to this site"),
           testId('copy-warning')) :
         [
           cssField(
@@ -216,7 +216,7 @@ class SaveCopyModal extends Disposable {
           ),
           wss ? dom.domComputed(this._destWS, (destWs) =>
             destWs && !roles.canEdit(destWs.access) ?
-              cssWarningText(t("NoWriteAccessToWorkspace"),
+              cssWarningText(t("You do not have write access to the selected workspace"),
                 testId('copy-warning')
               ) : null
           ) : null

app/client/ui/NotifyUI.ts

@@ -24,10 +24,10 @@ function buildAction(action: NotifyAction, item: Notification, options: IBeaconO
   switch (action) {
     case 'upgrade':
       if (appModel) {
-        return cssToastAction(t('UpgradePlan'), dom.on('click', () =>
+        return cssToastAction(t("Upgrade Plan"), dom.on('click', () =>
           appModel.showUpgradeModal()));
       } else {
-        return dom('a', cssToastAction.cls(''), t('UpgradePlan'), {target: '_blank'},
+        return dom('a', cssToastAction.cls(''), t("Upgrade Plan"), {target: '_blank'},
           {href: commonUrls.plans});
       }
     case 'renew':
@@ -37,22 +37,22 @@ function buildAction(action: NotifyAction, item: Notification, options: IBeaconO
       if (appModel && appModel.currentOrg && appModel.currentOrg.billingAccount &&
           !appModel.currentOrg.billingAccount.isManager) { return null; }
       // Otherwise return a link to the billing page.
-      return dom('a', cssToastAction.cls(''), t('Renew'), {target: '_blank'},
+      return dom('a', cssToastAction.cls(''), t("Renew"), {target: '_blank'},
                  {href: urlState().makeUrl({billing: 'billing'})});
 
     case 'personal':
       if (!appModel) { return null; }
-      return cssToastAction(t('GoToPersonalSite'), dom.on('click', async () => {
+      return cssToastAction(t("Go to your free personal site"), dom.on('click', async () => {
         const info = await appModel.api.getSessionAll();
         const orgs = info.orgs.filter(org => org.owner && org.owner.id === appModel.currentUser?.id);
         if (orgs.length !== 1) {
-          throw new Error(t('ErrorCannotFindPersonalSite'));
+          throw new Error(t("Cannot find personal site, sorry!"));
         }
         window.location.assign(urlState().makeUrl({org: orgs[0].domain || undefined}));
       }));
 
     case 'report-problem':
-      return cssToastAction(t('ReportProblem'), testId('toast-report-problem'),
+      return cssToastAction(t("Report a problem"), testId('toast-report-problem'),
         dom.on('click', () => beaconOpenMessage({...options, includeAppErrors: true})));
 
     case 'ask-for-help': {
@@ -60,7 +60,7 @@ function buildAction(action: NotifyAction, item: Notification, options: IBeaconO
         error: new Error(item.options.message as string),
         timestamp: item.options.timestamp,
       }];
-      return cssToastAction(t('AskForHelp'),
+      return cssToastAction(t("Ask for help"),
         dom.on('click', () => beaconOpenMessage({...options, includeAppErrors: true, errors})));
     }
 
@@ -154,11 +154,11 @@ function buildNotifyDropdown(ctl: IOpenController, notifier: Notifier, appModel:
 
     cssDropdownContent(
       cssDropdownHeader(
-        cssDropdownHeaderTitle(t('Notifications')),
+        cssDropdownHeaderTitle(t("Notifications")),
         shouldHideUiElement("helpCenter") ? null :
         cssDropdownFeedbackLink(
           cssDropdownFeedbackIcon('Feedback'),
-          t('GiveFeedback'),
+          t("Give feedback"),
           dom.on('click', () => beaconOpenMessage({appModel, onOpen: () => ctl.close(), route: '/ask/message/'})),
           testId('feedback'),
         )
@@ -171,7 +171,7 @@ function buildNotifyDropdown(ctl: IOpenController, notifier: Notifier, appModel:
       ),
       dom.maybe((use) => use(dropdownItems).length === 0 && !use(disconnectMsg), () =>
         cssDropdownStatus(
-          dom('div', cssDropdownStatusText(t('NoNotifications'))),
+          dom('div', cssDropdownStatusText(t("No notifications"))),
         )
       ),
       dom.forEach(dropdownItems, item =>

app/client/ui/OnBoardingPopups.ts

@@ -299,7 +299,7 @@ class OnBoardingPopupsCtl extends Disposable {
           {style: `margin-right: 8px; visibility: ${isFirstStep ? 'hidden' : 'visible'}`},
         ),
         bigPrimaryButton(
-          isLastStep ? t('Finish') : t('Next'), testId('next'),
+          isLastStep ? t("Finish") : t("Next"), testId('next'),
           dom.on('click', () => this._move(+1, true)),
         ),
       )

app/client/ui/OpenVideoTour.ts

@@ -28,7 +28,7 @@ const testId = makeTestId('test-video-tour-');
           cssVideo(
             {
               src: commonUrls.videoTour,
-              title: t('YouTubeVideoPlayer'),
+              title: t("YouTube video player"),
               frameborder: '0',
               allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',
               allowfullscreen: '',
@@ -51,7 +51,7 @@ const testId = makeTestId('test-video-tour-');
 export function createVideoTourTextButton(): HTMLDivElement {
   const elem: HTMLDivElement = cssVideoTourTextButton(
     cssVideoIcon('Video'),
-    t('GristVideoTour'),
+    t("Grist Video Tour"),
     dom.on('click', () => openVideoTour(elem)),
     testId('text-button'),
   );
@@ -77,7 +77,7 @@ export function createVideoTourToolsButton(): HTMLDivElement | null {
     dom.autoDispose(commandsGroup),
     cssPageLink(
       iconElement = cssPageIcon('Video'),
-      cssLinkText(t('VideoTour')),
+      cssLinkText(t("Video Tour")),
       dom.cls('tour-help-center'),
       dom.on('click', () => openVideoTour(iconElement)),
       testId('tools-button'),

app/client/ui/PageWidgetPicker.ts

@@ -183,7 +183,7 @@ export function buildPageWidgetPicker(
       // should be handle by the caller.
       if (await isLongerThan(savePromise, DELAY_BEFORE_SPINNER_MS)) {
         const label = getWidgetTypes(type).label;
-        await spinnerModal(t('BuildingWidget', { label }), savePromise);
+        await spinnerModal(t("Building {{- label}} widget", { label }), savePromise);
       }
     }
   }
@@ -285,7 +285,7 @@ export class PageWidgetSelect extends Disposable {
       testId('container'),
       cssBody(
         cssPanel(
-          header(t('SelectWidget')),
+          header(t("Select Widget")),
           sectionTypes.map((value) => {
             const {label, icon: iconName} = getWidgetTypes(value);
             const disabled = computed(this._value.table, (use, tid) => this._isTypeDisabled(value, tid));
@@ -302,7 +302,7 @@ export class PageWidgetSelect extends Disposable {
         ),
         cssPanel(
           testId('data'),
-          header(t('SelectData')),
+          header(t("Select Data")),
           cssEntry(
             cssIcon('TypeTable'), 'New Table',
             // prevent the selection of 'New Table' if it is disabled
@@ -336,7 +336,7 @@ export class PageWidgetSelect extends Disposable {
           )),
         ),
         cssPanel(
-          header(t('GroupBy')),
+          header(t("Group by")),
           dom.hide((use) => !use(this._value.summarize)),
           domComputed(
             (use) => use(this._columns)
@@ -378,7 +378,7 @@ export class PageWidgetSelect extends Disposable {
           bigPrimaryButton(
             // TODO: The button's label of the page widget picker should read 'Close' instead when
             // there are no changes.
-            this._options.buttonLabel || t('AddToPage'),
+            this._options.buttonLabel || t("Add to Page"),
             dom.prop('disabled', (use) => !isValidSelection(
               use(this._value.table), use(this._value.type), this._options.isNewPage)
             ),

app/client/ui/Pages.ts

@@ -137,12 +137,12 @@ function buildPrompt(tableNames: string[], onSave: (option: RemoveOption) => Pro
     const saveDisabled = Computed.create(owner, use => use(selected) === '');
     const saveFunc = () => onSave(selected.get());
     return {
-      title: t('TableWillNoLongerBeVisible', { count: tableNames.length }),
+      title: t('The following tables will no longer be visible', { count: tableNames.length }),
       body: dom('div',
         testId('popup'),
         buildWarning(tableNames),
         cssOptions(
-          buildOption(selected, 'data', t('DeleteDataAndPage')),
+          buildOption(selected, 'data', t("Delete data and this page.")),
           buildOption(selected, 'page',
             [ // TODO i18n
               `Keep data and delete page. `,
@@ -153,7 +153,7 @@ function buildPrompt(tableNames: string[], onSave: (option: RemoveOption) => Pro
         )
       ),
       saveDisabled,
-      saveLabel: t('Delete'),
+      saveLabel: t("Delete"),
       saveFunc,
       width: 'fixed-wide',
       extraButtons: [],

app/client/ui/RightPanel.ts

@@ -56,11 +56,11 @@ const PageSubTab = StringUnion("widget", "sortAndFilter", "data");
 export function getFieldType(widgetType: IWidgetType|null) {
   // A map of widget type to the icon and label to use for a field of that widget.
   const fieldTypes = new Map<IWidgetType, {label: string, icon: IconName, pluralLabel: string}>([
-    ['record', {label: t('Column', { count: 1 }), icon: 'TypeCell', pluralLabel: t('Column', { count: 2 })}],
-    ['detail', {label: t('Field', { count: 1 }), icon: 'TypeCell', pluralLabel: t('Field', { count: 2 })}],
-    ['single', {label: t('Field', { count: 1 }), icon: 'TypeCell', pluralLabel: t('Field', { count: 2 })}],
+    ['record', {label: t('Columns', { count: 1 }), icon: 'TypeCell', pluralLabel: t('Columns', { count: 2 })}],
+    ['detail', {label: t('Fields', { count: 1 }), icon: 'TypeCell', pluralLabel: t('Fields', { count: 2 })}],
+    ['single', {label: t('Fields', { count: 1 }), icon: 'TypeCell', pluralLabel: t('Fields', { count: 2 })}],
     ['chart', {label: t('Series', { count: 1 }), icon: 'ChartLine', pluralLabel: t('Series', { count: 2 })}],
-    ['custom', {label: t('Column', { count: 1 }), icon: 'TypeCell', pluralLabel: t('Column', { count: 2 })}],
+    ['custom', {label: t('Columns', { count: 1 }), icon: 'TypeCell', pluralLabel: t('Columns', { count: 2 })}],
   ]);
 
   return fieldTypes.get(widgetType || 'record') || fieldTypes.get('record')!;
@@ -242,7 +242,7 @@ export class RightPanel extends Disposable {
           ),
           cssSeparator(),
           dom.maybe<FieldBuilder|null>(fieldBuilder, builder => [
-          cssLabel(t('ColumnType')),
+          cssLabel(t("COLUMN TYPE")),
             cssSection(
               builder.buildSelectTypeDom(),
             ),
@@ -265,7 +265,7 @@ export class RightPanel extends Disposable {
               cssRow(refSelect.buildDom()),
               cssSeparator()
             ]),
-            cssLabel(t('Transform')),
+            cssLabel(t("TRANSFORM")),
             dom.maybe<FieldBuilder|null>(fieldBuilder, builder => builder.buildTransformDom()),
             dom.maybe(isMultiSelect, () => disabledSection()),
             testId('panel-transform'),
@@ -295,15 +295,15 @@ export class RightPanel extends Disposable {
   private _buildPageWidgetContent(_owner: MultiHolder) {
     return [
       cssSubTabContainer(
-        cssSubTab(t('Widget'),
+        cssSubTab(t("Widget"),
           cssSubTab.cls('-selected', (use) => use(this._subTab) === 'widget'),
           dom.on('click', () => this._subTab.set("widget")),
           testId('config-widget')),
-        cssSubTab(t('SortAndFilter'),
+        cssSubTab(t("Sort & Filter"),
           cssSubTab.cls('-selected', (use) => use(this._subTab) === 'sortAndFilter'),
           dom.on('click', () => this._subTab.set("sortAndFilter")),
           testId('config-sortAndFilter')),
-        cssSubTab(t('Data'),
+        cssSubTab(t("Data"),
           cssSubTab.cls('-selected', (use) => use(this._subTab) === 'data'),
           dom.on('click', () => this._subTab.set("data")),
           testId('config-data')),
@@ -345,7 +345,7 @@ export class RightPanel extends Disposable {
     });
     return dom.maybe(viewConfigTab, (vct) => [
       this._disableIfReadonly(),
-      cssLabel(dom.text(use => use(activeSection.isRaw) ? t('DataTableName') : t('WidgetTitle')),
+      cssLabel(dom.text(use => use(activeSection.isRaw) ? t("DATA TABLE NAME") : t("WIDGET TITLE")),
         dom.style('margin-bottom', '14px'),
       ),
       cssRow(cssTextInput(
@@ -362,7 +362,7 @@ export class RightPanel extends Disposable {
       dom.maybe(
         (use) => !use(activeSection.isRaw),
         () => cssRow(
-          primaryButton(t('ChangeWidget'), this._createPageWidgetPicker()),
+          primaryButton(t("Change Widget"), this._createPageWidgetPicker()),
           cssRow.cls('-top-space')
         ),
       ),
@@ -370,7 +370,7 @@ export class RightPanel extends Disposable {
       cssSeparator(),
 
       dom.maybe((use) => ['detail', 'single'].includes(use(this._pageWidgetType)!), () => [
-        cssLabel(t('Theme')),
+        cssLabel(t("Theme")),
         dom('div',
           vct._buildThemeDom(),
           vct._buildLayoutDom())
@@ -385,7 +385,7 @@ export class RightPanel extends Disposable {
         if (use(this._pageWidgetType) !== 'record') { return null; }
         return [
           cssSeparator(),
-          cssLabel(t('RowStyleUpper')),
+          cssLabel(t("ROW STYLE")),
           domAsync(imports.loadViewPane().then(ViewPane =>
             dom.create(ViewPane.ConditionalStyle, t("Row Style"), activeSection, this._gristDoc)
           ))
@@ -393,14 +393,14 @@ export class RightPanel extends Disposable {
       }),
 
       dom.maybe((use) => use(this._pageWidgetType) === 'chart', () => [
-        cssLabel(t('ChartType')),
+        cssLabel(t("CHART TYPE")),
         vct._buildChartConfigDom(),
       ]),
 
       dom.maybe((use) => use(this._pageWidgetType) === 'custom', () => {
         const parts = vct._buildCustomTypeItems() as any[];
         return [
-          cssLabel(t('Custom')),
+          cssLabel(t("CUSTOM")),
           // If 'customViewPlugin' feature is on, show the toggle that allows switching to
           // plugin mode. Note that the default mode for a new 'custom' view is 'url', so that's
           // the only one that will be shown without the feature flag.
@@ -465,15 +465,15 @@ export class RightPanel extends Disposable {
     link.onWrite((val) => this._gristDoc.saveLink(val));
     return [
       this._disableIfReadonly(),
-      cssLabel(t('DataTable')),
+      cssLabel(t("DATA TABLE")),
       cssRow(
-        cssIcon('TypeTable'), cssDataLabel(t('SourceData')),
+        cssIcon('TypeTable'), cssDataLabel(t("SOURCE DATA")),
         cssContent(dom.text((use) => use(use(table).primaryTableId)),
                    testId('pwc-table'))
       ),
       dom(
         'div',
-        cssRow(cssIcon('Pivot'), cssDataLabel(t('GroupedBy'))),
+        cssRow(cssIcon('Pivot'), cssDataLabel(t("GROUPED BY"))),
         cssRow(domComputed(groupedBy, (cols) => cssList(cols.map((c) => (
           cssListItem(dom.text(c.label),
                       testId('pwc-groupedBy-col'))
@@ -485,12 +485,12 @@ export class RightPanel extends Disposable {
       ),
 
       dom.maybe((use) => !use(activeSection.isRaw), () =>
-        cssButtonRow(primaryButton(t('EditDataSelection'), this._createPageWidgetPicker(),
+        cssButtonRow(primaryButton(t("Edit Data Selection"), this._createPageWidgetPicker(),
           testId('pwc-editDataSelection')),
           dom.maybe(
             use => Boolean(use(use(activeSection.table).summarySourceTable)),
             () => basicButton(
-              t('Detach'),
+              t("Detach"),
               dom.on('click', () => this._gristDoc.docData.sendAction(
                 ["DetachSummaryViewSection", activeSection.getRowId()])),
               testId('detach-button'),
@@ -507,10 +507,10 @@ export class RightPanel extends Disposable {
       cssSeparator(),
 
       dom.maybe((use) => !use(activeSection.isRaw), () => [
-        cssLabel(t('SelectBy')),
+        cssLabel(t("SELECT BY")),
         cssRow(
           dom.update(
-            select(link, linkOptions, {defaultLabel: t('SelectWidget')}),
+            select(link, linkOptions, {defaultLabel: t("Select Widget")}),
             dom.on('click', () => {
               refreshTrigger.set(!refreshTrigger.get());
             })
@@ -526,7 +526,7 @@ export class RightPanel extends Disposable {
         // TODO: sections should be listed following the order of appearance in the view layout (ie:
         // left/right - top/bottom);
         return selectorFor.length ? [
-          cssLabel(t('SelectorFor'), testId('selector-for')),
+          cssLabel(t("SELECTOR FOR"), testId('selector-for')),
           cssRow(cssList(selectorFor.map((sec) => this._buildSectionItem(sec))))
         ] : null;
       }),
@@ -538,7 +538,7 @@ export class RightPanel extends Disposable {
     const section = gristDoc.viewModel.activeSection;
     const onSave = (val: IPageWidget) => gristDoc.saveViewSection(section.peek(), val);
     return (elem) => { attachPageWidgetPicker(elem, gristDoc, onSave, {
-      buttonLabel:  t('Save'),
+      buttonLabel:  t("Save"),
       value: () => toPageWidget(section.peek()),
       selectBy: (val) => gristDoc.selectBy(val),
     }); };
@@ -559,7 +559,7 @@ export class RightPanel extends Disposable {
       return dom.maybe(this._gristDoc.docPageModel.isReadonly,  () => (
         cssOverlay(
           testId('disable-overlay'),
-          cssBottomText(t('NoEditAccess')),
+          cssBottomText(t("You do not have edit access to this document")),
         )
       ));
     }

app/client/ui/RowContextMenu.ts

@@ -19,29 +19,29 @@ export function RowContextMenu({ disableInsert, disableDelete, isViewSorted, num
     // bottom. It could be very confusing for users who might expect the record to stay above or
     // below the active row. Thus in this case we show a single `insert row` command.
     result.push(
-      menuItemCmd(allCommands.insertRecordAfter, t('InsertRow'),
+      menuItemCmd(allCommands.insertRecordAfter, t("Insert row"),
         dom.cls('disabled', disableInsert)),
     );
   } else {
     result.push(
-      menuItemCmd(allCommands.insertRecordBefore, t('InsertRowAbove'),
+      menuItemCmd(allCommands.insertRecordBefore, t("Insert row above"),
         dom.cls('disabled', disableInsert)),
-      menuItemCmd(allCommands.insertRecordAfter, t('InsertRowBelow'),
+      menuItemCmd(allCommands.insertRecordAfter, t("Insert row below"),
         dom.cls('disabled', disableInsert)),
     );
   }
   result.push(
-    menuItemCmd(allCommands.duplicateRows, t('DuplicateRows', { count: numRows }),
+    menuItemCmd(allCommands.duplicateRows, t('Duplicate rows', { count: numRows }),
       dom.cls('disabled', disableInsert || numRows === 0)),
   );
   result.push(
     menuDivider(),
     // TODO: should show `Delete ${num} rows` when multiple are selected
-    menuItemCmd(allCommands.deleteRecords, t('Delete'),
+    menuItemCmd(allCommands.deleteRecords, t("Delete"),
       dom.cls('disabled', disableDelete)),
   );
   result.push(
     menuDivider(),
-    menuItemCmd(allCommands.copyLink, t('CopyAnchorLink')));
+    menuItemCmd(allCommands.copyLink, t("Copy anchor link")));
   return result;
 }

app/client/ui/ShareMenu.ts

@@ -35,18 +35,18 @@ export function buildShareMenuButton(pageModel: DocPageModel): DomContents {
   // available (a user quick enough to open the menu in this state would have to re-open it).
   return dom.maybe(pageModel.currentDoc, (doc) => {
     const appModel = pageModel.appModel;
-    const saveCopy = () => makeCopy(doc, appModel, t('SaveDocument')).catch(reportError);
+    const saveCopy = () => makeCopy(doc, appModel, t("Save Document")).catch(reportError);
     if (doc.idParts.snapshotId) {
       const backToCurrent = () => urlState().pushUrl({doc: buildOriginalUrlId(doc.id, true)});
-      return shareButton(t('BackToCurrent'), () => [
+      return shareButton(t("Back to Current"), () => [
         menuManageUsers(doc, pageModel),
-        menuSaveCopy(t('SaveCopy'), doc, appModel),
+        menuSaveCopy(t("Save Copy"), doc, appModel),
         menuOriginal(doc, appModel, true),
         menuExports(doc, pageModel),
       ], {buttonAction: backToCurrent});
     } else if (doc.isPreFork || doc.isBareFork) {
       // A new unsaved document, or a fiddle, or a public example.
-      const saveActionTitle = doc.isBareFork ? t('SaveDocument') : t('SaveCopy');
+      const saveActionTitle = doc.isBareFork ? t("Save Document") : t("Save Copy");
       return shareButton(saveActionTitle, () => [
         menuManageUsers(doc, pageModel),
         menuSaveCopy(saveActionTitle, doc, appModel),
@@ -58,16 +58,16 @@ export function buildShareMenuButton(pageModel: DocPageModel): DomContents {
       // Copy" primary and keep it as an action button on top. Otherwise, show a tag without a
       // default action; click opens the menu where the user can choose.
       if (!roles.canEdit(doc.trunkAccess || null)) {
-        return shareButton(t('SaveCopy'), () => [
+        return shareButton(t("Save Copy"), () => [
           menuManageUsers(doc, pageModel),
-          menuSaveCopy(t('SaveCopy'), doc, appModel),
+          menuSaveCopy(t("Save Copy"), doc, appModel),
           menuOriginal(doc, appModel, false),
           menuExports(doc, pageModel),
         ], {buttonAction: saveCopy});
       } else {
-        return shareButton(t('Unsaved'), () => [
+        return shareButton(t("Unsaved"), () => [
           menuManageUsers(doc, pageModel),
-          menuSaveCopy(t('SaveCopy'), doc, appModel),
+          menuSaveCopy(t("Save Copy"), doc, appModel),
           menuOriginal(doc, appModel, false),
           menuExports(doc, pageModel),
         ]);
@@ -75,7 +75,7 @@ export function buildShareMenuButton(pageModel: DocPageModel): DomContents {
     } else {
       return shareButton(null, () => [
         menuManageUsers(doc, pageModel),
-        menuSaveCopy(t('DuplicateDocument'), doc, appModel),
+        menuSaveCopy(t("Duplicate Document"), doc, appModel),
         menuWorkOnCopy(pageModel),
         menuExports(doc, pageModel),
       ]);
@@ -132,7 +132,7 @@ function shareButton(buttonText: string|null, menuCreateFunc: MenuCreateFunc,
 function menuManageUsers(doc: DocInfo, pageModel: DocPageModel) {
   return [
     menuItem(() => manageUsers(doc, pageModel),
-      roles.canEditAccess(doc.access) ? t('ManageUsers') : t('AccessDetails'),
+      roles.canEditAccess(doc.access) ? t("Manage Users") : t("Access Details"),
       dom.cls('disabled', doc.isFork),
       testId('tb-share-option')
     ),
@@ -166,18 +166,18 @@ function menuOriginal(doc: Document, appModel: AppModel, isSnapshot: boolean) {
   }
   return [
     cssMenuSplitLink({href: originalUrl},
-      cssMenuSplitLinkText(t('ReturnToTermToUse', {termToUse})), testId('return-to-original'),
+      cssMenuSplitLinkText(t("Return to {{termToUse}}", {termToUse})), testId('return-to-original'),
       cssMenuIconLink({href: originalUrl, target: '_blank'}, testId('open-original'),
         cssMenuIcon('FieldLink'),
       )
     ),
-    menuItem(replaceOriginal, t('ReplaceTermToUse', {termToUse}),
+    menuItem(replaceOriginal, t("Replace {{termToUse}}...", {termToUse}),
       // Disable if original is not writable, and also when comparing snapshots (since it's
       // unclear which of the versions to use).
       dom.cls('disabled', !roles.canEdit(doc.trunkAccess || null) || comparingSnapshots),
       testId('replace-original'),
     ),
-    menuItemLink(compareHref, {target: '_blank'}, t('CompareTermToUse', {termToUse}),
+    menuItemLink(compareHref, {target: '_blank'}, t("Compare to {{termToUse}}", {termToUse}),
       menuAnnotate('Beta'),
       testId('compare-original'),
     ),
@@ -205,10 +205,10 @@ function menuWorkOnCopy(pageModel: DocPageModel) {
   };
 
   return [
-    menuItem(makeUnsavedCopy, t('WorkOnCopy'), testId('work-on-copy')),
+    menuItem(makeUnsavedCopy, t("Work on a Copy"), testId('work-on-copy')),
     menuText(
       withInfoTooltip(
-        t('EditWithoutAffecting'),
+        t("Edit without affecting the original"),
         GristTooltips.workOnACopy(),
         {tooltipMenuOptions: {attach: null}}
       )
@@ -229,21 +229,21 @@ function menuExports(doc: Document, pageModel: DocPageModel) {
     menuDivider(),
     (isElectron ?
       menuItem(() => gristDoc.app.comm.showItemInFolder(doc.name),
-        t('ShowInFolder'), testId('tb-share-option')) :
+        t("Show in folder"), testId('tb-share-option')) :
         menuItemLink({
           href: pageModel.appModel.api.getDocAPI(doc.id).getDownloadUrl(),
           target: '_blank', download: ''
         },
-        menuIcon('Download'), t('Download'), testId('tb-share-option'))
+        menuIcon('Download'), t("Download"), testId('tb-share-option'))
     ),
     menuItemLink({ href: gristDoc.getCsvLink(), target: '_blank', download: ''},
-      menuIcon('Download'), t('ExportCSV'), testId('tb-share-option')),
+      menuIcon('Download'), t("Export CSV"), testId('tb-share-option')),
     menuItemLink({
       href: pageModel.appModel.api.getDocAPI(doc.id).getDownloadXlsxUrl(),
       target: '_blank', download: ''
-    }, menuIcon('Download'), t('ExportXLSX'), testId('tb-share-option')),
+    }, menuIcon('Download'), t("Export XLSX"), testId('tb-share-option')),
     menuItem(() => sendToDrive(doc, pageModel),
-      menuIcon('Download'), t('SendToGoogleDrive'), testId('tb-share-option')),
+      menuIcon('Download'), t("Send to Google Drive"), testId('tb-share-option')),
   ];
 }
 

app/client/ui/SiteSwitcher.ts

@@ -33,7 +33,7 @@ export function buildSiteSwitcher(appModel: AppModel) {
   const orgs = appModel.topAppModel.orgs;
 
   return [
-    menuSubHeader(t('SwitchSites')),
+    menuSubHeader(t("Switch Sites")),
     dom.forEach(orgs, (org) =>
       menuItemLink(urlState().setLinkUrl({ org: org.domain || undefined }),
         cssOrgSelected.cls('', appModel.currentOrg ? org.id === appModel.currentOrg.id : false),
@@ -45,7 +45,7 @@ export function buildSiteSwitcher(appModel: AppModel) {
     menuItem(
       () => appModel.showNewSiteModal(),
       menuIcon('Plus'),
-      t('CreateNewTeamSite'),
+      t("Create new team site"),
       testId('create-new-site'),
     ),
   ];

app/client/ui/SortConfig.ts

@@ -149,9 +149,9 @@ export class SortConfig extends Disposable {
       });
       return {computed, allowedTypes, flag, label};
     };
-    const orderByChoice = computedFlag('orderByChoice', ['Choice'], t('UseChoicePosition'));
-    const naturalSort   = computedFlag('naturalSort', ['Text'], t('NaturalSort'));
-    const emptyLast     = computedFlag('emptyLast', null, t('EmptyValuesLast'));
+    const orderByChoice = computedFlag('orderByChoice', ['Choice'], t("Use choice position"));
+    const naturalSort   = computedFlag('naturalSort', ['Text'], t("Natural sort"));
+    const emptyLast     = computedFlag('emptyLast', null, t("Empty values last"));
     const flags = [orderByChoice, emptyLast, naturalSort];
 
     const column = columns.get().find(c => c.value === Sort.getColRef(colRef));
@@ -222,7 +222,7 @@ export class SortConfig extends Disposable {
       dom.domComputed(use => {
         const cols = use(available);
         return cssTextBtn(
-          t('AddColumn'),
+          t("Add Column"),
           menu((ctl) => [
             ...cols.map((col) => (
               menuItem(
@@ -249,7 +249,7 @@ export class SortConfig extends Disposable {
   private _buildUpdateDataButton() {
     return dom.maybe(this._section.isSorted, () =>
       cssButtonRow(
-        cssTextBtn(t('UpdateData'),
+        cssTextBtn(t("Update Data"),
           dom.on('click', () => updatePositions(this._gristDoc, this._section)),
           testId('update'),
           dom.show((use) => (

app/client/ui/SortFilterConfig.ts

@@ -51,7 +51,7 @@ export class SortFilterConfig extends Disposable {
   }
 
   private async _save() {
-    await this._docModel.docData.bundleActions(t('UpdateSortFilterSettings'), () => Promise.all([
+    await this._docModel.docData.bundleActions(t('Update Sort & Filter settings'), () => Promise.all([
       this._section.activeSortJson.save(),
       this._section.saveFilters(),
     ]));

app/client/ui/ThemeConfig.ts

@@ -26,7 +26,7 @@ export class ThemeConfig extends Disposable {
 
   public buildDom() {
     return dom('div',
-      css.subHeader(t('Appearance'), css.betaTag('Beta')),
+      css.subHeader(t("Appearance "), css.betaTag('Beta')),
       css.dataRow(
         cssAppearanceSelect(
           select(
@@ -42,7 +42,7 @@ export class ThemeConfig extends Disposable {
       css.dataRow(
         labeledSquareCheckbox(
           this._syncWithOS,
-          t('SyncWithOS'),
+          t("Switch appearance automatically to match system"),
           testId('sync-with-os'),
         ),
       ),

app/client/ui/Tools.ts

@@ -30,14 +30,14 @@ export function tools(owner: Disposable, gristDoc: GristDoc, leftPanelOpen: Obse
   updateCanViewAccessRules();
   return cssTools(
     cssTools.cls('-collapsed', (use) => !use(leftPanelOpen)),
-    cssSectionHeader(t("Tools")),
+    cssSectionHeader(t("TOOLS")),
     cssPageEntry(
       cssPageEntry.cls('-selected', (use) => use(gristDoc.activeViewId) === 'acl'),
       cssPageEntry.cls('-disabled', (use) => !use(canViewAccessRules)),
       dom.domComputed(canViewAccessRules, (_canViewAccessRules) => {
         return cssPageLink(
           cssPageIcon('EyeShow'),
-          cssLinkText(t('AccessRules'),
+          cssLinkText(t("Access Rules"),
             menuAnnotate('Beta', cssBetaTag.cls(''))
           ),
           _canViewAccessRules ? urlState().setLinkUrl({docPage: 'acl'}) : null,
@@ -49,25 +49,25 @@ export function tools(owner: Disposable, gristDoc: GristDoc, leftPanelOpen: Obse
       cssPageEntry.cls('-selected', (use) => use(gristDoc.activeViewId) === 'data'),
       cssPageLink(
         cssPageIcon('Database'),
-        cssLinkText(t('RawData')),
+        cssLinkText(t("Raw Data")),
         testId('raw'),
         urlState().setLinkUrl({docPage: 'data'})
       )
     ),
     cssPageEntry(
-      cssPageLink(cssPageIcon('Log'), cssLinkText(t('DocumentHistory')), testId('log'),
+      cssPageLink(cssPageIcon('Log'), cssLinkText(t("Document History")), testId('log'),
         dom.on('click', () => gristDoc.showTool('docHistory')))
     ),
     // TODO: polish validation and add it back
     dom.maybe((use) => use(gristDoc.app.features).validationsTool, () =>
       cssPageEntry(
-        cssPageLink(cssPageIcon('Validation'), cssLinkText(t('ValidateData')), testId('validate'),
+        cssPageLink(cssPageIcon('Validation'), cssLinkText(t("Validate Data")), testId('validate'),
           dom.on('click', () => gristDoc.showTool('validations'))))
     ),
     cssPageEntry(
       cssPageEntry.cls('-selected', (use) => use(gristDoc.activeViewId) === 'code'),
       cssPageLink(cssPageIcon('Code'),
-        cssLinkText(t('CodeView')),
+        cssLinkText(t("Code View")),
         urlState().setLinkUrl({docPage: 'code'})
       ),
       testId('code'),
@@ -77,7 +77,7 @@ export function tools(owner: Disposable, gristDoc: GristDoc, leftPanelOpen: Obse
       const ex = buildExamples().find(e => e.urlId === doc.urlId);
       if (!ex || !ex.tutorialUrl) { return null; }
       return cssPageEntry(
-        cssPageLink(cssPageIcon('Page'), cssLinkText(t('HowToTutorial')), testId('tutorial'),
+        cssPageLink(cssPageIcon('Page'), cssLinkText(t("How-to Tutorial")), testId('tutorial'),
           {href: ex.tutorialUrl, target: '_blank'},
           cssExampleCardOpener(
             icon('TypeDetails'),
@@ -97,14 +97,14 @@ export function tools(owner: Disposable, gristDoc: GristDoc, leftPanelOpen: Obse
       cssSplitPageEntry(
         cssPageEntryMain(
           cssPageLink(cssPageIcon('Page'),
-            cssLinkText(t('DocumentTour')),
+            cssLinkText(t("Tour of this Document")),
             urlState().setLinkUrl({docTour: true}),
             testId('doctour'),
           ),
         ),
         !isDocOwner ? null : cssPageEntrySmall(
           cssPageLink(cssPageIcon('Remove'),
-            dom.on('click', () => confirmModal(t('DeleteDocumentTour'), t('Delete'), () =>
+            dom.on('click', () => confirmModal(t("Delete document tour?"), t("Delete"), () =>
               gristDoc.docData.sendAction(['RemoveTable', 'GristDocTour']))
             ),
             testId('remove-doctour')

app/client/ui/TopBar.ts

@@ -29,7 +29,7 @@ export function createTopBarHome(appModel: AppModel) {
     (appModel.isTeamSite && roles.canEditAccess(appModel.currentOrg?.access || null) ?
       [
         basicButton(
-          t('ManageTeam'),
+          t("Manage Team"),
           dom.on('click', () => manageTeamUsersApp(appModel)),
           testId('topbar-manage-team')
         ),

app/client/ui/TriggerFormulas.ts

@@ -73,7 +73,7 @@ export function buildFormulaTriggers(owner: MultiHolder, column: ColumnRec, opti
   const docModel = column._table.docModel;
   const summaryText = Computed.create(owner, use => {
     if (use(column.recalcWhen) === RecalcWhen.MANUAL_UPDATES) {
-      return t('AnyField');
+      return t("Any field");
     }
     const deps = decodeObject(use(column.recalcDeps)) as number[]|null;
     if (!deps || deps.length === 0) { return ''; }
@@ -98,7 +98,7 @@ export function buildFormulaTriggers(owner: MultiHolder, column: ColumnRec, opti
     cssRow(
       labeledSquareCheckbox(
         applyToNew,
-        t('NewRecords'),
+        t("Apply to new records"),
         dom.boolAttr('disabled', newRowsDisabled),
         testId('field-formula-apply-to-new'),
       ),
@@ -107,8 +107,8 @@ export function buildFormulaTriggers(owner: MultiHolder, column: ColumnRec, opti
       labeledSquareCheckbox(
         applyOnChanges,
         dom.text(use => use(applyOnChanges) ?
-          t('ChangesTo') :
-          t('RecordChanges')
+          t("Apply on changes to:") :
+          t("Apply on record changes")
         ),
         dom.boolAttr('disabled', changesDisabled),
         testId('field-formula-apply-on-changes'),
@@ -200,14 +200,14 @@ function buildTriggerSelectors(ctl: IOpenController, tableRec: TableRec, column:
     cssItemsFixed(
       cssSelectorItem(
         labeledSquareCheckbox(current,
-          [t('CurrentField'), cssSelectorNote('(data cleaning)')],
+          [t("Current field "), cssSelectorNote('(data cleaning)')],
           dom.boolAttr('disabled', allUpdates),
         ),
       ),
       menuDivider(),
       cssSelectorItem(
         labeledSquareCheckbox(allUpdates,
-          [`${t('AnyField')} `, cssSelectorNote('(except formulas)')]
+          [`${t("Any field")} `, cssSelectorNote('(except formulas)')]
         ),
       ),
     ),
@@ -224,12 +224,12 @@ function buildTriggerSelectors(ctl: IOpenController, tableRec: TableRec, column:
     cssItemsFixed(
       cssSelectorFooter(
         dom.maybe(isChanged, () =>
-          primaryButton(t('OK'),
+          primaryButton(t("OK"),
             dom.on('click', () => close(true)),
             testId('trigger-deps-apply')
           ),
         ),
-        basicButton(dom.text(use => use(isChanged) ? t('Cancel') : t('Close')),
+        basicButton(dom.text(use => use(isChanged) ? t("Cancel") : t("Close")),
           dom.on('click', () => close(false)),
           testId('trigger-deps-cancel')
         ),

app/client/ui/ViewLayoutMenu.ts

@@ -24,11 +24,11 @@ export function makeViewLayoutMenu(viewSection: ViewSectionRec, isReadonly: bool
 
   const contextMenu = [
     menuItemCmd(allCommands.deleteRecords,
-      t('DeleteRecord'),
+      t("Delete record"),
       testId('section-delete-card'),
       dom.cls('disabled', isReadonly || isAddRow)),
     menuItemCmd(allCommands.copyLink,
-      t('CopyAnchorLink'),
+      t("Copy anchor link"),
       testId('section-card-link'),
     ),
     menuDivider(),
@@ -39,30 +39,30 @@ export function makeViewLayoutMenu(viewSection: ViewSectionRec, isReadonly: bool
   return [
     dom.maybe((use) => ['single'].includes(use(viewSection.parentKey)), () => contextMenu),
     dom.maybe((use) => !use(viewSection.isRaw) && !isLight,
-      () => menuItemCmd(allCommands.showRawData, t('ShowRawData'), testId('show-raw-data')),
+      () => menuItemCmd(allCommands.showRawData, t("Show raw data"), testId('show-raw-data')),
     ),
-    menuItemCmd(allCommands.printSection, t('PrintWidget'), testId('print-section')),
+    menuItemCmd(allCommands.printSection, t("Print widget"), testId('print-section')),
     menuItemLink({ href: gristDoc.getCsvLink(), target: '_blank', download: ''},
-      t('DownloadCSV'), testId('download-section')),
+      t("Download as CSV"), testId('download-section')),
     menuItemLink({ href: gristDoc.getXlsxActiveViewLink(), target: '_blank', download: ''},
-    t('DownloadXLSX'), testId('download-section')),
+    t("Download as XLSX"), testId('download-section')),
     dom.maybe((use) => ['detail', 'single'].includes(use(viewSection.parentKey)), () =>
-      menuItemCmd(allCommands.editLayout, t('EditCardLayout'),
+      menuItemCmd(allCommands.editLayout, t("Edit Card Layout"),
         dom.cls('disabled', isReadonly))),
 
     dom.maybe(!isLight, () => [
       menuDivider(),
-      menuItemCmd(allCommands.viewTabOpen, t('WidgetOptions'), testId('widget-options')),
-      menuItemCmd(allCommands.sortFilterTabOpen, t('AdvancedSortFilter')),
-      menuItemCmd(allCommands.dataSelectionTabOpen, t('DataSelection')),
+      menuItemCmd(allCommands.viewTabOpen, t("Widget options"), testId('widget-options')),
+      menuItemCmd(allCommands.sortFilterTabOpen, t("Advanced Sort & Filter")),
+      menuItemCmd(allCommands.dataSelectionTabOpen, t("Data selection")),
     ]),
 
     menuDivider(),
     dom.maybe((use) => use(viewSection.parentKey) === 'custom' && use(viewSection.hasCustomOptions), () =>
-      menuItemCmd(allCommands.openWidgetConfiguration, t('OpenConfiguration'),
+      menuItemCmd(allCommands.openWidgetConfiguration, t("Open configuration"),
         testId('section-open-configuration')),
     ),
-    menuItemCmd(allCommands.deleteSection, t('DeleteWidget'),
+    menuItemCmd(allCommands.deleteSection, t("Delete widget"),
       dom.cls('disabled', !viewRec.getRowId() || viewRec.viewSections().peekLength <= 1 || isReadonly),
       testId('section-delete')),
   ];

app/client/ui/ViewSectionMenu.ts

@@ -19,7 +19,7 @@ const t = makeT('ViewSectionMenu');
 
 // Handler for [Save] button.
 async function doSave(docModel: DocModel, viewSection: ViewSectionRec): Promise<void> {
-  await docModel.docData.bundleActions(t("UpdateSortFilterSettings"), () => Promise.all([
+  await docModel.docData.bundleActions(t("Update Sort&Filter settings"), () => Promise.all([
     viewSection.activeSortJson.save(),      // Save sort
     viewSection.saveFilters(),              // Save filter
     viewSection.activeCustomOptions.save(), // Save widget options
@@ -73,7 +73,7 @@ export function viewSectionMenu(
       // [Save] [Revert] buttons when there are unsaved options.
       dom.maybe(displaySaveObs, () => cssSectionSaveButtonsWrapper(
         cssSaveTextButton(
-          t('Save'),
+          t("Save"),
           cssSaveTextButton.cls('-accent'),
           dom.on('click', save),
           hoverTooltip('Save sort & filter settings', {key: 'sortFilterBtnTooltip'}),
@@ -99,10 +99,10 @@ export function viewSectionMenu(
         // [Save] [Revert] buttons
         dom.domComputed(displaySaveObs, displaySave => [
           displaySave ? cssSaveButtonsRow(
-            cssSaveButton(t('Save'), testId('btn-save'),
+            cssSaveButton(t("Save"), testId('btn-save'),
                           dom.on('click', () => { ctl.close(); save(); }),
                           dom.boolAttr('disabled', isReadonly)),
-            basicButton(t('Revert'), testId('btn-revert'),
+            basicButton(t("Revert"), testId('btn-revert'),
                         dom.on('click', () => { ctl.close(); revert(); }))
           ) : null,
         ]),
@@ -142,7 +142,7 @@ export function viewSectionMenu(
 
 function makeSortPanel(section: ViewSectionRec, gristDoc: GristDoc) {
   return [
-    cssLabel(t('Sort'), testId('heading-sort')),
+    cssLabel(t("SORT"), testId('heading-sort')),
     dom.create(SortConfig, section, gristDoc, {
       // Attach content to triggerElem's parent, which is needed to prevent view
       // section menu to close when clicking an item in the advanced sort menu.
@@ -153,7 +153,7 @@ function makeSortPanel(section: ViewSectionRec, gristDoc: GristDoc) {
 
 function makeFilterPanel(section: ViewSectionRec) {
   return [
-    cssLabel(t('Filter'), testId('heading-filter')),
+    cssLabel(t("FILTER"), testId('heading-filter')),
     dom.create(FilterConfig, section, {
       // Attach content to triggerElem's parent, which is needed to prevent view
       // section menu to close when clicking an item of the add filter menu.
@@ -168,13 +168,13 @@ function makeCustomOptions(section: ViewSectionRec) {
   const color = Computed.create(null, use => use(section.activeCustomOptions.isSaved) ? "-normal" : "-accent");
   const text = Computed.create(null, use => {
     if (use(section.activeCustomOptions)) {
-      return use(section.activeCustomOptions.isSaved) ? t("Customized") : t("Modified");
+      return use(section.activeCustomOptions.isSaved) ? t("(customized)") : t("(modified)");
     } else {
-      return t("Empty");
+      return t("(empty)");
     }
   });
   return [
-    cssMenuInfoHeader(t('CustomOptions'), testId('heading-widget-options')),
+    cssMenuInfoHeader(t("Custom options"), testId('heading-widget-options')),
     cssMenuText(
       dom.autoDispose(text),
       dom.autoDispose(color),

app/client/ui/VisibleFieldsConfig.ts

@@ -163,8 +163,8 @@ export class VisibleFieldsConfig extends Disposable {
       options.hiddenFields.itemCreateFunc,
       {
         itemClass: cssDragRow.className,
-        reorder() { throw new Error(t('NoReorderHiddenField')); },
-        receive() { throw new Error(t('NoDropInHiddenField')); },
+        reorder() { throw new Error(t("Hidden Fields cannot be reordered")); },
+        receive() { throw new Error(t("Cannot drop items into Hidden Fields")); },
         remove(item: ColumnRec) {
           // Return the column object. This value is passed to the viewFields
           // receive function as its respective item parameter
@@ -204,7 +204,7 @@ export class VisibleFieldsConfig extends Disposable {
           () => (
             cssControlLabel(
               icon('Tick'),
-              t('SelectAll'),
+              t("Select All"),
               dom.on('click', () => this._setVisibleCheckboxes(fieldsDraggable, true)),
               testId('visible-fields-select-all'),
             )
@@ -219,7 +219,7 @@ export class VisibleFieldsConfig extends Disposable {
             dom.on('click', () => this._removeSelectedFields()),
           ),
           basicButton(
-            t('Clear'),
+            t("Clear"),
             dom.on('click', () => this._setVisibleCheckboxes(fieldsDraggable, false)),
           ),
           testId('visible-batch-buttons')
@@ -240,7 +240,7 @@ export class VisibleFieldsConfig extends Disposable {
           () => (
             cssControlLabel(
               icon('Tick'),
-              t('SelectAll'),
+              t("Select All"),
               dom.on('click', () => this._setHiddenCheckboxes(hiddenFieldsDraggable, true)),
               testId('hidden-fields-select-all'),
             )
@@ -261,7 +261,7 @@ export class VisibleFieldsConfig extends Disposable {
               dom.on('click', () => this._addSelectedFields()),
             ),
             basicButton(
-              t('Clear'),
+              t("Clear"),
               dom.on('click', () => this._setHiddenCheckboxes(hiddenFieldsDraggable, false)),
             ),
             testId('hidden-batch-buttons')

app/client/ui/WelcomeQuestions.ts

@@ -31,7 +31,7 @@ export function showWelcomeQuestions(userPrefsObs: Observable<UserPrefs>): boole
     async function onConfirm() {
       const selected = choices.filter((c, i) => selection[i].get()).map(c => t(c.textKey));
       const use_cases = ['L', ...selected];   // Format to populate a ChoiceList column
-      const use_other = selected.includes(t('Other')) ? otherText.get() : '';
+      const use_other = selected.includes(t("Other")) ? otherText.get() : '';
 
       const submitUrl = new URL(window.location.href);
       submitUrl.pathname = '/welcome/info';
@@ -51,7 +51,7 @@ export function showWelcomeQuestions(userPrefsObs: Observable<UserPrefs>): boole
     });
 
     return {
-      title: [cssLogo(), dom('div', t('WelcomeToGrist'))],
+      title: [cssLogo(), dom('div', t("Welcome to Grist!"))],
       body: buildInfoForm(selection, otherText),
       saveLabel: 'Start using Grist',
       saveFunc: onConfirm,
@@ -66,20 +66,20 @@ export function showWelcomeQuestions(userPrefsObs: Observable<UserPrefs>): boole
 
 const choices: Array<{icon: IconName, color: string, textKey: string}> = [
   {icon: 'UseProduct', color: `${colors.lightGreen}`, textKey: 'Product Development'  },
-  {icon: 'UseFinance', color: '#0075A2',              textKey: 'FinanceAccounting'  },
+  {icon: 'UseFinance', color: '#0075A2',              textKey: 'Finance & Accounting' },
   {icon: 'UseMedia',   color: '#F7B32B',              textKey: 'Media Production'     },
-  {icon: 'UseMonitor', color: '#F2545B',              textKey: 'ITTechnology'       },
+  {icon: 'UseMonitor', color: '#F2545B',              textKey: 'IT & Technology'      },
   {icon: 'UseChart',   color: '#7141F9',              textKey: 'Marketing'            },
   {icon: 'UseScience', color: '#231942',              textKey: 'Research'             },
   {icon: 'UseSales',   color: '#885A5A',              textKey: 'Sales'                },
   {icon: 'UseEducate', color: '#4A5899',              textKey: 'Education'            },
-  {icon: 'UseHr',      color: '#688047',              textKey: 'HRManagement'       },
+  {icon: 'UseHr',      color: '#688047',              textKey: 'HR & Management'      },
   {icon: 'UseOther',   color: '#929299',              textKey: 'Other'                },
 ];
 
 function buildInfoForm(selection: Observable<boolean>[], otherText: Observable<string>) {
   return [
-    dom('span', t('WhatBringsYouToGrist')),
+    dom('span', t("What brings you to Grist? Please help us serve you better.")),
     cssChoices(
       choices.map((item, i) => cssChoice(
         cssIcon(icon(item.icon), {style: `--icon-color: ${item.color}`}),
@@ -89,7 +89,7 @@ function buildInfoForm(selection: Observable<boolean>[], otherText: Observable<s
           t(item.textKey) :
           [
             cssOtherLabel(t(item.textKey)),
-            cssOtherInput(otherText, {}, {type: 'text', placeholder: t('TypeHere')},
+            cssOtherInput(otherText, {}, {type: 'text', placeholder: t("Type here")},
               // The following subscribes to changes to selection observable, and focuses the input when
               // this item is selected.
               (elem) => subscribeElem(elem, selection[i], val => val && setTimeout(() => elem.focus(), 0)),

app/client/ui/WidgetTitle.ts

@@ -67,7 +67,7 @@ function buildWidgetRenamePopup(ctrl: IOpenController, vs: ViewSectionRec, optio
   // Placeholder for widget title:
   // - when widget title is empty shows a default widget title (what would be shown when title is empty)
   // - when widget title is set, shows just a text to override it.
-  const inputWidgetPlaceholder = !vs.title.peek() ? t('OverrideTitle') : vs.defaultWidgetTitle.peek();
+  const inputWidgetPlaceholder = !vs.title.peek() ? t("Override widget title") : vs.defaultWidgetTitle.peek();
 
   const disableSave = Computed.create(ctrl, (use) => {
     const newTableName = use(inputTableName)?.trim() ?? '';
@@ -137,29 +137,29 @@ function buildWidgetRenamePopup(ctrl: IOpenController, vs: ViewSectionRec, optio
     testId('popup'),
     dom.cls(menuCssClass),
     dom.maybe(!options.tableNameHidden, () => [
-      cssLabel(t('DataTableName')),
+      cssLabel(t("DATA TABLE NAME")),
       // Update tableName on key stroke - this will show the default widget name as we type.
       // above this modal.
       tableInput = cssInput(
         inputTableName,
         updateOnKey,
-        {disabled: isSummary, placeholder: t('NewTableName')},
+        {disabled: isSummary, placeholder: t("Provide a table name")},
         testId('table-name-input')
       ),
     ]),
     dom.maybe(!options.widgetNameHidden, () => [
-      cssLabel(t('WidgetTitle')),
+      cssLabel(t("WIDGET TITLE")),
       widgetInput = cssInput(inputWidgetTitle, updateOnKey, {placeholder: inputWidgetPlaceholder},
         testId('section-name-input')
       ),
     ]),
     cssButtons(
-      primaryButton(t('Save'),
+      primaryButton(t("Save"),
         dom.on('click', doSave),
         dom.boolAttr('disabled', use => use(disableSave) || use(modalCtl.workInProgress)),
         testId('save'),
       ),
-      basicButton(t('Cancel'),
+      basicButton(t("Cancel"),
         testId('cancel'),
         dom.on('click', () => modalCtl.close())
       ),

app/client/ui/errorPages.ts

@@ -28,24 +28,24 @@ export function createErrPage(appModel: AppModel) {
  * Creates a page to show that the user has no access to this org.
  */
 export function createForbiddenPage(appModel: AppModel, message?: string) {
-  document.title = t('AccessDenied', {suffix: getPageTitleSuffix(getGristConfig())});
+  document.title = t("Access denied{{suffix}}", {suffix: getPageTitleSuffix(getGristConfig())});
 
   const isAnonym = () => !appModel.currentValidUser;
   const isExternal = () => appModel.currentValidUser?.loginMethod === 'External';
-  return pagePanelsError(appModel, t('AccessDenied', {suffix: ''}), [
+  return pagePanelsError(appModel, t("Access denied{{suffix}}", {suffix: ''}), [
     dom.domComputed(appModel.currentValidUser, user => user ? [
-      cssErrorText(message || t("DeniedOrganizationDocuments")),
-      cssErrorText(t("SignInWithDifferentAccount", {email: dom('b', user.email)})), // TODO: i18next
+      cssErrorText(message || t("You do not have access to this organization's documents.")),
+      cssErrorText(t("You are signed in as {{email}}. You can sign in with a different account, or ask an administrator for access.", {email: dom('b', user.email)})), // TODO: i18next
     ] : [
       // This page is not normally shown because a logged out user with no access will get
       // redirected to log in. But it may be seen if a user logs out and returns to a cached
       // version of this page or is an external user (connected through GristConnect).
-      cssErrorText(t("SignInToAccess")),
+      cssErrorText(t("Sign in to access this organization's documents.")),
     ]),
     cssButtonWrap(bigPrimaryButtonLink(
-        isExternal() ? t("GoToMainPage") :
-        isAnonym() ? t("SignIn") :
-        t("AddAcount"),
+        isExternal() ? t("Go to main page") :
+        isAnonym() ? t("Sign in") :
+        t("Add account"),
       {href: isExternal() ? getMainOrgUrl() : getLoginUrl()},
       testId('error-signin'),
     ))
@@ -56,12 +56,12 @@ export function createForbiddenPage(appModel: AppModel, message?: string) {
  * Creates a page that shows the user is logged out.
  */
 export function createSignedOutPage(appModel: AppModel) {
-  document.title = t('SignedOut', {suffix: getPageTitleSuffix(getGristConfig())});
+  document.title = t("Signed out{{suffix}}", {suffix: getPageTitleSuffix(getGristConfig())});
 
-  return pagePanelsError(appModel, t('SignedOut', {suffix: ''}), [ 
-    cssErrorText(t('SignedOutNow')),
+  return pagePanelsError(appModel, t("Signed out{{suffix}}", {suffix: ''}), [ 
+    cssErrorText(t("You are now signed out.")),
     cssButtonWrap(bigPrimaryButtonLink(
-      t('SignedInAgain'), {href: getLoginUrl()}, testId('error-signin')
+      t("Sign in again"), {href: getLoginUrl()}, testId('error-signin')
     ))
   ]);
 }
@@ -70,13 +70,13 @@ export function createSignedOutPage(appModel: AppModel) {
  * Creates a "Page not found" page.
  */
 export function createNotFoundPage(appModel: AppModel, message?: string) {
-  document.title = t('PageNotFound', {suffix: getPageTitleSuffix(getGristConfig())});
+  document.title = t("Page not found{{suffix}}", {suffix: getPageTitleSuffix(getGristConfig())});
 
-  return pagePanelsError(appModel, t('PageNotFound', {suffix: ''}), [
-    cssErrorText(message || t('NotFoundMainText', {separator: dom('br')})),  // TODO: i18next
-    cssButtonWrap(bigPrimaryButtonLink(t('GoToMainPage'), testId('error-primary-btn'),
+  return pagePanelsError(appModel, t("Page not found{{suffix}}", {suffix: ''}), [
+    cssErrorText(message || t("The requested page could not be found.{{separator}}Please check the URL and try again.", {separator: dom('br')})),  // TODO: i18next
+    cssButtonWrap(bigPrimaryButtonLink(t("Go to main page"), testId('error-primary-btn'),
       urlState().setLinkUrl({}))),
-    cssButtonWrap(bigBasicButtonLink(t('ContactSupport'), {href: 'https://getgrist.com/contact'})),
+    cssButtonWrap(bigBasicButtonLink(t("Contact support"), {href: 'https://getgrist.com/contact'})),
   ]);
 }
 
@@ -84,14 +84,14 @@ export function createNotFoundPage(appModel: AppModel, message?: string) {
  * Creates a generic error page with the given message.
  */
 export function createOtherErrorPage(appModel: AppModel, message?: string) {
-  document.title = t('GenericError', {suffix: getPageTitleSuffix(getGristConfig())});
+  document.title = t("Error{{suffix}}", {suffix: getPageTitleSuffix(getGristConfig())});
 
-  return pagePanelsError(appModel, t('SomethingWentWrong'), [
-    cssErrorText(message ? t('ErrorHappened', {context: 'message', message: addPeriod(message)}) :
-      t('ErrorHappened', {context: 'unknown'})),
-    cssButtonWrap(bigPrimaryButtonLink(t('GoToMainPage'), testId('error-primary-btn'),
+  return pagePanelsError(appModel, t("Something went wrong"), [
+    cssErrorText(message ? t('There was an error: {{message}}', {message: addPeriod(message)}) :
+      t('There was an unknown error.')),
+    cssButtonWrap(bigPrimaryButtonLink(t("Go to main page"), testId('error-primary-btn'),
       urlState().setLinkUrl({}))),
-    cssButtonWrap(bigBasicButtonLink(t('ContactSupport'), {href: 'https://getgrist.com/contact'})),
+    cssButtonWrap(bigBasicButtonLink(t("Contact support"), {href: 'https://getgrist.com/contact'})),
   ]);
 }
 

app/client/ui/sendToDrive.ts

@@ -24,7 +24,7 @@ export async function sendToDrive(doc: Document, pageModel: DocPageModel) {
   // Create send to google drive handler (it will return a spreadsheet url).
   const send = (code: string) =>
     // Decorate it with a spinner
-    spinnerModal(t('SendingToGoogleDrive'),
+    spinnerModal(t("Sending file to Google Drive"),
       pageModel.appModel.api.getDocAPI(doc.id)
         .sendToDrive(code, pageModel.currentDocTitle.get())
     );

app/client/ui2018/ColorSelect.ts

@@ -10,7 +10,7 @@ import {BindableValue, Computed, Disposable, dom, Observable, onKeyDown, styled}
 import {defaultMenuOptions, IOpenController, setPopupToCreateDom} from 'popweasel';
 import {makeT} from 'app/client/lib/localization';
 
-const t = makeT('ui2018.ColorSelect');
+const t = makeT('ColorSelect');
 
 export interface StyleOptions {
   textColor: ColorOption,
@@ -64,7 +64,7 @@ export function colorSelect(
     onSave,
     onOpen,
     onRevert,
-    placeholder = t('DefaultCellStyle'),
+    placeholder = t("Default cell style"),
   } = options;
   const selectBtn = cssSelectBtn(
     cssContent(
@@ -188,12 +188,12 @@ function buildColorPicker(ctl: IOpenController,
     }),
 
     cssButtonRow(
-      primaryButton(t('Apply'),
+      primaryButton(t("Apply"),
         dom.on('click', () => ctl.close()),
         dom.boolAttr("disabled", notChanged),
         testId('colors-save')
       ),
-      basicButton(t('Cancel'),
+      basicButton(t("Cancel"),
         dom.on('click', () => revert()),
         testId('colors-cancel')
       )

app/client/ui2018/breadcrumbs.ts

@@ -14,7 +14,7 @@ import { cssLink } from 'app/client/ui2018/links';
 import { BindableValue, dom, Observable, styled } from 'grainjs';
 import { tooltip } from 'popweasel';
 
-const t = makeT('ui2018.breadcrumbs');
+const t = makeT('breadcrumbs');
 
 export const cssBreadcrumbs = styled('div', `
   color: ${theme.lightText};
@@ -138,19 +138,20 @@ export function docBreadcrumbs(
       dom.maybe(options.isPublic, () => cssPublicIcon('PublicFilled', testId('bc-is-public'))),
       dom.domComputed((use) => {
         if (options.isSnapshot && use(options.isSnapshot)) {
-          return cssTag(t('Snapshot'), testId('snapshot-tag'));
+          return cssTag(t("snapshot"), testId('snapshot-tag'));
         }
         if (use(options.isFork)) {
-          return cssTag(t('Unsaved'), testId('unsaved-tag'));
+          return cssTag(t("unsaved"), testId('unsaved-tag'));
         }
         if (use(options.isRecoveryMode)) {
-          return cssAlertTag(t('RecoveryMode'),
+          return cssAlertTag(t("recovery mode"),
                              dom('a', dom.on('click', () => options.cancelRecoveryMode()),
                                  icon('CrossSmall')),
                              testId('recovery-mode-tag'));
         }
         if (use(options.isFiddle)) {
-          return cssTag(t('Fiddle'), tooltip({title: t('FiddleExplanation')}), testId('fiddle-tag'));
+          return cssTag(t("fiddle"), tooltip({title: t(`You may make edits, but they will create a new copy and will
+not affect the original document.`)}), testId('fiddle-tag'));
         }
       }),
       separator(' / ',

app/client/ui2018/buttons.ts

@@ -33,9 +33,8 @@ export const cssButton = styled('button', `
   color:            ${theme.controlFg};
   --icon-color:     ${theme.controlFg};
 
-  border:        ${vars.controlBorder};
+  border:        ${theme.controlBorder};
   border-radius: ${vars.controlBorderRadius};
-  border-color:  ${theme.controlBorder};
 
   cursor: pointer;
 

app/client/ui2018/cssVars.ts

@@ -359,7 +359,7 @@ export const theme = {
   controlDisabledBg: new CustomProp('theme-control-disabled-bg', undefined, colors.slate),
   controlPrimaryDisabled: new CustomProp('theme-control-primary-disabled', undefined,
     colors.inactiveCursor),
-  controlBorder: new CustomProp('theme-control-border', undefined, '#11B683'),
+  controlBorder: new CustomProp('theme-control-border', undefined, vars.controlBorder),
 
   /* Checkboxes */
   checkboxBg: new CustomProp('theme-checkbox-bg', undefined, colors.light),

app/client/ui2018/menus.ts

@@ -11,7 +11,7 @@ import { BindableValue, Computed, dom, DomElementArg, DomElementMethod, IDomArgs
          MaybeObsArray, MutableObsArray, Observable, styled } from 'grainjs';
 import * as weasel from 'popweasel';
 
-const t = makeT('ui2018.menus');
+const t = makeT('menus');
 
 export interface IOptionFull<T> {
   value: T;
@@ -189,7 +189,7 @@ export function multiSelect<T>(selectedOptions: MutableObsArray<T>,
 
   const selectedOptionsText = Computed.create(null, selectedOptionsSet, (use, selectedOpts) => {
     if (selectedOpts.size === 0) {
-      return options.placeholder ?? t('SelectFields');
+      return options.placeholder ?? t("Select fields");
     }
 
     const optionArray = Array.isArray(availableOptions) ? availableOptions : use(availableOptions);
@@ -323,8 +323,8 @@ export function upgradableMenuItem(needUpgrade: boolean, action: () => void, ...
 
 export function upgradeText(needUpgrade: boolean, onClick: () => void) {
   if (!needUpgrade) { return null; }
-  return menuText(dom('span', t('WorkspacesAvailableOnTeamPlans'),
-    cssUpgradeTextButton(t('UpgradeNow'), dom.on('click', () => onClick()))));
+  return menuText(dom('span', t("* Workspaces are available on team plans. "),
+    cssUpgradeTextButton(t("Upgrade now"), dom.on('click', () => onClick()))));
 }
 
 /**

app/client/ui2018/modals.ts

@@ -12,7 +12,7 @@ import {Computed, Disposable, dom, DomContents, DomElementArg, input, keyframes,
   MultiHolder, Observable, styled} from 'grainjs';
 import {cssMenuElem} from 'app/client/ui2018/menus';
 
-const t = makeT('ui2018.modals');
+const t = makeT('modals');
 
 // IModalControl is passed into the function creating the body of the modal.
 export interface IModalControl {
@@ -306,13 +306,13 @@ export function saveModal(createFunc: (ctl: IModalControl, owner: MultiHolder) =
       cssModalTitle(options.title, testId('modal-title')),
       cssModalBody(options.body),
       cssModalButtons(
-        bigPrimaryButton(options.saveLabel || t('Save'),
+        bigPrimaryButton(options.saveLabel || t("Save"),
           dom.boolAttr('disabled', isSaveDisabled),
           dom.on('click', save),
           testId('modal-confirm'),
         ),
         options.extraButtons,
-        options.hideCancel ? null : bigBasicButton(t('Cancel'),
+        options.hideCancel ? null : bigBasicButton(t("Cancel"),
           dom.on('click', () => ctl.close()),
           testId('modal-cancel'),
         ),
@@ -426,7 +426,7 @@ export function invokePrompt(
   const prom = new Promise<string|undefined>((resolve) => {
     onResolve = resolve;
   });
-  promptModal(title, onResolve!, btnText ?? t('Ok'), initial, placeholder, () => {
+  promptModal(title, onResolve!, btnText ?? t("Ok"), initial, placeholder, () => {
     if (onResolve) {
       onResolve(undefined);
     }

app/client/ui2018/pages.ts

@@ -8,7 +8,7 @@ import { hoverTooltip } from 'app/client/ui/tooltips';
 import { menu, menuItem, menuText } from "app/client/ui2018/menus";
 import { dom, domComputed, DomElementArg, makeTestId, observable, Observable, styled } from "grainjs";
 
-const t = makeT('ui2018.pages');
+const t = makeT('pages');
 
 const testId = makeTestId('test-docpage-');
 
@@ -37,11 +37,11 @@ export function buildPageDom(name: Observable<string>, actions: PageActions, ...
   const pageMenu = () => [
     menuItem(() => isRenaming.set(true), t("Rename"), testId('rename'),
             dom.cls('disabled', actions.isReadonly)),
-    menuItem(actions.onRemove, t('Remove'), testId('remove'),
+    menuItem(actions.onRemove, t("Remove"), testId('remove'),
              dom.cls('disabled', (use) => use(actions.isReadonly) || actions.isRemoveDisabled())),
-    menuItem(actions.onDuplicate, t('DuplicatePage'), testId('duplicate'),
+    menuItem(actions.onDuplicate, t("Duplicate Page"), testId('duplicate'),
              dom.cls('disabled', actions.isReadonly)),
-    dom.maybe(actions.isReadonly, () => menuText(t('NoEditAccess'))),
+    dom.maybe(actions.isReadonly, () => menuText(t("You do not have edit access to this document"))),
   ];
   let pageElem: HTMLElement;
 

app/client/ui2018/search.ts

@@ -17,7 +17,7 @@ import debounce = require('lodash/debounce');
 
 export * from 'app/client/models/SearchModel';
 
-const t = makeT('ui2018.search');
+const t = makeT('search');
 
 const EXPAND_TIME = .5;
 
@@ -146,7 +146,7 @@ export function searchBar(model: SearchModel, testId: TestId = noTestId) {
     model.isOpen.set(_value === undefined ? !model.isOpen.get() : _value);
   }, 100);
   const inputElem: HTMLInputElement = searchInput(model.value, {onInput: true},
-    {type: 'text', placeholder: t('SearchInDocument')},
+    {type: 'text', placeholder: t("Search in document")},
     dom.on('blur', () => (
       keepExpanded ?
         setTimeout(() => inputElem.focus(), 0) :
@@ -187,7 +187,7 @@ export function searchBar(model: SearchModel, testId: TestId = noTestId) {
         const noMatch = use(model.noMatch);
         const isEmpty = use(model.isEmpty);
         if (isEmpty) { return null; }
-        if (noMatch) { return cssLabel(t("NoResults")); }
+        if (noMatch) { return cssLabel(t("No results")); }
         return [
           cssArrowBtn(
             icon('Dropdown'),
@@ -197,7 +197,7 @@ export function searchBar(model: SearchModel, testId: TestId = noTestId) {
             dom.on('click', () => model.findNext()),
             hoverTooltip(
               [
-                t('FindNext'),
+                t("Find Next "),
                 cssShortcut(`(${['Enter', allCommands.findNext.humanKeys].join(', ')})`),
               ],
               {key: 'searchArrowBtnTooltip'}
@@ -211,7 +211,7 @@ export function searchBar(model: SearchModel, testId: TestId = noTestId) {
             dom.on('click', () => model.findPrev()),
             hoverTooltip(
               [
-                t('FindPrevious'),
+                t("Find Previous "),
                 cssShortcut(allCommands.findPrev.getKeysDesc()),
               ],
               {key: 'searchArrowBtnTooltip'}

app/common/themes/GristDark.ts

@@ -175,7 +175,7 @@ export const GristDark: ThemeColors = {
   'control-disabled-fg': '#A4A4A4',
   'control-disabled-bg': '#69697D',
   'control-primary-disabled': '#5F8C7B',
-  'control-border': '#11B683',
+  'control-border': '1px solid #1DA270',
 
   /* Checkboxes */
   'checkbox-bg': '#32323F',

app/common/themes/GristLight.ts

@@ -175,7 +175,7 @@ export const GristLight: ThemeColors = {
   'control-disabled-fg': '#FFFFFF',
   'control-disabled-bg': '#929299',
   'control-primary-disabled': '#A2E1C9',
-  'control-border': '#11B683',
+  'control-border': '1px solid #11B683',
 
   /* Checkboxes */
   'checkbox-bg': '#FFFFFF',

buildtools/generate_translation_keys.js

@@ -0,0 +1,72 @@
+/**
+ * Generating translations keys:
+ *
+ * This code walk through all the files in client directory and its children
+ * Get the all keys called by our makeT utils function
+ * And add only the new one on our en.client.json file
+ *
+ */
+
+const fs = require("fs");
+const path = require("path");
+const Parser = require("i18next-scanner").Parser;
+const englishKeys = require("../static/locales/en.client.json");
+const _ = require("lodash");
+
+const parser = new Parser({
+  keySeparator: "/",
+  nsSeparator: null,
+});
+
+async function* walk(dir) {
+  for await (const d of await fs.promises.opendir(dir)) {
+    const entry = path.join(dir, d.name);
+    if (d.isDirectory()) yield* walk(entry);
+    else if (d.isFile()) yield entry;
+  }
+}
+
+const customHandler = (fileName) => (key, options) => {
+  const keyWithFile = `${fileName}/${key}`;
+  if (Object.keys(options).includes("count") === true) {
+    const keyOne = `${keyWithFile}_one`;
+    const keyOther = `${keyWithFile}_other`;
+    parser.set(keyOne, key);
+    parser.set(keyOther, key);
+  } else {
+    parser.set(keyWithFile, key);
+  }
+};
+
+const getKeysFromFile = (filePath, fileName) => {
+  const content = fs.readFileSync(filePath, "utf-8");
+  parser.parseFuncFromString(
+    content,
+    {
+      list: [
+        "i18next.t",
+        "t", // To match the file-level t function created with makeT
+      ],
+    },
+    customHandler(fileName)
+  );
+  const keys = parser.get({ sort: true });
+  return keys;
+};
+
+async function walkTranslation(dirPath) {
+  for await (const p of walk(dirPath)) {
+    const { name } = path.parse(p);
+    getKeysFromFile(p, name);
+  }
+  const keys = parser.get({ sort: true });
+  const newTranslations = _.merge(keys.en.translation, englishKeys);
+  await fs.promises.writeFile(
+    "static/locales/en.client.json",
+    JSON.stringify(newTranslations, null, 2),
+    "utf-8"
+  );
+  return keys;
+}
+
+walkTranslation("app/client");

package.json

@@ -20,7 +20,8 @@
     "test:smoke": "NODE_PATH=_build:_build/stubs:_build/ext mocha _build/test/nbrowser/Smoke.js",
     "test:docker": "./test/test_under_docker.sh",
     "test:python": "sandbox_venv3/bin/python sandbox/grist/runtests.py ${GREP_TESTS:+discover -p \"test*${GREP_TESTS}*.py\"}",
-    "cli": "NODE_PATH=_build:_build/stubs:_build/ext node _build/app/server/companion.js"
+    "cli": "NODE_PATH=_build:_build/stubs:_build/ext node _build/app/server/companion.js",
+    "generate:translation": "NODE_PATH=_build:_build/stubs:_build/ext node buildtools/generate_translation_keys.js"
   },
   "keywords": [
     "grist",
@@ -77,6 +78,7 @@
     "chance": "1.0.16",
     "esbuild-loader": "2.19.0",
     "http-proxy": "1.18.1",
+    "i18next-scanner": "4.1.0",
     "jsdom": "16.5.0",
     "mocha": "5.2.0",
     "mocha-webdriver": "0.2.9",

test/nbrowser/Localization.ts

@@ -112,7 +112,7 @@ describe("Localization", function() {
     });
 
     it("loads correct languages from file system", async function() {
-      modifyByCode(tempLocale, "en", {HomeIntro: {Welcome: 'TestMessage'}});
+      modifyByCode(tempLocale, "en", {HomeIntro: {'Welcome to Grist!': 'TestMessage'}});
       await driver.navigate().refresh();
       assert.equal(await driver.findWait('.test-welcome-title', 3000).getText(), 'TestMessage');
       const gristConfig: any = await driver.executeScript("return window.gristConfig");

yarn.lock

@@ -9,6 +9,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.20.6":
+  version "7.20.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.6.tgz#facf4879bfed9b5326326273a64220f099b0fce3"
+  integrity sha512-Q+8MqP7TiHMWzSfwiJwXCjyf4GYA4Dgw3emg/7xmwsdLJOZUp+nMqcOwOzzYheuM1rhDu8FSj2l0aoMygEuXuA==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@discoveryjs/json-ext@^0.5.0":
   version "0.5.7"
   resolved "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz"
@@ -820,6 +827,18 @@ accepts@~1.3.5:
     mime-types "~2.1.24"
     negotiator "0.6.2"
 
+acorn-class-fields@^0.3.7:
+  version "0.3.7"
+  resolved "https://registry.yarnpkg.com/acorn-class-fields/-/acorn-class-fields-0.3.7.tgz#a35122f3cc6ad2bb33b1857e79215677fcfdd720"
+  integrity sha512-jdUWSFce0fuADUljmExz4TWpPkxmRW/ZCPRqeeUzbGf0vFUcpQYbyq52l75qGd0oSwwtAepeL6hgb/naRgvcKQ==
+  dependencies:
+    acorn-private-class-elements "^0.2.7"
+
+acorn-dynamic-import@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz#482210140582a36b83c3e342e1cfebcaa9240948"
+  integrity sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw==
+
 acorn-globals@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/acorn-globals/-/acorn-globals-6.0.0.tgz"
@@ -833,6 +852,11 @@ acorn-import-assertions@^1.7.6:
   resolved "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz"
   integrity sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==
 
+acorn-jsx@^5.3.1:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
+  integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
+
 acorn-node@^1.2.0, acorn-node@^1.3.0, acorn-node@^1.5.2:
   version "1.8.2"
   resolved "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz"
@@ -842,11 +866,44 @@ acorn-node@^1.2.0, acorn-node@^1.3.0, acorn-node@^1.5.2:
     acorn-walk "^7.0.0"
     xtend "^4.0.2"
 
+acorn-private-class-elements@^0.2.7:
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/acorn-private-class-elements/-/acorn-private-class-elements-0.2.7.tgz#b14902c705bcff267adede1c9f61c1a317ef95d2"
+  integrity sha512-+GZH2wOKNZOBI4OOPmzpo4cs6mW297sn6fgIk1dUI08jGjhAaEwvC39mN2gJAg2lmAQJ1rBkFqKWonL3Zz6PVA==
+
+acorn-private-methods@^0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/acorn-private-methods/-/acorn-private-methods-0.3.3.tgz#724414ce5b2fec733089d73a5cbba8f7beff75b1"
+  integrity sha512-46oeEol3YFvLSah5m9hGMlNpxDBCEkdceJgf01AjqKYTK9r6HexKs2rgSbLK81pYjZZMonhftuUReGMlbbv05w==
+  dependencies:
+    acorn-private-class-elements "^0.2.7"
+
+acorn-stage3@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/acorn-stage3/-/acorn-stage3-4.0.0.tgz#e8b98ae2a9991be0ba1745b5b626211086b435a8"
+  integrity sha512-BR+LaADtA6GTB5prkNqWmlmCLYmkyW0whvSxdHhbupTaro2qBJ95fJDEiRLPUmiACGHPaYyeH9xmNJWdGfXRQw==
+  dependencies:
+    acorn-class-fields "^0.3.7"
+    acorn-private-methods "^0.3.3"
+    acorn-static-class-features "^0.2.4"
+
+acorn-static-class-features@^0.2.4:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/acorn-static-class-features/-/acorn-static-class-features-0.2.4.tgz#a0f5261dd483f25196716854f2d7652a1deb39ee"
+  integrity sha512-5X4mpYq5J3pdndLmIB0+WtFd/mKWnNYpuTlTzj32wUu/PMmEGOiayQ5UrqgwdBNiaZBtDDh5kddpP7Yg2QaQYA==
+  dependencies:
+    acorn-private-class-elements "^0.2.7"
+
 acorn-walk@^7.0.0, acorn-walk@^7.1.1:
   version "7.2.0"
   resolved "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz"
   integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
 
+acorn-walk@^8.0.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.2.0.tgz#741210f2e2426454508853a2f44d0ab83b7f69c1"
+  integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
+
 acorn@^5.2.1:
   version "5.7.4"
   resolved "https://registry.npmjs.org/acorn/-/acorn-5.7.4.tgz"
@@ -857,6 +914,11 @@ acorn@^7.0.0, acorn@^7.1.1:
   resolved "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
+acorn@^8.0.4:
+  version "8.8.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.1.tgz#0a3f9cbecc4ec3bea6f0a80b66ae8dd2da250b73"
+  integrity sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==
+
 acorn@^8.0.5:
   version "8.8.0"
   resolved "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz"
@@ -981,6 +1043,13 @@ app-root-path@^3.0.0:
   resolved "https://registry.npmjs.org/app-root-path/-/app-root-path-3.1.0.tgz"
   integrity sha512-biN3PwB2gUtjaYy/isrU3aNWI5w+fAfvHkSvCKeQGxhmYpwKFUxudR3Yya+KqVRHBmEDYh+/lTozYCFbmzX4nA==
 
+append-buffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/append-buffer/-/append-buffer-1.0.2.tgz#d8220cf466081525efea50614f3de6514dfa58f1"
+  integrity sha512-WLbYiXzD3y/ATLZFufV/rZvWdZOs+Z/+5v1rBZ463Jn398pa6kcde27cvozYnBoxXblGZTFfoPpsaEw0orU5BA==
+  dependencies:
+    buffer-equal "^1.0.0"
+
 aproba@^1.0.3:
   version "1.2.0"
   resolved "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz"
@@ -1521,6 +1590,11 @@ buffer-equal-constant-time@1.0.1:
   resolved "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz"
   integrity sha1-+OcRMvf/5uAaXJaXpMbz5I1cyBk=
 
+buffer-equal@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/buffer-equal/-/buffer-equal-1.0.1.tgz#2f7651be5b1b3f057fcd6e7ee16cf34767077d90"
+  integrity sha512-QoV3ptgEaQpvVwbXdSO39iqPQTCxSF7A5U99AxbHYqUdCizL/lH2Z0A2y6nbZucxMEOtNyZfG2s6gsVugGpKkg==
+
 buffer-from@^1.0.0:
   version "1.1.1"
   resolved "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz"
@@ -1829,7 +1903,12 @@ cliui@^7.0.2:
     strip-ansi "^6.0.0"
     wrap-ansi "^7.0.0"
 
-clone-deep@^4.0.1:
+clone-buffer@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/clone-buffer/-/clone-buffer-1.0.0.tgz#e3e25b207ac4e701af721e2cb5a16792cac3dc58"
+  integrity sha512-KLLTJWrvwIP+OPfMn0x2PheDEP20RPUcGXj/ERegTgdmPEZylALQldygiqrPPu8P45uNuPs7ckmReLY6v/iA5g==
+
+clone-deep@^4.0.0, clone-deep@^4.0.1:
   version "4.0.1"
   resolved "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz"
   integrity sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==
@@ -1845,6 +1924,25 @@ clone-response@^1.0.2:
   dependencies:
     mimic-response "^1.0.0"
 
+clone-stats@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/clone-stats/-/clone-stats-1.0.0.tgz#b3782dff8bb5474e18b9b6bf0fdfe782f8777680"
+  integrity sha512-au6ydSpg6nsrigcZ4m8Bc9hxjeW+GJ8xh5G3BJCMt4WXe1H10UNaVOamqQTmrx1kjVuxAHIQSNU6hY4Nsn9/ag==
+
+clone@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
+  integrity sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==
+
+cloneable-readable@^1.0.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/cloneable-readable/-/cloneable-readable-1.1.3.tgz#120a00cb053bfb63a222e709f9683ea2e11d8cec"
+  integrity sha512-2EF8zTQOxYq70Y4XKtorQupqF0m49MBz2/yf5Bj+MHjvpG3Hy7sImifnqD6UA+TKYxeSV+u6qqQPawN5UvnpKQ==
+  dependencies:
+    inherits "^2.0.1"
+    process-nextick-args "^2.0.0"
+    readable-stream "^2.3.5"
+
 code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz"
@@ -1935,6 +2033,11 @@ commander@^7.0.0:
   resolved "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz"
   integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
 
+commander@^9.0.0:
+  version "9.4.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-9.4.1.tgz#d1dd8f2ce6faf93147295c0df13c7c21141cfbdd"
+  integrity sha512-5EEkTNyHNGFPD2H+c/dXXfQZYa/scCKasxWcXJaWnNJ99pnQN9Vnmqow+p+PlFPE63Q6mThaZws1T+HxfpgtPw==
+
 components-jqueryui@1.12.1:
   version "1.12.1"
   resolved "https://registry.npmjs.org/components-jqueryui/-/components-jqueryui-1.12.1.tgz"
@@ -2027,6 +2130,11 @@ content-type@~1.0.4:
   resolved "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz"
   integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
 
+convert-source-map@^1.5.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
+  integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
+
 convert-source-map@~1.1.0:
   version "1.1.3"
   resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.1.3.tgz"
@@ -2309,6 +2417,11 @@ deep-is@~0.1.3:
   resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
+deepmerge@^4.0.0:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
+  integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
+
 defer-to-connect@^1.0.1:
   version "1.1.3"
   resolved "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-1.1.3.tgz"
@@ -2321,6 +2434,14 @@ define-properties@^1.1.2, define-properties@^1.1.3:
   dependencies:
     object-keys "^1.0.12"
 
+define-properties@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.4.tgz#0b14d7bd7fbeb2f3572c3a7eda80ea5d57fb05b1"
+  integrity sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==
+  dependencies:
+    has-property-descriptors "^1.0.0"
+    object-keys "^1.1.1"
+
 defined@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz"
@@ -2484,6 +2605,16 @@ duplexer@~0.1.1:
   resolved "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz"
   integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
 
+duplexify@^3.6.0:
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.7.1.tgz#2a4df5317f6ccfd91f86d6fd25d8d8a103b88309"
+  integrity sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==
+  dependencies:
+    end-of-stream "^1.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.0.0"
+    stream-shift "^1.0.0"
+
 ecc-jsbn@~0.1.1:
   version "0.1.2"
   resolved "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz"
@@ -2561,7 +2692,7 @@ encodeurl@^1.0.2, encodeurl@~1.0.2:
   resolved "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz"
   integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
 
-end-of-stream@^1.1.0, end-of-stream@^1.4.1:
+end-of-stream@^1.0.0, end-of-stream@^1.1.0, end-of-stream@^1.4.1:
   version "1.4.4"
   resolved "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz"
   integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
@@ -2576,6 +2707,11 @@ enhanced-resolve@^5.9.3:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
+ensure-type@^1.5.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/ensure-type/-/ensure-type-1.5.1.tgz#e65ec8d4c6ee6f35b43675d4243258cb4c8f6159"
+  integrity sha512-Dxe+mVF4MupV6eueWiFa6hUd9OL9lIM2/LqR40k1P+dwG+G2il2UigXTU9aQlaw+Y/N0BKSaTofNw73htTbC5g==
+
 entities@^4.3.0:
   version "4.3.1"
   resolved "https://registry.npmjs.org/entities/-/entities-4.3.1.tgz"
@@ -2591,6 +2727,11 @@ envinfo@^7.7.3:
   resolved "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz"
   integrity sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==
 
+eol@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/eol/-/eol-0.9.1.tgz#f701912f504074be35c6117a5c4ade49cd547acd"
+  integrity sha512-Ds/TEoZjwggRoz/Q2O7SE3i4Jm66mqTDfmdHdq/7DKVk3bro9Q8h6WdXKdPqFLMoqxrDK5SVRzHVPOS6uuGtrg==
+
 error-ex@^1.2.0:
   version "1.3.2"
   resolved "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz"
@@ -2822,6 +2963,11 @@ eslint-scope@5.1.1:
     esrecurse "^4.3.0"
     estraverse "^4.1.1"
 
+esprima-next@^5.7.0:
+  version "5.8.4"
+  resolved "https://registry.yarnpkg.com/esprima-next/-/esprima-next-5.8.4.tgz#9f82c8093a33da7207a4e8621e997c66878c145a"
+  integrity sha512-8nYVZ4ioIH4Msjb/XmhnBdz5WRRBaYqevKa1cv9nGJdCehMbzZCPNEEnqfLCZVetUVrUPEcb5IYyu1GG4hFqgg==
+
 esprima@^4.0.0, esprima@^4.0.1:
   version "4.0.1"
   resolved "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz"
@@ -2938,7 +3084,7 @@ express@4.16.4:
     utils-merge "1.0.1"
     vary "~1.1.2"
 
-extend@^3.0.2, extend@~3.0.2:
+extend@^3.0.0, extend@^3.0.2, extend@~3.0.2:
   version "3.0.2"
   resolved "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz"
   integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
@@ -3076,6 +3222,14 @@ flat@^4.1.0:
   dependencies:
     is-buffer "~2.0.3"
 
+flush-write-stream@^1.0.2:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"
+  integrity sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w==
+  dependencies:
+    inherits "^2.0.3"
+    readable-stream "^2.3.6"
+
 follow-redirects@^1.0.0:
   version "1.15.2"
   resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz"
@@ -3172,6 +3326,14 @@ fs-minipass@^2.0.0:
   dependencies:
     minipass "^3.0.0"
 
+fs-mkdirp-stream@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs-mkdirp-stream/-/fs-mkdirp-stream-1.0.0.tgz#0b7815fc3201c6a69e14db98ce098c16935259eb"
+  integrity sha512-+vSd9frUnapVC2RZYfL3FCB2p3g4TBhaUmrsWlSudsGdnxIuUvBB2QM1VZeBtc49QFwrp+wQLrDs3+xxDgI5gQ==
+  dependencies:
+    graceful-fs "^4.1.11"
+    through2 "^2.0.3"
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
@@ -3295,6 +3457,14 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
+glob-parent@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
+  integrity sha512-E8Ak/2+dZY6fnzlR7+ueWvhsH1SjHr4jjss4YS/h4py44jY9MhK/VFdaZJAWDz6BbL21KeteKxFSFpq8OS5gVA==
+  dependencies:
+    is-glob "^3.1.0"
+    path-dirname "^1.0.0"
+
 glob-parent@~5.1.0:
   version "5.1.2"
   resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
@@ -3302,6 +3472,22 @@ glob-parent@~5.1.0:
   dependencies:
     is-glob "^4.0.1"
 
+glob-stream@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/glob-stream/-/glob-stream-6.1.0.tgz#7045c99413b3eb94888d83ab46d0b404cc7bdde4"
+  integrity sha512-uMbLGAP3S2aDOHUDfdoYcdIePUCfysbAd0IAoWVZbeGU/oNQ8asHVSshLDJUPWxfzj8zsCG7/XeHPHTtow0nsw==
+  dependencies:
+    extend "^3.0.0"
+    glob "^7.1.1"
+    glob-parent "^3.1.0"
+    is-negated-glob "^1.0.0"
+    ordered-read-streams "^1.0.0"
+    pumpify "^1.3.5"
+    readable-stream "^2.1.5"
+    remove-trailing-separator "^1.0.1"
+    to-absolute-glob "^2.0.0"
+    unique-stream "^2.0.2"
+
 glob-to-regexp@^0.4.1:
   version "0.4.1"
   resolved "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz"
@@ -3343,7 +3529,7 @@ glob@7.1.3:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.1.6, glob@^7.2.0:
+glob@^7.1.1, glob@^7.1.6, glob@^7.2.0:
   version "7.2.3"
   resolved "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz"
   integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
@@ -3500,6 +3686,11 @@ got@^9.6.0:
     to-readable-stream "^1.0.0"
     url-parse-lax "^3.0.0"
 
+graceful-fs@^4.0.0, graceful-fs@^4.1.11, graceful-fs@^4.2.4, graceful-fs@^4.2.9:
+  version "4.2.10"
+  resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz"
+  integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
+
 graceful-fs@^4.1.2:
   version "4.2.4"
   resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz"
@@ -3510,11 +3701,6 @@ graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.2:
   resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz"
   integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
 
-graceful-fs@^4.2.4, graceful-fs@^4.2.9:
-  version "4.2.10"
-  resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz"
-  integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
-
 grain-rpc@0.1.7:
   version "0.1.7"
   resolved "https://registry.npmjs.org/grain-rpc/-/grain-rpc-0.1.7.tgz"
@@ -3542,6 +3728,13 @@ gtoken@^5.0.4:
     google-p12-pem "^3.0.3"
     jws "^4.0.0"
 
+gulp-sort@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/gulp-sort/-/gulp-sort-2.0.0.tgz#c6762a2f1f0de0a3fc595a21599d3fac8dba1aca"
+  integrity sha512-MyTel3FXOdh1qhw1yKhpimQrAmur9q1X0ZigLmCOxouQD+BD3za9/89O+HfbgBQvvh4igEbp0/PUWO+VqGYG1g==
+  dependencies:
+    through2 "^2.0.1"
+
 handlebars@4.7.7:
   version "4.7.7"
   resolved "https://registry.npmjs.org/handlebars/-/handlebars-4.7.7.tgz"
@@ -3582,6 +3775,13 @@ has-flag@^4.0.0:
   resolved "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
+has-property-descriptors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz#610708600606d36961ed04c196193b6a607fa861"
+  integrity sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==
+  dependencies:
+    get-intrinsic "^1.1.1"
+
 has-symbols@^1.0.0, has-symbols@^1.0.1, has-symbols@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz"
@@ -3760,6 +3960,39 @@ i18next-http-middleware@3.2.1:
   resolved "https://registry.npmjs.org/i18next-http-middleware/-/i18next-http-middleware-3.2.1.tgz"
   integrity sha512-zBwXxDChT0YLoTXIR6jRuqnUUhXW0Iw7egoTnNXyaDRtTbfWNXwU0a53ThyuRPQ+k+tXu3ZMNKRzfLuononaRw==
 
+i18next-scanner@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/i18next-scanner/-/i18next-scanner-4.1.0.tgz#15979dcfd6eca494e08c8a8ff784e8740ab7d318"
+  integrity sha512-KAZRc6ZBqtn/Qa5fRRTn7D8effB84K9m3g9SQcKD+tocMajEVW2zfFP397qNxROad1VFjUGT8aw1Y6ZcfnIzlg==
+  dependencies:
+    acorn "^8.0.4"
+    acorn-dynamic-import "^4.0.0"
+    acorn-jsx "^5.3.1"
+    acorn-stage3 "^4.0.0"
+    acorn-walk "^8.0.0"
+    chalk "^4.1.0"
+    clone-deep "^4.0.0"
+    commander "^9.0.0"
+    deepmerge "^4.0.0"
+    ensure-type "^1.5.0"
+    eol "^0.9.1"
+    esprima-next "^5.7.0"
+    gulp-sort "^2.0.0"
+    i18next "*"
+    lodash "^4.0.0"
+    parse5 "^6.0.0"
+    sortobject "^4.0.0"
+    through2 "^4.0.0"
+    vinyl "^2.2.0"
+    vinyl-fs "^3.0.1"
+
+i18next@*:
+  version "22.4.5"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-22.4.5.tgz#7324e4946c2facbe743ca25bca8980af05b0a109"
+  integrity sha512-Kc+Ow0guRetUq+kv02tj0Yof9zveROPBAmJ8UxxNODLVBRSwsM4iD0Gw3BEieOmkWemF6clU3K1fbnCuTqiN2Q==
+  dependencies:
+    "@babel/runtime" "^7.20.6"
+
 i18next@21.9.1, i18next@^21.0.1:
   version "21.9.1"
   resolved "https://registry.npmjs.org/i18next/-/i18next-21.9.1.tgz"
@@ -3907,6 +4140,14 @@ ipaddr.js@^2.0.1:
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-2.0.1.tgz#eca256a7a877e917aeb368b0a7497ddf42ef81c0"
   integrity sha512-1qTgH9NG+IIJ4yfKs2e6Pp1bZg8wbDbKHT21HrLIeYBTRLgMYKnMTPAuI3Lcs61nfx5h1xlXnbJtH1kX5/d/ng==
 
+is-absolute@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-absolute/-/is-absolute-1.0.0.tgz#395e1ae84b11f26ad1795e73c17378e48a301576"
+  integrity sha512-dOWoqflvcydARa360Gvv18DZ/gRuHKi2NU/wU5X1ZFzdYfH29nkiNZsF3mp4OJ3H4yo9Mx8A/uAGNzpzPN3yBA==
+  dependencies:
+    is-relative "^1.0.0"
+    is-windows "^1.0.1"
+
 is-arguments@^1.0.4:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.1.tgz#15b3f88fda01f2a97fec84ca761a560f123efa9b"
@@ -3939,7 +4180,7 @@ is-boolean-object@^1.1.0:
   dependencies:
     call-bind "^1.0.0"
 
-is-buffer@^1.1.0:
+is-buffer@^1.1.0, is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz"
   integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
@@ -3985,7 +4226,7 @@ is-date-object@^1.0.1:
   resolved "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.2.tgz"
   integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
 
-is-extglob@^2.1.1:
+is-extglob@^2.1.0, is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz"
   integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
@@ -4014,6 +4255,13 @@ is-generator-function@^1.0.7:
   dependencies:
     has-tostringtag "^1.0.0"
 
+is-glob@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-3.1.0.tgz#7ba5ae24217804ac70707b96922567486cc3e84a"
+  integrity sha512-UFpDDrPgM6qpnFNI+rh/p3bUaq9hKLZN8bMUWzxmcnZVS3omf4IPK+BrewlnWjO1WmUsMYuSjKh4UJuV4+Lqmw==
+  dependencies:
+    is-extglob "^2.1.0"
+
 is-glob@^4.0.1, is-glob@~4.0.1:
   version "4.0.1"
   resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz"
@@ -4029,6 +4277,11 @@ is-installed-globally@^0.3.1:
     global-dirs "^2.0.1"
     is-path-inside "^3.0.1"
 
+is-negated-glob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-negated-glob/-/is-negated-glob-1.0.0.tgz#6910bca5da8c95e784b5751b976cf5a10fee36d2"
+  integrity sha512-czXVVn/QEmgvej1f50BZ648vUI+em0xqMq2Sn+QncCLN4zj1UAxlT+kw/6ggQTOaZPd1HqKQGEqbpQVtJucWug==
+
 is-negative-zero@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.1.tgz"
@@ -4108,6 +4361,13 @@ is-regex@^1.1.2:
     call-bind "^1.0.2"
     has-symbols "^1.0.1"
 
+is-relative@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-relative/-/is-relative-1.0.0.tgz#a1bb6935ce8c5dba1e8b9754b9b2dcc020e2260d"
+  integrity sha512-Kw/ReK0iqwKeu0MITLFuj0jbPAmEiOsIwyIXvvbfa6QfmN9pkD1M+8pdk7Rl/dTKbH34/XBFMbgD4iMJhLQbGA==
+  dependencies:
+    is-unc-path "^1.0.0"
+
 is-retry-allowed@^1.0.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz"
@@ -4151,11 +4411,33 @@ is-typedarray@^1.0.0, is-typedarray@~1.0.0:
   resolved "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz"
   integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
 
+is-unc-path@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-unc-path/-/is-unc-path-1.0.0.tgz#d731e8898ed090a12c352ad2eaed5095ad322c9d"
+  integrity sha512-mrGpVd0fs7WWLfVsStvgF6iEJnbjDFZh9/emhRDcGWTduTfNHd9CHeUwH3gYIjdbwo4On6hunkztwOaAw0yllQ==
+  dependencies:
+    unc-path-regex "^0.1.2"
+
 is-url@^1.2.4:
   version "1.2.4"
   resolved "https://registry.npmjs.org/is-url/-/is-url-1.2.4.tgz"
   integrity sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==
 
+is-utf8@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
+  integrity sha512-rMYPYvCzsXywIsldgLaSoPlw5PfoB/ssr7hY4pLfcodrA5M/eArza1a9VmTiNIBNMjOGr1Ow9mTyU2o69U6U9Q==
+
+is-valid-glob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-valid-glob/-/is-valid-glob-1.0.0.tgz#29bf3eff701be2d4d315dbacc39bc39fe8f601aa"
+  integrity sha512-AhiROmoEFDSsjx8hW+5sGwgKVIORcXnrlAx/R0ZSeaPw70Vw0CqkGBBhHGL58Uox2eXnU1AnvXJl1XlyedO5bA==
+
+is-windows@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
+  integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==
+
 is-yarn-global@^0.3.0:
   version "0.3.0"
   resolved "https://registry.npmjs.org/is-yarn-global/-/is-yarn-global-0.3.0.tgz"
@@ -4306,6 +4588,11 @@ json-schema@0.2.3:
   resolved "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz"
   integrity sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=
 
+json-stable-stringify-without-jsonify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
+  integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
+
 json-stable-stringify@~0.0.0:
   version "0.0.1"
   resolved "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-0.0.1.tgz"
@@ -4465,6 +4752,13 @@ lazystream@^1.0.0:
   dependencies:
     readable-stream "^2.0.5"
 
+lead@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/lead/-/lead-1.0.0.tgz#6f14f99a37be3a9dd784f5495690e5903466ee42"
+  integrity sha512-IpSVCk9AYvLHo5ctcIXxOBpMWUe+4TKN3VPWAKUbJikkmsGp0VrSM8IttVc32D6J4WUsiPE6aEFRNmIoF/gdow==
+  dependencies:
+    flush-write-stream "^1.0.2"
+
 levn@~0.3.0:
   version "0.3.0"
   resolved "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz"
@@ -4633,7 +4927,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@4.17.21, lodash@^4.17.10, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21, lodash@^4.7.0:
+lodash@4.17.21, lodash@^4.0.0, lodash@^4.17.10, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -5189,6 +5483,13 @@ nopt@~1.0.10:
   dependencies:
     abbrev "1"
 
+normalize-path@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
+  integrity sha512-3pKJwH184Xo/lnH6oyP1q2pMd7HcypqqmRs91/6/i2CGtWwIKGCkOOMTm/zXbgTEWHw1uNpNi/igc3ePOYHb6w==
+  dependencies:
+    remove-trailing-separator "^1.0.1"
+
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz"
@@ -5199,6 +5500,13 @@ normalize-url@^4.1.0:
   resolved "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.1.tgz"
   integrity sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA==
 
+now-and-later@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/now-and-later/-/now-and-later-2.0.1.tgz#8e579c8685764a7cc02cb680380e94f43ccb1f7c"
+  integrity sha512-KGvQ0cB70AQfg107Xvs/Fbu+dGmZoTRJp2TaPwcwQm3/7PteUyN2BCgk8KBMPGBUXZdVwyWS8fDCGFygBm19UQ==
+  dependencies:
+    once "^1.3.2"
+
 npm-bundled@^1.0.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.1.1.tgz"
@@ -5285,6 +5593,16 @@ object.assign@4.1.0:
     has-symbols "^1.0.0"
     object-keys "^1.0.11"
 
+object.assign@^4.0.4:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.4.tgz#9673c7c7c351ab8c4d0b516f4343ebf4dfb7799f"
+  integrity sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    has-symbols "^1.0.3"
+    object-keys "^1.1.1"
+
 object.assign@^4.1.2:
   version "4.1.2"
   resolved "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz"
@@ -5316,7 +5634,7 @@ on-headers@~1.0.1, on-headers@~1.0.2:
   resolved "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz"
   integrity sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==
 
-once@^1.3.0, once@^1.3.1, once@^1.4.0:
+once@^1.3.0, once@^1.3.1, once@^1.3.2, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/once/-/once-1.4.0.tgz"
   integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
@@ -5335,6 +5653,13 @@ optionator@^0.8.1:
     type-check "~0.3.2"
     word-wrap "~1.2.3"
 
+ordered-read-streams@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/ordered-read-streams/-/ordered-read-streams-1.0.1.tgz#77c0cb37c41525d64166d990ffad7ec6a0e1363e"
+  integrity sha512-Z87aSjx3r5c0ZB7bcJqIgIRX5bxR7A4aSzvIbaxd0oTkWBCOoKfuGHiKj60CHVUgg1Phm5yMZzBdt8XqRs73Mw==
+  dependencies:
+    readable-stream "^2.0.1"
+
 os-browserify@~0.3.0:
   version "0.3.0"
   resolved "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz"
@@ -5463,7 +5788,7 @@ parse5@*:
   dependencies:
     entities "^4.3.0"
 
-parse5@6.0.1, parse5@^6.0.1:
+parse5@6.0.1, parse5@^6.0.0, parse5@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz"
   integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
@@ -5483,6 +5808,11 @@ path-browserify@~0.0.0:
   resolved "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.1.tgz"
   integrity sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ==
 
+path-dirname@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
+  integrity sha512-ALzNPpyNq9AqXMBjeymIjFDAkAFH06mHJH/cSBHAgU0s4vfpBn6b2nf8tiRLvagKD8RbTpq2FKTBg7cl9l3c7Q==
+
 path-exists@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz"
@@ -5722,16 +6052,16 @@ printj@~1.1.0:
   resolved "https://registry.npmjs.org/printj/-/printj-1.1.2.tgz"
   integrity sha512-zA2SmoLaxZyArQTOPj5LXecR+RagfPSU5Kw1qP+jkWeNlrq+eJZyY2oS68SU1Z/7/myXM4lo9716laOFAVStCQ==
 
+process-nextick-args@^2.0.0, process-nextick-args@~2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz"
+  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
+
 process-nextick-args@~1.0.6:
   version "1.0.7"
   resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz"
   integrity sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M=
 
-process-nextick-args@~2.0.0:
-  version "2.0.1"
-  resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz"
-  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
-
 process@~0.11.0:
   version "0.11.10"
   resolved "https://registry.npmjs.org/process/-/process-0.11.10.tgz"
@@ -5782,6 +6112,14 @@ public-encrypt@^4.0.0:
     randombytes "^2.0.1"
     safe-buffer "^5.1.2"
 
+pump@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-2.0.1.tgz#12399add6e4cf7526d973cbc8b5ce2e2908b3909"
+  integrity sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
 pump@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz"
@@ -5790,6 +6128,15 @@ pump@^3.0.0:
     end-of-stream "^1.1.0"
     once "^1.3.1"
 
+pumpify@^1.3.5:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-1.5.1.tgz#36513be246ab27570b1a374a5ce278bfd74370ce"
+  integrity sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==
+  dependencies:
+    duplexify "^3.6.0"
+    inherits "^2.0.3"
+    pump "^2.0.0"
+
 punycode@1.3.2:
   version "1.3.2"
   resolved "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz"
@@ -5929,7 +6276,7 @@ read-only-stream@^2.0.0:
   dependencies:
     readable-stream "^2.0.2"
 
-"readable-stream@2 || 3", readable-stream@^3.1.1, readable-stream@^3.4.0, readable-stream@^3.6.0:
+"readable-stream@2 || 3", readable-stream@3, readable-stream@^3.1.1, readable-stream@^3.4.0, readable-stream@^3.6.0:
   version "3.6.0"
   resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz"
   integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
@@ -5938,7 +6285,7 @@ read-only-stream@^2.0.0:
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
-readable-stream@^2.0.0, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.2.2, readable-stream@^2.3.6, readable-stream@~2.3.6:
+readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.5, readable-stream@^2.3.6, readable-stream@~2.3.6:
   version "2.3.7"
   resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz"
   integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
@@ -6051,6 +6398,11 @@ reflect-metadata@^0.1.13:
   resolved "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz"
   integrity sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==
 
+regenerator-runtime@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
 regenerator-runtime@^0.13.4:
   version "0.13.9"
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz"
@@ -6070,6 +6422,33 @@ registry-url@^5.0.0:
   dependencies:
     rc "^1.2.8"
 
+remove-bom-buffer@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/remove-bom-buffer/-/remove-bom-buffer-3.0.0.tgz#c2bf1e377520d324f623892e33c10cac2c252b53"
+  integrity sha512-8v2rWhaakv18qcvNeli2mZ/TMTL2nEyAKRvzo1WtnZBl15SHyEhrCu2/xKlJyUFKHiHgfXIyuY6g2dObJJycXQ==
+  dependencies:
+    is-buffer "^1.1.5"
+    is-utf8 "^0.2.1"
+
+remove-bom-stream@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/remove-bom-stream/-/remove-bom-stream-1.2.0.tgz#05f1a593f16e42e1fb90ebf59de8e569525f9523"
+  integrity sha512-wigO8/O08XHb8YPzpDDT+QmRANfW6vLqxfaXm1YXhnFf3AkSLyjfG3GEFg4McZkmgL7KvCj5u2KczkvSP6NfHA==
+  dependencies:
+    remove-bom-buffer "^3.0.0"
+    safe-buffer "^5.1.0"
+    through2 "^2.0.3"
+
+remove-trailing-separator@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
+  integrity sha512-/hS+Y0u3aOfIETiaiirUFwDBDzmXPvO+jAfKTitUngIPzdKc6Z0LoFjM/CK5PL4C+eKwHohlHAb6H0VFfmmUsw==
+
+replace-ext@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.1.tgz#2d6d996d04a15855d967443631dd5f77825b016a"
+  integrity sha512-yD5BHCe7quCgBph4rMQ+0KkIRKwWCrHDOX1p1Gp6HwjPM5kVoCdKGNhN7ydqqsX6lJEnQDKZ/tFMiEdQ1dvPEw==
+
 request-promise-core@1.1.4:
   version "1.1.4"
   resolved "https://registry.npmjs.org/request-promise-core/-/request-promise-core-1.1.4.tgz"
@@ -6139,6 +6518,13 @@ resolve-from@^5.0.0:
   resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz"
   integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
 
+resolve-options@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/resolve-options/-/resolve-options-1.1.0.tgz#32bb9e39c06d67338dc9378c0d6d6074566ad131"
+  integrity sha512-NYDgziiroVeDC29xq7bp/CacZERYsA9bXYd1ZmcJlF3BcrZv5pTb4NG7SjdyKDnXZ84aC4vo2u6sNKIA1LCu/A==
+  dependencies:
+    value-or-function "^3.0.0"
+
 resolve@1.1.7:
   version "1.1.7"
   resolved "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz"
@@ -6483,6 +6869,11 @@ sinon@7.1.1:
     supports-color "^5.5.0"
     type-detect "^4.0.8"
 
+sortobject@^4.0.0:
+  version "4.16.0"
+  resolved "https://registry.yarnpkg.com/sortobject/-/sortobject-4.16.0.tgz#9f1deca8da47f0d2da0a9100d9b0a407fd9d7b3f"
+  integrity sha512-jdcWhqJjxyYxRcXa30qImF3PZea1GpNwdKxUac28T28+GodptH4XihPuRlgCY0hITIEQVnw8DtQ81Fb6fomBaw==
+
 source-list-map@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz"
@@ -6608,6 +6999,11 @@ stream-http@^2.0.0:
     to-arraybuffer "^1.0.0"
     xtend "^4.0.0"
 
+stream-shift@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.1.tgz#d7088281559ab2778424279b0877da3c392d5a3d"
+  integrity sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==
+
 stream-splicer@^2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/stream-splicer/-/stream-splicer-2.0.1.tgz"
@@ -6934,7 +7330,15 @@ thirty-two@^1.0.2:
   resolved "https://registry.npmjs.org/thirty-two/-/thirty-two-1.0.2.tgz"
   integrity sha1-TKL//AKlEpDSdEueP1V2k8prYno=
 
-through2@^2.0.0:
+through2-filter@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/through2-filter/-/through2-filter-3.0.0.tgz#700e786df2367c2c88cd8aa5be4cf9c1e7831254"
+  integrity sha512-jaRjI2WxN3W1V8/FMZ9HKIBXixtiqs3SQSX4/YGIiP3gL6djW48VoZq9tDqeCWs3MT8YY5wb/zli8VW8snY1CA==
+  dependencies:
+    through2 "~2.0.0"
+    xtend "~4.0.0"
+
+through2@^2.0.0, through2@^2.0.1, through2@^2.0.3, through2@~2.0.0:
   version "2.0.5"
   resolved "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz"
   integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
@@ -6950,6 +7354,13 @@ through2@^3.0.1:
     inherits "^2.0.4"
     readable-stream "2 || 3"
 
+through2@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-4.0.2.tgz#a7ce3ac2a7a8b0b966c80e7c49f0484c3b239764"
+  integrity sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==
+  dependencies:
+    readable-stream "3"
+
 "through@>=2.2.7 <3", through@~2.3.4:
   version "2.3.8"
   resolved "https://registry.npmjs.org/through/-/through-2.3.8.tgz"
@@ -6996,6 +7407,14 @@ tmp@^0.2.0, tmp@^0.2.1:
   dependencies:
     rimraf "^3.0.0"
 
+to-absolute-glob@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/to-absolute-glob/-/to-absolute-glob-2.0.2.tgz#1865f43d9e74b0822db9f145b78cff7d0f7c849b"
+  integrity sha512-rtwLUQEwT8ZeKQbyFJyomBRYXyE16U5VKuy0ftxLMK/PZb2fkOsg5r9kHdauuVDbsNdIBoC/HCthpidamQFXYA==
+  dependencies:
+    is-absolute "^1.0.0"
+    is-negated-glob "^1.0.0"
+
 to-arraybuffer@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz"
@@ -7013,6 +7432,13 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+to-through@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/to-through/-/to-through-2.0.0.tgz#fc92adaba072647bc0b67d6b03664aa195093af6"
+  integrity sha512-+QIz37Ly7acM4EMdw2PRN389OneM5+d844tirkGp4dPKzI5OE72V9OsbFp+CIYJDahZ41ZV05hNtcPAQUAm9/Q==
+  dependencies:
+    through2 "^2.0.3"
+
 toidentifier@1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz"
@@ -7222,6 +7648,11 @@ unbox-primitive@^1.0.0:
     has-symbols "^1.0.2"
     which-boxed-primitive "^1.0.2"
 
+unc-path-regex@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/unc-path-regex/-/unc-path-regex-0.1.2.tgz#e73dd3d7b0d7c5ed86fbac6b0ae7d8c6a69d50fa"
+  integrity sha512-eXL4nmJT7oCpkZsHZUOJo8hcX3GbsiDOa0Qu9F646fi8dT3XuSVopVqAcEiVzSKKH7UoDti23wNX3qGFxcW5Qg==
+
 undeclared-identifiers@^1.1.2:
   version "1.1.3"
   resolved "https://registry.npmjs.org/undeclared-identifiers/-/undeclared-identifiers-1.1.3.tgz"
@@ -7245,6 +7676,14 @@ underscore@1.12.1, underscore@>=1.8.3, underscore@^1.8.0:
   resolved "https://registry.npmjs.org/underscore/-/underscore-1.12.1.tgz"
   integrity sha512-hEQt0+ZLDVUMhebKxL4x1BTtDY7bavVofhZ9KZ4aI26X9SRaE+Y3m83XUL1UP2jn8ynjndwCCpEHdUG+9pP1Tw==
 
+unique-stream@^2.0.2:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/unique-stream/-/unique-stream-2.3.1.tgz#c65d110e9a4adf9a6c5948b28053d9a8d04cbeac"
+  integrity sha512-2nY4TnBE70yoxHkDli7DMazpWiP7xMdCYqU2nBRO0UB+ZpEkGsSija7MvmvnZFUeC+mrgiUfcHSr3LmRFIg4+A==
+  dependencies:
+    json-stable-stringify-without-jsonify "^1.0.1"
+    through2-filter "^3.0.0"
+
 unique-string@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz"
@@ -7407,6 +7846,11 @@ uuid@^8.0.0, uuid@^8.3.0, uuid@^8.3.2:
   resolved "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
+value-or-function@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/value-or-function/-/value-or-function-3.0.0.tgz#1c243a50b595c1be54a754bfece8563b9ff8d813"
+  integrity sha512-jdBB2FrWvQC/pnPtIqcLsMaQgjhdb6B7tk1MMyTKapox+tQZbdRP4uLxu/JY0t7fbfDCUMnuelzEYv5GsxHhdg==
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz"
@@ -7421,6 +7865,54 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
+vinyl-fs@^3.0.1:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/vinyl-fs/-/vinyl-fs-3.0.3.tgz#c85849405f67428feabbbd5c5dbdd64f47d31bc7"
+  integrity sha512-vIu34EkyNyJxmP0jscNzWBSygh7VWhqun6RmqVfXePrOwi9lhvRs//dOaGOTRUQr4tx7/zd26Tk5WeSVZitgng==
+  dependencies:
+    fs-mkdirp-stream "^1.0.0"
+    glob-stream "^6.1.0"
+    graceful-fs "^4.0.0"
+    is-valid-glob "^1.0.0"
+    lazystream "^1.0.0"
+    lead "^1.0.0"
+    object.assign "^4.0.4"
+    pumpify "^1.3.5"
+    readable-stream "^2.3.3"
+    remove-bom-buffer "^3.0.0"
+    remove-bom-stream "^1.2.0"
+    resolve-options "^1.1.0"
+    through2 "^2.0.0"
+    to-through "^2.0.0"
+    value-or-function "^3.0.0"
+    vinyl "^2.0.0"
+    vinyl-sourcemap "^1.1.0"
+
+vinyl-sourcemap@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/vinyl-sourcemap/-/vinyl-sourcemap-1.1.0.tgz#92a800593a38703a8cdb11d8b300ad4be63b3e16"
+  integrity sha512-NiibMgt6VJGJmyw7vtzhctDcfKch4e4n9TBeoWlirb7FMg9/1Ov9k+A5ZRAtywBpRPiyECvQRQllYM8dECegVA==
+  dependencies:
+    append-buffer "^1.0.2"
+    convert-source-map "^1.5.0"
+    graceful-fs "^4.1.6"
+    normalize-path "^2.1.1"
+    now-and-later "^2.0.0"
+    remove-bom-buffer "^3.0.0"
+    vinyl "^2.0.0"
+
+vinyl@^2.0.0, vinyl@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-2.2.1.tgz#23cfb8bbab5ece3803aa2c0a1eb28af7cbba1974"
+  integrity sha512-LII3bXRFBZLlezoG5FfZVcXflZgWP/4dCwKtxd5ky9+LOtM4CS3bIRQsmR1KMnMW07jpE8fqR2lcxPZ+8sJIcw==
+  dependencies:
+    clone "^2.1.1"
+    clone-buffer "^1.0.0"
+    clone-stats "^1.0.0"
+    cloneable-readable "^1.0.0"
+    remove-trailing-separator "^1.0.1"
+    replace-ext "^1.0.0"
+
 vm-browserify@~0.0.1:
   version "0.0.4"
   resolved "https://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz"
@@ -7800,7 +8292,7 @@ xpath@0.0.27:
   resolved "https://registry.npmjs.org/xpath/-/xpath-0.0.27.tgz"
   integrity sha512-fg03WRxtkCV6ohClePNAECYsmpKKTv5L8y/X3Dn1hQrec3POx2jHZ/0P2qQ6HvsrU1BmeqXcof3NGGueG6LxwQ==
 
-xtend@^4.0.0, xtend@^4.0.1, xtend@^4.0.2, xtend@~4.0.1:
+xtend@^4.0.0, xtend@^4.0.1, xtend@^4.0.2, xtend@~4.0.0, xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==