From da449f9f5fc684d61e7964b2947375e62d43e9b9 Mon Sep 17 00:00:00 2001
From: Mathias Jakobsen <mathias.jakobsen@overleaf.com>
Date: Mon, 2 Jun 2025 11:30:40 +0100
Subject: [PATCH] Merge pull request #26015 from
 overleaf/mj-ide-breadcrumbs-setting

[web] Add setting to control editor breadcrumbs

GitOrigin-RevId: 6e0a4bb97eba63a1df43d85840f8962bf0238b7c
---
 .../src/Features/Project/ProjectController.js |  1 +
 .../app/src/Features/User/UserController.js   |  3 ++
 services/web/app/src/models/User.js           |  1 +
 .../web/frontend/extracted-translations.json  |  3 ++
 .../context/project-settings-context.tsx      |  7 +++++
 .../hooks/use-user-wide-settings.tsx          | 10 +++++++
 .../editor-settings/breadcrumbs-setting.tsx   | 18 ++++++++++++
 .../editor-settings/editor-settings.tsx       |  2 ++
 .../components/toolbar/menu-bar.tsx           | 29 +++++++++++--------
 .../components/codemirror-toolbar.tsx         |  6 +++-
 .../shared/context/user-settings-context.tsx  |  1 +
 services/web/locales/en.json                  |  3 ++
 services/web/types/user-settings.ts           |  1 +
 13 files changed, 72 insertions(+), 13 deletions(-)
 create mode 100644 services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/breadcrumbs-setting.tsx

diff --git a/services/web/app/src/Features/Project/ProjectController.js b/services/web/app/src/Features/Project/ProjectController.js
index ec128ffd54..842215d80e 100644
--- a/services/web/app/src/Features/Project/ProjectController.js
+++ b/services/web/app/src/Features/Project/ProjectController.js
@@ -824,6 +824,7 @@ const _ProjectController = {
           lineHeight: user.ace.lineHeight || 'normal',
           overallTheme: user.ace.overallTheme,
           mathPreview: user.ace.mathPreview,
+          breadcrumbs: user.ace.breadcrumbs,
           referencesSearchMode: user.ace.referencesSearchMode,
           enableNewEditor: user.ace.enableNewEditor ?? true,
         },
diff --git a/services/web/app/src/Features/User/UserController.js b/services/web/app/src/Features/User/UserController.js
index e4186d39a8..b767dcd4a1 100644
--- a/services/web/app/src/Features/User/UserController.js
+++ b/services/web/app/src/Features/User/UserController.js
@@ -387,6 +387,9 @@ async function updateUserSettings(req, res, next) {
   if (req.body.mathPreview != null) {
     user.ace.mathPreview = req.body.mathPreview
   }
+  if (req.body.breadcrumbs != null) {
+    user.ace.breadcrumbs = Boolean(req.body.breadcrumbs)
+  }
   if (req.body.referencesSearchMode != null) {
     const mode =
       req.body.referencesSearchMode === 'simple' ? 'simple' : 'advanced'
diff --git a/services/web/app/src/models/User.js b/services/web/app/src/models/User.js
index d228c46b82..c1701023c4 100644
--- a/services/web/app/src/models/User.js
+++ b/services/web/app/src/models/User.js
@@ -97,6 +97,7 @@ const UserSchema = new Schema(
       fontFamily: { type: String },
       lineHeight: { type: String },
       mathPreview: { type: Boolean, default: true },
+      breadcrumbs: { type: Boolean, default: true },
       referencesSearchMode: { type: String, default: 'advanced' }, // 'advanced' or 'simple'
       enableNewEditor: { type: Boolean },
     },
diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json
index 9862e47817..09c2ba90dc 100644
--- a/services/web/frontend/extracted-translations.json
+++ b/services/web/frontend/extracted-translations.json
@@ -186,6 +186,7 @@
   "blog": "",
   "bold": "",
   "booktabs": "",
+  "breadcrumbs": "",
   "browser": "",
   "bullet_list": "",
   "buy_licenses": "",
@@ -1543,6 +1544,8 @@
   "sharelatex_beta_program": "",
   "shortcut_to_open_advanced_reference_search": "",
   "show_all_projects": "",
+  "show_breadcrumbs": "",
+  "show_breadcrumbs_in_toolbar": "",
   "show_document_preamble": "",
   "show_equation_preview": "",
   "show_file_tree": "",
diff --git a/services/web/frontend/js/features/editor-left-menu/context/project-settings-context.tsx b/services/web/frontend/js/features/editor-left-menu/context/project-settings-context.tsx
index e40c4c6872..e5cd576ba1 100644
--- a/services/web/frontend/js/features/editor-left-menu/context/project-settings-context.tsx
+++ b/services/web/frontend/js/features/editor-left-menu/context/project-settings-context.tsx
@@ -27,6 +27,7 @@ type ProjectSettingsSetterContextValue = {
   setLineHeight: (lineHeight: UserSettings['lineHeight']) => void
   setPdfViewer: (pdfViewer: UserSettings['pdfViewer']) => void
   setMathPreview: (mathPreview: UserSettings['mathPreview']) => void
+  setBreadcrumbs: (breadcrumbs: UserSettings['breadcrumbs']) => void
 }
 
 type ProjectSettingsContextValue = Partial<ProjectSettings> &
@@ -74,6 +75,8 @@ export const ProjectSettingsProvider: FC<React.PropsWithChildren> = ({
     setPdfViewer,
     mathPreview,
     setMathPreview,
+    breadcrumbs,
+    setBreadcrumbs,
   } = useUserWideSettings()
 
   useProjectWideSettingsSocketListener()
@@ -110,6 +113,8 @@ export const ProjectSettingsProvider: FC<React.PropsWithChildren> = ({
       setPdfViewer,
       mathPreview,
       setMathPreview,
+      breadcrumbs,
+      setBreadcrumbs,
     }),
     [
       compiler,
@@ -142,6 +147,8 @@ export const ProjectSettingsProvider: FC<React.PropsWithChildren> = ({
       setPdfViewer,
       mathPreview,
       setMathPreview,
+      breadcrumbs,
+      setBreadcrumbs,
     ]
   )
 
diff --git a/services/web/frontend/js/features/editor-left-menu/hooks/use-user-wide-settings.tsx b/services/web/frontend/js/features/editor-left-menu/hooks/use-user-wide-settings.tsx
index 70202c9446..978148721a 100644
--- a/services/web/frontend/js/features/editor-left-menu/hooks/use-user-wide-settings.tsx
+++ b/services/web/frontend/js/features/editor-left-menu/hooks/use-user-wide-settings.tsx
@@ -20,6 +20,7 @@ export default function useUserWideSettings() {
     lineHeight,
     pdfViewer,
     mathPreview,
+    breadcrumbs,
   } = userSettings
 
   const setOverallTheme = useSetOverallTheme()
@@ -93,6 +94,13 @@ export default function useUserWideSettings() {
     [saveUserSettings]
   )
 
+  const setBreadcrumbs = useCallback(
+    (breadcrumbs: UserSettings['breadcrumbs']) => {
+      saveUserSettings('breadcrumbs', breadcrumbs)
+    },
+    [saveUserSettings]
+  )
+
   return {
     autoComplete,
     setAutoComplete,
@@ -116,5 +124,7 @@ export default function useUserWideSettings() {
     setPdfViewer,
     mathPreview,
     setMathPreview,
+    breadcrumbs,
+    setBreadcrumbs,
   }
 }
diff --git a/services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/breadcrumbs-setting.tsx b/services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/breadcrumbs-setting.tsx
new file mode 100644
index 0000000000..c4dff10485
--- /dev/null
+++ b/services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/breadcrumbs-setting.tsx
@@ -0,0 +1,18 @@
+import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context'
+import ToggleSetting from '../toggle-setting'
+import { useTranslation } from 'react-i18next'
+
+export default function BreadcrumbsSetting() {
+  const { breadcrumbs, setBreadcrumbs } = useProjectSettingsContext()
+  const { t } = useTranslation()
+
+  return (
+    <ToggleSetting
+      id="breadcrumbs-setting"
+      label={t('breadcrumbs')}
+      description={t('show_breadcrumbs_in_toolbar')}
+      checked={breadcrumbs}
+      onChange={setBreadcrumbs}
+    />
+  )
+}
diff --git a/services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/editor-settings.tsx b/services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/editor-settings.tsx
index 28dcef8a9b..a58b0c101e 100644
--- a/services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/editor-settings.tsx
+++ b/services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/editor-settings.tsx
@@ -9,6 +9,7 @@ import PDFViewerSetting from './pdf-viewer-setting'
 import SpellCheckSetting from './spell-check-setting'
 import DictionarySetting from './dictionary-setting'
 import importOverleafModules from '../../../../../../macros/import-overleaf-module.macro'
+import BreadcrumbsSetting from './breadcrumbs-setting'
 
 const [referenceSearchSettingModule] = importOverleafModules(
   'referenceSearchSetting'
@@ -33,6 +34,7 @@ export default function EditorSettings() {
         <DictionarySetting />
       </SettingsSection>
       <SettingsSection title={t('tools')}>
+        <BreadcrumbsSetting />
         <MathPreviewSetting />
       </SettingsSection>
     </>
diff --git a/services/web/frontend/js/features/ide-redesign/components/toolbar/menu-bar.tsx b/services/web/frontend/js/features/ide-redesign/components/toolbar/menu-bar.tsx
index ed0ebd77f8..68f4772644 100644
--- a/services/web/frontend/js/features/ide-redesign/components/toolbar/menu-bar.tsx
+++ b/services/web/frontend/js/features/ide-redesign/components/toolbar/menu-bar.tsx
@@ -20,12 +20,12 @@ import CommandDropdown, {
   MenuSectionStructure,
   MenuStructure,
 } from './command-dropdown'
-import { useUserSettingsContext } from '@/shared/context/user-settings-context'
 import { useRailContext } from '../../contexts/rail-context'
 import WordCountModal from '@/features/word-count-modal/components/word-count-modal'
 import { isSplitTestEnabled } from '@/utils/splitTestUtils'
 import { useDetachCompileContext as useCompileContext } from '@/shared/context/detach-compile-context'
 import { useEditorAnalytics } from '@/shared/hooks/use-editor-analytics'
+import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context'
 
 export const ToolbarMenuBar = () => {
   const { t } = useTranslation()
@@ -170,19 +170,16 @@ export const ToolbarMenuBar = () => {
     [t]
   )
 
-  const {
-    userSettings: { mathPreview },
-    setUserSettings,
-  } = useUserSettingsContext()
+  const { mathPreview, setMathPreview, breadcrumbs, setBreadcrumbs } =
+    useProjectSettingsContext()
 
   const toggleMathPreview = useCallback(() => {
-    setUserSettings(prev => {
-      return {
-        ...prev,
-        mathPreview: !prev.mathPreview,
-      }
-    })
-  }, [setUserSettings])
+    setMathPreview(!mathPreview)
+  }, [setMathPreview, mathPreview])
+
+  const toggleBreadcrumbs = useCallback(() => {
+    setBreadcrumbs(!breadcrumbs)
+  }, [setBreadcrumbs, breadcrumbs])
 
   const { setActiveModal } = useRailContext()
   const openKeyboardShortcutsModal = useCallback(() => {
@@ -212,6 +209,14 @@ export const ToolbarMenuBar = () => {
           <ChangeLayoutOptions />
           <DropdownDivider />
           <DropdownHeader>Editor settings</DropdownHeader>
+          <MenuBarOption
+            eventKey="show_breadcrumbs"
+            title={t('show_breadcrumbs')}
+            leadingIcon={
+              breadcrumbs ? 'check' : <DropdownItem.EmptyLeadingIcon />
+            }
+            onClick={toggleBreadcrumbs}
+          />
           <MenuBarOption
             eventKey="show_equation_preview"
             title={t('show_equation_preview')}
diff --git a/services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx b/services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx
index 026c1be078..5cf95763f4 100644
--- a/services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx
+++ b/services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx
@@ -25,6 +25,7 @@ import useReviewPanelLayout from '@/features/review-panel-new/hooks/use-review-p
 import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils'
 import Breadcrumbs from '@/features/ide-redesign/components/breadcrumbs'
 import classNames from 'classnames'
+import { useUserSettingsContext } from '@/shared/context/user-settings-context'
 
 export const CodeMirrorToolbar = () => {
   const view = useCodeMirrorViewContext()
@@ -41,6 +42,9 @@ const Toolbar = memo(function Toolbar() {
   const { t } = useTranslation()
   const state = useCodeMirrorStateContext()
   const view = useCodeMirrorViewContext()
+  const {
+    userSettings: { breadcrumbs },
+  } = useUserSettingsContext()
 
   const [overflowed, setOverflowed] = useState(false)
 
@@ -192,7 +196,7 @@ const Toolbar = memo(function Toolbar() {
             <DetachCompileButtonWrapper />
           </div>
         </div>
-        {newEditor && <Breadcrumbs />}
+        {newEditor && breadcrumbs && <Breadcrumbs />}
       </div>
     </>
   )
diff --git a/services/web/frontend/js/shared/context/user-settings-context.tsx b/services/web/frontend/js/shared/context/user-settings-context.tsx
index b0bce5bf5c..b368371013 100644
--- a/services/web/frontend/js/shared/context/user-settings-context.tsx
+++ b/services/web/frontend/js/shared/context/user-settings-context.tsx
@@ -29,6 +29,7 @@ const defaultSettings: UserSettings = {
   mathPreview: true,
   referencesSearchMode: 'advanced',
   enableNewEditor: true,
+  breadcrumbs: true,
 }
 
 type UserSettingsContextValue = {
diff --git a/services/web/locales/en.json b/services/web/locales/en.json
index 910621f51a..9e0f86e8b9 100644
--- a/services/web/locales/en.json
+++ b/services/web/locales/en.json
@@ -240,6 +240,7 @@
   "blog": "Blog",
   "bold": "Bold",
   "booktabs": "Booktabs",
+  "breadcrumbs": "Breadcrumbs",
   "brl_discount_offer_plans_page_banner": "__flag__ <b>Great news!</b> We’ve applied a 50% discount to premium plans on this page for our users in Brazil. Check out the new lower prices.",
   "browser": "Browser",
   "built_in": "Built-In",
@@ -2015,6 +2016,8 @@
   "sharelatex_beta_program": "__appName__ Beta Program",
   "shortcut_to_open_advanced_reference_search": "(<strong>__ctrlSpace__</strong> or <strong>__altSpace__</strong>)",
   "show_all_projects": "Show all projects",
+  "show_breadcrumbs": "Show breadcrumbs",
+  "show_breadcrumbs_in_toolbar": "Show breadcrumbs in toolbar",
   "show_document_preamble": "Show document preamble",
   "show_equation_preview": "Show equation preview",
   "show_file_tree": "Show file tree",
diff --git a/services/web/types/user-settings.ts b/services/web/types/user-settings.ts
index 3e748d937e..add460edfa 100644
--- a/services/web/types/user-settings.ts
+++ b/services/web/types/user-settings.ts
@@ -17,4 +17,5 @@ export type UserSettings = {
   mathPreview: boolean
   referencesSearchMode: 'advanced' | 'simple'
   enableNewEditor: boolean
+  breadcrumbs: boolean
 }