frontend/latex/output/build: add compact build button in front of the build command, roughly same location as in the PDF preview

Author: haraldschilly

src/packages/frontend/cspell.json

@@ -46,6 +46,7 @@
     "pythontex",
     "rclass",
     "rereturn",
+    "rescan",
     "respawns",
     "revealjs",
     "Rmarkdown",

src/packages/frontend/frame-editors/latex-editor/build-command.tsx

@@ -16,6 +16,7 @@ import { React } from "@cocalc/frontend/app-framework";
 import { Icon, Loading, Paragraph } from "@cocalc/frontend/components";
 import { split } from "@cocalc/util/misc";
 import { Actions } from "./actions";
+import { BuildControls } from "./output-control-build";
 import {
   Engine,
   ENGINES,
@@ -166,6 +167,7 @@ export const BuildCommand: React.FC<Props> = React.memo((props: Props) => {
         onBlur={() => {
           handle_build_change();
         }}
+        addonBefore={<BuildControls actions={actions} narrow={true} />}
       />
     );
   }
@@ -272,7 +274,14 @@ export const BuildCommand: React.FC<Props> = React.memo((props: Props) => {
             <Icon name="reload" /> Rescan
           </a>
         </h4>
-        <pre style={{ whiteSpace: "pre-line" }}>{build_command}</pre>
+        <div style={{ display: "flex", gap: "10px", alignItems: "center" }}>
+          <div>
+            <BuildControls actions={actions} narrow={true} />
+          </div>
+          <pre style={{ whiteSpace: "pre-line", flex: 1, margin: 0 }}>
+            {build_command}
+          </pre>
+        </div>
         {renderHardcodedInfo()}
       </>
     );

src/packages/frontend/frame-editors/latex-editor/output-control-build.tsx

@@ -8,6 +8,8 @@ Build Controls Component for LaTeX Editor Output Panel
 Provides build, force build, clean, download, and print controls
 */
 
+import type { SizeType } from "antd/es/config-provider/SizeContext";
+
 import type { MenuProps } from "antd";
 import { Dropdown } from "antd";
 import { useIntl } from "react-intl";
@@ -30,11 +32,17 @@ import { Actions } from "./actions";
 
 interface BuildControlsProps {
   actions: Actions;
-  id: string;
+  id?: string; // must be set if used for the PDF preview, used by the print command
   narrow?: boolean;
+  size?: SizeType;
 }
 
-export function BuildControls({ actions, id, narrow }: BuildControlsProps) {
+export function BuildControls({
+  actions,
+  id,
+  narrow,
+  size = "small",
+}: BuildControlsProps) {
   const intl = useIntl();
 
   // Get build on save setting from account store
@@ -100,36 +108,39 @@ export function BuildControls({ actions, id, narrow }: BuildControlsProps) {
       icon: <Icon name="cloud-download" />,
       onClick: () => actions.download_pdf(),
     },
-    {
+  ];
+
+  if (id != null) {
+    buildMenuItems.push({
       key: "print",
       label: intl.formatMessage(COMMANDS.print.label as IntlMessage),
       icon: <Icon name="print" />,
       onClick: () => actions.print(id),
-    },
-    {
-      type: "divider",
-    },
-    {
-      key: "auto-build",
-      icon: (
-        <Icon
-          name={
-            buildOnSave
-              ? BUILD_ON_SAVE_ICON_ENABLED
-              : BUILD_ON_SAVE_ICON_DISABLED
-          }
-        />
-      ),
-      label: intl.formatMessage(BUILD_ON_SAVE_LABEL, { enabled: buildOnSave }),
-      onClick: toggleBuildOnSave,
-    },
-  ];
+    });
+  }
+
+  buildMenuItems.push({
+    type: "divider",
+  });
+
+  buildMenuItems.push({
+    key: "auto-build",
+    icon: (
+      <Icon
+        name={
+          buildOnSave ? BUILD_ON_SAVE_ICON_ENABLED : BUILD_ON_SAVE_ICON_DISABLED
+        }
+      />
+    ),
+    label: intl.formatMessage(BUILD_ON_SAVE_LABEL, { enabled: buildOnSave }),
+    onClick: toggleBuildOnSave,
+  });
 
   return (
     <>
       <Dropdown.Button
         type="primary"
-        size="small"
+        size={size}
         icon={<Icon name="caret-down" />}
         menu={{ items: buildMenuItems }}
         trigger={["click"]}
@@ -141,7 +152,7 @@ export function BuildControls({ actions, id, narrow }: BuildControlsProps) {
       </Dropdown.Button>
 
       {/* Dark mode toggle - only shown when global dark mode is enabled */}
-      {isDarkMode && (
+      {isDarkMode && id != null && (
         <BSButton
           bsSize="xsmall"
           active={pdfDarkModeDisabled}