[WEB] Move Review Toggle into the toolbar (#34066)

* move Review Toggle into the toolbar

* cleaning up and adding a comment

* adding the cursor styling

* adding isolation on writefull toolbar to adjust z-index of writefull toolbar

* fixing the dark mode colours for review dropdown trigger

* Fix review mode switcher dark mode styles

GitOrigin-RevId: 36847e0debdc4dce5f96492261d25e7cc46b2e96

services/web/frontend/js/features/review-panel/components/review-mode-switcher.tsx

@@ -33,86 +33,88 @@ function ReviewModeSwitcher() {
   const view = useCodeMirrorViewContext()
 
   return (
-    <div className="review-mode-switcher-container">
-      <Dropdown className="review-mode-switcher" align="end">
-        <DropdownToggle
-          as={ModeSwitcherToggleButton}
-          id="review-mode-switcher"
-        />
-        <DropdownMenu flip={false}>
-          <OLDropdownMenuItem
-            disabled={!write}
-            onClick={() => {
-              if (mode === 'edit') {
-                view.focus()
-                return
-              }
+    <Dropdown className="review-mode-switcher" align="end">
+      <DropdownToggle as={ModeSwitcherToggleButton} id="review-mode-switcher" />
+      <DropdownMenu
+        flip={false}
+        popperConfig={{ strategy: 'fixed' }}
+        // renderOnMount ensures the menu is in the DOM on mount so Popper.js
+        // can calculate its position correctly when using strategy: 'fixed'
+        // inside the toolbar's stacking context
+        renderOnMount
+      >
+        <OLDropdownMenuItem
+          disabled={!write}
+          onClick={() => {
+            if (mode === 'edit') {
+              view.focus()
+              return
+            }
+            sendMB('editing-mode-change', {
+              role: permissionsLevel,
+              previousMode: mode,
+              newMode: 'edit',
+            })
+            if (user?.id) {
+              saveTrackChangesForCurrentUser(false)
+            } else {
+              saveTrackChanges({ on_for_guests: false })
+            }
+            view.focus()
+          }}
+          description={t('edit_content_directly')}
+          leadingIcon="edit"
+          active={write && mode === 'edit'}
+        >
+          {t('editing')}
+        </OLDropdownMenuItem>
+        <OLDropdownMenuItem
+          disabled={permissionsLevel === 'readOnly'}
+          onClick={() => {
+            if (mode === 'review') {
+              view.focus()
+              return
+            }
+            if (!features.trackChanges) {
+              setUpgradeTrackChangesModal({
+                show: true,
+                location: 'review-switcher',
+              })
+            } else {
               sendMB('editing-mode-change', {
                 role: permissionsLevel,
                 previousMode: mode,
-                newMode: 'edit',
+                newMode: 'review',
               })
               if (user?.id) {
-                saveTrackChangesForCurrentUser(false)
+                saveTrackChangesForCurrentUser(true)
               } else {
-                saveTrackChanges({ on_for_guests: false })
+                saveTrackChanges({ on_for_guests: true })
               }
               view.focus()
-            }}
-            description={t('edit_content_directly')}
-            leadingIcon="edit"
-            active={write && mode === 'edit'}
-          >
-            {t('editing')}
-          </OLDropdownMenuItem>
-          <OLDropdownMenuItem
-            disabled={permissionsLevel === 'readOnly'}
-            onClick={() => {
-              if (mode === 'review') {
-                view.focus()
-                return
-              }
-              if (!features.trackChanges) {
-                setUpgradeTrackChangesModal({
-                  show: true,
-                  location: 'review-switcher',
-                })
-              } else {
-                sendMB('editing-mode-change', {
-                  role: permissionsLevel,
-                  previousMode: mode,
-                  newMode: 'review',
-                })
-                if (user?.id) {
-                  saveTrackChangesForCurrentUser(true)
-                } else {
-                  saveTrackChanges({ on_for_guests: true })
-                }
-                view.focus()
-              }
-            }}
-            description={
-              permissionsLevel === 'review' && !trackedWrite
-                ? t('comment_only')
-                : t('edits_become_suggestions')
             }
-            leadingIcon="rate_review"
-            active={trackedWrite && mode === 'review'}
+          }}
+          description={
+            permissionsLevel === 'review' && !trackedWrite
+              ? t('comment_only')
+              : t('edits_become_suggestions')
+          }
+          leadingIcon="rate_review"
+          active={trackedWrite && mode === 'review'}
+        >
+          {t('reviewing')}
+        </OLDropdownMenuItem>
+        {showViewOption && (
+          <OLDropdownMenuItem
+            description={t('can_view_content')}
+            leadingIcon="visibility"
+            active={mode === 'view'}
           >
-            {t('reviewing')}
+            {t('viewing')}
           </OLDropdownMenuItem>
-          {showViewOption && (
-            <OLDropdownMenuItem
-              description={t('can_view_content')}
-              leadingIcon="visibility"
-              active={mode === 'view'}
-            >
-              {t('viewing')}
-            </OLDropdownMenuItem>
-          )}
-        </DropdownMenu>
-      </Dropdown>
-    </div>
+        )}
+      </DropdownMenu>
+    </Dropdown>
   )
 }
 

services/web/frontend/js/features/review-panel/components/review-panel-container.tsx

@@ -2,7 +2,6 @@ import ReactDOM from 'react-dom'
 import { useCodeMirrorViewContext } from '../../source-editor/components/codemirror-context'
 import { memo } from 'react'
 import ReviewPanel from './review-panel'
-import ReviewModeSwitcher from './review-mode-switcher'
 import useReviewPanelLayout from '../hooks/use-review-panel-layout'
 
 function ReviewPanelContainer() {
@@ -14,10 +13,7 @@ function ReviewPanelContainer() {
   }
 
   return ReactDOM.createPortal(
-    <>
-      <ReviewModeSwitcher />
-      {showPanel && <ReviewPanel mini={mini} />}
-    </>,
+    <>{showPanel && <ReviewPanel mini={mini} />}</>,
     view.scrollDOM
   )
 }

services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx

@@ -18,6 +18,7 @@ import useDropdown from '../../../shared/hooks/use-dropdown'
 import { getPanel } from '@codemirror/view'
 import { createToolbarPanel } from '../extensions/toolbar/toolbar-panel'
 import EditorSwitch from './editor-switch'
+import ReviewModeSwitcher from '@/features/review-panel/components/review-mode-switcher'
 import SwitchToPDFButton from './switch-to-pdf-button'
 import { DetacherSynctexControl } from '../../pdf-preview/components/detach-synctex-control'
 import DetachCompileButtonWrapper from '../../pdf-preview/components/detach-compile-button-wrapper'
@@ -33,6 +34,7 @@ import Breadcrumbs from '@/features/source-editor/extensions/breadcrumbs'
 import classNames from 'classnames'
 import { useUserSettingsContext } from '@/shared/context/user-settings-context'
 import { useFeatureFlag } from '@/shared/context/split-test-context'
+import { useProjectContext } from '@/shared/context/project-context'
 import importOverleafModules from '../../../../macros/import-overleaf-module.macro'
 
 const sourceEditorToolbarComponents = importOverleafModules(
@@ -62,6 +64,7 @@ const Toolbar = memo(function Toolbar() {
     userSettings: { breadcrumbs },
   } = useUserSettingsContext()
   const visualPreviewEnabled = useFeatureFlag('visual-preview')
+  const { features } = useProjectContext()
 
   const [overflowed, setOverflowed] = useState(false)
 
@@ -206,6 +209,7 @@ const Toolbar = memo(function Toolbar() {
             ref={handleButtons}
           >
             {!visualPreviewEnabled && <EditorSwitch />}
+            {features.trackChangesVisible && <ReviewModeSwitcher />}
             {sourceEditorToolbarEndButtons.map(
               ({ import: { default: Component }, path }) => (
                 <Component key={path} />