import type { LayoutNode } from 'officerdev';

// List left, detail right — a master list with a live preview, which is why the selection is `?selected=`
// rather than a `/plugins/:appName` route: linking rows to the detail route would make it the whole page
// and destroy the side-by-side. See docs/navigation-audit.md.
export const defaultLayout: LayoutNode = {
  type: 'group',
  id: 'plugins-root',
  direction: 'horizontal',
  children: [
    // 22/78, not 32/68. The left panel was a list of every plugin and needed the room; it is a list of
    // seven tags now, and the grid on the right is what benefits from the width — one more card per row.
    { node: { type: 'panel', id: 'plugins-list', appType: 'plugins-list' }, size: 22 },
    { node: { type: 'panel', id: 'plugin-detail', appType: 'plugin-detail' }, size: 78 },
  ],
};