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 && (
+            }}
+            description={t('edit_content_directly')}
+            leadingIcon="edit"
+            active={write && mode === 'edit'}
+          >
+            {t('editing')}
+          </OLDropdownMenuItem>
           <OLDropdownMenuItem
-            description={t('can_view_content')}
-            leadingIcon="visibility"
-            active={mode === 'view'}
+            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('viewing')}
+            {t('reviewing')}
           </OLDropdownMenuItem>
-        )}
-      </DropdownMenu>
-    </Dropdown>
+          {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} />

services/web/frontend/stylesheets/pages/editor/review-panel.scss

@@ -20,9 +20,6 @@ $rp-type-blue: #6b7797;
   --review-panel-width: 230px;
   --review-panel-width-mini: 24px;
   --review-panel-color-scheme: light;
-  --review-mode-switcher-reviewing-bg: var(--yellow-10);
-  --review-mode-switcher-reviewing-hover-bg: var(--yellow-20);
-  --review-mode-switcher-reviewing-color: var(--yellow-60);
 
   @include theme('default') {
     .ide-redesign-main {
@@ -36,9 +33,6 @@ $rp-type-blue: #6b7797;
       --review-panel-button-hover-bg-color: var(--bg-dark-tertiary);
       --review-panel-border-color: var(--border-divider-dark);
       --review-panel-color-scheme: dark;
-      --review-mode-switcher-reviewing-bg: var(--yellow-70);
-      --review-mode-switcher-reviewing-hover-bg: var(--yellow-60);
-      --review-mode-switcher-reviewing-color: var(--yellow-10);
     }
   }
 }
@@ -718,22 +712,35 @@ del.review-panel-content-highlight {
   pointer-events: none; // this is to prevent mouseLeave event from firing when hovering over the tooltip
 }
 
+.review-mode-switcher-container {
+  position: sticky;
+  top: 0;
+  right: 0;
+}
+
 .review-mode-switcher {
+  position: absolute;
+  top: var(--spacing-03);
+  right: var(--spacing-03);
   font-family: var(--font-sans);
 
   &:hover,
   &:focus {
     .review-mode-switcher-toggle-button.editing {
-      background-color: var(--review-panel-button-hover-bg-color);
+      background-color: var(--bg-light-tertiary);
     }
 
     .review-mode-switcher-toggle-button.reviewing {
-      background-color: var(--review-mode-switcher-reviewing-hover-bg);
+      background-color: var(--yellow-20);
     }
 
     .review-mode-switcher-toggle-button.viewing {
       background-color: var(--blue-20);
     }
+
+    .review-mode-switcher-toggle-label {
+      display: block;
+    }
   }
 
   // prevent gap between button and menu
@@ -748,16 +755,11 @@ del.review-panel-content-highlight {
   font-family: $font-family-base;
   display: flex;
   align-items: center;
-  border-radius: var(--border-radius-base);
+  border-radius: 14px;
   font-size: var(--font-size-02);
-  padding: var(--spacing-01) var(--spacing-02);
-  gap: var(--spacing-01);
-  cursor: pointer;
-
-  &:focus-visible {
-    outline: 2px solid var(--content-primary);
-    outline-offset: 2px;
-  }
+  padding: var(--spacing-02) var(--spacing-03);
+  gap: var(--spacing-02);
+  height: 20px;
 
   .material-symbols {
     font-size: 16px;
@@ -769,13 +771,13 @@ del.review-panel-content-highlight {
   }
 
   &.editing {
-    background-color: var(--toolbar-alt-bg-color);
-    color: var(--toolbar-btn-color);
+    background-color: var(--bg-light-secondary);
+    color: var(--content-primary);
   }
 
   &.reviewing {
-    background-color: var(--review-mode-switcher-reviewing-bg);
-    color: var(--review-mode-switcher-reviewing-color);
+    background-color: var(--yellow-10);
+    color: var(--yellow-60);
   }
 
   &.viewing {

services/web/frontend/stylesheets/pages/editor/toolbar.scss

@@ -295,12 +295,6 @@
   z-index: 10; // Prevent track changes showing over toolbar
 }
 
-// Isolate secondary toolbar rows so they paint below the main toolbar (z-index: 10)
-// and its dropdowns, which would otherwise be obscured due to DOM order.
-.ol-cm-toolbar-wrapper > .writefull {
-  isolation: isolate;
-}
-
 /**************************************
 	Toggle Switch
 ***************************************/