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

This reverts commit 36847e0debdc4dce5f96492261d25e7cc46b2e96.

GitOrigin-RevId: 9bab306156006f683314fd59eea45854f62eae62

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

@@ -33,88 +33,86 @@ function ReviewModeSwitcher() {
   const view = useCodeMirrorViewContext()
 
   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 {
+    <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
+              }
               sendMB('editing-mode-change', {
                 role: permissionsLevel,
                 previousMode: mode,
-                newMode: 'review',
+                newMode: 'edit',
               })
               if (user?.id) {
-                saveTrackChangesForCurrentUser(true)
+                saveTrackChangesForCurrentUser(false)
               } else {
-                saveTrackChanges({ on_for_guests: true })
+                saveTrackChanges({ on_for_guests: false })
               }
               view.focus()
-            }
-          }}
-          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'}
+            }}
+            description={t('edit_content_directly')}
+            leadingIcon="edit"
+            active={write && mode === 'edit'}
           >
-            {t('viewing')}
+            {t('editing')}
           </OLDropdownMenuItem>
-        )}
-      </DropdownMenu>
-    </Dropdown>
+          <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'}
+          >
+            {t('reviewing')}
+          </OLDropdownMenuItem>
+          {showViewOption && (
+            <OLDropdownMenuItem
+              description={t('can_view_content')}
+              leadingIcon="visibility"
+              active={mode === 'view'}
+            >
+              {t('viewing')}
+            </OLDropdownMenuItem>
+          )}
+        </DropdownMenu>
+      </Dropdown>
+    </div>
   )
 }
 

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

@@ -2,6 +2,7 @@ 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() {
@@ -13,7 +14,10 @@ function ReviewPanelContainer() {
   }
 
   return ReactDOM.createPortal(
-    <>{showPanel && <ReviewPanel mini={mini} />}</>,
+    <>
+      <ReviewModeSwitcher />
+      {showPanel && <ReviewPanel mini={mini} />}
+    </>,
     view.scrollDOM
   )
 }

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

@@ -18,7 +18,6 @@ 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'
@@ -34,7 +33,6 @@ 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(
@@ -64,7 +62,6 @@ const Toolbar = memo(function Toolbar() {
     userSettings: { breadcrumbs },
   } = useUserSettingsContext()
   const visualPreviewEnabled = useFeatureFlag('visual-preview')
-  const { features } = useProjectContext()
 
   const [overflowed, setOverflowed] = useState(false)
 
@@ -209,7 +206,6 @@ const Toolbar = memo(function Toolbar() {
             ref={handleButtons}
           >
             {!visualPreviewEnabled && <EditorSwitch />}
-            {features.trackChangesVisible && <ReviewModeSwitcher />}
             {sourceEditorToolbarEndButtons.map(
               ({ import: { default: Component }, path }) => (
                 <Component key={path} />