Merge pull request #27384 from overleaf/dp-drag-file-tree-outline

Allow file tree and outline to be expandable and collapsible by dragging

GitOrigin-RevId: e25f0d263b1446537cdb42ef52fe1c486e855773

services/web/frontend/js/features/ide-react/context/file-tree-open-context.tsx

@@ -32,6 +32,8 @@ const FileTreeOpenContext = createContext<
       handleFileTreeDelete: (entity: FileTreeFindResult) => void
       fileTreeExpanded: boolean
       toggleFileTreeExpanded: () => void
+      expandFileTree: () => void
+      collapseFileTree: () => void
     }
   | undefined
 >(undefined)
@@ -59,6 +61,14 @@ export const FileTreeOpenProvider: FC<React.PropsWithChildren> = ({
     setFileTreeExpanded(prev => !prev)
   }, [])
 
+  const expandFileTree = useCallback(() => {
+    setFileTreeExpanded(true)
+  }, [])
+
+  const collapseFileTree = useCallback(() => {
+    setFileTreeExpanded(false)
+  }, [])
+
   const handleFileTreeInit = useCallback(() => {
     setFileTreeReady(true)
   }, [])
@@ -144,6 +154,8 @@ export const FileTreeOpenProvider: FC<React.PropsWithChildren> = ({
       handleFileTreeDelete,
       fileTreeExpanded,
       toggleFileTreeExpanded,
+      expandFileTree,
+      collapseFileTree,
     }
   }, [
     handleFileTreeDelete,
@@ -153,6 +165,8 @@ export const FileTreeOpenProvider: FC<React.PropsWithChildren> = ({
     selectedEntityCount,
     fileTreeExpanded,
     toggleFileTreeExpanded,
+    expandFileTree,
+    collapseFileTree,
   ])
 
   return (

services/web/frontend/js/features/ide-react/context/outline-context.tsx

@@ -38,6 +38,8 @@ const OutlineContext = createContext<
       canShowOutline: boolean
       outlineExpanded: boolean
       toggleOutlineExpanded: () => void
+      expandOutline: () => void
+      collapseOutline: () => void
     }
   | undefined
 >(undefined)
@@ -133,15 +135,29 @@ export const OutlineProvider: FC<React.PropsWithChildren> = ({ children }) => {
 
   const canShowOutline = isTexFile && !binaryFileOpened
 
-  const toggleOutlineExpanded = useCallback(() => {
+  const expandOutline = useCallback(() => {
     if (canShowOutline) {
-      localStorage.setItem(storageKey, !outlineExpanded)
-      eventTracking.sendMB(
-        outlineExpanded ? 'outline-collapse' : 'outline-expand'
-      )
-      setOutlineExpanded(!outlineExpanded)
+      localStorage.setItem(storageKey, true)
+      eventTracking.sendMB('outline-expand')
+      setOutlineExpanded(true)
     }
-  }, [canShowOutline, outlineExpanded, storageKey])
+  }, [canShowOutline, storageKey])
+
+  const collapseOutline = useCallback(() => {
+    if (canShowOutline) {
+      localStorage.setItem(storageKey, false)
+      eventTracking.sendMB('outline-collapse')
+      setOutlineExpanded(false)
+    }
+  }, [canShowOutline, storageKey])
+
+  const toggleOutlineExpanded = useCallback(() => {
+    if (outlineExpanded) {
+      collapseOutline()
+    } else {
+      expandOutline()
+    }
+  }, [collapseOutline, expandOutline, outlineExpanded])
 
   const value = useMemo(
     () => ({
@@ -152,6 +168,8 @@ export const OutlineProvider: FC<React.PropsWithChildren> = ({ children }) => {
       canShowOutline,
       outlineExpanded,
       toggleOutlineExpanded,
+      expandOutline,
+      collapseOutline,
     }),
     [
       flatOutline,
@@ -160,6 +178,8 @@ export const OutlineProvider: FC<React.PropsWithChildren> = ({ children }) => {
       canShowOutline,
       outlineExpanded,
       toggleOutlineExpanded,
+      expandOutline,
+      collapseOutline,
     ]
   )
 

services/web/frontend/js/features/ide-react/hooks/use-outline-pane.ts

@@ -4,11 +4,18 @@ import { useRef } from 'react'
 import { ImperativePanelHandle } from 'react-resizable-panels'
 
 export const useOutlinePane = () => {
-  const { canShowOutline, outlineExpanded } = useOutlineContext()
+  const { canShowOutline, outlineExpanded, expandOutline, collapseOutline } =
+    useOutlineContext()
   const outlinePanelRef = useRef<ImperativePanelHandle>(null)
   const outlineEnabled = canShowOutline && outlineExpanded
 
   useCollapsiblePanel(outlineEnabled, outlinePanelRef)
 
-  return { outlineEnabled, outlinePanelRef }
+  return {
+    outlineEnabled,
+    canShowOutline,
+    outlinePanelRef,
+    expandOutline,
+    collapseOutline,
+  }
 }