Plant catalog UI: /plants page + PlantPicker (#13)

Co-authored-by: Steve Dudenhoeffer <[email protected]>
2026-07-19 02:18:12 +00:00
parent 293532f021
commit e4505ed9a7
10 changed files with 848 additions and 3 deletions
@@ -0,0 +1,46 @@
+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 { 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.
+ */
+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>
+  )
+}