From 2c07e1c44afdc6b8f2578d430a7cc69a1b920d42 Mon Sep 17 00:00:00 2001
From: David <33458145+davidmcpowell@users.noreply.github.com>
Date: Tue, 27 May 2025 09:00:16 +0100
Subject: [PATCH] Merge pull request #25923 from overleaf/dp-view-dropdown

Update UI of view dropdown

GitOrigin-RevId: 2d689a73886e0821eaa21e6666092e9414528e55
---
 .../features/ide-redesign/components/toolbar/menu-bar.tsx  | 7 ++++++-
 .../js/shared/components/menu-bar/menu-bar-option.tsx      | 3 +++
 2 files changed, 9 insertions(+), 1 deletion(-)

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 e046eafde3..ed0ebd77f8 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
@@ -1,6 +1,7 @@
 import {
   DropdownDivider,
   DropdownHeader,
+  DropdownItem,
 } from '@/features/ui/components/bootstrap-5/dropdown-menu'
 import { MenuBar } from '@/shared/components/menu-bar/menu-bar'
 import { MenuBarDropdown } from '@/shared/components/menu-bar/menu-bar-dropdown'
@@ -209,13 +210,17 @@ export const ToolbarMenuBar = () => {
           className="ide-redesign-toolbar-dropdown-toggle-subdued ide-redesign-toolbar-button-subdued"
         >
           <ChangeLayoutOptions />
+          <DropdownDivider />
           <DropdownHeader>Editor settings</DropdownHeader>
           <MenuBarOption
             eventKey="show_equation_preview"
             title={t('show_equation_preview')}
-            trailingIcon={mathPreview ? 'check' : undefined}
+            leadingIcon={
+              mathPreview ? 'check' : <DropdownItem.EmptyLeadingIcon />
+            }
             onClick={toggleMathPreview}
           />
+          <DropdownDivider />
           <CommandSection section={pdfControlsMenuSectionStructure} />
         </MenuBarDropdown>
         <CommandDropdown
diff --git a/services/web/frontend/js/shared/components/menu-bar/menu-bar-option.tsx b/services/web/frontend/js/shared/components/menu-bar/menu-bar-option.tsx
index 9eaa9fb26a..eccb812563 100644
--- a/services/web/frontend/js/shared/components/menu-bar/menu-bar-option.tsx
+++ b/services/web/frontend/js/shared/components/menu-bar/menu-bar-option.tsx
@@ -8,6 +8,7 @@ type MenuBarOptionProps = {
   title: string
   onClick?: MouseEventHandler
   disabled?: boolean
+  leadingIcon?: ReactNode
   trailingIcon?: ReactNode
   href?: string
   target?: string
@@ -20,6 +21,7 @@ export const MenuBarOption = ({
   onClick: clickHandler,
   href,
   disabled,
+  leadingIcon,
   trailingIcon,
   target,
   rel,
@@ -42,6 +44,7 @@ export const MenuBarOption = ({
         onMouseEnter={() => setSelected(null)}
         onClick={onClick}
         disabled={disabled}
+        leadingIcon={leadingIcon}
         trailingIcon={trailingIcon}
         href={href}
         rel={rel}