Merge pull request #21450 from overleaf/dp-focus-entry

Refactor how ReviewPanel and TrackChangesWidget are rendered

GitOrigin-RevId: 0b206a2a70270a885befdcf2403da4e1af3aa9bf

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

@@ -20,23 +20,17 @@ function ReviewPanelContainer() {
     return null
   }
 
-  // the full-width review panel
-  if (reviewPanelOpen) {
-    return ReactDOM.createPortal(<ReviewPanel />, view.scrollDOM)
-  }
-
-  // the mini review panel
-  if (hasActiveRange(ranges, threads)) {
-    return ReactDOM.createPortal(
-      <>
-        {wantTrackChanges && <TrackChangesOnWidget />}
-        <ReviewPanel mini />
-      </>,
-      view.scrollDOM
-    )
-  }
+  const hasCommentOrChange = hasActiveRange(ranges, threads)
+  const showPanel = reviewPanelOpen || hasCommentOrChange
+  const showTrackChangesWidget = wantTrackChanges && !reviewPanelOpen
 
-  return null
+  return ReactDOM.createPortal(
+    <>
+      {showTrackChangesWidget && <TrackChangesOnWidget />}
+      {showPanel && <ReviewPanel mini={!reviewPanelOpen} />}
+    </>,
+    view.scrollDOM
+  )
 }
 
 export default memo(ReviewPanelContainer)