From 6c63002cd11de875306c9133d6aa9c7f8cc4bfb1 Mon Sep 17 00:00:00 2001
From: Malik Glossop <glossopm@users.noreply.github.com>
Date: Fri, 31 Jul 2026 10:54:30 +0200
Subject: [PATCH] Merge pull request #36041 from overleaf/mg-offline-focus-mode

Add offline indicator for focus mode

GitOrigin-RevId: 3764577500d67b139c31a356f4f5e82888c44209
---
 .../ide-react/components/toolbar/toolbar.tsx  | 49 ++++++++++---------
 .../features/ide-react/unit/toolbar.spec.tsx  | 39 +++++++++++++--
 2 files changed, 61 insertions(+), 27 deletions(-)

diff --git a/services/web/frontend/js/features/ide-react/components/toolbar/toolbar.tsx b/services/web/frontend/js/features/ide-react/components/toolbar/toolbar.tsx
index 12acea38a6..ccdf791918 100644
--- a/services/web/frontend/js/features/ide-react/components/toolbar/toolbar.tsx
+++ b/services/web/frontend/js/features/ide-react/components/toolbar/toolbar.tsx
@@ -72,37 +72,42 @@ export const Toolbar = () => {
           <ToolbarLogos cobranding={cobranding} />
         </div>
         <ToolbarProjectTitle />
-        <div className="ide-redesign-toolbar-actions">
-          {showViewSwitcher && (
+        <div className="ide-redesign-toolbar-actions-wrapper">
+          {improvedFlakyConnections && (
+            <OfflineIndicator isOffline={isOfflineDueToNetworkStall} />
+          )}
+          <div className="ide-redesign-toolbar-actions">
+            {showViewSwitcher && (
+              <div className="ide-redesign-toolbar-button-container">
+                <OLTooltip
+                  id="tooltip-switch-view"
+                  description={switchTooltip}
+                  overlayProps={{ delay: 0, placement: 'bottom' }}
+                >
+                  <OLIconButton
+                    icon={switchIcon}
+                    className="ide-redesign-toolbar-button-subdued ide-redesign-toolbar-button-icon"
+                    onClick={handleSwitchView}
+                    accessibilityLabel={switchTooltip}
+                  />
+                </OLTooltip>
+              </div>
+            )}
+            <ChangeLayoutButton />
             <div className="ide-redesign-toolbar-button-container">
               <OLTooltip
-                id="tooltip-switch-view"
-                description={switchTooltip}
+                id="tooltip-exit-focus-mode"
+                description={t('exit_focus_mode')}
                 overlayProps={{ delay: 0, placement: 'bottom' }}
               >
                 <OLIconButton
-                  icon={switchIcon}
+                  icon="close_fullscreen"
                   className="ide-redesign-toolbar-button-subdued ide-redesign-toolbar-button-icon"
-                  onClick={handleSwitchView}
-                  accessibilityLabel={switchTooltip}
+                  onClick={handleExitFocusMode}
+                  accessibilityLabel={t('exit_focus_mode')}
                 />
               </OLTooltip>
             </div>
-          )}
-          <ChangeLayoutButton />
-          <div className="ide-redesign-toolbar-button-container">
-            <OLTooltip
-              id="tooltip-exit-focus-mode"
-              description={t('exit_focus_mode')}
-              overlayProps={{ delay: 0, placement: 'bottom' }}
-            >
-              <OLIconButton
-                icon="close_fullscreen"
-                className="ide-redesign-toolbar-button-subdued ide-redesign-toolbar-button-icon"
-                onClick={handleExitFocusMode}
-                accessibilityLabel={t('exit_focus_mode')}
-              />
-            </OLTooltip>
           </div>
         </div>
       </nav>
diff --git a/services/web/test/frontend/features/ide-react/unit/toolbar.spec.tsx b/services/web/test/frontend/features/ide-react/unit/toolbar.spec.tsx
index 65bc4aaaa8..b12c2511ff 100644
--- a/services/web/test/frontend/features/ide-react/unit/toolbar.spec.tsx
+++ b/services/web/test/frontend/features/ide-react/unit/toolbar.spec.tsx
@@ -252,6 +252,8 @@ describe('<Toolbar />', function () {
   })
 
   describe('offline gating', function () {
+    const offlineIndicatorText = 'You’re offline'
+
     const onlineUser: OnlineUser = {
       id: 'client-1',
       user_id: 'user-1',
@@ -260,10 +262,16 @@ describe('<Toolbar />', function () {
       initial: 'a',
     }
 
-    const mountToolbar = ({ offline }: { offline: boolean }) => {
+    const mountToolbar = ({
+      offline,
+      focusMode = false,
+    }: {
+      offline: boolean
+      focusMode?: boolean
+    }) => {
       const unsavedDocs = offline ? new Map([['doc-1', 20]]) : new Map()
       cy.mount(
-        <EditorProviders>
+        <EditorProviders layoutContext={{ focusMode }}>
           <OnlineUsersContext.Provider
             value={{
               onlineUsers: {},
@@ -294,13 +302,26 @@ describe('<Toolbar />', function () {
       it('shows online users and no offline indicator when online', function () {
         mountToolbar({ offline: false })
         cy.get('.ide-redesign-online-users').should('exist')
-        cy.findByText('You’re offline').should('not.exist')
+        cy.findByText(offlineIndicatorText).should('not.exist')
       })
 
       it('hides online users and shows the offline indicator when offline', function () {
         mountToolbar({ offline: true })
         cy.get('.ide-redesign-online-users').should('not.exist')
-        cy.findAllByText('You’re offline').first().should('be.visible')
+        cy.findAllByText(offlineIndicatorText).first().should('be.visible')
+      })
+
+      it('shows the offline indicator in focus mode', function () {
+        mountToolbar({ offline: true, focusMode: true })
+        cy.findAllByText(offlineIndicatorText).first().should('be.visible')
+        cy.findByRole('button', { name: 'Exit focus mode' }).should(
+          'be.visible'
+        )
+      })
+
+      it('shows no offline indicator in focus mode when online', function () {
+        mountToolbar({ offline: false, focusMode: true })
+        cy.findByText(offlineIndicatorText).should('not.exist')
       })
     })
 
@@ -308,7 +329,15 @@ describe('<Toolbar />', function () {
       it('always shows online users and never the offline indicator', function () {
         mountToolbar({ offline: true })
         cy.get('.ide-redesign-online-users').should('exist')
-        cy.findByText('You’re offline').should('not.exist')
+        cy.findByText(offlineIndicatorText).should('not.exist')
+      })
+
+      it('shows no offline indicator in focus mode', function () {
+        mountToolbar({ offline: true, focusMode: true })
+        cy.findByText(offlineIndicatorText).should('not.exist')
+        cy.findByRole('button', { name: 'Exit focus mode' }).should(
+          'be.visible'
+        )
       })
     })
   })