Merge pull request #27205 from overleaf/dp-persist-rail-tab

Persist currently selected rail tab on refresh

GitOrigin-RevId: a609bed93340d950a1fba8358fd5ed20afe6a4ce

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

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