frontend/i18n: translate language names, to make them recognizable; refactoring

Author: haraldschilly

src/packages/frontend/account/account-page.tsx

@@ -51,7 +51,7 @@ import { UpgradesPage } from "./upgrades/upgrades-page";
 
 export const AccountPage: React.FC = () => {
   const intl = useIntl();
-  const { setLocale } = useLocalizationCtx();
+  const { setLocale, locale } = useLocalizationCtx();
 
   const { width: windowWidth } = useWindowDimensions();
   const isWide = windowWidth > 800;
@@ -266,9 +266,12 @@ export const AccountPage: React.FC = () => {
     const i18n: Locale = getLocale(other_settings);
 
     const items: MenuProps["items"] =
-      Object.entries(LOCALIZATIONS).map(([key, { name, flag }]) => {
-        return { key, label: `${flag} ${name}` };
-      }) ?? [];
+      Object.entries(LOCALIZATIONS).map(
+        ([key, { name, trans, native, flag }]) => {
+          const other = key === locale ? name : intl.formatMessage(trans);
+          return { key, label: `${flag} ${native} (${other})` };
+        },
+      ) ?? [];
 
     items.push({ type: "divider" });
     items.push({
@@ -285,6 +288,7 @@ export const AccountPage: React.FC = () => {
       ),
       onClick: () =>
         Modal.info({
+          width: "min(90vw, 600px)",
           title: intl.formatMessage({
             id: "account.account_page.translation.info.title",
             defaultMessage: "Translation Information",
@@ -326,16 +330,29 @@ Thank you for your patience and understanding as we work to make our application
 
     const lang_icon = LOCALIZATIONS[i18n]?.flag;
 
+    const title =
+      i18n in LOCALIZATIONS
+        ? intl.formatMessage(LOCALIZATIONS[i18n].trans)
+        : i18n;
+
+    const cur = `${title} (${LOCALIZATIONS[i18n]?.name ?? i18n})`;
+    const msg = intl.formatMessage(labels.account_language_tooltip);
+    const tooltip = (
+      <>
+        {cur}
+        <br />
+        {msg}
+        <br />({labels.account_language_tooltip.defaultMessage})
+      </>
+    );
+
     return (
-      <Tooltip
-        title={intl.formatMessage(labels.account_language_tooltip)}
-        trigger={["hover"]}
-      >
+      <Tooltip title={tooltip} trigger={["hover"]}>
         <Dropdown menu={menu} trigger={["click"]}>
           <Button>
             <Space>
               {lang_icon}
-              {isWide ? LOCALIZATIONS[i18n]?.name ?? i18n : undefined}
+              {isWide ? title : undefined}
               <DownOutlined />
             </Space>
           </Button>

src/packages/frontend/app/context.tsx

@@ -7,6 +7,7 @@ import { theme, ThemeConfig } from "antd";
 import type { SizeType } from "antd/es/config-provider/SizeContext";
 import { debounce } from "lodash";
 import { createContext, ReactNode, useContext } from "react";
+import { useIntl } from "react-intl";
 
 import {
   CSS,
@@ -15,9 +16,8 @@ import {
   useState,
   useTypedRedux,
 } from "@cocalc/frontend/app-framework";
-import { IntlMessage, isIntlMessage } from "@cocalc/frontend/i18n";
 import { COLORS } from "@cocalc/util/theme";
-import { useIntl } from "react-intl";
+import { IntlMessage, isIntlMessage } from "@cocalc/frontend/i18n";
 import {
   FONT_SIZE_ICONS_NARROW,
   FONT_SIZE_ICONS_NORMAL,

src/packages/frontend/frame-editors/frame-tree/commands/manage.tsx

@@ -1,3 +1,8 @@
+/*
+ *  This file is part of CoCalc: Copyright © 2024 Sagemath, Inc.
+ *  License: MS-RSL – see LICENSE.md for details
+ */
+
 import { Button, Tooltip } from "antd";
 import { ReactNode } from "react";
 import { IntlShape } from "react-intl";

src/packages/frontend/i18n/de_DE.json

@@ -15,6 +15,10 @@
   "command.generic.build.title": "Kompiliere das Dokument.{br}Um das automatische Kompilieren beim Speichern ein- oder auszuschalten, klicke den 'Kompiliere beim Speichern' Button oder Menüeintrag.",
   "command.generic.force_build.label": "Erzwinge Kompilieren",
   "command.generic.force_build.title": "Das gesamte Dokument wird komplett neu kompiliert.",
+  "i18n.localization.lang.chinese": "Chinesisch",
+  "i18n.localization.lang.english": "Englisch",
+  "i18n.localization.lang.german": "Deutsch",
+  "i18n.localization.lang.spanish": "Spanisch",
   "jupyter.select_kernel.footer": "<strong>Hinweis:</strong> Sie können den ausgewählten Kernel später im Kernel-Menü oder durch einen Klick auf das Kernel-Status-Logo oben links jederzeit ändern.",
   "labels.acconut.password": "Passwort",
   "labels.acconut.password.change": "Passwort Ändern",

src/packages/frontend/i18n/es_ES.json

@@ -15,6 +15,10 @@
   "command.generic.build.title": "",
   "command.generic.force_build.label": "",
   "command.generic.force_build.title": "",
+  "i18n.localization.lang.chinese": "Chino",
+  "i18n.localization.lang.english": "Inglés",
+  "i18n.localization.lang.german": "Alemán",
+  "i18n.localization.lang.spanish": "Español",
   "jupyter.select_kernel.footer": "<strong>Nota:</strong> Siempre puedes cambiar el kernel seleccionado más tarde en el menú Kernel o haciendo clic en el logotipo de estado del kernel en la parte superior izquierda.",
   "labels.acconut.password": "Contraseña",
   "labels.acconut.password.change": "Cambiar la contraseña",

src/packages/frontend/i18n/extracted.json

@@ -53,6 +53,18 @@
   "command.generic.force_build.title": {
     "defaultMessage": "Force rebuild entire project."
   },
+  "i18n.localization.lang.chinese": {
+    "defaultMessage": "Chinese"
+  },
+  "i18n.localization.lang.english": {
+    "defaultMessage": "English"
+  },
+  "i18n.localization.lang.german": {
+    "defaultMessage": "German"
+  },
+  "i18n.localization.lang.spanish": {
+    "defaultMessage": "Spanish"
+  },
   "jupyter.select_kernel.footer": {
     "defaultMessage": "<strong>Note:</strong> You can always change the selected kernel later in the Kernel menu or by clicking on the kernel status logo in the top left.",
     "description": "Jupyter kernel selector, bottom."

src/packages/frontend/i18n/index.ts

@@ -1,23 +1,27 @@
+/*
+ *  This file is part of CoCalc: Copyright © 2024 Sagemath, Inc.
+ *  License: MS-RSL – see LICENSE.md for details
+ */
+
 import {
   createIntl,
   createIntlCache,
+  defineMessage,
   IntlShape,
-  MessageDescriptor,
   MessageFormatElement,
 } from "react-intl";
 
 import { AccountState } from "@cocalc/frontend/account/types";
 import { redux } from "@cocalc/frontend/app-framework";
-import {
-  DEFAULT_LOCALE,
-  Locale,
-  LOCALIZATIONS,
-} from "@cocalc/util/consts/locale";
+import { DEFAULT_LOCALE, Locale } from "@cocalc/util/consts/locale";
 import { unreachable } from "@cocalc/util/misc";
+import { IntlMessage, isIntlMessage } from "./types";
 
 export { labels } from "./common";
-export { DEFAULT_LOCALE, LOCALIZATIONS };
-export type { Locale };
+
+export { DEFAULT_LOCALE, isIntlMessage };
+
+export type { IntlMessage, Locale };
 
 export const OTHER_SETTINGS_LOCALE_KEY = "i18n";
 
@@ -72,18 +76,48 @@ export async function getIntl(): Promise<IntlShape> {
   return createIntl({ locale, messages }, cache);
 }
 
-// In CoCalc, we require all message to have an ID and defaultMessage (which is English)
-export type IntlMessage = MessageDescriptor & {
-  id: string;
-  defaultMessage: string;
-};
-
-// For us, the id and defaultMessage must be set to be a MessageDescriptor
-export function isIntlMessage(msg: unknown): msg is MessageDescriptor {
-  return (
-    typeof msg === "object" &&
-    msg != null &&
-    "id" in msg &&
-    "defaultMessage" in msg
-  );
-}
+export const LOCALIZATIONS: {
+  [key in Locale]: {
+    name: string;
+    flag: string;
+    native: string;
+    trans: IntlMessage;
+  };
+} = {
+  en: {
+    name: "English",
+    flag: "🇺🇸",
+    native: "English",
+    trans: defineMessage({
+      id: "i18n.localization.lang.english",
+      defaultMessage: "English",
+    }),
+  },
+  es: {
+    name: "Spanish",
+    flag: "🇪🇸",
+    native: "Español",
+    trans: defineMessage({
+      id: "i18n.localization.lang.spanish",
+      defaultMessage: "Spanish",
+    }),
+  },
+  de: {
+    name: "German",
+    flag: "🇩🇪",
+    native: "Deutsch",
+    trans: defineMessage({
+      id: "i18n.localization.lang.german",
+      defaultMessage: "German",
+    }),
+  },
+  zh: {
+    name: "Chinese",
+    flag: "🇨🇳",
+    native: "中文",
+    trans: defineMessage({
+      id: "i18n.localization.lang.chinese",
+      defaultMessage: "Chinese",
+    }),
+  },
+} as const;

src/packages/frontend/i18n/types.ts

@@ -0,0 +1,22 @@
+/*
+ *  This file is part of CoCalc: Copyright © 2024 Sagemath, Inc.
+ *  License: MS-RSL – see LICENSE.md for details
+ */
+
+import { MessageDescriptor } from "react-intl";
+
+// In CoCalc, we require all message to have an ID and defaultMessage (which is English)
+export type IntlMessage = MessageDescriptor & {
+  id: string;
+  defaultMessage: string;
+};
+
+// For us, the id and defaultMessage must be set to be a MessageDescriptor
+export function isIntlMessage(msg: unknown): msg is MessageDescriptor {
+  return (
+    typeof msg === "object" &&
+    msg != null &&
+    "id" in msg &&
+    "defaultMessage" in msg
+  );
+}

src/packages/frontend/i18n/zh_CN.json

@@ -15,6 +15,10 @@
   "command.generic.build.title": "",
   "command.generic.force_build.label": "",
   "command.generic.force_build.title": "",
+  "i18n.localization.lang.chinese": "中文",
+  "i18n.localization.lang.english": "英语",
+  "i18n.localization.lang.german": "德语",
+  "i18n.localization.lang.spanish": "西班牙语",
   "jupyter.select_kernel.footer": "<strong>注意：</strong>稍后，您可以通过内核菜单或点击左上角的内核状态徽标更改所选内核。",
   "labels.acconut.password": "密码",
   "labels.acconut.password.change": "更改密码",

src/packages/frontend/project/page/flyouts/header.tsx

@@ -12,6 +12,7 @@ import { redux, useTypedRedux } from "@cocalc/frontend/app-framework";
 import { Icon } from "@cocalc/frontend/components";
 import { ComputeServerDocStatus } from "@cocalc/frontend/compute/doc-status";
 import SelectComputeServerForFileExplorer from "@cocalc/frontend/compute/select-server-for-explorer";
+import { isIntlMessage } from "@cocalc/frontend/i18n";
 import { useProjectContext } from "@cocalc/frontend/project/context";
 import { PathNavigator } from "@cocalc/frontend/project/explorer/path-navigator";
 import track from "@cocalc/frontend/user-tracking";
@@ -23,7 +24,6 @@ import { FIXED_TABS_BG_COLOR } from "../tabs";
 import { ActiveHeader } from "./active-header";
 import { FLYOUT_PADDING } from "./consts";
 import { LogHeader } from "./log-header";
-import { isIntlMessage } from "../../../i18n";
 
 const FLYOUT_FULLPAGE_TOUR_NAME: TourName = "flyout-fullpage";