Merge pull request #34311 from overleaf/mj-review-panel-with-tabs

[web] Move review panel header into tabs row when open

GitOrigin-RevId: e4594040f7a8ca67778fdd3e31cab909b3120adb

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

@@ -11,6 +11,7 @@ import importOverleafModules from '../../../../macros/import-overleaf-module.mac
 import { FigureModal } from './figure-modal/figure-modal'
 import { ReviewPanelProviders } from '@/features/review-panel/context/review-panel-providers'
 import { ReviewPanelRoot } from '@/features/review-panel/components/review-panel-root'
+import ReviewPanelTabsHeaderPortal from '@/features/review-panel/components/review-panel-tabs-header-portal'
 import ReviewTooltipMenu from '@/features/review-panel/components/review-tooltip-menu'
 import {
   CodeMirrorStateContext,
@@ -104,6 +105,7 @@ function CodeMirrorEditorComponents({
       <MathPreviewTooltip />
       <EditorContextMenu />
       {features.trackChangesVisible && <ReviewTooltipMenu />}
+      {features.trackChangesVisible && <ReviewPanelTabsHeaderPortal />}
       {features.trackChangesVisible && <ReviewPanelRoot />}
       {features.trackChangesVisible && <UpgradeTrackChangesModal />}
 

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

@@ -35,6 +35,7 @@ import { useUserSettingsContext } from '@/shared/context/user-settings-context'
 import { useFeatureFlag } from '@/shared/context/split-test-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'
 
 const sourceEditorToolbarComponents = importOverleafModules(
   'sourceEditorToolbarComponents'
@@ -159,6 +160,7 @@ const Toolbar = memo(function Toolbar() {
   }, [buildOverflow, insideTable, resizeRef])
 
   const showActions = !state.readOnly && !insideTable
+  const tabsVisible = useFeatureFlag('editor-tabs')
 
   if (focusMode) {
     return null
@@ -166,7 +168,8 @@ const Toolbar = memo(function Toolbar() {
 
   return (
     <>
-      {showReviewPanelHeader && <ReviewPanelHeader />}
+      {showReviewPanelHeader &&
+        (tabsVisible ? <ReviewPanelHeaderBuffer /> : <ReviewPanelHeader />)}
       <div
         id="ol-cm-toolbar-wrapper"
         className={classNames('ol-cm-toolbar-wrapper', {

services/web/frontend/js/features/source-editor/components/tabs/tabs-container.tsx

@@ -19,6 +19,7 @@ export const TabsContainer = () => {
     moveTab,
     makeTabPermanent,
     setContextMenuTarget,
+    setHeaderSlot,
   } = useTabsContext()
   const { openEntity } = useFileTreeOpenContext()
   const [hovered, setHovered] = useState<boolean>(false)
@@ -87,6 +88,7 @@ export const TabsContainer = () => {
 
   return (
     <div className="editor-tabs-container">
+      <div className="review-panel-header-slot" ref={setHeaderSlot} />
       <div
         className={classNames('editor-tabs-row', {
           'editor-tabs-row-hovered': hovered,