Edge Panels

Pinned side and bottom panels outside the main tiled grid.

Use edge panels for app chrome that should stay anchored around the workspace: file explorers, inspectors, terminals, and problem lists. Resize the left, right, and bottom panels, then resize the editor split to see that the main tiled grid stays inside the remaining center area.

Edge panels still hold normal Tilery tabs, so tabs can move into and out of their tab bars. They are not part of the main split tree, which keeps editor divider logic separate from workspace sidebars.

const layout: TileryInitialLayout<TabData> = {
  type: 'root',
  main: {
    type: 'group',
    direction: 'horizontal',
    children: [
      {
        type: 'panel',
        id: 'editor-a',
        size: 58,
        tabs: [
          { id: 'index-ts', data: { title: 'index.ts', kind: 'editor' } },
          { id: 'router-ts', data: { title: 'router.ts', kind: 'editor' } },
        ],
      },
      {
        type: 'panel',
        id: 'editor-b',
        size: 42,
        tabs: [{ id: 'preview', data: { title: 'Preview', kind: 'editor' } }],
      },
    ],
  },
  edges: {
    left: {
      type: 'edgePanel',
      id: 'left-tools',
      size: 22,
      minSize: 14,
      maxSize: 34,
      tabs: [
        {
          id: 'explorer',
          data: { title: 'Explorer', kind: 'explorer' },
          closable: false,
        },
        { id: 'search', data: { title: 'Search', kind: 'search' } },
      ],
    },
    right: {
      type: 'edgePanel',
      id: 'right-tools',
      size: 18,
      minSize: 12,
      maxSize: 28,
      tabs: [{ id: 'outline', data: { title: 'Outline', kind: 'outline' } }],
    },
    bottom: {
      type: 'edgePanel',
      id: 'bottom-tools',
      size: 28,
      minSize: 18,
      maxSize: 42,
      tabs: [
        {
          id: 'terminal',
          data: { title: 'Terminal', kind: 'terminal' },
          closable: false,
        },
        { id: 'problems', data: { title: 'Problems', kind: 'problems' } },
      ],
    },
  },
};

<Tilery<TabData>
  initialLayout={layout}
  renderTabHeader={(tab: TileryTab<TabData>) => (
    <span>{tab.data.title}</span>
  )}
  renderTabContent={(tab: TileryTab<TabData>) => (
    <TabContent meta={panelKindLabel(tab.panel.kind)}>
      {renderContent(tab)}
    </TabContent>
  )}
/>

Related