Merge pull request #24678 from overleaf/mj-ide-view-help-menu

[web] Add remaining options to menu bar

GitOrigin-RevId: cf6cc6c2aaf450e362588c514e1a87e923a611b4

services/web/frontend/extracted-translations.json

@@ -1170,6 +1170,7 @@
   "pdf_in_separate_tab": "",
   "pdf_only": "",
   "pdf_only_hide_editor": "",
+  "pdf_preview": "",
   "pdf_preview_error": "",
   "pdf_rendering_error": "",
   "pdf_unavailable_for_download": "",
@@ -1512,6 +1513,7 @@
   "shortcut_to_open_advanced_reference_search": "",
   "show_all_projects": "",
   "show_document_preamble": "",
+  "show_equation_preview": "",
   "show_file_tree": "",
   "show_hotkeys": "",
   "show_in_code": "",

services/web/frontend/js/features/ide-redesign/components/toolbar/command-dropdown.tsx

@@ -21,7 +21,7 @@ type GroupStructure<T> = {
   title: string
   children: Array<Entry<T>>
 }
-type MenuSectionStructure<T> = {
+export type MenuSectionStructure<T = CommandId> = {
   title?: string
   id: string
   children: Array<Entry<T>>
@@ -62,6 +62,26 @@ const CommandDropdown = ({
   )
 }
 
+export const CommandSection = ({
+  section: sectionStructure,
+}: {
+  section: MenuSectionStructure<CommandId>
+}) => {
+  const { registry } = useCommandRegistry()
+  const section = populateSectionOrGroup(sectionStructure, registry)
+  if (section.children.length === 0) {
+    return null
+  }
+  return (
+    <>
+      {section.title && <DropdownHeader>{section.title}</DropdownHeader>}
+      {section.children.map(child => (
+        <CommandDropdownChild item={child} key={child.id} />
+      ))}
+    </>
+  )
+}
+
 const CommandDropdownChild = ({ item }: { item: Entry<TaggedCommand> }) => {
   const onClickHandler = useCallback(() => {
     if (isTaggedCommand(item)) {

services/web/frontend/js/features/ide-redesign/components/toolbar/menu-bar.tsx

@@ -14,7 +14,13 @@ import MaterialIcon from '@/shared/components/material-icon'
 import OLSpinner from '@/features/ui/components/ol/ol-spinner'
 import { useLayoutContext } from '@/shared/context/layout-context'
 import { useCommandProvider } from '@/features/ide-react/hooks/use-command-provider'
-import CommandDropdown, { MenuStructure } from './command-dropdown'
+import CommandDropdown, {
+  CommandSection,
+  MenuSectionStructure,
+  MenuStructure,
+} from './command-dropdown'
+import { useUserSettingsContext } from '@/shared/context/user-settings-context'
+import { useRailContext } from '../../contexts/rail-context'
 
 export const ToolbarMenuBar = () => {
   const { t } = useTranslation()
@@ -132,6 +138,42 @@ export const ToolbarMenuBar = () => {
     [t]
   )
 
+  const pdfControlsMenuSectionStructure: MenuSectionStructure = useMemo(
+    () => ({
+      title: t('pdf_preview'),
+      id: 'pdf-controls',
+      children: [
+        'view-pdf-presentation-mode',
+        'view-pdf-zoom-in',
+        'view-pdf-zoom-out',
+        'view-pdf-fit-width',
+        'view-pdf-fit-height',
+      ],
+    }),
+    [t]
+  )
+
+  const {
+    userSettings: { mathPreview },
+    setUserSettings,
+  } = useUserSettingsContext()
+
+  const toggleMathPreview = useCallback(() => {
+    setUserSettings(prev => {
+      return {
+        ...prev,
+        mathPreview: !prev.mathPreview,
+      }
+    })
+  }, [setUserSettings])
+
+  const { setActiveModal } = useRailContext()
+  const openKeyboardShortcutsModal = useCallback(() => {
+    setActiveModal('keyboard-shortcuts')
+  }, [setActiveModal])
+  const openContactUsModal = useCallback(() => {
+    setActiveModal('contact-us')
+  }, [setActiveModal])
   return (
     <MenuBar
       className="ide-redesign-toolbar-menu-bar"
@@ -151,14 +193,12 @@ export const ToolbarMenuBar = () => {
       >
         <ChangeLayoutOptions />
         <DropdownHeader>Editor settings</DropdownHeader>
-        <MenuBarOption title="Show breadcrumbs" />
-        <MenuBarOption title="Show equation preview" />
-        <DropdownHeader>PDF preview</DropdownHeader>
-        <MenuBarOption title="Presentation mode" />
-        <MenuBarOption title="Zoom in" />
-        <MenuBarOption title="Zoom out" />
-        <MenuBarOption title="Fit to width" />
-        <MenuBarOption title="Fit to height" />
+        <MenuBarOption
+          title={t('show_equation_preview')}
+          trailingIcon={mathPreview ? 'check' : undefined}
+          onClick={toggleMathPreview}
+        />
+        <CommandSection section={pdfControlsMenuSectionStructure} />
       </MenuBarDropdown>
       <CommandDropdown
         menu={formatMenuStructure}
@@ -170,11 +210,24 @@ export const ToolbarMenuBar = () => {
         id="help"
         className="ide-redesign-toolbar-dropdown-toggle-subdued ide-redesign-toolbar-button-subdued"
       >
-        <MenuBarOption title="Keyboard shortcuts" />
-        <MenuBarOption title="Documentation" />
+        <MenuBarOption
+          title={t('keyboard_shortcuts')}
+          onClick={openKeyboardShortcutsModal}
+        />
+        <MenuBarOption
+          title={t('documentation')}
+          href="/learn"
+          target="_blank"
+          rel="noopener noreferrer"
+        />
         <DropdownDivider />
-        <MenuBarOption title="Contact us" />
-        <MenuBarOption title="Give feedback" />
+        <MenuBarOption title={t('contact_us')} onClick={openContactUsModal} />
+        <MenuBarOption
+          title={t('give_feedback')}
+          href="https://forms.gle/soyVStc5qDx9na1Z6"
+          target="_blank"
+          rel="noopener noreferrer"
+        />
         <DropdownDivider />
         <SwitchToOldEditorMenuBarOption />
         <MenuBarOption

services/web/frontend/js/features/pdf-preview/components/pdf-viewer-controls-toolbar.tsx

@@ -6,6 +6,8 @@ import PdfZoomDropdown from './pdf-zoom-dropdown'
 import { useResizeObserver } from '@/shared/hooks/use-resize-observer'
 import PdfViewerControlsMenuButton from './pdf-viewer-controls-menu-button'
 import { useDetachCompileContext as useCompileContext } from '../../../shared/context/detach-compile-context'
+import { useCommandProvider } from '@/features/ide-react/hooks/use-command-provider'
+import { useTranslation } from 'react-i18next'
 
 type PdfViewerControlsToolbarProps = {
   requestPresentationMode: () => void
@@ -26,6 +28,7 @@ function PdfViewerControlsToolbar({
   totalPages,
   pdfContainer,
 }: PdfViewerControlsToolbarProps) {
+  const { t } = useTranslation()
   const { showLogs } = useCompileContext()
 
   const toolbarControlsElement = document.querySelector('#toolbar-pdf-controls')
@@ -41,6 +44,37 @@ function PdfViewerControlsToolbar({
 
   const { elementRef: pdfControlsRef } = useResizeObserver(handleResize)
 
+  useCommandProvider(
+    () => [
+      {
+        id: 'view-pdf-presentation-mode',
+        label: t('presentation_mode'),
+        handler: requestPresentationMode,
+      },
+      {
+        id: 'view-pdf-zoom-in',
+        label: t('zoom_in'),
+        handler: () => setZoom('zoom-in'),
+      },
+      {
+        id: 'view-pdf-zoom-out',
+        label: t('zoom_out'),
+        handler: () => setZoom('zoom-out'),
+      },
+      {
+        id: 'view-pdf-fit-width',
+        label: t('fit_to_width'),
+        handler: () => setZoom('page-width'),
+      },
+      {
+        id: 'view-pdf-fit-height',
+        label: t('fit_to_height'),
+        handler: () => setZoom('page-height'),
+      },
+    ],
+    [t, requestPresentationMode, setZoom]
+  )
+
   if (!toolbarControlsElement) {
     return null
   }

services/web/frontend/js/shared/components/menu-bar/menu-bar-option.tsx

@@ -9,6 +9,8 @@ type MenuBarOptionProps = {
   disabled?: boolean
   trailingIcon?: ReactNode
   href?: string
+  target?: string
+  rel?: string
 }
 
 export const MenuBarOption = ({
@@ -17,6 +19,8 @@ export const MenuBarOption = ({
   href,
   disabled,
   trailingIcon,
+  target,
+  rel,
 }: MenuBarOptionProps) => {
   const { setSelected } = useNestableDropdown()
   return (
@@ -27,6 +31,8 @@ export const MenuBarOption = ({
         disabled={disabled}
         trailingIcon={trailingIcon}
         href={href}
+        rel={rel}
+        target={target}
       >
         {title}
       </DropdownItem>

services/web/locales/en.json

@@ -1559,6 +1559,7 @@
   "pdf_in_separate_tab": "PDF in separate tab",
   "pdf_only": "PDF only",
   "pdf_only_hide_editor": "PDF only <0>(hide editor)</0>",
+  "pdf_preview": "PDF preview",
   "pdf_preview_error": "There was a problem displaying the compilation results for this project.",
   "pdf_rendering_error": "PDF Rendering Error",
   "pdf_unavailable_for_download": "PDF unavailable for download",
@@ -1984,6 +1985,7 @@
   "shortcut_to_open_advanced_reference_search": "(<strong>__ctrlSpace__</strong> or <strong>__altSpace__</strong>)",
   "show_all_projects": "Show all projects",
   "show_document_preamble": "Show document preamble",
+  "show_equation_preview": "Show equation preview",
   "show_file_tree": "Show file tree",
   "show_hotkeys": "Show Hotkeys",
   "show_in_code": "Show in code",