Cleanup: ConfirmModal primitive, drop dead PageStub, full-width editor (#107)

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

web/src/components/plants/DeletePlantModal.tsx

@@ -1,46 +1,26 @@
-import { useState } from 'react'
-import { Modal } from '@/components/ui/Modal'
-import { Alert } from '@/components/ui/Alert'
-import { Button } from '@/components/ui/Button'
-import { errorMessage } from '@/lib/api'
+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); we surface that
- * message inline rather than pretending it worked.
+ * 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()
-  const [error, setError] = useState<string | null>(null)
-
-  async function onConfirm() {
-    setError(null)
-    try {
-      await deletion.mutateAsync(plant.id)
-      onClose()
-    } catch (err) {
-      setError(errorMessage(err, 'Could not delete the plant.'))
-    }
-  }
-
   return (
-    <Modal title="Delete plant" onClose={onClose} busy={deletion.isPending}>
-      <div className="flex flex-col gap-4">
-        <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>
-        {error && <Alert>{error}</Alert>}
-        <div className="flex justify-end gap-2">
-          <Button type="button" variant="ghost" onClick={onClose} disabled={deletion.isPending}>
-            Cancel
-          </Button>
-          <Button type="button" variant="danger" onClick={onConfirm} disabled={deletion.isPending}>
-            {deletion.isPending ? 'Deleting…' : 'Delete'}
-          </Button>
-        </div>
-      </div>
-    </Modal>
+    <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>
   )
 }

web/src/components/plants/DeleteSeedLotModal.tsx

@@ -1,8 +1,4 @@
-import { useState } from 'react'
-import { Alert } from '@/components/ui/Alert'
-import { Button } from '@/components/ui/Button'
-import { Modal } from '@/components/ui/Modal'
-import { errorMessage } from '@/lib/api'
+import { ConfirmModal } from '@/components/ui/ConfirmModal'
 import { formatQuantity, useDeleteSeedLot, type SeedLot } from '@/lib/seedLots'
 
 /**
@@ -12,39 +8,23 @@ import { formatQuantity, useDeleteSeedLot, type SeedLot } from '@/lib/seedLots'
  */
 export function DeleteSeedLotModal({ lot, onClose }: { lot: SeedLot; onClose: () => void }) {
   const del = useDeleteSeedLot()
-  const [error, setError] = useState<string | null>(null)
-
   return (
-    <Modal title="Retire this seed lot?" onClose={onClose} busy={del.isPending}>
-      <div className="flex flex-col gap-3">
-        <p className="text-sm text-fg">
-          {formatQuantity(lot.quantity)} {lot.unit}
-          {lot.vendor ? ` from ${lot.vendor}` : ''}
-          {lot.packedForYear != null ? `, packed for ${lot.packedForYear}` : ''}.
-        </p>
-        <p className="text-sm text-muted">
-          Anything planted from it stays exactly where it is — it just stops being attributed to this purchase.
-        </p>
-        {error && <Alert>{error}</Alert>}
-        <div className="mt-1 flex justify-end gap-2">
-          <Button type="button" variant="ghost" onClick={onClose} disabled={del.isPending}>
-            Cancel
-          </Button>
-          <Button
-            type="button"
-            variant="danger"
-            disabled={del.isPending}
-            onClick={() =>
-              del.mutate(lot.id, {
-                onSuccess: onClose,
-                onError: (err) => setError(errorMessage(err, 'Could not retire the lot.')),
-              })
-            }
-          >
-            {del.isPending ? 'Retiring…' : 'Retire lot'}
-          </Button>
-        </div>
-      </div>
-    </Modal>
+    <ConfirmModal
+      title="Retire this seed lot?"
+      confirmLabel="Retire lot"
+      busyLabel="Retiring…"
+      errorFallback="Could not retire the lot."
+      onConfirm={() => del.mutateAsync(lot.id)}
+      onClose={onClose}
+    >
+      <p className="text-sm text-fg">
+        {formatQuantity(lot.quantity)} {lot.unit}
+        {lot.vendor ? ` from ${lot.vendor}` : ''}
+        {lot.packedForYear != null ? `, packed for ${lot.packedForYear}` : ''}.
+      </p>
+      <p className="text-sm text-muted">
+        Anything planted from it stays exactly where it is — it just stops being attributed to this purchase.
+      </p>
+    </ConfirmModal>
   )
 }