Three tidy-ups from the audit's deferred list: - Extracted a ConfirmModal primitive (message + Cancel/Confirm, owning the busy lock + inline error) and folded the five hand-rolled confirm dialogs onto it: DeleteGarden, LeaveGarden, DeletePlant, DeleteSeedLot, ClearBed. Each is now just its message + mutation + labels. Bonus: ClearBed now shows a failure inline instead of swallowing it. (CopyGarden stays on Modal — it has a name field, not a plain confirm.) - Removed components/PageStub.tsx — dead scaffolding, imported nowhere. - The garden editor was squeezed into the max-w-5xl reading measure the other pages use; the canvas routes (editor + public garden) now go edge-to-edge on desktop, and the top bar matches so the brand aligns with the editor's left edge. Mobile was already full-width, so it's unchanged. Verified live: the Delete-garden confirm renders/cancels; the desktop editor now uses the full viewport width. tsc + vitest + build green. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]> Claude-Session: https://claude.ai/code/session_01H3zbym8Doka2d7D48maSgZ
27 lines
917 B
TypeScript
27 lines
917 B
TypeScript
import { ConfirmModal } from '@/components/ui/ConfirmModal'
|
|
import { useDeletePlant, type Plant } from '@/lib/plants'
|
|
|
|
/**
|
|
* Confirmation dialog for deleting a custom plant. A plant still used by
|
|
* plantings is refused by the server (409 PLANT_IN_USE); ConfirmModal surfaces
|
|
* that message inline rather than pretending it worked.
|
|
*/
|
|
export function DeletePlantModal({ plant, onClose }: { plant: Plant; onClose: () => void }) {
|
|
const deletion = useDeletePlant()
|
|
return (
|
|
<ConfirmModal
|
|
title="Delete plant"
|
|
confirmLabel="Delete"
|
|
busyLabel="Deleting…"
|
|
errorFallback="Could not delete the plant."
|
|
onConfirm={() => deletion.mutateAsync(plant.id)}
|
|
onClose={onClose}
|
|
>
|
|
<p className="text-sm text-muted">
|
|
Delete <span className="font-medium text-fg">{plant.name}</span> from your catalog? This can't be
|
|
undone.
|
|
</p>
|
|
</ConfirmModal>
|
|
)
|
|
}
|