frontend/latex-editor + code-editor: refactor and simplify the new/default layout frame-tree actions

Author: haraldschilly

src/packages/frontend/frame-editors/code-editor/actions.ts

@@ -805,13 +805,18 @@ export class Actions<
     }
   }
 
-  _default_frame_tree(): Map<string, any> {
-    let frame_tree = fromJS(this._raw_default_frame_tree()) as Map<string, any>;
+  // Process a raw frame tree: convert to immutable, assign IDs, ensure uniqueness
+  private _process_frame_tree(rawTree: FrameTree): Map<string, any> {
+    let frame_tree = fromJS(rawTree) as Map<string, any>;
     frame_tree = tree_ops.assign_ids(frame_tree);
     frame_tree = tree_ops.ensure_ids_are_unique(frame_tree);
     return frame_tree;
   }
 
+  _default_frame_tree(): Map<string, any> {
+    return this._process_frame_tree(this._raw_default_frame_tree());
+  }
+
   // overload this in derived classes to specify the default layout.
   _raw_default_frame_tree(): FrameTree {
     return { type: "cm" };
@@ -846,11 +851,9 @@ export class Actions<
     return node.get("data-" + key, def);
   }
 
-  // Reset the frame tree layout to the default.
-  reset_frame_tree(): void {
+  // Common logic to apply a processed frame tree and update state
+  private _apply_frame_tree(tree: Map<string, any>): void {
     let local = this.store.get("local_view_state");
-    // Set the frame tree to a new default frame tree.
-    const tree = this._default_frame_tree();
     local = local.set("frame_tree", tree);
     // Also make some id active, since existing active_id is no longer valid.
     local = local.set("active_id", tree_ops.get_some_leaf_id(tree));
@@ -868,6 +871,16 @@ export class Actions<
     }
   }
 
+  // Reset the frame tree layout to the default.
+  reset_frame_tree(): void {
+    this._apply_frame_tree(this._default_frame_tree());
+  }
+
+  // Replace the entire frame tree with a custom tree structure
+  replace_frame_tree(customTree: FrameTree): void {
+    this._apply_frame_tree(this._process_frame_tree(customTree));
+  }
+
   set_frame_tree_leafs(obj): void {
     this._tree_op("set_leafs", obj);
   }

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

@@ -21,6 +21,7 @@ import {
   undo as chatUndo,
 } from "@cocalc/frontend/frame-editors/generic/chat";
 import { get_default_font_size } from "@cocalc/frontend/frame-editors/generic/client";
+import { Actions as LatexEditorActions } from "@cocalc/frontend/frame-editors/latex-editor/actions";
 import { labels, menu } from "@cocalc/frontend/i18n";
 import { editor } from "@cocalc/frontend/i18n/common";
 import { open_new_tab as openNewTab } from "@cocalc/frontend/misc/open-browser-tab";
@@ -1310,9 +1311,12 @@ addCommands({
     children: ({ frameTypeCommands }) => frameTypeCommands(false),
   },
   reset_local_view_state: {
-    alwaysShow: true,
     icon: "layout",
     group: "frame_types",
+    isVisible: ({ props }) =>
+      // always show it, except for the LateX Editor: there we have classic_layout and new_layout
+      props.editor_actions == null ||
+      !(props.editor_actions instanceof LatexEditorActions),
     title: defineMessage({
       id: "command.generic.reset_local_view_state.title",
       defaultMessage: "Reset the layout of all frames to the default",
@@ -1329,11 +1333,21 @@ addCommands({
   new_layout: {
     icon: "layout",
     group: "frame_types",
-    title: defineMessage({
-      id: "command.generic.new_layout.title",
-      defaultMessage:
-        "Switch to a simplified layout with LaTeX source editor and multi-purpose output panel",
-    }),
+    title: ({ props }) => {
+      // Check if this is a LaTeX editor using instanceof
+      const isLatexEditor = props.editor_actions instanceof LatexEditorActions;
+      if (isLatexEditor) {
+        return defineMessage({
+          id: "command.generic.new_layout.title.latex",
+          defaultMessage:
+            "Switch to the new layout with LaTeX source editor and multi-purpose output panel",
+        });
+      }
+      return defineMessage({
+        id: "command.generic.new_layout.title.generic",
+        defaultMessage: "Switch to the new layout",
+      });
+    },
     label: defineMessage({
       id: "command.generic.new_layout.label",
       defaultMessage: "New Layout",
@@ -1343,22 +1357,65 @@ addCommands({
       defaultMessage: "New",
     }),
     isVisible: ({ props }) =>
-      typeof props.actions?._new_latex_frame_tree === "function",
+      typeof props.actions?._new_frame_tree_layout === "function",
     onClick: ({ props }) => {
       try {
-        // Check if this is a LaTeX editor and use its specific layout method
+        // Use the editor's custom layout method if available
         if (
-          props.actions._new_latex_frame_tree &&
-          props.actions.replace_frame_tree_with_custom
+          props.actions._new_frame_tree_layout &&
+          props.actions.replace_frame_tree
         ) {
-          const tree = props.actions._new_latex_frame_tree();
-          props.actions.replace_frame_tree_with_custom(tree);
+          const tree = props.actions._new_frame_tree_layout();
+          props.actions.replace_frame_tree(tree);
         }
       } catch (error) {
         console.error("Error in New Layout:", error);
       }
     },
   },
+  classic_layout: {
+    icon: "layout",
+    group: "frame_types",
+    title: ({ props }) => {
+      // Check if this is a LaTeX editor using instanceof
+      const isLatexEditor = props.editor_actions instanceof LatexEditorActions;
+      if (isLatexEditor) {
+        return defineMessage({
+          id: "command.generic.classic_layout.title.latex",
+          defaultMessage:
+            "Switch to the classic 4-panel layout with separate frames for source, table of contents, errors, PDF, and build log",
+        });
+      }
+      return defineMessage({
+        id: "command.generic.classic_layout.title.generic",
+        defaultMessage: "Switch back to the classic layout",
+      });
+    },
+    label: defineMessage({
+      id: "command.generic.classic_layout.label",
+      defaultMessage: "Classic Layout",
+    }),
+    button: defineMessage({
+      id: "command.generic.classic_layout.button",
+      defaultMessage: "Classic",
+    }),
+    isVisible: ({ props }) =>
+      typeof props.actions?._classic_frame_tree_layout === "function",
+    onClick: ({ props }) => {
+      try {
+        // Use the editor's classic layout method if available
+        if (
+          props.actions._classic_frame_tree_layout &&
+          props.actions.replace_frame_tree
+        ) {
+          const tree = props.actions._classic_frame_tree_layout();
+          props.actions.replace_frame_tree(tree);
+        }
+      } catch (error) {
+        console.error("Error in Classic Layout:", error);
+      }
+    },
+  },
   button_bar: {
     alwaysShow: true,
     icon: "tool",

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

@@ -326,7 +326,12 @@ export class ManageCommands {
     }
 
     if (typeof data === "function") {
-      return data(this);
+      const result = data(this);
+      // Check if the function returned an IntlMessage
+      if (isIntlMessage(result)) {
+        return this.intl.formatMessage(result, this.formatMessageValues);
+      }
+      return result;
     }
 
     // react-intl defineMessage object

src/packages/frontend/frame-editors/frame-tree/commands/types.ts

@@ -57,6 +57,17 @@ interface PopconfirmOpts {
   cancelText?: string | IntlMessage;
 }
 
+/**
+ * Type for command text fields (title, label, button) that can be:
+ * - A static ReactNode
+ * - A static IntlMessage for internationalization
+ * - A function that returns either ReactNode or IntlMessage based on context
+ */
+export type CommandText =
+  | ReactNode
+  | IntlMessage
+  | ((opts: ManageCommands) => ReactNode | IntlMessage);
+
 /**
  * Defines a command that can appear in frame editor menus, toolbars, and buttons.
  * For example, split frame, zoom, save, etc.
@@ -89,7 +100,7 @@ export interface Command {
   pos?: number;
 
   // Tooltip text shown when hovering over the command
-  title?: ReactNode | ((opts: ManageCommands) => ReactNode) | IntlMessage;
+  title?: CommandText;
 
   // Icon to display for this command.
   icon?: IconName | ReactNode | ((opts: ManageCommands) => ReactNode);
@@ -98,13 +109,13 @@ export interface Command {
   iconRotate?: IconRotation;
 
   // Label for button bar buttons. Separate from 'label' to allow different text in menus vs. compact button bar.
-  button?: ReactNode | ((opts: ManageCommands) => ReactNode) | IntlMessage;
+  button?: CommandText;
 
   // unclear?
   //color?: string | ((opts: ManageCommands) => string);
 
   // Primary label for the command in menus.
-  label?: ReactNode | ((opts: ManageCommands) => ReactNode) | IntlMessage;
+  label?: CommandText;
 
   /**
    * Click handler for the command. If not provided, the system falls back to

src/packages/frontend/frame-editors/frame-tree/util.ts

@@ -11,7 +11,6 @@ import { path_split, separate_file_extension } from "@cocalc/util/misc";
 import { fileURL } from "@cocalc/frontend/lib/cocalc-urls";
 import { getComputeServerId } from "@cocalc/frontend/frame-editors/generic/client";
 
-
 export function parse_path(path: string): {
   directory: string;
   base: string;

src/packages/frontend/frame-editors/latex-editor/actions.ts

@@ -613,7 +613,7 @@ export class Actions extends BaseActions<LatexEditorState> {
     return change;
   }
 
-  _raw_default_frame_tree(): FrameTree {
+  _classic_frame_tree_layout(): FrameTree {
     if (this.is_public) {
       return { type: "cm" };
     } else {
@@ -645,7 +645,7 @@ export class Actions extends BaseActions<LatexEditorState> {
     }
   }
 
-  _new_latex_frame_tree(): FrameTree {
+  _new_frame_tree_layout(): FrameTree {
     if (this.is_public) {
       return { type: "cm" };
     } else {
@@ -659,35 +659,9 @@ export class Actions extends BaseActions<LatexEditorState> {
     }
   }
 
-  // Method to replace the entire frame tree with a custom tree structure
-  replace_frame_tree_with_custom(customTree: FrameTree): void {
-    let local = this.store.get("local_view_state");
-
-    // Process the custom tree: assign IDs and ensure uniqueness
-    let frame_tree = fromJS(customTree) as Map<string, any>;
-    frame_tree = tree_ops.assign_ids(frame_tree);
-    frame_tree = tree_ops.ensure_ids_are_unique(frame_tree);
-
-    // Set the frame tree to the custom tree
-    local = local.set("frame_tree", frame_tree);
-
-    // Also make some id active, since existing active_id is no longer valid
-    local = local.set("active_id", tree_ops.get_some_leaf_id(frame_tree));
-
-    // Update state, so visible to UI
-    this.setState({ local_view_state: local });
-
-    // And save this new state to localStorage
-    this.save_local_view_state();
-
-    // Emit new-frame events for all leaf nodes
-    for (const id in this._get_leaf_ids()) {
-      const leaf = this._get_frame_node(id);
-      if (leaf != null) {
-        const type = leaf.get("type");
-        this.store.emit("new-frame", { id, type });
-      }
-    }
+  // Override to make new layout the default
+  _raw_default_frame_tree(): FrameTree {
+    return this._new_frame_tree_layout();
   }
 
   check_for_fatal_error(): void {