Feature/better conversation tree

app/src/components/DialogEditor/DialogEditor.tsx

@@ -381,6 +381,10 @@ function DialogEditor({ conversationAsset, rebuild, expandAll }: { conversationA
     setIsContextMenuVisible(false);
   }, [rebuild]);
 
+  useEffect(() => {
+    resize();
+  }, [dialogEditorSize?.width, dialogEditorSize?.height, zoomLevel]);
+
   // On window size change
   useEffect(() => {
     setTimeout(() => {

app/src/components/FileTree/FileTree.css

@@ -1,18 +1,26 @@
 @import '../../css/constants.css';
 
 .file-tree {
+  display: flex;
+  flex-direction: column;
   height: 100%;
+  min-width: 0;
+  min-height: 0;
 
   &__title {
+    flex: 0 0 auto;
     font-weight: bold;
     color: $textColourSecondary;
   }
 
   &__tree {
-    height: 97%;
+    flex: 1 1 auto;
+    min-width: 0;
+    min-height: 0;
 
     .file-tree__scroll {
-      height: calc(100% - 1px);
+      width: 100%;
+      height: 100%;
       overflow: auto;
     }
 
@@ -34,9 +42,15 @@
   }
 
   .ant-tree {
+    display: inline-block;
+    min-width: 100%;
     padding-right: $smallMediumSpace;
   }
 
+  .ant-tree-treenode {
+    white-space: nowrap;
+  }
+
   .ant-tree .ant-tree-node-content-wrapper {
     margin-left: -4px;
     padding-inline: 2px 4px;

app/src/components/Split/Split.tsx

@@ -1,15 +1,31 @@
 import { Children, isValidElement, useRef, useState } from 'react';
-import type { CSSProperties, PointerEvent, ReactNode } from 'react';
+import type { CSSProperties, MouseEvent as ReactMouseEvent, PointerEvent, ReactNode } from 'react';
 import classnames from 'classnames';
 
 import './Split.css';
 
+export type SplitHandleDoubleClickContext = {
+  containerElement: HTMLDivElement;
+  containerSize: number;
+  event: ReactMouseEvent<HTMLDivElement>;
+  maxPrimarySize: number;
+  minPrimarySize: number;
+  orientation: 'vertical' | 'horizontal';
+  primarySize: number;
+  setPrimarySize: (nextPrimarySize: number) => void;
+};
+
 type Props = {
   children: ReactNode;
+  className?: string;
   horizontal?: boolean;
+  onHandleDoubleClick?: (context: SplitHandleDoubleClickContext) => void;
+  primaryCollapsed?: boolean;
+  primaryCollapsedSize?: string;
   initialPrimarySize?: string;
   minPrimarySize?: string;
   minSecondarySize?: string;
+  orientation?: 'vertical' | 'horizontal';
 };
 
 function parseSize(size: string | undefined, fallback: number): number {
@@ -25,16 +41,30 @@ function clamp(value: number, min: number, max: number): number {
   return Math.max(min, Math.min(max, value));
 }
 
-export function Split({ children, horizontal = false, initialPrimarySize = '50%', minPrimarySize = '0%', minSecondarySize = '0%' }: Props) {
+export function Split({
+  children,
+  className,
+  horizontal = false,
+  onHandleDoubleClick,
+  primaryCollapsed = false,
+  primaryCollapsedSize = '40px',
+  initialPrimarySize = '50%',
+  minPrimarySize = '0%',
+  minSecondarySize = '0%',
+  orientation,
+}: Props) {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const [primarySize, setPrimarySize] = useState(parseSize(initialPrimarySize, 50));
   const panes = Children.toArray(children).filter(isValidElement);
   const [primaryPane, secondaryPane] = panes;
-  const canResize = panes.length > 1;
+  const hasSecondaryPane = panes.length > 1;
+  const canResize = hasSecondaryPane && !primaryCollapsed;
+  const resolvedOrientation = orientation || (horizontal ? 'horizontal' : 'vertical');
+  const isHorizontal = resolvedOrientation === 'horizontal';
   const minPrimary = parseSize(minPrimarySize, 0);
   const minSecondary = parseSize(minSecondarySize, 0);
   const maxPrimary = 100 - minSecondary;
-  const clampedPrimarySize = canResize ? clamp(primarySize, minPrimary, maxPrimary) : 100;
+  const clampedPrimarySize = hasSecondaryPane ? clamp(primarySize, minPrimary, maxPrimary) : 100;
 
   const beginResize = (event: PointerEvent<HTMLDivElement>) => {
     if (!canResize || containerRef.current == null) return;
@@ -46,8 +76,8 @@ export function Split({ children, horizontal = false, initialPrimarySize = '50%'
       if (containerRef.current == null) return;
 
       const bounds = containerRef.current.getBoundingClientRect();
-      const position = horizontal ? moveEvent.clientY - bounds.top : moveEvent.clientX - bounds.left;
-      const availableSize = horizontal ? bounds.height : bounds.width;
+      const position = isHorizontal ? moveEvent.clientY - bounds.top : moveEvent.clientX - bounds.left;
+      const availableSize = isHorizontal ? bounds.height : bounds.width;
       if (availableSize <= 0) return;
 
       setPrimarySize(clamp((position / availableSize) * 100, minPrimary, maxPrimary));
@@ -63,16 +93,44 @@ export function Split({ children, horizontal = false, initialPrimarySize = '50%'
     window.addEventListener('pointerup', handleUp);
   };
 
-  const primaryStyle = { '--split-primary-size': `${clampedPrimarySize}%` } as CSSProperties;
+  const handleDoubleClick = (event: ReactMouseEvent<HTMLDivElement>) => {
+    if (!canResize || onHandleDoubleClick == null || containerRef.current == null) return;
+
+    const bounds = containerRef.current.getBoundingClientRect();
+    const containerSize = isHorizontal ? bounds.height : bounds.width;
+    if (containerSize <= 0) return;
+
+    onHandleDoubleClick({
+      containerElement: containerRef.current,
+      containerSize,
+      event,
+      maxPrimarySize: maxPrimary,
+      minPrimarySize: minPrimary,
+      orientation: resolvedOrientation,
+      primarySize: clampedPrimarySize,
+      setPrimarySize: (nextPrimarySize: number) => {
+        setPrimarySize(clamp(nextPrimarySize, minPrimary, maxPrimary));
+      },
+    });
+  };
+
+  const primaryStyle = {
+    '--split-primary-size': primaryCollapsed ? primaryCollapsedSize : `${clampedPrimarySize}%`,
+  } as CSSProperties;
 
   return (
-    <div ref={containerRef} className={classnames('split', { 'split--horizontal': horizontal })}>
+    <div
+      ref={containerRef}
+      className={classnames('split', className, `split--${resolvedOrientation}`, {
+        'split--primary-collapsed': primaryCollapsed,
+      })}
+    >
       <div className="split__pane split__pane--primary" style={primaryStyle}>
         {primaryPane}
       </div>
-      {canResize && (
+      {hasSecondaryPane && (
         <>
-          <div className="split__handle" onPointerDown={beginResize} />
+          {canResize && <div className="split__handle" onDoubleClick={handleDoubleClick} onPointerDown={beginResize} />}
           <div className="split__pane split__pane--secondary">{secondaryPane}</div>
         </>
       )}

app/src/components/Split/index.ts

@@ -1 +1,2 @@
 export { Split } from './Split';
+export type { SplitHandleDoubleClickContext } from './Split';

app/src/containers/ConversationEditor/ConversationEditor.tsx

@@ -208,7 +208,7 @@ function ConversationEditor({ conversationAsset }: Props) {
         </div>
       </div>
 
-      <Split initialPrimarySize={'68%'} {...(activeNode ? activeNodeSplitSizes : inactiveNodeSplitSizes)} horizontal>
+      <Split initialPrimarySize="68%" {...(activeNode ? activeNodeSplitSizes : inactiveNodeSplitSizes)} orientation="horizontal">
         <DialogEditor conversationAsset={unsavedActiveConversationAsset} rebuild={rebuild} expandAll={isAllExpanded} />
 
         {activeNode && (

app/src/containers/ConversationTree/ConversationTree.css

@@ -1,8 +1,4 @@
 .conversation-tree {
   height: 100%;
   min-width: 125px;
-
-  @media screen and (min-width: 1px) and (max-width: 1180px) {
-    display: none;
-  }
 }

app/src/containers/ConversationTree/ConversationTree.tsx

@@ -12,6 +12,10 @@ import { updateConversation } from 'services/api';
 
 import './ConversationTree.css';
 
+type Props = {
+  showTitle?: boolean;
+};
+
 function remapConversationData(conversationAssets: Map<string, ConversationAssetType>) {
   return sortBy(
     Array.from(conversationAssets.values()).map((asset) => ({
@@ -22,7 +26,7 @@ function remapConversationData(conversationAssets: Map<string, ConversationAsset
   );
 }
 
-function ConversationTree() {
+function ConversationTree({ showTitle = true }: Props) {
   const dataStore = useStore<DataStore>('data');
   const modalStore = useStore<ModalStore>('modal');
 
@@ -70,7 +74,7 @@ function ConversationTree() {
     <div className="conversation-tree">
       <ConversationTreeContextMenu id="conversation-context-menu" />
       <FileTree
-        title="Conversations"
+        title={showTitle ? 'Conversations' : ''}
         data={data}
         onSelected={onNodeSelected}
         selectedKeys={selectedKeys || []}

app/src/containers/Conversations/Conversations.css

@@ -2,16 +2,79 @@
 
 .conversations {
   height: 100%;
-  display: flex;
+  min-width: 0;
+  min-height: 0;
 
   &__tree {
     height: 100%;
-    padding: $smallMediumSpace 0 $smallMediumSpace $smallMediumSpace;
+    min-width: 0;
     background-color: $backgroundTertiary;
-    border-right: 1px solid $borderTertiary;
+  }
+
+  &__tree-dock {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    padding: $smallMediumSpace 0 $smallMediumSpace $smallMediumSpace;
+  }
+
+  &__tree-dock--collapsed {
+    align-items: center;
+    padding: $smallMediumSpace 0;
+  }
+
+  &__tree-dock-header {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: space-between;
+    gap: $smallSpace;
+    min-height: 32px;
+    margin-bottom: $tinySpace;
+    padding-right: $smallMediumSpace;
+  }
+
+  &__tree-dock--collapsed &__tree-dock-header {
+    justify-content: center;
+    padding-right: 0;
+  }
+
+  &__tree-dock-title {
+    min-width: 0;
+    overflow: hidden;
+    color: $textColourSecondary;
+    font-weight: bold;
+    line-height: 24px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__tree-dock-content {
+    flex: 1 1 auto;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  &__dock-toggle.ant-btn {
+    flex: 0 0 auto;
+    width: 32px;
+    height: 32px;
   }
 
   &__main {
-    flex-grow: 1;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  &__split {
+    height: 100%;
+  }
+
+  &__split.split--primary-collapsed > .split__pane--primary {
+    box-shadow: inset -1px 0 0 $borderTertiary;
   }
-}
+}