diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-container.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-container.tsx
index ade154b061..c24de044a2 100644
--- a/services/web/frontend/js/features/review-panel-new/components/review-panel-container.tsx
+++ b/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(, view.scrollDOM)
+ return ReactDOM.createPortal(
+ <>
+ {wantTrackChanges && }
+
+ >,
+ view.scrollDOM
+ )
}
return null
diff --git a/services/web/frontend/js/features/review-panel-new/components/track-changes-on-widget.tsx b/services/web/frontend/js/features/review-panel-new/components/track-changes-on-widget.tsx
new file mode 100644
index 0000000000..63ee10060f
--- /dev/null
+++ b/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 (
+
+ )
+}
+
+export default TrackChangesOnWidget
diff --git a/services/web/frontend/stylesheets/app/editor/review-panel-new.less b/services/web/frontend/stylesheets/app/editor/review-panel-new.less
index ac329f176c..b3a3578b4d 100644
--- a/services/web/frontend/stylesheets/app/editor/review-panel-new.less
+++ b/services/web/frontend/stylesheets/app/editor/review-panel-new.less
@@ -642,3 +642,52 @@
.review-panel-tooltip {
pointer-events: none; // this is to prevent mouseLeave event from firing when hovering over the tooltip
}
+
+.review-panel-in-editor-widgets {
+ position: sticky;
+ top: 0;
+ right: 0;
+ font-size: 11px;
+ z-index: 2;
+ font-family: @font-family-sans-serif;
+
+ .review-panel-in-editor-widgets-inner {
+ position: absolute;
+ top: 0;
+ right: 0;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .review-panel-track-changes-indicator {
+ border: 0;
+ }
+}
+.review-panel-track-changes-indicator {
+ display: block;
+ padding: 5px 10px;
+ background-color: rgba(240, 240, 240, 0.9);
+ color: @rp-type-blue;
+ text-align: center;
+ border-bottom-left-radius: 3px;
+ white-space: nowrap;
+
+ &.review-panel-track-changes-indicator-on-dark {
+ background-color: rgba(88, 88, 88, 0.8);
+ color: #fff;
+
+ &:hover,
+ &:focus {
+ background-color: rgba(88, 88, 88, 1);
+ color: #fff;
+ }
+ }
+
+ &:hover,
+ &:focus {
+ outline: 0;
+ text-decoration: none;
+ background-color: rgba(240, 240, 240, 1);
+ color: @rp-type-blue;
+ }
+}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss
index 31bf1b4954..d48ad9a3ac 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss
@@ -646,3 +646,53 @@
.review-panel-tooltip {
pointer-events: none; // this is to prevent mouseLeave event from firing when hovering over the tooltip
}
+
+.review-panel-in-editor-widgets {
+ position: sticky;
+ top: 0;
+ right: 0;
+ font-size: 11px;
+ z-index: 2;
+ font-family: $font-family-base;
+
+ .review-panel-in-editor-widgets-inner {
+ position: absolute;
+ top: 0;
+ right: 0;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .review-panel-track-changes-indicator {
+ border: 0;
+ }
+}
+
+.review-panel-track-changes-indicator {
+ display: block;
+ padding: 5px 10px;
+ background-color: rgb(240 240 240 / 90%);
+ color: $rp-type-blue;
+ text-align: center;
+ border-bottom-left-radius: 3px;
+ white-space: nowrap;
+
+ &.review-panel-track-changes-indicator-on-dark {
+ background-color: rgb(88 88 88 / 80%);
+ color: #fff;
+
+ &:hover,
+ &:focus {
+ background-color: rgb(88 88 88 / 100%);
+ color: #fff;
+ }
+ }
+
+ &:hover,
+ &:focus {
+ outline: 0;
+ text-decoration: none;
+ background-color: rgb(240 240 240 / 100%);
+ color: $rp-type-blue;
+ }
+}