(core) User language switcher

Summary:
New language selector on the Account page for logged-in users.
New icon for switching language for an anonymous user.

For anonymous users, language is stored in a cookie grist_user_locale.
Language is stored in user settings for authenticated users and takes
precedence over what is stored in the cookie.

Test Plan: New tests

Reviewers: paulfitz

Reviewed By: paulfitz

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

app/client/ui/LanguageMenu.ts

@@ -0,0 +1,107 @@
+import {detectCurrentLang, makeT, setAnonymousLocale} from 'app/client/lib/localization';
+import {AppModel} from 'app/client/models/AppModel';
+import {hoverTooltip} from 'app/client/ui/tooltips';
+import {cssHoverCircle, cssTopBarBtn} from 'app/client/ui/TopBarCss';
+import {icon} from 'app/client/ui2018/icons';
+import {menu, menuItem} from 'app/client/ui2018/menus';
+import {getCountryCode} from 'app/common/Locales';
+import {getGristConfig} from 'app/common/urlUtils';
+import {dom, makeTestId, styled} from 'grainjs';
+
+const testId = makeTestId('test-language-');
+const t = makeT('LanguageMenu');
+
+export function buildLanguageMenu(appModel: AppModel) {
+  // Get the list of languages from the config, or default to English.
+  const languages = getGristConfig().supportedLngs ?? ['en'];
+  // Get the current language (from user's preference, cookie or browser)
+  const userLanguage = detectCurrentLang();
+
+  if (appModel.currentValidUser) {
+    // For logged in users, we don't need to show the menu (they have a preference in their profile).
+    // But for tests we will show a hidden indicator.
+    return dom('input', {type: 'hidden'}, (testId(`current-` + userLanguage)));
+  }
+
+  // When we switch language, we need to reload the page to get the new translations.
+  // This button is only for anonymous users, so we don't need to save the preference or wait for anything.
+  const changeLanguage = (lng: string) => {
+    setAnonymousLocale(lng);
+    window.location.reload();
+  };
+  // Try to convert locale setting to the emoji flag, fallback to plain flag icon.
+  const emojiFlag = buildEmoji(userLanguage);
+  return cssHoverCircle(
+    // Margin is common for all hover buttons on TopBar.
+    {style: `margin: 5px;`},
+    // Flag or emoji flag if we have it.
+    emojiFlag ?? cssTopBarBtn('Flag'),
+    // Expose for test the current language use.
+    testId(`current-` + userLanguage),
+    menu(
+      // Convert the list of languages we support to menu items.
+      () => languages.map((lng) => menuItem(() => changeLanguage(lng), [
+        // Try to convert the locale to nice name, fallback to locale itself.
+        cssFirstUpper(translateLocale(lng) ?? lng),
+        // If this is current language, mark it with a tick (by default we mark en).
+        userLanguage === lng ? cssWrapper(icon('Tick'), testId('selected')) : null,
+        testId(`lang-` + lng),
+      ])),
+      {
+        placement: 'bottom-end',
+      }
+    ),
+    hoverTooltip(t('Language'), {key: 'topBarBtnTooltip'}),
+    testId('button'),
+  );
+}
+
+// Unfortunately, Windows doesn't support emoji flags, so we need to use SVG icons.
+function buildEmoji(locale: string) {
+  const countryCode = getCountryCode(locale);
+  if (!countryCode) { return null; }
+  return [
+    cssSvgIcon({
+      style: `background-image: url("icons/locales/${countryCode}.svg")`
+    }),
+    dom.cls(cssSvgIconWrapper.className)
+  ];
+}
+
+export function translateLocale(locale: string) {
+  try {
+    locale = locale.replace("_", "-");
+    // This API might not be available in all browsers.
+    const languageNames = new Intl.DisplayNames([locale], {type: 'language'});
+    return languageNames.of(locale) || null;
+  } catch (err) {
+    return null;
+  }
+}
+
+const cssWrapper = styled('div', `
+  margin-left: auto;
+  display: inline-block;
+`);
+
+const cssSvgIconWrapper = styled('div', `
+  display: grid;
+  place-content: center;
+  cursor: pointer;
+  user-select: none;
+`);
+
+const cssSvgIcon = styled('div', `
+  width: 16px;
+  height: 16px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-color: transparent;
+  background-size: contain;
+`);
+
+const cssFirstUpper = styled('span', `
+  &::first-letter {
+    text-transform: capitalize;
+  }
+`);