Split Pane View

[curran]

As a VZCode user editing two files at once, I want to be able to see them side by side, so that I can easily switch, or copy-paste between them.

[curran]

In VSCode you can drag and drop and it looks like this:

Then you get a resizer

The same would be amazing in VZCode.

[michaelhelper]

https://codemirror.net/examples/split/

[curran]

state.pane = {
  type: 'splitPane',
  children: [
    {
      type: 'leafPane',
      tabList: [...]
    },
    {
      type: 'leafPane',
      tabList: [...]
    }
  ]
}

[curran]

[curran]

[curran]

Data structure ideas for changes to VZState

// The leaf node of the tree data structure
type LeafPane = {
  type: 'leafPane';
  // The list of tabs
  // Mutually exclusive with `children`.
  tabList: Array<TabState>;
};

// Internal node of the tree data structure
type SplitPane = {
  type: 'splitPane';
  // Which orientation is it? Vertical split or horizontal split?
  // Applies only to `children`
  orientation: 'vertical' | 'horizontal';

  // The children panels
  // Mutually exclusive with `tabList`.
  children: Array<Pane>;
};

// The node data structure of the split pane tree
type Pane = LeafPane | SplitPane;

// The shape of the state managed by the reducer.
export type VZState = {
  // The state of the split pane (tree data structure).
  pane: Pane;

[curran]

Path forward:

• Add the icon
• When clicking the icon, split the pane by dispatching an action
• In the reducer that handles that action, 1.) isolate the pane that you want to split (at first this can be hardcoded to root), or code it to split the currently active pane.

See https://github.com/vizhub-core/vzcode/pull/802/files#diff-7b0b8b4acf26941c196d943f9cb0288d362d834d3f643c62c25f2c71b4803bed - similar to this function

[curran]

From here on out:

• [ ] Deal with the URL - maybe just encode the active pane in the URL for first version
• [ ] Change VZCodeContext to not expose tabList and activeFileId, and instead have it expose state.pane
• [ ] Modify the downstream components to traverse that tree - introduce a new component as a child of VZMiddle src/client/VZMiddle.tsx

Replace this stuff with a recursive component:

      <TabList />
      {isClient && content && activeFileId && (
        <CodeEditor
          customInteractRules={customInteractRules}
          allowGlobals={allowGlobals}
        />
      )}