diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json
index 3c50ef96ef..85d472ed56 100644
--- a/services/web/frontend/extracted-translations.json
+++ b/services/web/frontend/extracted-translations.json
@@ -171,12 +171,15 @@
"bulk_reject_confirm": "",
"buy_overleaf_assist": "",
"by_subscribing_you_agree_to_our_terms_of_service": "",
+ "can_add_tracked_changes_and_comments": "",
"can_edit": "",
+ "can_edit_content": "",
"can_link_institution_email_acct_to_institution_acct": "",
"can_link_your_institution_acct_2": "",
"can_now_relink_dropbox": "",
"can_review": "",
"can_view": "",
+ "can_view_content": "",
"cancel": "",
"cancel_add_on": "",
"cancel_anytime": "",
@@ -1300,6 +1303,7 @@
"review": "",
"review_your_peers_work": "",
"reviewer": "",
+ "reviewing": "",
"revoke": "",
"revoke_invite": "",
"right": "",
@@ -1839,6 +1843,7 @@
"view_pdf": "",
"view_your_invoices": "",
"viewer": "",
+ "viewing": "",
"viewing_x": "",
"visual_editor": "",
"visual_editor_is_only_available_for_tex_files": "",
diff --git a/services/web/frontend/js/features/review-panel-new/components/review-mode-switcher.tsx b/services/web/frontend/js/features/review-panel-new/components/review-mode-switcher.tsx
new file mode 100644
index 0000000000..d1956d8d2f
--- /dev/null
+++ b/services/web/frontend/js/features/review-panel-new/components/review-mode-switcher.tsx
@@ -0,0 +1,171 @@
+import { forwardRef, memo, MouseEventHandler } from 'react'
+import {
+ Dropdown,
+ DropdownMenu,
+ DropdownToggle,
+} from '@/features/ui/components/bootstrap-5/dropdown-menu'
+import OLDropdownMenuItem from '@/features/ui/components/ol/ol-dropdown-menu-item'
+import MaterialIcon from '@/shared/components/material-icon'
+import classNames from 'classnames'
+import {
+ useTrackChangesStateActionsContext,
+ useTrackChangesStateContext,
+} from '../context/track-changes-state-context'
+import { useUserContext } from '@/shared/context/user-context'
+import { useTranslation } from 'react-i18next'
+import { useEditorContext } from '@/shared/context/editor-context'
+import { usePermissionsContext } from '@/features/ide-react/context/permissions-context'
+
+type Mode = 'viewing' | 'reviewing' | 'editing'
+
+const useCurrentMode = (): Mode => {
+ const trackChanges = useTrackChangesStateContext()
+ const user = useUserContext()
+ const trackChangesForCurrentUser =
+ trackChanges?.onForEveryone ||
+ (user && user.id && trackChanges?.onForMembers[user.id])
+ const { write } = usePermissionsContext()
+
+ if (write && !trackChangesForCurrentUser) {
+ return 'editing'
+ } else if (write) {
+ return 'reviewing'
+ }
+
+ return 'viewing'
+}
+
+function ReviewModeSwitcher() {
+ const { t } = useTranslation()
+ const { saveTrackChangesForCurrentUser } =
+ useTrackChangesStateActionsContext()
+ const mode = useCurrentMode()
+
+ const { permissionsLevel } = useEditorContext()
+
+ const enableEditing =
+ permissionsLevel === 'owner' || permissionsLevel === 'readAndWrite'
+ const enableReviewing = enableEditing || permissionsLevel === 'review'
+ const showViewOption = !enableReviewing
+
+ return (
+
+
+
+
+ {
+ saveTrackChangesForCurrentUser(false)
+ }}
+ description={t('can_edit_content')}
+ leadingIcon="edit"
+ active={enableEditing && mode === 'editing'}
+ >
+ {t('editing')}
+
+ {
+ saveTrackChangesForCurrentUser(true)
+ }}
+ description={t('can_add_tracked_changes_and_comments')}
+ leadingIcon="rate_review"
+ active={enableReviewing && mode === 'reviewing'}
+ >
+ {t('reviewing')}
+
+ {showViewOption && (
+ {
+ saveTrackChangesForCurrentUser(true)
+ }}
+ description={t('can_view_content')}
+ leadingIcon="visibility"
+ active={mode === 'viewing'}
+ >
+ {t('viewing')}
+
+ )}
+
+
+