Add gardens UI: list page + create/edit/delete (#8)

The /gardens page is now home base, backed by the #7 API.

- lib/units.ts: cm <-> meters/feet conversion + formatCm/formatDimensions
  (metric "m", imperial "ft/in"). Minimal for #8; #9's geometry lib
  consolidates.
- lib/gardens.ts: zod gardenSchema + useGardens/useCreateGarden/
  useUpdateGarden/useDeleteGarden (mutations invalidate the list) and
  conflictGarden() to pull the fresh row out of a 409.
- GardensPage: loading/empty/error states; empty state prompts a first
  garden; responsive card grid (single column on phones).
- GardenCard: name, dimensions formatted per the garden's unit, notes
  preview; body links into /gardens/:id, edit/delete kept out of the link.
- GardenFormModal: create/edit with a unit selector; dimensions are entered
  in the chosen unit and converted to cm (switching units converts the
  current values). A 409 rebases the form onto the server's fresh row.
- DeleteGardenModal: confirmation before removing.
- ui/: Modal (Escape/backdrop close), TextArea, Select.

Verified in a real browser against the embedded binary: create appears
without reload; edit persists (version 2), form prefilled from stored cm
converted back to the garden's unit; delete confirms then removes -> empty
state; an imperial 4 ft x 8 ft garden stores 122 x 244 cm and shows
"4' 0" x 8' 0"". tsc --noEmit clean.

Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
Claude-Session: https://claude.ai/code/session_01JdQpdYYsTgtkJBxbcpAszi

web/src/components/gardens/DeleteGardenModal.tsx

@@ -0,0 +1,47 @@
+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 { useDeleteGarden, type Garden } from '@/lib/gardens'
+
+/** Confirmation dialog for deleting a garden (and everything in it). */
+export function DeleteGardenModal({ garden, onClose }: { garden: Garden; onClose: () => void }) {
+  const del = useDeleteGarden()
+  const [error, setError] = useState<string | null>(null)
+
+  async function onConfirm() {
+    setError(null)
+    try {
+      await del.mutateAsync(garden.id)
+      onClose()
+    } catch (err) {
+      setError(errorMessage(err, 'Could not delete the garden.'))
+    }
+  }
+
+  return (
+    <Modal title="Delete garden" onClose={onClose}>
+      <div className="flex flex-col gap-4">
+        <p className="text-sm text-muted">
+          Delete <span className="font-medium text-fg">{garden.name}</span> and everything planned in it?
+          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={del.isPending}>
+            Cancel
+          </Button>
+          <Button
+            type="button"
+            onClick={onConfirm}
+            disabled={del.isPending}
+            className="bg-red-600 text-white hover:bg-red-700"
+          >
+            {del.isPending ? 'Deleting…' : 'Delete'}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}