Merge pull request #21014 from overleaf/dk-review-panel-tc-widget

Add "Track changes is On" button when review panel is closed

GitOrigin-RevId: a165201f611860ba531f2eeb3d89f83a695cd017

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

@@ -6,12 +6,15 @@ import { useLayoutContext } from '@/shared/context/layout-context'
 import { useRangesContext } from '../context/ranges-context'
 import { useThreadsContext } from '@/features/review-panel-new/context/threads-context'
 import { hasActiveRange } from '@/features/review-panel-new/utils/has-active-range'
+import TrackChangesOnWidget from './track-changes-on-widget'
+import { useEditorManagerContext } from '@/features/ide-react/context/editor-manager-context'
 
 function ReviewPanelContainer() {
   const view = useCodeMirrorViewContext()
   const ranges = useRangesContext()
   const threads = useThreadsContext()
   const { reviewPanelOpen } = useLayoutContext()
+  const { wantTrackChanges } = useEditorManagerContext()
 
   if (!view) {
     return null
@@ -24,7 +27,13 @@ function ReviewPanelContainer() {
 
   // the mini review panel
   if (hasActiveRange(ranges, threads)) {
-    return ReactDOM.createPortal(<ReviewPanel mini />, view.scrollDOM)
+    return ReactDOM.createPortal(
+      <>
+        {wantTrackChanges && <TrackChangesOnWidget />}
+        <ReviewPanel mini />
+      </>,
+      view.scrollDOM
+    )
   }
 
   return null

services/web/frontend/js/features/review-panel-new/components/track-changes-on-widget.tsx

@@ -0,0 +1,36 @@
+import { Trans } from 'react-i18next'
+import { EditorView } from '@codemirror/view'
+import classnames from 'classnames'
+import { useCodeMirrorStateContext } from '@/features/source-editor/components/codemirror-context'
+import { useLayoutContext } from '@/shared/context/layout-context'
+import { useCallback } from 'react'
+
+function TrackChangesOnWidget() {
+  const { setReviewPanelOpen } = useLayoutContext()
+  const state = useCodeMirrorStateContext()
+  const darkTheme = state.facet(EditorView.darkTheme)
+
+  const openReviewPanel = useCallback(() => {
+    setReviewPanelOpen(true)
+  }, [setReviewPanelOpen])
+
+  return (
+    <div className="review-panel-in-editor-widgets">
+      <div className="review-panel-in-editor-widgets-inner">
+        <button
+          className={classnames('review-panel-track-changes-indicator', {
+            'review-panel-track-changes-indicator-on-dark': darkTheme,
+          })}
+          onClick={openReviewPanel}
+        >
+          <Trans
+            i18nKey="track_changes_is_on"
+            components={{ strong: <strong /> }}
+          />
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default TrackChangesOnWidget