pastilhasandClaude Opus 5
f24d583e67
`1 | [1 | 1]`, and the brackets are a real container this time. Nesting them as a GROUP was the first attempt and looked identical — a horizontal group inside a horizontal group renders three columns, because that is what it is. All it bought was which divider moved what, which is invisible until you drag one. So the pair is a panel whose component hosts its own WorkspaceView, the way DashboardPreview does. It has its own chrome, its own divider and its own persisted sizes, and the root layout has two children rather than three: the shape on screen is now the shape in the file. `useAuthoredLayout` rather than `useDashboardState`, and its own key beside the root's. The structure is the author's and comes from source every render; only sizes are the user's. Sharing one key would have the inner and outer trees persisting over each other's sizes. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
54 lines
2.4 KiB
TypeScript
54 lines
2.4 KiB
TypeScript
import type { LayoutNode } from 'officerdev';
|
|
import { WorkspaceView } from 'officerdev';
|
|
import { useAuthoredLayout } from 'state/useAuthoredLayout';
|
|
|
|
/**
|
|
* The preview and its editor, as a workspace inside one panel.
|
|
*
|
|
* ── Why not two more panels in the root layout ──
|
|
*
|
|
* They were, and nesting them as a GROUP looked identical: a horizontal group inside a horizontal group
|
|
* renders three columns, because that is what it is. All the nesting bought was which divider moved
|
|
* what, which is invisible until you drag one.
|
|
*
|
|
* A workspace inside a panel is a real container. The pair sits in one panel with its own chrome, its
|
|
* own dividers and its own persisted sizes, and the outer layout has two children rather than three —
|
|
* so the shape on screen is the shape in the file.
|
|
*
|
|
* ── Its structure is the author's; only the sizes are yours ──
|
|
*
|
|
* `useAuthoredLayout`, not `useDashboardState`. The latter persists the whole tree, which is right for
|
|
* a dashboard somebody arranged and wrong here: the structure would freeze at whatever it was the first
|
|
* time this screen was opened, and a change shipped later would never reach anybody who had already
|
|
* looked. Sizes and zoom persist; the shape comes from this file every render.
|
|
*
|
|
* ── Its own key ──
|
|
*
|
|
* `screens/plugin/fofos-admin/work`, beside the root's `screens/plugin/fofos-admin`. Two layouts, two
|
|
* keys: sharing one would have the inner and outer trees persisting over each other's sizes.
|
|
*/
|
|
const workLayout: LayoutNode = {
|
|
type: 'group',
|
|
id: 'fofos-admin-work',
|
|
direction: 'horizontal',
|
|
children: [
|
|
{ node: { type: 'panel', id: 'fofos-admin-detail', appType: 'fofos-admin-detail' }, size: 70 },
|
|
{ node: { type: 'panel', id: 'fofos-admin-editor', appType: 'fofos-admin-editor' }, size: 30 },
|
|
],
|
|
};
|
|
|
|
const ALLOWED = ['fofos-admin-detail', 'fofos-admin-editor'];
|
|
|
|
export const WorkPanel = () => {
|
|
const workspace = useAuthoredLayout('screens/plugin/fofos-admin/work', workLayout);
|
|
|
|
return (
|
|
<div className="h-full w-full">
|
|
{/* `locked`, like the screen around it: this arrangement is the plugin author's design, not a
|
|
workspace to rearrange. `allowed` pins it to these two, so a persisted layout naming anything
|
|
else falls back rather than rendering some other plugin's panel in here. */}
|
|
<WorkspaceView workspace={workspace} locked appTypes={{ allowed: ALLOWED, fallback: ALLOWED[0]! }} />
|
|
</div>
|
|
);
|
|
};
|