Merge pull request #35056 from overleaf/mj-command-palette-improvements

[web] Command palette improvements

GitOrigin-RevId: 3d6e11697ed4726b7ecada1744d24a15291ad646

services/web/frontend/js/features/ide-react/components/toolbar/change-layout-button.tsx

@@ -8,6 +8,10 @@ import {
 import ChangeLayoutOptions from './change-layout-options'
 import MaterialIcon from '@/shared/components/material-icon'
 import OLTooltip from '@/shared/components/ol/ol-tooltip'
+import { useCommandProvider } from '../../hooks/use-command-provider'
+import { useFeatureFlag } from '@/shared/context/split-test-context'
+import { useEditorAnalytics } from '@/shared/hooks/use-editor-analytics'
+import { useLayoutContext } from '@/shared/context/layout-context'
 
 export default function ChangeLayoutButton() {
   const { t } = useTranslation()
@@ -17,6 +21,71 @@ export default function ChangeLayoutButton() {
     'ide-redesign-toolbar-button-icon'
   )
 
+  const {
+    detachIsLinked,
+    detachRole,
+    handleChangeLayout,
+    handleDetach,
+    focusMode,
+    setFocusMode,
+  } = useLayoutContext()
+
+  const { sendEvent } = useEditorAnalytics()
+  const focusModeEnabled = useFeatureFlag('focus-mode')
+
+  const detachable = 'BroadcastChannel' in window
+
+  const waitingForDetachedLink = !detachIsLinked && detachRole === 'detacher'
+
+  useCommandProvider(
+    () => [
+      {
+        id: 'change-layout-side-by-side',
+        handler: () => handleChangeLayout('sideBySide'),
+        label: t('split_view'),
+      },
+      {
+        id: 'change-layout-editor-only',
+        handler: () => handleChangeLayout('flat', 'editor'),
+        label: t('editor_only'),
+      },
+      {
+        id: 'change-layout-pdf-only',
+        handler: () => handleChangeLayout('flat', 'pdf'),
+        label: t('pdf_only'),
+      },
+      {
+        id: 'change-layout-detached-pdf',
+        handler: () => handleDetach(),
+        disabled: !detachable || waitingForDetachedLink,
+        label: t('pdf_in_different_tab'),
+      },
+      ...(focusModeEnabled
+        ? [
+            {
+              id: 'change-layout-focus-mode',
+              handler: () => {
+                setFocusMode(!focusMode)
+                sendEvent('focus-mode-toggle', { focusMode: !focusMode })
+              },
+              label: t('toggle_focus_mode'),
+            },
+          ]
+        : []),
+    ],
+    [
+      handleChangeLayout,
+      t,
+      detachable,
+      handleDetach,
+      waitingForDetachedLink,
+      focusModeEnabled,
+      focusMode,
+      setFocusMode,
+      sendEvent,
+    ]
+  )
+
   return (
     <div className="ide-redesign-toolbar-button-container">
       <OLDropdown className="toolbar-item layout-dropdown" align="end">