[WEB] Move Review Toggle into the toolbar - 2 (#34578)

* wip of adding Review Toggle into the toolbar

* renaming to isToolbarMigration

* Potential fix for pull request finding

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

* removing extra comments

---------

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
GitOrigin-RevId: 2c0b54ae983a32c083def8e9e64ddd0fb7ddf334

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'
 import { useLayoutContext } from '@/shared/context/layout-context'
 import ReviewPanelHeaderBuffer from '@/features/review-panel/components/review-panel-header-buffer'
@@ -69,6 +71,8 @@ const Toolbar = memo(function Toolbar() {
     userSettings: { breadcrumbs },
   } = useUserSettingsContext()
   const visualPreviewEnabled = useFeatureFlag('visual-preview')
+  const isToolbarMigration = useFeatureFlag('writefull-toolbar-migration')
+  const { features } = useProjectContext()
   const { focusMode } = useLayoutContext()
 
   const [overflowed, setOverflowed] = useState(false)
@@ -234,6 +238,13 @@ const Toolbar = memo(function Toolbar() {
 
           <div className="ol-cm-toolbar-button-group ol-cm-toolbar-end">
             {!visualPreviewEnabled && <EditorSwitch />}
+            {/* trackChangesVisible controls provider/UI availability; trackChanges
+                (checked inside the switcher) controls the actual feature entitlement.
+                Users with trackChangesVisible:true but trackChanges:false see the
+                switcher and get an upgrade modal when clicking "Reviewing". */}
+            {isToolbarMigration && features.trackChangesVisible && (
+              <ReviewModeSwitcher />
+            )}
             {sourceEditorToolbarEndButtons.map(
               ({ import: { default: Component }, path }) => (
                 <Component key={path} />