Merge pull request #27034 from overleaf/dp-rail-tabs-on-click

Ensure rail tab always opens when clicked

GitOrigin-RevId: 70a01fab81c15011753b469a117cde599f98b541

services/web/frontend/js/features/ide-redesign/components/rail.tsx

@@ -44,6 +44,7 @@ import OldErrorPane from './error-logs/old-error-pane'
 import { useFeatureFlag } from '@/shared/context/split-test-context'
 import { useSurveyUrl } from '../hooks/use-survey-url'
 import { useProjectContext } from '@/shared/context/project-context'
+import usePreviousValue from '@/shared/hooks/use-previous-value'
 
 type RailElement = {
   icon: AvailableUnfilledIcon
@@ -217,6 +218,18 @@ export const RailLayout = () => {
 
   const isReviewPanelOpen = selectedTab === 'review-panel'
 
+  const prevTab = usePreviousValue(selectedTab)
+
+  const tabHasChanged = useMemo(() => {
+    return prevTab !== selectedTab
+  }, [prevTab, selectedTab])
+
+  const onCollapse = useCallback(() => {
+    if (!tabHasChanged) {
+      handlePaneCollapse()
+    }
+  }, [tabHasChanged, handlePaneCollapse])
+
   return (
     <TabContainer
       mountOnEnter // Only render when necessary (so that we can lazy load tab content)
@@ -260,7 +273,7 @@ export const RailLayout = () => {
         maxSize={80}
         ref={panelRef}
         collapsible
-        onCollapse={handlePaneCollapse}
+        onCollapse={onCollapse}
         onExpand={handlePaneExpand}
       >
         {isHistoryView && <HistorySidebar />}

services/web/frontend/js/features/ide-redesign/contexts/rail-context.tsx

@@ -1,5 +1,4 @@
 import { sendSearchEvent } from '@/features/event-tracking/search-events'
-import useCollapsiblePanel from '@/features/ide-react/hooks/use-collapsible-panel'
 import useEventListener from '@/shared/hooks/use-event-listener'
 import { isMac } from '@/shared/utils/os'
 import {
@@ -9,6 +8,8 @@ import {
   SetStateAction,
   useCallback,
   useContext,
+  useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -55,7 +56,6 @@ export const RailProvider: FC<React.PropsWithChildren> = ({ children }) => {
     }, [])
 
   const panelRef = useRef<ImperativePanelHandle>(null)
-  useCollapsiblePanel(isOpen, panelRef)
 
   const togglePane = useCallback(() => {
     setIsOpen(value => !value)
@@ -73,6 +73,19 @@ export const RailProvider: FC<React.PropsWithChildren> = ({ children }) => {
   //       since it is responsible for opening the initial document.
   const [selectedTab, setSelectedTab] = useState<RailTabKey>('file-tree')
 
+  // Keep the panel collapse/expanded state in sync with isOpen and selectedTab
+  useLayoutEffect(() => {
+    const panelHandle = panelRef.current
+
+    if (panelHandle) {
+      if (isOpen) {
+        panelHandle.expand()
+      } else {
+        panelHandle.collapse()
+      }
+    }
+  }, [isOpen, selectedTab])
+
   const openTab = useCallback(
     (tab: RailTabKey) => {
       setSelectedTab(tab)