Merge pull request #8557 from sagemathinc/jupyter-cell-menu-cell-toolbar-8554

frontend/jupyter: add "Cell Toolbar" to cell toolbar dropdown "..."

Author: williamstein

src/packages/frontend/cspell.json

@@ -60,12 +60,9 @@
   "ignoreWords": [
     "antd",
     "buttonbar",
-    "buttonbar",
     "collab",
     "descr",
     "flyoutdragbar",
-    "flyoutdragbar",
-    "flyouts",
     "flyouts",
     "immutablejs",
     "ipynb",
@@ -79,22 +76,16 @@
     "mintime",
     "mistralai",
     "noconf",
-    "noconf",
     "nprocs",
-    "nprocs",
-    "pchildren",
     "pchildren",
     "pids",
-    "pids",
     "Popconfirm",
     "PoweroffOutlined",
     "ptree",
-    "ptree",
     "reuseinflight",
     "sidechat",
     "vertexai",
     "vfill",
-    "xsmall",
     "xsmall"
   ],
   "flagWords": [],

src/packages/frontend/jupyter/cell-buttonbar-menu.tsx

@@ -11,6 +11,7 @@ import { useIntl } from "react-intl";
 import { alert_message } from "@cocalc/frontend/alerts";
 import { Icon } from "@cocalc/frontend/components";
 import { jupyter, labels } from "@cocalc/frontend/i18n";
+import { commands } from "./commands";
 import {
   CODE_BAR_BTN_STYLE,
   COPY_CELL_ICON,
@@ -21,6 +22,27 @@ import {
 export function CodeBarDropdownMenu({ actions, frameActions, id, cell }) {
   const intl = useIntl();
 
+  // All jupyter commands
+  const allCommands = commands({
+    jupyter_actions: actions,
+    frame_actions: frameActions,
+  });
+
+  // Extract the cell toolbar command definitions
+  const toolbarNone = allCommands["cell toolbar none"];
+  const toolbarAssignment = allCommands["cell toolbar create_assignment"];
+  const toolbarSlideshow = allCommands["cell toolbar slideshow"];
+  const toolbarMetadata = allCommands["cell toolbar metadata"];
+  const toolbarAttachments = allCommands["cell toolbar attachments"];
+  const toolbarTags = allCommands["cell toolbar tags"];
+  const toolbarIds = allCommands["cell toolbar ids"];
+
+  // Helper to format labels safely
+  const formatLabel = (cmd) => {
+    const message = cmd.menu || cmd.m;
+    return typeof message === "string" ? message : intl.formatMessage(message);
+  };
+
   function cut_cell(): void {
     if (id == null) return;
     frameActions.current?.unselect_all_cells();
@@ -113,6 +135,55 @@ export function CodeBarDropdownMenu({ actions, frameActions, id, cell }) {
         },
       ],
     },
+    {
+      key: "cell-toolbar",
+      label: intl.formatMessage(jupyter.commands.view_toolbars_menu),
+      icon: <Icon name="tool" />,
+      children: [
+        {
+          key: "cell-toolbar-none",
+          label: formatLabel(toolbarNone),
+          icon: <Icon name={toolbarNone.i} />,
+          onClick: toolbarNone.f,
+        },
+        {
+          key: "cell-toolbar-create-assignment",
+          label: formatLabel(toolbarAssignment),
+          icon: <Icon name={toolbarAssignment.i} />,
+          onClick: toolbarAssignment.f,
+        },
+        {
+          key: "cell-toolbar-slideshow",
+          label: formatLabel(toolbarSlideshow),
+          icon: <Icon name={toolbarSlideshow.i} />,
+          onClick: toolbarSlideshow.f,
+        },
+        {
+          key: "cell-toolbar-metadata",
+          label: formatLabel(toolbarMetadata),
+          icon: <Icon name={toolbarMetadata.i} />,
+          onClick: toolbarMetadata.f,
+        },
+        {
+          key: "cell-toolbar-attachments",
+          label: formatLabel(toolbarAttachments),
+          icon: <Icon name={toolbarAttachments.i} />,
+          onClick: toolbarAttachments.f,
+        },
+        {
+          key: "cell-toolbar-tags",
+          label: formatLabel(toolbarTags),
+          icon: <Icon name={toolbarTags.i} />,
+          onClick: toolbarTags.f,
+        },
+        {
+          key: "cell-toolbar-ids",
+          label: formatLabel(toolbarIds),
+          icon: <Icon name={toolbarIds.i} />,
+          onClick: toolbarIds.f,
+        },
+      ],
+    },
     { key: "divider4", type: "divider" },
     {
       key: "copy-cell",