From 5e42a4da6d4c41ac3d85f57401a5ce241a647cf8 Mon Sep 17 00:00:00 2001
From: David <33458145+davidmcpowell@users.noreply.github.com>
Date: Thu, 17 Jul 2025 13:45:31 +0100
Subject: [PATCH] Merge pull request #27205 from overleaf/dp-persist-rail-tab

Persist currently selected rail tab on refresh

GitOrigin-RevId: a609bed93340d950a1fba8358fd5ed20afe6a4ce
---
 .../js/features/ide-redesign/components/rail.tsx     | 12 ++++++++++--
 .../features/ide-redesign/contexts/rail-context.tsx  |  7 ++++---
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/services/web/frontend/js/features/ide-redesign/components/rail.tsx b/services/web/frontend/js/features/ide-redesign/components/rail.tsx
index 1f9bb0b0aa..42374583ab 100644
--- a/services/web/frontend/js/features/ide-redesign/components/rail.tsx
+++ b/services/web/frontend/js/features/ide-redesign/components/rail.tsx
@@ -55,6 +55,7 @@ type RailElement = {
   title: string
   hide?: boolean
   disabled?: boolean
+  mountOnFirstLoad?: boolean
 }
 
 type RailActionButton = {
@@ -123,6 +124,9 @@ export const RailLayout = () => {
         icon: 'description',
         title: t('file_tree'),
         component: <FileTreeOutlinePanel />,
+        // NOTE: We always need to mount the file tree on first load
+        // since it is responsible for opening the initial document.
+        mountOnFirstLoad: true,
       },
       {
         key: 'full-project-search',
@@ -300,8 +304,12 @@ export const RailLayout = () => {
           <Tab.Content className="ide-rail-tab-content">
             {railTabs
               .filter(({ hide }) => !hide)
-              .map(({ key, component }) => (
-                <Tab.Pane eventKey={key} key={key}>
+              .map(({ key, component, mountOnFirstLoad }) => (
+                <Tab.Pane
+                  eventKey={key}
+                  key={key}
+                  mountOnEnter={!mountOnFirstLoad}
+                >
                   {component}
                 </Tab.Pane>
               ))}
diff --git a/services/web/frontend/js/features/ide-redesign/contexts/rail-context.tsx b/services/web/frontend/js/features/ide-redesign/contexts/rail-context.tsx
index 47d30f8cee..a98d3693c5 100644
--- a/services/web/frontend/js/features/ide-redesign/contexts/rail-context.tsx
+++ b/services/web/frontend/js/features/ide-redesign/contexts/rail-context.tsx
@@ -69,9 +69,10 @@ export const RailProvider: FC<React.PropsWithChildren> = ({ children }) => {
     setIsOpen(false)
   }, [setIsOpen])
 
-  // NOTE: The file tree **MUST** be the first tab to be opened
-  //       since it is responsible for opening the initial document.
-  const [selectedTab, setSelectedTab] = useState<RailTabKey>('file-tree')
+  const [selectedTab, setSelectedTab] = usePersistedState<RailTabKey>(
+    'selected-rail-tab',
+    'file-tree'
+  )
 
   // Keep the panel collapse/expanded state in sync with isOpen and selectedTab
   useLayoutEffect(() => {