frontend/latex/output: tweaks/i18n for pdf control bar

Author: haraldschilly

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

@@ -33,6 +33,15 @@ import { SEARCH_COMMANDS } from "./const";
 // Predefined zoom percentages for consistent zoom options across the application
 export const ZOOM_PERCENTAGES = [50, 85, 100, 115, 125, 150, 200, 400] as const;
 
+// Build on save icon constants - exported for consistent iconography across components
+export const BUILD_ON_SAVE_ICON_ENABLED = "delivered-procedure-outlined";
+export const BUILD_ON_SAVE_ICON_DISABLED = "stop-filled";
+export const BUILD_ON_SAVE_LABEL = defineMessage({
+  id: "command.generic.build_on_save.label",
+  defaultMessage:
+    "Build on Save {enabled, select, true {(Enabled)} other {(Disabled)}}",
+});
+
 // Export zoom-related messages for use in other components
 export const ZOOM_MESSAGES = {
   zoomPageWidth: {
@@ -655,26 +664,19 @@ addCommands({
   build_on_save: {
     group: "build",
     label: ({ intl }) =>
-      intl.formatMessage(
-        {
-          id: "command.generic.build_on_save.label",
-          defaultMessage:
-            "Build on Save {enabled, select, true {(Enabled)} other {(Disabled)}}",
-        },
-        {
-          enabled: redux
-            .getStore("account")
-            .getIn(["editor_settings", "build_on_save"]),
-        },
-      ),
+      intl.formatMessage(BUILD_ON_SAVE_LABEL, {
+        enabled: redux
+          .getStore("account")
+          .getIn(["editor_settings", "build_on_save"]),
+      }),
     title: defineMessage({
       id: "command.generic.build_on_save.title",
       defaultMessage: "Toggle automatic build on file save.",
     }),
     icon: () =>
       redux.getStore("account").getIn(["editor_settings", "build_on_save"])
-        ? "delivered-procedure-outlined"
-        : "stop-filled",
+        ? BUILD_ON_SAVE_ICON_ENABLED
+        : BUILD_ON_SAVE_ICON_DISABLED,
   },
   force_build: {
     group: "build",

src/packages/frontend/frame-editors/latex-editor/pdf-controls.tsx renamed to src/packages/frontend/frame-editors/latex-editor/output-pdf-control.tsx

@@ -15,12 +15,15 @@ import { defineMessage, useIntl } from "react-intl";
 
 import { set_account_table } from "@cocalc/frontend/account/util";
 import { useRedux } from "@cocalc/frontend/app-framework";
-import { Icon } from "@cocalc/frontend/components";
+import { HelpIcon, Icon } from "@cocalc/frontend/components";
 import {
+  BUILD_ON_SAVE_ICON_DISABLED,
+  BUILD_ON_SAVE_ICON_ENABLED,
+  BUILD_ON_SAVE_LABEL,
   ZOOM_MESSAGES,
   ZOOM_PERCENTAGES,
 } from "@cocalc/frontend/frame-editors/frame-tree/commands/generic-commands";
-import { labels } from "@cocalc/frontend/i18n";
+import { editor, labels } from "@cocalc/frontend/i18n";
 import { COLORS } from "@cocalc/util/theme";
 import { Actions } from "./actions";
 
@@ -43,14 +46,38 @@ const CONTROL_PAGE_STYLE = {
   color: COLORS.GRAY_M,
 } as const;
 
-const autoSyncTooltipMessage = defineMessage({
+export const AUTO_SYNC_TOOLTIP_MSG = defineMessage({
   id: "editor.latex.pdf_controls.auto_sync.tooltip",
   defaultMessage:
     "Auto-sync between source and PDF: cursor moves follow PDF scrolling, PDF scrolls to cursor position",
   description:
     "Tooltip explaining bidirectional auto-sync functionality in LaTeX PDF controls",
 });
 
+export const SYNC_HELP_MSG = {
+  title: defineMessage({
+    id: "editor.latex.pdf_controls.sync_help.title",
+    defaultMessage: "LaTeX Sync Help",
+    description: "Title for LaTeX sync help popup",
+  }),
+  content: defineMessage({
+    id: "editor.latex.pdf_controls.sync_help.content",
+    defaultMessage: `<p><strong>Manual Mode:</strong></p>
+<ul>
+  <li>Use ALT+Return in source document to jump to corresponding PDF location</li>
+  <li>Double-click in PDF for inverse search to source</li>
+</ul>
+<p><strong>Automatic Mode:</strong></p>
+<ul>
+  <li>Syncs automatically from cursor changes in source to PDF</li>
+  <li>Moving the PDF viewport moves the cursor in source</li>
+</ul>
+<p>This functionality uses SyncTeX to coordinate between LaTeX source and PDF output.</p>`,
+    description:
+      "Complete explanation of LaTeX sync functionality including manual and automatic modes",
+  }),
+};
+
 interface PDFControlsProps {
   actions: Actions;
   id: string;
@@ -62,6 +89,7 @@ interface PDFControlsProps {
     y: number;
   } | null;
   onClearViewportInfo?: () => void;
+  pageDimensions?: { width: number; height: number }[];
 }
 
 export function PDFControls({
@@ -71,6 +99,7 @@ export function PDFControls({
   currentPage = 1,
   viewportInfo,
   onClearViewportInfo,
+  pageDimensions = [],
 }: PDFControlsProps) {
   const intl = useIntl();
 
@@ -91,6 +120,7 @@ export function PDFControls({
   const storedAutoSyncEnabled =
     useRedux([actions.name, "local_view_state", id, "autoSyncEnabled"]) ??
     false; // Default to false
+
   const [localAutoSyncEnabled, setLocalAutoSyncEnabled] = useState(
     storedAutoSyncEnabled,
   );
@@ -122,6 +152,23 @@ export function PDFControls({
     [actions, autoSyncInProgress, onClearViewportInfo],
   );
 
+  // Handle manual sync from middle of current page
+  const handleManualSync = useCallback(() => {
+    if (
+      pageDimensions.length === 0 ||
+      storedCurrentPage < 1 ||
+      storedCurrentPage > pageDimensions.length
+    ) {
+      return; // No page dimensions available or invalid page
+    }
+    const pageDim = pageDimensions[storedCurrentPage - 1]; // pages are 1-indexed
+    handleViewportSync(
+      storedCurrentPage,
+      pageDim.width / 2,
+      pageDim.height / 2,
+    );
+  }, [handleViewportSync, storedCurrentPage, pageDimensions]);
+
   // Sync state with stored values when they change
   useEffect(() => {
     setLocalAutoSyncEnabled(storedAutoSyncEnabled);
@@ -267,8 +314,16 @@ export function PDFControls({
       key: "auto-build",
       label: (
         <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-          <Icon name={buildOnSave ? "check-square" : "square"} />
-          Auto Build
+          <Icon
+            name={
+              buildOnSave
+                ? BUILD_ON_SAVE_ICON_ENABLED
+                : BUILD_ON_SAVE_ICON_DISABLED
+            }
+          />
+          {intl.formatMessage(BUILD_ON_SAVE_LABEL, {
+            enabled: buildOnSave,
+          })}
         </div>
       ),
       onClick: toggleBuildOnSave,
@@ -279,7 +334,15 @@ export function PDFControls({
     {
       key: "custom-zoom",
       label: (
-        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+        <div
+          style={{ display: "flex", alignItems: "center", gap: "8px" }}
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+          onMouseDown={(e) => {
+            e.stopPropagation();
+          }}
+        >
           <InputNumber
             size="small"
             style={{ width: "80px" }}
@@ -337,8 +400,8 @@ export function PDFControls({
   return (
     <div style={CONTROL_STYLE}>
       {/* Left side controls */}
-      <div style={{ display: "flex", gap: "10px", alignItems: "center" }}>
-        {/* Build Controls */}
+      {/* Build Controls */}
+      <div style={{ display: "flex", alignItems: "center", gap: "5px" }}>
         <Dropdown.Button
           type="primary"
           size="small"
@@ -348,24 +411,40 @@ export function PDFControls({
           onClick={handleBuild}
         >
           <Icon name="play-circle" />
-          Build
+          {intl.formatMessage(editor.build_control_and_log_title_short)}
         </Dropdown.Button>
+      </div>
 
-        {/* Auto-Sync Control */}
-        <Tooltip title={intl.formatMessage(autoSyncTooltipMessage)}>
-          <div style={{ display: "flex", alignItems: "center", gap: "6px" }}>
-            <Switch
-              size="small"
-              checked={localAutoSyncEnabled}
-              onChange={handleAutoSyncChange}
-            />
-            <Icon name="exchange" />
-            <span style={{ fontSize: "13px" }}>Sync</span>
-          </div>
+      {/* Auto-Sync Control */}
+      <div style={{ display: "flex", alignItems: "center", gap: "5px" }}>
+        <Icon name="exchange" />
+        <Tooltip title={intl.formatMessage(AUTO_SYNC_TOOLTIP_MSG)}>
+          <Switch
+            size="small"
+            checked={localAutoSyncEnabled}
+            onChange={handleAutoSyncChange}
+            checkedChildren={intl.formatMessage(labels.on)}
+            unCheckedChildren={intl.formatMessage(labels.off)}
+          />
         </Tooltip>
+        <Button
+          type="text"
+          size="small"
+          style={{ fontSize: "13px", padding: "0 4px", height: "auto" }}
+          onClick={handleManualSync}
+          disabled={pageDimensions.length === 0}
+        >
+          Sync
+        </Button>
+        <HelpIcon
+          title={intl.formatMessage(SYNC_HELP_MSG.title)}
+          placement="bottomLeft"
+        >
+          {intl.formatMessage(SYNC_HELP_MSG.content)}
+        </HelpIcon>
       </div>
 
-      {/* Right side page navigation */}
+      {/* middle: page navigation */}
       {totalPages > 0 && (
         <div style={CONTROL_PAGE_STYLE}>
           <InputNumber

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

@@ -43,7 +43,7 @@ import { Actions } from "./actions";
 import { Build } from "./build";
 import { ErrorsAndWarnings } from "./errors-and-warnings";
 import { use_build_logs } from "./hooks";
-import { PDFControls } from "./pdf-controls";
+import { PDFControls } from "./output-pdf-control";
 import { PDFJS } from "./pdfjs";
 import { BuildLogs } from "./types";
 import { useFileSummaries } from "./summarize-tex";
@@ -111,6 +111,9 @@ export function Output(props: OutputProps) {
     y: number;
   } | null>(null);
 
+  // Track page dimensions for manual sync
+  const [pageDimensions, setPageDimensions] = useState<{ width: number; height: number }[]>([]);
+
   // Callback to clear viewport info after successful sync
   const clearViewportInfo = useCallback(() => {
     setViewportInfo(null);
@@ -271,6 +274,7 @@ export function Output(props: OutputProps) {
             currentPage={currentPage}
             viewportInfo={viewportInfo}
             onClearViewportInfo={clearViewportInfo}
+            pageDimensions={pageDimensions}
           />
           <PDFJS
             id={id}
@@ -316,6 +320,7 @@ export function Output(props: OutputProps) {
                 }, 500); // Wait longer to ensure scrolling has stabilized
               }
             }}
+            onPageDimensions={setPageDimensions}
           />
         </div>
       ),

src/packages/frontend/frame-editors/latex-editor/pdfjs.tsx

@@ -51,6 +51,7 @@ interface PDFJSProps {
   initialPage?: number;
   onPageInfo?: (currentPage: number, totalPages: number) => void;
   onViewportInfo?: (page: number, x: number, y: number) => void;
+  onPageDimensions?: (pageDimensions: { width: number; height: number }[]) => void;
   zoom?: number; // Optional zoom override (when provided, overrides font_size-based zoom)
   onZoom?: (data: Data) => void; // Called when zoom changes via pinch/wheel gestures
 }
@@ -70,6 +71,7 @@ export function PDFJS({
   initialPage,
   onPageInfo,
   onViewportInfo,
+  onPageDimensions,
   zoom,
   onZoom,
 }: PDFJSProps) {
@@ -284,12 +286,21 @@ export function PDFJS({
         const page = doc.getPage(n) as unknown as Promise<PDFPageProxy>;
         v.push(page);
       }
-      const pages: PDFPageProxy[] = await Promise.all(v);
-      if (!isMounted.current) return;
-      setDoc(doc);
-      setLoaded(true);
-      setPages(pages);
-      setMissing(false);
+       const pages: PDFPageProxy[] = await Promise.all(v);
+       if (!isMounted.current) return;
+       setDoc(doc);
+       setLoaded(true);
+       setPages(pages);
+       setMissing(false);
+
+       // Extract page dimensions and call callback
+       if (onPageDimensions) {
+         const pageDimensions = pages.map(page => {
+           const viewport = page.getViewport({ scale: 1.0 });
+           return { width: viewport.width, height: viewport.height };
+         });
+         onPageDimensions(pageDimensions);
+       }
 
       // documents often don't have pageLabels, but when they do, they are
       // good to show (e.g., in a book the content at the beginning might

src/packages/frontend/i18n/bin/delete.sh

@@ -22,9 +22,8 @@ echo "Deleting translation keys from SimpleLocalize..."
 
 # Loop through all provided keys
 for key in "$@"; do
-    echo
-    echo "Deleting '$key':"
     curl \
+        -s \
         --location \
         --request DELETE "https://api.simplelocalize.io/api/v1/translation-keys?key=$key" \
         --header "X-SimpleLocalize-Token: $SIMPLELOCALIZE_KEY"

src/packages/frontend/i18n/common.ts

@@ -40,8 +40,15 @@ export const labels = defineMessages({
   },
   on: {
     id: "labels.on",
-    defaultMessage: "on",
-    description: "single word, something 'on' something else",
+    defaultMessage: "On",
+    description:
+      "short single word, just a few characters long, for a label. Should mean 'enabled'.",
+  },
+  off: {
+    id: "labels.off",
+    defaultMessage: "Off",
+    description:
+      "short single word, just a few characters long, for a label. Should mean 'disabled'.",
   },
   yes: {
     id: "labels.yes",

src/packages/frontend/i18n/trans/ar_EG.json

@@ -268,6 +268,9 @@
   "command.generic.new_frame_of_type.button": "الإطار",
   "command.generic.new_frame_of_type.label": "إطار جديد",
   "command.generic.new_frame_of_type.title": "إنشاء إطار جديد مع محرر من النوع المحدد",
+  "command.generic.new_layout.button": "جديد",
+  "command.generic.new_layout.label": "تخطيط جديد",
+  "command.generic.new_layout.title": "التحويل إلى تخطيط مبسط مع محرر مصدر LaTeX ولوحة إخراج متعددة الأغراض",
   "command.generic.open_recent.label": "افتح الملفات الأخيرة",
   "command.generic.open_recent.title": "افتح ملفًا تم فتحه مؤخرًا",
   "command.generic.open.label": "افتح الملف",
@@ -583,6 +586,8 @@
   "editor.latex.command.print.label": "طباعة مصدر LaTeX",
   "editor.latex.command.print.tooltip": "اطبع الشيفرة المصدرية لهذا المستند. استخدم الطباعة من إطار معاينة PDF لطباعة المستند المُعرض.",
   "editor.latex.pdf_controls.auto_sync.tooltip": "المزامنة التلقائية بين المصدر وPDF: يتحرك المؤشر مع تمرير PDF، يتم تمرير PDF إلى موضع المؤشر",
+  "editor.latex.pdf_controls.sync_help.content": "<p><strong>الوضع اليدوي:</strong></p> <ul> <li>استخدم ALT+Return في المستند المصدر للقفز إلى الموقع المقابل في PDF</li> <li>انقر نقرًا مزدوجًا في PDF للبحث العكسي إلى المصدر</li> </ul> <p><strong>الوضع التلقائي:</strong></p> <ul> <li>يقوم بالمزامنة تلقائيًا من تغييرات المؤشر في المصدر إلى PDF</li> <li>تحريك نافذة عرض PDF يحرك المؤشر في المصدر</li> </ul> <p>تستخدم هذه الوظيفة SyncTeX للتنسيق بين مصدر LaTeX وإخراج PDF.</p>",
+  "editor.latex.pdf_controls.sync_help.title": "مساعدة مزامنة LaTeX",
   "editor.latex.pdf_embed.title": "PDF - أصلي",
   "editor.latex.pdf_embed.title.short": "PDF (native)",
   "editor.latex.source_code.name": "مصدر كود LaTeX",
@@ -1021,7 +1026,8 @@
   "labels.no_description": "لا يوجد وصف",
   "labels.not_implemented": "لم يتم التنفيذ",
   "labels.notifications": "الإشعارات",
-  "labels.on": "على",
+  "labels.off": "إيقاف",
+  "labels.on": "تشغيل",
   "labels.open": "افتح",
   "labels.other": "أخرى",
   "labels.overview": "نظرة عامة",