Merge pull request #8396 from sagemathinc/vbutton-hide-text

frontend/vbar: toggle icon descriptions

Author: williamstein

src/packages/frontend/_colors.sass

@@ -34,20 +34,26 @@ $COL_BS_RED: #dc3545
 $COL_BG_RED: #d9534f
 $COL_FG_RED: #c9302c
 $COL_FG_BLUE: #428bca
+$COL_BG_WARNING: #f0ad4e
 $COL_ANTD_LINK_BLUE: #1677ff
 $COL_ANTD_LINK_BLUE_DARK: #003eb3
-$COL_ATND_BG_RED_M: #ff7875
-$COL_ATND_BG_RED_L: #fff2f0
+$COL_ANTD_BG_RED_M: #ff7875
+$COL_ANTD_BG_RED_L: #fff2f0
 $COL_ANTD_BG_BLUE_L: #e6f4ff
 $COL_ANTD_RED_WARN: #f5222d
 $COL_ANTD_YELL_M: #fadb14
+$COL_STAR: #FFD700
 $COL_ANTD_RED: #f5222d
 $COL_ANTD_ORANGE: #ffbb96
 $COL_ANTD_GREEN: #87d068
 $COL_ANTD_GREEN_D: #237804
 $COL_COCALC_BLUE: #4474c0
 $COL_COCALC_ORANGE: #fcc861
 $COL_ORANGE_WARN: #FFA500
+$COL_AI_ASSISTANT_BG: #f6bf61
+$COL_AI_ASSISTANT_TXT: #303030
+$COL_AI_ASSISTANT_FONT: #f0a11d
+$COL_RUN: #389e0d
 $COL_TOP_BAR_BG: #eeeeee
 $COL_TOP_BAR_HOVER: #f5f5f5
 $COL_TOP_BAR_ACTIVE: white

src/packages/frontend/account/actions.ts

@@ -184,7 +184,7 @@ export class AccountActions extends Actions<AccountState> {
   };
 
   public set_show_purchase_form(show: boolean) {
-    // this controlls the default state of the "buy a license" purchase form in account → licenses
+    // this controls the default state of the "buy a license" purchase form in account → licenses
     // by default, it's not showing up
     this.setState({ show_purchase_form: show });
   }

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

@@ -6,6 +6,7 @@
 import { Card, InputNumber } from "antd";
 import { Map } from "immutable";
 import { FormattedMessage, useIntl } from "react-intl";
+
 import { Checkbox, Panel } from "@cocalc/frontend/antd-bootstrap";
 import { Rendered, redux, useTypedRedux } from "@cocalc/frontend/app-framework";
 import { useLocalizationCtx } from "@cocalc/frontend/app/localize";
@@ -18,28 +19,33 @@ import {
   NumberInput,
   Paragraph,
   SelectorInput,
+  Text,
 } from "@cocalc/frontend/components";
 import AIAvatar from "@cocalc/frontend/components/ai-avatar";
 import { IS_MOBILE, IS_TOUCH } from "@cocalc/frontend/feature";
 import LLMSelector from "@cocalc/frontend/frame-editors/llm/llm-selector";
 import { LOCALIZATIONS, labels } from "@cocalc/frontend/i18n";
+import { getValidVBAROption } from "@cocalc/frontend/project/page/vbar";
 import {
   VBAR_EXPLANATION,
   VBAR_KEY,
+  VBAR_LABELS,
+  VBAR_LABELS_DEFAULT,
   VBAR_OPTIONS,
-  getValidVBAROption,
-} from "@cocalc/frontend/project/page/vbar";
+  VBAR_TOGGLE_LABELS,
+  VBAR_TOGGLE_LABELS_DESCRIPTION,
+} from "@cocalc/frontend/project/page/vbar-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";
 import { dark_mode_mins, get_dark_mode_config } from "./dark-mode";
 import { I18NSelector, I18N_MESSAGE, I18N_TITLE } from "./i18n-selector";
+import Messages from "./messages";
+import Tours from "./tours";
 import { useLanguageModelSetting } from "./useLanguageModelSetting";
 import { UserDefinedLLMComponent } from "./user-defined-llm";
-import Tours from "./tours";
-import Messages from "./messages";
 
 // See https://github.com/sagemathinc/cocalc/issues/5620
 // There are weird bugs with relying only on mathjax, whereas our
@@ -519,6 +525,23 @@ export function OtherSettings(props: Readonly<Props>): React.JSX.Element {
           >
             {intl.formatMessage(VBAR_EXPLANATION)}
           </Paragraph>
+          <Checkbox
+            checked={
+              props.other_settings.get(VBAR_LABELS) ?? VBAR_LABELS_DEFAULT
+            }
+            onChange={(e) => {
+              on_change(VBAR_LABELS, e.target.checked);
+            }}
+          >
+            <Paragraph
+              type="secondary"
+              style={{ marginBottom: 0 }}
+              ellipsis={{ expandable: true, symbol: "more" }}
+            >
+              <Text strong>{intl.formatMessage(VBAR_TOGGLE_LABELS)}</Text>:{" "}
+              {intl.formatMessage(VBAR_TOGGLE_LABELS_DESCRIPTION)}
+            </Paragraph>
+          </Checkbox>
         </div>
       </LabeledRow>
     );

src/packages/frontend/account/store.ts

@@ -5,6 +5,7 @@
 
 import { List, Map } from "immutable";
 import { reduce } from "lodash";
+
 import { store as customizeStore } from "@cocalc/frontend/customize";
 import { make_valid_name } from "@cocalc/util/misc";
 import { Store } from "@cocalc/util/redux/Store";

src/packages/frontend/account/types.ts

@@ -17,6 +17,7 @@ import { OTHER_SETTINGS_REPLY_ENGLISH_KEY } from "@cocalc/util/i18n/const";
 import { PassportStrategyFrontend } from "@cocalc/util/types/passport-types";
 import { SETTINGS_LANGUAGE_MODEL_KEY } from "./useLanguageModelSetting";
 import { type AutoBalance } from "@cocalc/util/db-schema/accounts";
+import { VBAR_LABELS } from "../project/page/vbar-consts";
 
 // this is incomplete...
 
@@ -57,6 +58,7 @@ export interface AccountState {
     [OTHER_SETTINGS_REPLY_ENGLISH_KEY]?: string;
     no_email_new_messages?: boolean;
     use_balance_toward_subscriptions?: boolean;
+    [VBAR_LABELS]?: boolean; // whether to show labels on the vertical action bar
   }>;
   stripe_customer?: TypedMap<{
     subscriptions: { data: Map<string, any> };

src/packages/frontend/admin/registration-token.tsx

@@ -427,7 +427,7 @@ export function RegistrationToken() {
                     props: {
                       style: {
                         backgroundColor:
-                          pct > 90 ? COLORS.ATND_BG_RED_L : undefined,
+                          pct > 90 ? COLORS.ANTD_BG_RED_L : undefined,
                       },
                     },
                     children: `${round1(pct)}%`,

src/packages/frontend/app/context.tsx

@@ -7,15 +7,20 @@ import { theme, ThemeConfig } from "antd";
 import { debounce } from "lodash";
 import { ReactNode, useEffect, useMemo, useState } from "react";
 import { useIntl } from "react-intl";
+
 import { useTypedRedux } from "@cocalc/frontend/app-framework";
-import { COLORS } from "@cocalc/util/theme";
 import { IntlMessage, isIntlMessage } from "@cocalc/frontend/i18n";
+import { VBAR_LABELS } from "@cocalc/frontend/project/page/vbar-consts";
+import { COLORS } from "@cocalc/util/theme";
 import { NARROW_THRESHOLD_PX, PageStyle } from "./top-nav-consts";
 import useAppContext, { AppContext, calcStyle } from "./use-context";
+
 export { AppContext, useAppContext };
 
 export function useAppContextProvider() {
   const intl = useIntl();
+  const other_settings = useTypedRedux("account", "other_settings");
+  const showVbarLabels = other_settings.get(VBAR_LABELS) ?? true;
 
   const [pageWidthPx, setPageWidthPx] = useState<number>(window.innerWidth);
 
@@ -57,6 +62,7 @@ export function useAppContextProvider() {
     formatIntl,
     pageWidthPx,
     pageStyle,
+    showVbarLabels,
   };
 }
 

src/packages/frontend/app/render.tsx

@@ -3,7 +3,6 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import { createRoot } from "react-dom/client";
 import {
   redux,
   Redux,
@@ -16,6 +15,7 @@ import {
   OTHER_SETTINGS_LOCALE_KEY,
 } from "@cocalc/frontend/i18n";
 import { QueryParams } from "@cocalc/frontend/misc/query-params";
+import { createRoot } from "react-dom/client";
 import { AppContext, useAppContextProvider } from "./context";
 import { Localize, useLocalizationCtx } from "./localize";
 
@@ -25,7 +25,7 @@ function App({ children }) {
   const { setLocale } = useLocalizationCtx();
   const other_settings = useTypedRedux("account", "other_settings");
 
-  // setting via ?lang=[locale] takes precedece over account settings
+  // setting via ?lang=[locale] takes precedence over account settings
   // additionally ?lang_temp=[locale] temporarily changes it, used by these impersonation admin links
   useAsyncEffect(async () => {
     const lang_set = QueryParams.get("lang");
@@ -80,9 +80,7 @@ function App({ children }) {
   };
 
   return (
-    <AppContext.Provider
-      value={{ ...appState, ...timeAgo }}
-    >
+    <AppContext.Provider value={{ ...appState, ...timeAgo }}>
       {children}
     </AppContext.Provider>
   );

src/packages/frontend/app/use-context.ts

@@ -7,9 +7,11 @@ This should be renderable server side, e.g., no window references, etc.
 import { ThemeConfig } from "antd";
 import type { SizeType } from "antd/es/config-provider/SizeContext";
 import { createContext, ReactNode, useContext } from "react";
+
 import type { IntlMessage } from "@cocalc/util/i18n/types";
 import { COLORS } from "@cocalc/util/theme";
 
+import { VBAR_LABELS_DEFAULT } from "@cocalc/frontend/project/page/vbar-consts";
 import {
   FONT_SIZE_ICONS_NARROW,
   FONT_SIZE_ICONS_NORMAL,
@@ -26,12 +28,14 @@ export interface AppState {
   formatIntl: (msg: IntlMessage | ReactNode | string) => ReactNode | string;
   timeAgoAbsolute?: boolean;
   setTimeAgoAbsolute?: (boolean) => void;
+  showVbarLabels?: boolean; // whether to show labels on the vertical fixed bar
 }
 
 export const DEFAULT_CONTEXT = {
   pageWidthPx: 1000, // gets updated
   pageStyle: calcStyle(false), // gets updated
   formatIntl: () => "Loading…",
+  showVbarLabels: VBAR_LABELS_DEFAULT,
 };
 
 export const AppContext = createContext<AppState>(DEFAULT_CONTEXT);

src/packages/frontend/app/verify-email-banner.tsx

@@ -27,7 +27,7 @@ const VERIFY_EMAIL_STYLE: CSS = {
   width: "100%",
   padding: "5px",
   borderBottom: `1px solid ${COLORS.GRAY_D}`,
-  background: COLORS.ATND_BG_RED_L,
+  background: COLORS.ANTD_BG_RED_L,
 } as const;
 
 const DISMISSED_KEY_LS = "verify-email-dismissed";