pastilhasandClaude Opus 5
2ab9e78790
The picker listed it as `soon` beside Image. It is not soon any more — the set, its ordering and the carousel that draws it were already built on the site, so the block is a reference to one and the admin's whole job is choosing which. `GalleryPicker` chooses a SET and nothing else. Editing what is IN the set stays under Galleries: a block that could also rearrange its own pictures would be a second place to do one job, and the two would disagree. No thumbnails — every stored path names an original a browser cannot display, and the plugin has no way to address a rendition, so the name and the count identify it instead. Saved on choose, like a video and for the same reason: picking one thing is one act with one outcome, so there is nothing to draft and nothing to cancel out of. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
94 lines
3.9 KiB
TypeScript
94 lines
3.9 KiB
TypeScript
import { Images, Type, Video, type LucideIcon } from 'lucide-react';
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
|
|
|
/**
|
|
* Choosing what to put in a column.
|
|
*
|
|
* ── One option is still a choice worth showing ──
|
|
*
|
|
* I had argued the opposite: Free Text is the only kind that works, so opening the editor straight away
|
|
* saves a click that asks to be got past. That was wrong in the way a shortcut usually is — it optimised
|
|
* the state of the app today and hid the shape of it. Somebody adding a component cannot see what a
|
|
* component IS, or that there will be others, and the day the second kind lands the interaction changes
|
|
* underneath them.
|
|
*
|
|
* It is also the pattern this admin already uses. The nav lists unbuilt sections as `soon` rather than
|
|
* hiding them, on the reasoning that a nav showing only what is finished gives no sense of what the
|
|
* thing is for. The same argument applies here.
|
|
*
|
|
* ── The list is in the plugin, not the API ──
|
|
*
|
|
* The API decides what may be STORED — `free-text`, today. This decides what may be OFFERED, and it has
|
|
* to live here because every kind needs a label, an icon and an editor that only exists in this plugin.
|
|
* A kind the server would accept and this has never heard of is not creatable anyway.
|
|
*/
|
|
|
|
export type ComponentKind = 'free-text' | 'video' | 'gallery';
|
|
|
|
type Choice = {
|
|
kind: ComponentKind | null;
|
|
label: string;
|
|
hint: string;
|
|
Icon: LucideIcon;
|
|
};
|
|
|
|
/**
|
|
* `kind: null` means not built.
|
|
*
|
|
* Named rather than omitted, and the ones named are things the site already HAS — media, video and
|
|
* galleries all exist as concepts here. That is the difference between saying what is coming and
|
|
* inventing a roadmap. Gallery stopped being one of them on 2026-08-31: the set, its ordering and the
|
|
* carousel that draws it were all already built, so the block is a reference to one.
|
|
*/
|
|
const CHOICES: Choice[] = [
|
|
{ kind: 'free-text', label: 'Text', hint: 'Words, headings and links', Icon: Type },
|
|
{ kind: null, label: 'Image', hint: 'One picture from the media store', Icon: Images },
|
|
{ kind: 'video', label: 'Video', hint: 'No controls, a poster, autoplay and loop', Icon: Video },
|
|
{ kind: 'gallery', label: 'Gallery', hint: 'A named set of media', Icon: Images },
|
|
];
|
|
|
|
export const AddComponentDialog = ({
|
|
open,
|
|
onCancel,
|
|
onChoose,
|
|
}: {
|
|
open: boolean;
|
|
onCancel: () => void;
|
|
onChoose: (kind: ComponentKind) => void;
|
|
}) => (
|
|
<Dialog open={open} onOpenChange={(next) => !next && onCancel()}>
|
|
<DialogContent className="sm:max-w-lg">
|
|
<DialogHeader>
|
|
<DialogTitle>Add a component</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{CHOICES.map(({ kind, label, hint, Icon }) => (
|
|
<button
|
|
key={label}
|
|
type="button"
|
|
disabled={kind === null}
|
|
onClick={() => kind && onChoose(kind)}
|
|
className={`flex flex-col items-start gap-1 rounded-lg border p-3 text-left transition-colors ${
|
|
kind === null
|
|
? 'cursor-not-allowed border-border opacity-45'
|
|
: 'border-border hover:border-primary hover:bg-muted/50'
|
|
}`}
|
|
>
|
|
<span className="flex items-baseline gap-2">
|
|
<Icon className="size-4 shrink-0 self-center text-muted-foreground" />
|
|
<span className="text-sm">{label}</span>
|
|
{/* Dimmed and labelled rather than hidden, the same way the nav marks a section that is
|
|
not built. A list of only what is finished gives no sense of what this is for. */}
|
|
{kind === null && (
|
|
<span className="text-[10px] tracking-wide text-muted-foreground/70 uppercase">soon</span>
|
|
)}
|
|
</span>
|
|
<span className="text-[11px] text-muted-foreground">{hint}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|