overleaf-cep/services/web/frontend/js/features/ide-redesign/components/file-tree/file-tree-outline-panel.tsx
David 061f10a059 Merge pull request #25752 from overleaf/dp-delete-multiple-files
Add bulk delete button to file tree toolbar

GitOrigin-RevId: c857d8f5027eddb29b1ca324efe1a0e94ef4c28b
2025-05-22 08:06:42 +00:00

49 lines
1.5 KiB
TypeScript

import { Panel, PanelGroup } from 'react-resizable-panels'
import { FileTree } from '@/features/ide-react/components/file-tree'
import { OutlineContainer } from '@/features/outline/components/outline-container'
import { VerticalResizeHandle } from '@/features/ide-react/components/resize/vertical-resize-handle'
import { useOutlinePane } from '@/features/ide-react/hooks/use-outline-pane'
import useCollapsibleFileTree from '../../hooks/use-collapsible-file-tree'
import classNames from 'classnames'
function FileTreeOutlinePanel() {
const { outlineEnabled, outlinePanelRef } = useOutlinePane()
const { fileTreeExpanded, fileTreePanelRef } = useCollapsibleFileTree()
return (
<PanelGroup
className="file-tree-outline-panel-group"
autoSaveId="ide-redesign-file-tree-outline"
direction="vertical"
>
<Panel
className={classNames('file-tree-panel', {
'file-tree-panel-collapsed': !fileTreeExpanded,
})}
defaultSize={50}
id="ide-redesign-file-tree"
order={1}
collapsible
ref={fileTreePanelRef}
>
<FileTree />
</Panel>
<VerticalResizeHandle
hitAreaMargins={{ coarse: 0, fine: 0 }}
disabled={!outlineEnabled || !fileTreeExpanded}
/>
<Panel
className="file-outline-panel"
defaultSize={50}
id="ide-redesign-file-outline"
order={2}
collapsible
ref={outlinePanelRef}
>
<OutlineContainer />
</Panel>
</PanelGroup>
)
}
export default FileTreeOutlinePanel