Merge pull request #23080 from overleaf/dp-file-outline-in-editor

Add file outline to new editor

GitOrigin-RevId: c9b36d480b243905de8e98dcb838c56a2fe9d2b0

services/web/frontend/js/features/ide-redesign/components/file-tree-outline-panel.tsx

@@ -0,0 +1,33 @@
+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'
+
+function FileTreeOutlinePanel() {
+  return (
+    <PanelGroup
+      autoSaveId="ide-redesign-file-tree-outline"
+      direction="vertical"
+    >
+      <Panel
+        defaultSize={50}
+        minSize={25}
+        id="ide-redesign-file-tree"
+        order={1}
+      >
+        <FileTree />
+      </Panel>
+      <VerticalResizeHandle hitAreaMargins={{ coarse: 0, fine: 0 }} />
+      <Panel
+        defaultSize={50}
+        maxSize={75}
+        id="ide-redesign-file-outline"
+        order={2}
+      >
+        <OutlineContainer />
+      </Panel>
+    </PanelGroup>
+  )
+}
+
+export default FileTreeOutlinePanel

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

@@ -5,8 +5,8 @@ import MaterialIcon, {
 } from '@/shared/components/material-icon'
 import { Panel } from 'react-resizable-panels'
 import { useLayoutContext } from '@/shared/context/layout-context'
-import { FileTree } from '@/features/ide-react/components/file-tree'
 import { ErrorIndicator, ErrorPane } from './errors'
+import FileTreeOutlinePanel from './file-tree-outline-panel'
 
 type RailElement = {
   icon: AvailableUnfilledIcon
@@ -29,12 +29,7 @@ const RAIL_TABS: RailElement[] = [
   {
     key: 'file-tree',
     icon: 'description',
-    component: (
-      <>
-        {/* TODO: add panel for file outline */}
-        <FileTree />
-      </>
-    ),
+    component: <FileTreeOutlinePanel />,
   },
   {
     key: 'integrations',

services/web/frontend/stylesheets/bootstrap-5/pages/editor/outline.scss

@@ -7,6 +7,7 @@
   --outline-container-color-bg: var(--bg-dark-tertiary);
   --outline-content-color: var(--content-primary-dark);
   --outline-item-highlight-color: var(--neutral-60);
+  --outline-item-carat-color: var(--content-disabled);
 }
 
 @include theme('light') {
@@ -18,6 +19,81 @@
   --outline-container-color-bg: var(--bg-light-primary);
   --outline-content-color: var(--content-secondary);
   --outline-item-highlight-color: var(--bg-light-secondary);
+  --outline-item-carat-color: var(--content-disabled);
+}
+
+// TODO ide-redesign-cleanup: Replace the existing styling with these overrides.
+.ide-redesign-main {
+  --outline-bg-color: var(--bg-light-primary);
+  --outline-item-hover-bg: var(--bg-light-secondary);
+  --outline-header-hover-bg: var(--bg-light-secondary);
+  --outline-content-color: var(--content-primary);
+  --outline-item-highlight-color: var(--bg-light-secondary);
+  --outline-item-carat-color: var(--content-primary);
+  --outline-line-guide-color: color-mix(
+    in srgb,
+    var(--border-primary) 24%,
+    transparent
+  );
+  --outline-container-color-bg: var(--bg-light-primary);
+
+  .outline-pane {
+    padding: 4px;
+  }
+
+  .outline-header {
+    border: none;
+    height: unset;
+  }
+
+  .outline-header-expand-collapse-btn {
+    border-radius: var(--border-radius-base);
+    padding: var(--spacing-02);
+  }
+
+  .outline-header-name {
+    font-weight: unset;
+  }
+
+  .outline-carat-icon {
+    font-size: unset;
+  }
+
+  .outline-body {
+    padding-right: 0;
+  }
+
+  .outline-item-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-02);
+    margin-top: var(--spacing-02);
+
+    &::before {
+      left: var(--spacing-06);
+    }
+  }
+
+  .outline-item-list-root {
+    &::before {
+      content: none;
+    }
+  }
+
+  .outline-item-expand-collapse-btn {
+    display: flex;
+    align-items: center;
+    padding: var(--spacing-02);
+  }
+
+  .outline-item-no-children {
+    padding-left: 0;
+  }
+
+  .outline-item-link {
+    flex-grow: 1;
+    padding: var(--spacing-02);
+  }
 }
 
 .outline-container {
@@ -182,7 +258,7 @@
   vertical-align: inherit;
   position: relative;
   z-index: 1;
-  color: var(--content-disabled);
+  color: var(--outline-item-carat-color);
   margin-right: calc(var(--spacing-03) * -1);
   border-radius: var(--border-radius-base);
 

services/web/frontend/stylesheets/bootstrap-5/pages/editor/rail.scss

@@ -70,6 +70,10 @@
     top: 0;
   }
 
+  .tab-pane {
+    height: 100%;
+  }
+
   .tab-content {
     height: 100%;
     width: 100%;