Four panels became three, and the arrangement carries the change: everything that organises or configures is stacked in one narrow column, and the whole of the rest is one surface for looking at images. Collections is a LIST, not a grid of covers — it sits in a narrow column beside the gallery, where two cards per row meant four collections visible. A row is a name, a count, and rename/delete on hover. Create is a dialog rather than an always-present input, and a filter field replaces it in that space, since finding one is the frequent act and making one is not. Selecting a collection now shows it in the GALLERY. It used to replace the list inside its own panel, which meant the selector disappeared the moment it was used, and both panels kept their own copy of one collection's images and disagreed after any edit. `?collection=` is read by the gallery now; the collections hook stopped fetching detail entirely. Deleting asks the question that cannot be undone: keep the images, or delete them too. That needed a server route — DELETE /collections/:id?images=delete — which reads the members BEFORE the collection goes, since deleting it takes the memberships with it. Unchecked by default: the recoverable answer is the one you get by pressing Enter without reading. Providers stopped being a panel. It was a card per provider, each with a key field and three buttons, filling a quarter of the screen for something set once — it is a dropdown at the top of Generate now, listing "adapter · model" with a delete on each, and adding one opens a dialog. The form and the dropdown share one provider list (useProviders); they were two fetches, so adding a provider left the form showing the old models until a reload.
35 lines
1.4 KiB
TypeScript
35 lines
1.4 KiB
TypeScript
import type { LayoutNode } from 'officerdev';
|
|
|
|
// Two panels on the left, the work on the right.
|
|
//
|
|
// The arrangement is the point rather than the panel count: everything that ORGANISES (collections)
|
|
// or CONFIGURES (providers, the generate form) is stacked in one narrow column, and the whole of the
|
|
// rest is one wide surface for looking at images — the gallery, or one collection's images when a
|
|
// collection is selected. Selecting a collection is a navigation on that surface, not a view that
|
|
// opens inside the narrow list that triggered it.
|
|
//
|
|
// Providers is no longer its own panel. It is a dropdown at the top of Generate, because a provider is
|
|
// picked once and then lives as a fact about the next generation — the same panel, a few pixels up.
|
|
//
|
|
// Users can resize or rearrange freely; this is only the starting point.
|
|
export const defaultLayout: LayoutNode = {
|
|
type: 'group',
|
|
id: 'atelier-root',
|
|
direction: 'horizontal',
|
|
children: [
|
|
{
|
|
node: {
|
|
type: 'group',
|
|
id: 'atelier-side',
|
|
direction: 'vertical',
|
|
children: [
|
|
{ node: { type: 'panel', id: 'atelier-collections', appType: 'atelier-collections' }, size: 40 },
|
|
{ node: { type: 'panel', id: 'atelier-generate', appType: 'atelier-generate' }, size: 60 },
|
|
],
|
|
},
|
|
size: 30,
|
|
},
|
|
{ node: { type: 'panel', id: 'atelier-gallery', appType: 'atelier-gallery' }, size: 70 },
|
|
],
|
|
};
|