frontend/settings: refactor i18n, tweak terminal color scheme and add cocalc themes, move "communication" to its own category

Author: haraldschilly

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

@@ -50,6 +50,10 @@ import {
   AccountPreferencesAppearance,
   APPEARANCE_ICON_NAME,
 } from "./account-preferences-appearance";
+import {
+  AccountPreferencesCommunication,
+  COMMUNICATION_ICON_NAME,
+} from "./account-preferences-communication";
 import {
   AccountPreferencesEditor,
   EDITOR_ICON_NAME,
@@ -244,6 +248,19 @@ export const AccountPage: React.FC = () => {
             children: active_page === "preferences" &&
               active_sub_tab === "preferences-ai" && <AccountPreferencesAI />,
           },
+          {
+            key: "preferences-communication",
+            label: (
+              <span>
+                <Icon name={COMMUNICATION_ICON_NAME} />{" "}
+                {intl.formatMessage(labels.communication)}
+              </span>
+            ),
+            children: active_page === "preferences" &&
+              active_sub_tab === "preferences-communication" && (
+                <AccountPreferencesCommunication />
+              ),
+          },
           {
             key: "preferences-keys",
             label: (

src/packages/frontend/account/account-preferences-communication.tsx

@@ -0,0 +1,131 @@
+/*
+ *  This file is part of CoCalc: Copyright © 2025 Sagemath, Inc.
+ *  License: MS-RSL – see LICENSE.md for details
+ */
+
+import { Button } from "antd";
+import { FormattedMessage, useIntl } from "react-intl";
+
+import { Panel, Switch } from "@cocalc/frontend/antd-bootstrap";
+import { redux, useTypedRedux } from "@cocalc/frontend/app-framework";
+import { Icon, IconName } from "@cocalc/frontend/components";
+import { labels } from "@cocalc/frontend/i18n";
+import { webapp_client } from "@cocalc/frontend/webapp-client";
+
+export const COMMUNICATION_ICON_NAME: IconName = "mail";
+
+export function AccountPreferencesCommunication(): React.JSX.Element {
+  const intl = useIntl();
+  const other_settings = useTypedRedux("account", "other_settings");
+  const stripe_customer = useTypedRedux("account", "stripe_customer");
+  const email_address_verified = useTypedRedux(
+    "account",
+    "email_address_verified",
+  );
+  const email_address = useTypedRedux("account", "email_address");
+  const isVerified = !!email_address_verified?.get(email_address ?? "");
+  const is_stripe_customer = !!stripe_customer?.getIn([
+    "subscriptions",
+    "total_count",
+  ]);
+
+  function on_change(name: string, value: any): void {
+    redux.getActions("account").set_other_settings(name, value);
+  }
+
+  function toggle_global_banner(val: boolean): void {
+    if (val) {
+      // this must be "null", not "undefined" – otherwise the data isn't stored in the DB.
+      on_change("show_global_info2", null);
+    } else {
+      on_change("show_global_info2", webapp_client.server_time());
+    }
+  }
+
+  function render_global_banner() {
+    return (
+      <Switch
+        checked={!other_settings.get("show_global_info2")}
+        onChange={(e) => toggle_global_banner(e.target.checked)}
+      >
+        <FormattedMessage
+          id="account.other-settings.global_banner"
+          defaultMessage={`<strong>Show Announcement Banner</strong>: only shows up if there is a
+        message`}
+        />
+      </Switch>
+    );
+  }
+
+  function render_no_free_warnings() {
+    const extra = is_stripe_customer ? (
+      <span>(thanks for being a customer)</span>
+    ) : (
+      <span>(only available to customers)</span>
+    );
+
+    return (
+      <Switch
+        disabled={!is_stripe_customer}
+        checked={!!other_settings.get("no_free_warnings")}
+        onChange={(e) => on_change("no_free_warnings", e.target.checked)}
+      >
+        <strong>Hide free warnings</strong>: do{" "}
+        <strong>
+          <i>not</i>
+        </strong>{" "}
+        show a warning banner when using a free trial project {extra}
+      </Switch>
+    );
+  }
+
+  function render_no_email_new_messages() {
+    return (
+      <>
+        <Switch
+          checked={other_settings.get("no_email_new_messages")}
+          onChange={(e) => {
+            on_change("no_email_new_messages", e.target.checked);
+          }}
+        >
+          Do NOT send email when you get new{" "}
+          <Button
+            onClick={(e) => {
+              e.stopPropagation();
+              redux.getActions("page").set_active_tab("notifications");
+              redux
+                .getActions("mentions")
+                .set_filter("messages-inbox" as "messages-inbox");
+            }}
+            type="link"
+            size="small"
+          >
+            Internal Messages
+          </Button>
+        </Switch>
+        {!isVerified && !other_settings.get("no_email_new_messages") && (
+          <>
+            (NOTE: You must also verify your email address above to get emails
+            about new messages.)
+          </>
+        )}
+      </>
+    );
+  }
+
+  return (
+    <Panel
+      size="small"
+      header={
+        <>
+          <Icon name={COMMUNICATION_ICON_NAME} />{" "}
+          {intl.formatMessage(labels.communication)}
+        </>
+      }
+    >
+      {render_global_banner()}
+      {render_no_free_warnings()}
+      {render_no_email_new_messages()}
+    </Panel>
+  );
+}

src/packages/frontend/account/other-settings.tsx

@@ -5,7 +5,6 @@
 
 // cSpell:ignore brandcolors codebar
 
-import { Button } from "antd";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { Panel, Switch } from "@cocalc/frontend/antd-bootstrap";
@@ -19,7 +18,7 @@ import {
   NumberInput,
   Paragraph,
   SelectorInput,
-  Text
+  Text,
 } from "@cocalc/frontend/components";
 import AIAvatar from "@cocalc/frontend/components/ai-avatar";
 import { IS_MOBILE, IS_TOUCH } from "@cocalc/frontend/feature";
@@ -38,7 +37,6 @@ import {
 } from "@cocalc/frontend/project/page/activity-bar-consts";
 import { NewFilenameFamilies } from "@cocalc/frontend/project/utils";
 import track from "@cocalc/frontend/user-tracking";
-import { webapp_client } from "@cocalc/frontend/webapp-client";
 import { DEFAULT_NEW_FILENAMES, NEW_FILENAMES } from "@cocalc/util/db-schema";
 import { OTHER_SETTINGS_REPLY_ENGLISH_KEY } from "@cocalc/util/i18n/const";
 
@@ -72,15 +70,6 @@ export function OtherSettings(props: Readonly<Props>): React.JSX.Element {
     redux.getActions("account").set_other_settings(name, value);
   }
 
-  function toggle_global_banner(val: boolean): void {
-    if (val) {
-      // this must be "null", not "undefined" – otherwise the data isn't stored in the DB.
-      on_change("show_global_info2", null);
-    } else {
-      on_change("show_global_info2", webapp_client.server_time());
-    }
-  }
-
   //   private render_first_steps(): Rendered {
   //     if (props.kucalc !== KUCALC_COCALC_COM) return;
   //     return (
@@ -93,21 +82,6 @@ export function OtherSettings(props: Readonly<Props>): React.JSX.Element {
   //     );
   //   }
 
-  function render_global_banner(): Rendered {
-    return (
-      <Switch
-        checked={!props.other_settings.get("show_global_info2")}
-        onChange={(e) => toggle_global_banner(e.target.checked)}
-      >
-        <FormattedMessage
-          id="account.other-settings.global_banner"
-          defaultMessage={`<strong>Show Announcement Banner</strong>: only shows up if there is a
-        message`}
-        />
-      </Switch>
-    );
-  }
-
   function render_confirm(): Rendered {
     if (!IS_MOBILE) {
       return (
@@ -237,71 +211,6 @@ export function OtherSettings(props: Readonly<Props>): React.JSX.Element {
     );
   }
 
-  function render_no_free_warnings(): Rendered {
-    const isCustomer = props.is_stripe_customer;
-
-    const extra = isCustomer ? (
-      <span>(thanks for being a customer)</span>
-    ) : (
-      <span>(only available to customers)</span>
-    );
-
-    return (
-      <Switch
-        disabled={!isCustomer}
-        checked={!!props.other_settings.get("no_free_warnings")}
-        onChange={(e) => on_change("no_free_warnings", e.target.checked)}
-      >
-        <strong>Hide free warnings</strong>: do{" "}
-        <strong>
-          <i>not</i>
-        </strong>{" "}
-        show a warning banner when using a free trial project {extra}
-      </Switch>
-    );
-  }
-
-  function render_no_email_new_messages(): Rendered {
-    const email_address_verified = useTypedRedux(
-      "account",
-      "email_address_verified",
-    );
-    const email_address = useTypedRedux("account", "email_address");
-    const isVerified = !!email_address_verified?.get(email_address ?? "");
-
-    return (
-      <>
-        <Switch
-          checked={props.other_settings.get("no_email_new_messages")}
-          onChange={(e) => {
-            on_change("no_email_new_messages", e.target.checked);
-          }}
-        >
-          Do NOT send email when you get new{" "}
-          <Button
-            onClick={(e) => {
-              e.stopPropagation();
-              redux.getActions("page").set_active_tab("notifications");
-              redux
-                .getActions("mentions")
-                .set_filter("messages-inbox" as "messages-inbox");
-            }}
-            type="link"
-            size="small"
-          >
-            Internal Messages
-          </Button>
-        </Switch>
-        {!isVerified && !props.other_settings.get("no_email_new_messages") && (
-          <>
-            (NOTE: You must also verify your email address above to get emails
-            about new messages.)
-          </>
-        )}
-      </>
-    );
-  }
-
   function render_antd(): Rendered {
     return (
       <>
@@ -502,12 +411,7 @@ export function OtherSettings(props: Readonly<Props>): React.JSX.Element {
         size="small"
         header={
           <>
-            <Icon name={THEME_ICON_NAME} />{" "}
-            <FormattedMessage
-              id="account.other-settings.theme"
-              defaultMessage="Theme"
-              description="Visual UI theme of the application"
-            />
+            <Icon name={THEME_ICON_NAME} /> {intl.formatMessage(labels.theme)}
           </>
         }
       >
@@ -523,11 +427,7 @@ export function OtherSettings(props: Readonly<Props>): React.JSX.Element {
           size="small"
           header={
             <>
-              <Icon name="desktop" />{" "}
-              <FormattedMessage
-                id="account.other-settings.browser_performance.title"
-                defaultMessage="Browser"
-              />
+              <Icon name="desktop" /> {intl.formatMessage(labels.browser)}
             </>
           }
         >
@@ -540,10 +440,7 @@ export function OtherSettings(props: Readonly<Props>): React.JSX.Element {
           header={
             <>
               <Icon name="folder-open" />{" "}
-              <FormattedMessage
-                id="account.other-settings.file_explorer.title"
-                defaultMessage="File Explorer"
-              />
+              {intl.formatMessage(labels.file_explorer)}
             </>
           }
         >
@@ -558,31 +455,13 @@ export function OtherSettings(props: Readonly<Props>): React.JSX.Element {
           size="small"
           header={
             <>
-              <Icon name="edit" />{" "}
-              <FormattedMessage
-                id="account.other-settings.projects.title"
-                defaultMessage="Projects"
-              />
+              <Icon name="edit" /> {intl.formatMessage(labels.projects)}
             </>
           }
         >
           {render_vertical_fixed_bar_options()}
         </Panel>
 
-        <Panel
-          size="small"
-          header={
-            <>
-              <Icon name="mail" />{" "}
-              <FormattedMessage {...labels.communication} />
-            </>
-          }
-        >
-          {render_global_banner()}
-          {render_no_free_warnings()}
-          {render_no_email_new_messages()}
-        </Panel>
-
         {/* Tours at bottom */}
         <Tours />
       </>