Merge pull request #26015 from overleaf/mj-ide-breadcrumbs-setting

[web] Add setting to control editor breadcrumbs

GitOrigin-RevId: 6e0a4bb97eba63a1df43d85840f8962bf0238b7c

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,
         },

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'

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 },
     },

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": "",

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,
     ]
   )
 

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,
   }
 }

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}
+    />
+  )
+}

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>
     </>

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')}

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>
     </>
   )

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 = {

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",

services/web/types/user-settings.ts

@@ -17,4 +17,5 @@ export type UserSettings = {
   mathPreview: boolean
   referencesSearchMode: 'advanced' | 'simple'
   enableNewEditor: boolean
+  breadcrumbs: boolean
 }