From e0a152260882a416bf4b7602e3d41728daa951f9 Mon Sep 17 00:00:00 2001
From: Steve Dudenhoeffer <steve@stevedudenhoeffer.com>
Date: Sat, 18 Jul 2026 18:48:47 -0400
Subject: [PATCH 1/2] 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) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JdQpdYYsTgtkJBxbcpAszi
---
 .../components/gardens/DeleteGardenModal.tsx  |  47 ++++++
 web/src/components/gardens/GardenCard.tsx     |  49 ++++++
 .../components/gardens/GardenFormModal.tsx    | 156 ++++++++++++++++++
 web/src/components/ui/Modal.tsx               |  48 ++++++
 web/src/components/ui/Select.tsx              |  40 +++++
 web/src/components/ui/TextArea.tsx            |  35 ++++
 web/src/lib/gardens.ts                        |  85 ++++++++++
 web/src/lib/units.ts                          |  57 +++++++
 web/src/pages/GardensPage.tsx                 |  57 ++++++-
 9 files changed, 572 insertions(+), 2 deletions(-)
 create mode 100644 web/src/components/gardens/DeleteGardenModal.tsx
 create mode 100644 web/src/components/gardens/GardenCard.tsx
 create mode 100644 web/src/components/gardens/GardenFormModal.tsx
 create mode 100644 web/src/components/ui/Modal.tsx
 create mode 100644 web/src/components/ui/Select.tsx
 create mode 100644 web/src/components/ui/TextArea.tsx
 create mode 100644 web/src/lib/gardens.ts
 create mode 100644 web/src/lib/units.ts

diff --git a/web/src/components/gardens/DeleteGardenModal.tsx b/web/src/components/gardens/DeleteGardenModal.tsx
new file mode 100644
index 0000000..1c374b0
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/web/src/components/gardens/GardenCard.tsx b/web/src/components/gardens/GardenCard.tsx
new file mode 100644
index 0000000..1f34424
--- /dev/null
+++ b/web/src/components/gardens/GardenCard.tsx
@@ -0,0 +1,49 @@
+import { Link } from '@tanstack/react-router'
+import type { Garden } from '@/lib/gardens'
+import { formatDimensions } from '@/lib/units'
+
+/**
+ * One garden as a card: the body links into the editor (/gardens/:id); the
+ * footer has edit/delete actions (kept out of the link so they don't navigate).
+ */
+export function GardenCard({
+  garden,
+  onEdit,
+  onDelete,
+}: {
+  garden: Garden
+  onEdit: () => void
+  onDelete: () => void
+}) {
+  return (
+    <div className="flex flex-col rounded-xl border border-border bg-surface transition-colors hover:border-accent/50">
+      <Link
+        to="/gardens/$gardenId"
+        params={{ gardenId: String(garden.id) }}
+        className="flex-1 rounded-t-xl p-4 outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
+      >
+        <h3 className="truncate font-semibold text-fg">{garden.name}</h3>
+        <p className="mt-1 text-sm text-muted">
+          {formatDimensions(garden.widthCm, garden.heightCm, garden.unitPref)}
+        </p>
+        {garden.notes && <p className="mt-2 line-clamp-2 text-sm text-muted">{garden.notes}</p>}
+      </Link>
+      <div className="flex justify-end gap-1 border-t border-border px-2 py-1.5">
+        <button
+          type="button"
+          onClick={onEdit}
+          className="rounded-md px-2.5 py-1 text-sm font-medium text-muted transition-colors hover:bg-border/50 hover:text-fg"
+        >
+          Edit
+        </button>
+        <button
+          type="button"
+          onClick={onDelete}
+          className="rounded-md px-2.5 py-1 text-sm font-medium text-muted transition-colors hover:bg-red-500/10 hover:text-red-600 dark:hover:text-red-400"
+        >
+          Delete
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/web/src/components/gardens/GardenFormModal.tsx b/web/src/components/gardens/GardenFormModal.tsx
new file mode 100644
index 0000000..7a4db68
--- /dev/null
+++ b/web/src/components/gardens/GardenFormModal.tsx
@@ -0,0 +1,156 @@
+import { useState, type FormEvent } from 'react'
+import { Modal } from '@/components/ui/Modal'
+import { Alert } from '@/components/ui/Alert'
+import { Button } from '@/components/ui/Button'
+import { Select } from '@/components/ui/Select'
+import { TextArea } from '@/components/ui/TextArea'
+import { TextField } from '@/components/ui/TextField'
+import { errorMessage } from '@/lib/api'
+import { conflictGarden, useCreateGarden, useUpdateGarden, type Garden } from '@/lib/gardens'
+import { cmFromDisplay, dimensionUnitLabel, displayFromCm, type UnitPref } from '@/lib/units'
+
+const DEFAULT_METERS = 10 // matches the server's 10 m default
+
+const unitOptions = [
+  { value: 'metric', label: 'Metric (m)' },
+  { value: 'imperial', label: 'Imperial (ft)' },
+]
+
+function dimString(cm: number | undefined, unit: UnitPref): string {
+  return cm === undefined ? String(DEFAULT_METERS) : String(displayFromCm(cm, unit))
+}
+
+/**
+ * Create (no garden) or edit (garden given) form. Dimensions are entered in the
+ * selected unit and converted to centimeters for the API; switching units
+ * converts the current values so the physical size is preserved. A 409 rebases
+ * the form onto the server's fresh row.
+ */
+export function GardenFormModal({ garden, onClose }: { garden?: Garden; onClose: () => void }) {
+  const isEdit = !!garden
+  const create = useCreateGarden()
+  const update = useUpdateGarden(garden?.id ?? 0)
+  const pending = create.isPending || update.isPending
+
+  const [name, setName] = useState(garden?.name ?? '')
+  const [unit, setUnit] = useState<UnitPref>(garden?.unitPref ?? 'metric')
+  const [width, setWidth] = useState(() => dimString(garden?.widthCm, garden?.unitPref ?? 'metric'))
+  const [height, setHeight] = useState(() => dimString(garden?.heightCm, garden?.unitPref ?? 'metric'))
+  const [notes, setNotes] = useState(garden?.notes ?? '')
+  const [version, setVersion] = useState(garden?.version ?? 0)
+  const [conflict, setConflict] = useState<string | null>(null)
+  const [formError, setFormError] = useState<string | null>(null)
+
+  function changeUnit(next: UnitPref) {
+    const convert = (s: string) => {
+      const v = parseFloat(s)
+      return Number.isFinite(v) ? String(displayFromCm(cmFromDisplay(v, unit), next)) : s
+    }
+    setWidth(convert(width))
+    setHeight(convert(height))
+    setUnit(next)
+  }
+
+  async function onSubmit(e: FormEvent) {
+    e.preventDefault()
+    setFormError(null)
+    setConflict(null)
+
+    const w = parseFloat(width)
+    const h = parseFloat(height)
+    if (!name.trim() || !Number.isFinite(w) || w <= 0 || !Number.isFinite(h) || h <= 0) {
+      setFormError('Enter a name and a positive width and height.')
+      return
+    }
+
+    const input = {
+      name: name.trim(),
+      widthCm: cmFromDisplay(w, unit),
+      heightCm: cmFromDisplay(h, unit),
+      unitPref: unit,
+      notes: notes.trim(),
+    }
+
+    try {
+      if (isEdit) {
+        await update.mutateAsync({ ...input, version })
+      } else {
+        await create.mutateAsync(input)
+      }
+      onClose()
+    } catch (err) {
+      const current = conflictGarden(err)
+      if (current) {
+        // Someone else changed this garden: rebase the form onto the fresh row so
+        // a re-save applies against the current version.
+        setVersion(current.version)
+        setName(current.name)
+        setUnit(current.unitPref)
+        setWidth(String(displayFromCm(current.widthCm, current.unitPref)))
+        setHeight(String(displayFromCm(current.heightCm, current.unitPref)))
+        setNotes(current.notes)
+        setConflict('This garden changed elsewhere. The latest values are shown — review and save again.')
+        return
+      }
+      setFormError(errorMessage(err, isEdit ? 'Could not save changes.' : 'Could not create the garden.'))
+    }
+  }
+
+  const unitLabel = dimensionUnitLabel(unit)
+
+  return (
+    <Modal title={isEdit ? 'Edit garden' : 'New garden'} onClose={onClose}>
+      <form onSubmit={onSubmit} className="flex flex-col gap-3">
+        {conflict && <Alert tone="info">{conflict}</Alert>}
+
+        <TextField label="Name" name="name" required value={name} onChange={(e) => setName(e.target.value)} />
+
+        <Select
+          label="Units"
+          name="unitPref"
+          value={unit}
+          onChange={(e) => changeUnit(e.target.value as UnitPref)}
+          options={unitOptions}
+        />
+
+        <div className="grid grid-cols-2 gap-3">
+          <TextField
+            label={`Width (${unitLabel})`}
+            name="width"
+            type="number"
+            inputMode="decimal"
+            step="any"
+            min="0"
+            required
+            value={width}
+            onChange={(e) => setWidth(e.target.value)}
+          />
+          <TextField
+            label={`Height (${unitLabel})`}
+            name="height"
+            type="number"
+            inputMode="decimal"
+            step="any"
+            min="0"
+            required
+            value={height}
+            onChange={(e) => setHeight(e.target.value)}
+          />
+        </div>
+
+        <TextArea label="Notes" name="notes" rows={2} value={notes} onChange={(e) => setNotes(e.target.value)} />
+
+        {formError && <Alert>{formError}</Alert>}
+
+        <div className="mt-1 flex justify-end gap-2">
+          <Button type="button" variant="ghost" onClick={onClose} disabled={pending}>
+            Cancel
+          </Button>
+          <Button type="submit" disabled={pending}>
+            {pending ? 'Saving…' : isEdit ? 'Save' : 'Create garden'}
+          </Button>
+        </div>
+      </form>
+    </Modal>
+  )
+}
diff --git a/web/src/components/ui/Modal.tsx b/web/src/components/ui/Modal.tsx
new file mode 100644
index 0000000..1a5693b
--- /dev/null
+++ b/web/src/components/ui/Modal.tsx
@@ -0,0 +1,48 @@
+import { useEffect, useRef, type ReactNode } from 'react'
+
+/**
+ * A centered modal dialog rendered over a dimmed backdrop. Closes on Escape or a
+ * backdrop click. Wraps content in a native <dialog>-like card; the caller owns
+ * the open/closed state (render it only when open).
+ */
+export function Modal({
+  title,
+  onClose,
+  children,
+}: {
+  title: string
+  onClose: () => void
+  children: ReactNode
+}) {
+  const cardRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', onKey)
+    cardRef.current?.focus()
+    return () => document.removeEventListener('keydown', onKey)
+  }, [onClose])
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 p-4 sm:items-center"
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) onClose()
+      }}
+    >
+      <div
+        ref={cardRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label={title}
+        tabIndex={-1}
+        className="w-full max-w-md rounded-xl border border-border bg-surface p-6 shadow-lg outline-none"
+      >
+        <h2 className="text-lg font-semibold tracking-tight text-fg">{title}</h2>
+        <div className="mt-4">{children}</div>
+      </div>
+    </div>
+  )
+}
diff --git a/web/src/components/ui/Select.tsx b/web/src/components/ui/Select.tsx
new file mode 100644
index 0000000..e1ccb7a
--- /dev/null
+++ b/web/src/components/ui/Select.tsx
@@ -0,0 +1,40 @@
+import { forwardRef, useId, type SelectHTMLAttributes } from 'react'
+import { cn } from '@/lib/cn'
+
+interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  label: string
+  options: { value: string; label: string }[]
+}
+
+// Labelled native <select>, styled to match the text inputs.
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(
+  { label, options, id, name, className, ...props },
+  ref,
+) {
+  const generatedId = useId()
+  const fieldId = id ?? name ?? generatedId
+  return (
+    <div className="flex flex-col gap-1.5">
+      <label htmlFor={fieldId} className="text-sm font-medium text-fg">
+        {label}
+      </label>
+      <select
+        ref={ref}
+        id={fieldId}
+        name={name}
+        className={cn(
+          'w-full rounded-md border border-border bg-surface px-3 py-2 text-base text-fg',
+          'outline-none transition-colors focus:border-accent focus:ring-2 focus:ring-accent/30 disabled:opacity-60',
+          className,
+        )}
+        {...props}
+      >
+        {options.map((o) => (
+          <option key={o.value} value={o.value}>
+            {o.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+})
diff --git a/web/src/components/ui/TextArea.tsx b/web/src/components/ui/TextArea.tsx
new file mode 100644
index 0000000..8a602ba
--- /dev/null
+++ b/web/src/components/ui/TextArea.tsx
@@ -0,0 +1,35 @@
+import { forwardRef, useId, type TextareaHTMLAttributes } from 'react'
+import { cn } from '@/lib/cn'
+
+interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label: string
+}
+
+// Labelled multi-line input, matching TextField's styling (16px text avoids iOS
+// zoom). The id falls back to name then a generated id so the label always binds.
+export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(
+  { label, id, name, className, ...props },
+  ref,
+) {
+  const generatedId = useId()
+  const fieldId = id ?? name ?? generatedId
+  return (
+    <div className="flex flex-col gap-1.5">
+      <label htmlFor={fieldId} className="text-sm font-medium text-fg">
+        {label}
+      </label>
+      <textarea
+        ref={ref}
+        id={fieldId}
+        name={name}
+        className={cn(
+          'w-full rounded-md border border-border bg-surface px-3 py-2 text-base text-fg',
+          'placeholder:text-muted/70 outline-none transition-colors',
+          'focus:border-accent focus:ring-2 focus:ring-accent/30 disabled:opacity-60',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  )
+})
diff --git a/web/src/lib/gardens.ts b/web/src/lib/gardens.ts
new file mode 100644
index 0000000..b0fa085
--- /dev/null
+++ b/web/src/lib/gardens.ts
@@ -0,0 +1,85 @@
+// Gardens data layer: zod-validated shapes for /api/v1/gardens plus the
+// react-query hooks the /gardens page uses.
+
+import { queryOptions, useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { z } from 'zod'
+import { ApiError, api } from './api'
+import type { UnitPref } from './units'
+
+const unitPrefSchema: z.ZodType<UnitPref> = z.enum(['metric', 'imperial'])
+
+export const gardenSchema = z.object({
+  id: z.number(),
+  ownerId: z.number(),
+  name: z.string(),
+  widthCm: z.number(),
+  heightCm: z.number(),
+  unitPref: unitPrefSchema,
+  notes: z.string(),
+  version: z.number(),
+  createdAt: z.string(),
+  updatedAt: z.string(),
+})
+export type Garden = z.infer<typeof gardenSchema>
+
+const gardensKey = ['gardens'] as const
+
+export const gardensQueryOptions = queryOptions({
+  queryKey: gardensKey,
+  queryFn: async (): Promise<Garden[]> => z.array(gardenSchema).parse(await api.get('/gardens')),
+})
+
+export function useGardens() {
+  return useQuery(gardensQueryOptions)
+}
+
+export interface GardenInput {
+  name: string
+  widthCm: number
+  heightCm: number
+  unitPref: UnitPref
+  notes: string
+}
+
+export function useCreateGarden() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async (input: GardenInput): Promise<Garden> =>
+      gardenSchema.parse(await api.post('/gardens', input)),
+    onSuccess: () => qc.invalidateQueries({ queryKey: gardensKey }),
+  })
+}
+
+export interface GardenUpdate extends GardenInput {
+  version: number
+}
+
+export function useUpdateGarden(id: number) {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async (input: GardenUpdate): Promise<Garden> =>
+      gardenSchema.parse(await api.patch(`/gardens/${id}`, input)),
+    onSuccess: () => qc.invalidateQueries({ queryKey: gardensKey }),
+  })
+}
+
+export function useDeleteGarden() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (id: number) => api.delete(`/gardens/${id}`),
+    onSuccess: () => qc.invalidateQueries({ queryKey: gardensKey }),
+  })
+}
+
+/**
+ * If err is a 409 version conflict, return the fresh server row it carries
+ * (under `current`), so a form can rebase onto it; otherwise null.
+ */
+export function conflictGarden(err: unknown): Garden | null {
+  if (err instanceof ApiError && err.isConflict && err.body && typeof err.body === 'object') {
+    const current = (err.body as { current?: unknown }).current
+    const parsed = gardenSchema.safeParse(current)
+    if (parsed.success) return parsed.data
+  }
+  return null
+}
diff --git a/web/src/lib/units.ts b/web/src/lib/units.ts
new file mode 100644
index 0000000..b97f980
--- /dev/null
+++ b/web/src/lib/units.ts
@@ -0,0 +1,57 @@
+// Unit conversion + display for garden dimensions. The API and DB are metric
+// only (centimeters); imperial is purely a display/entry concern here. A minimal
+// helper set for #8 — #9's geometry lib consolidates/extends it.
+
+export type UnitPref = 'metric' | 'imperial'
+
+const CM_PER_INCH = 2.54
+const CM_PER_METER = 100
+const INCHES_PER_FOOT = 12
+
+/** Feet (+ optional inches) → whole centimeters. */
+export function cmFromFtIn(feet: number, inches = 0): number {
+  return Math.round((feet * INCHES_PER_FOOT + inches) * CM_PER_INCH)
+}
+
+/** Meters → whole centimeters. */
+export function cmFromMeters(meters: number): number {
+  return Math.round(meters * CM_PER_METER)
+}
+
+/** A value typed in the given unit (meters, or feet) → centimeters. */
+export function cmFromDisplay(value: number, unit: UnitPref): number {
+  return unit === 'imperial' ? cmFromFtIn(value) : cmFromMeters(value)
+}
+
+/** Centimeters → a number in the given unit, for prefilling an input field. */
+export function displayFromCm(cm: number, unit: UnitPref): number {
+  const value = unit === 'imperial' ? cm / CM_PER_INCH / INCHES_PER_FOOT : cm / CM_PER_METER
+  // Trim floating-point noise (e.g. 122cm → 4.0026ft → 4).
+  return Math.round(value * 100) / 100
+}
+
+/** Centimeters → a human string in the given unit (e.g. "1.22 m" or "4′ 0″"). */
+export function formatCm(cm: number, unit: UnitPref): string {
+  if (unit === 'imperial') {
+    const totalInches = cm / CM_PER_INCH
+    let feet = Math.floor(totalInches / INCHES_PER_FOOT)
+    let inches = Math.round(totalInches - feet * INCHES_PER_FOOT)
+    if (inches === INCHES_PER_FOOT) {
+      feet += 1
+      inches = 0
+    }
+    return `${feet}′ ${inches}″`
+  }
+  const meters = Math.round((cm / CM_PER_METER) * 100) / 100
+  return `${meters} m`
+}
+
+/** Centimeters width × height → a human string in the given unit. */
+export function formatDimensions(widthCm: number, heightCm: number, unit: UnitPref): string {
+  return `${formatCm(widthCm, unit)} × ${formatCm(heightCm, unit)}`
+}
+
+/** The input-field label for a single dimension in the given unit. */
+export function dimensionUnitLabel(unit: UnitPref): string {
+  return unit === 'imperial' ? 'ft' : 'm'
+}
diff --git a/web/src/pages/GardensPage.tsx b/web/src/pages/GardensPage.tsx
index c5a1877..7913b26 100644
--- a/web/src/pages/GardensPage.tsx
+++ b/web/src/pages/GardensPage.tsx
@@ -1,5 +1,58 @@
-import { PageStub } from '@/components/PageStub'
+import { useState } from 'react'
+import { Alert } from '@/components/ui/Alert'
+import { Button } from '@/components/ui/Button'
+import { DeleteGardenModal } from '@/components/gardens/DeleteGardenModal'
+import { GardenCard } from '@/components/gardens/GardenCard'
+import { GardenFormModal } from '@/components/gardens/GardenFormModal'
+import { useGardens, type Garden } from '@/lib/gardens'
+
+// Which modal is open, if any. `edit`/`delete` carry the target garden.
+type Dialog = { kind: 'create' } | { kind: 'edit'; garden: Garden } | { kind: 'delete'; garden: Garden } | null
 
 export function GardensPage() {
-  return <PageStub title="Gardens">The garden list and create flow arrive in issue #8.</PageStub>
+  const gardens = useGardens()
+  const [dialog, setDialog] = useState<Dialog>(null)
+
+  return (
+    <section>
+      <div className="flex items-center justify-between gap-4">
+        <h1 className="text-2xl font-semibold tracking-tight">Gardens</h1>
+        {gardens.data && gardens.data.length > 0 && (
+          <Button onClick={() => setDialog({ kind: 'create' })}>New garden</Button>
+        )}
+      </div>
+
+      <div className="mt-6">
+        {gardens.isPending && <p className="text-sm text-muted">Loading your gardens…</p>}
+        {gardens.isError && <Alert>Could not load your gardens. Please refresh.</Alert>}
+
+        {gardens.isSuccess && gardens.data.length === 0 && (
+          <div className="rounded-xl border border-dashed border-border p-10 text-center">
+            <p className="text-fg">No gardens yet.</p>
+            <p className="mt-1 text-sm text-muted">Create your first garden to start planning.</p>
+            <Button className="mt-4" onClick={() => setDialog({ kind: 'create' })}>
+              Create your first garden
+            </Button>
+          </div>
+        )}
+
+        {gardens.isSuccess && gardens.data.length > 0 && (
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            {gardens.data.map((g) => (
+              <GardenCard
+                key={g.id}
+                garden={g}
+                onEdit={() => setDialog({ kind: 'edit', garden: g })}
+                onDelete={() => setDialog({ kind: 'delete', garden: g })}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {dialog?.kind === 'create' && <GardenFormModal onClose={() => setDialog(null)} />}
+      {dialog?.kind === 'edit' && <GardenFormModal garden={dialog.garden} onClose={() => setDialog(null)} />}
+      {dialog?.kind === 'delete' && <DeleteGardenModal garden={dialog.garden} onClose={() => setDialog(null)} />}
+    </section>
+  )
 }
-- 
2.54.0


From 3f61f070349968d5c25fdf29f70dfbd50b0caefc Mon Sep 17 00:00:00 2001
From: Steve Dudenhoeffer <steve@stevedudenhoeffer.com>
Date: Sat, 18 Jul 2026 19:03:49 -0400
Subject: [PATCH 2/2] Address Gadfly review on #8: modal focus/close, dim
 validation, dedup

Fixes from the PR #27 adversarial review (considered; not graded).

Correctness / error-handling
- Modal: focus once on mount and attach the keydown listener once (latest
  onClose/busy via refs), so a parent re-render (e.g. a background refetch)
  no longer re-fires focus() and steals it from the input being typed in.
- Modal takes a `busy` prop; while a save/delete is in flight, Escape and
  backdrop clicks don't dismiss it (form/delete modals pass busy=pending),
  so an action can't be interrupted mid-flight and lose its error.
- Form validates the *converted* centimeter values against the server's
  [1cm, 100m] bounds, so sub-cm / over-100m sizes fail client-side with a
  clear message instead of a generic server error.
- displayFromCm rounds imperial to 0.1 ft so an 8 ft garden (244 cm)
  prefills as "8", not "8.01".

Maintainability
- Extracted ui/field.ts (useFieldId + fieldControlClass) shared by
  TextField/TextArea/Select. Added a `danger` Button variant, used by the
  delete modal; card edit/delete buttons gained focus-visible rings.
- useUpdateGarden takes the id in its mutation variables (no dummy 0 during
  create). GardensPage shares a close handler; dropped a redundant zod
  annotation; 409 rebase reuses dimString; renamed `del` -> `deletion`.

Verified in a browser: 8 ft round-trips to a prefilled "8"; a sub-cm value
is rejected client-side with the modal staying open. tsc clean.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JdQpdYYsTgtkJBxbcpAszi
---
 .../components/gardens/DeleteGardenModal.tsx  | 17 +++-----
 web/src/components/gardens/GardenCard.tsx     |  4 +-
 .../components/gardens/GardenFormModal.tsx    | 41 +++++++++++--------
 web/src/components/ui/Button.tsx              |  3 +-
 web/src/components/ui/Modal.tsx               | 24 +++++++----
 web/src/components/ui/Select.tsx              | 19 ++-------
 web/src/components/ui/TextArea.tsx            | 21 ++--------
 web/src/components/ui/TextField.tsx           | 17 ++------
 web/src/components/ui/field.ts                | 18 ++++++++
 web/src/lib/gardens.ts                        |  9 ++--
 web/src/lib/units.ts                          | 21 ++++++++--
 web/src/pages/GardensPage.tsx                 | 12 +++---
 12 files changed, 110 insertions(+), 96 deletions(-)
 create mode 100644 web/src/components/ui/field.ts

diff --git a/web/src/components/gardens/DeleteGardenModal.tsx b/web/src/components/gardens/DeleteGardenModal.tsx
index 1c374b0..195552b 100644
--- a/web/src/components/gardens/DeleteGardenModal.tsx
+++ b/web/src/components/gardens/DeleteGardenModal.tsx
@@ -7,13 +7,13 @@ 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 deletion = useDeleteGarden()
   const [error, setError] = useState<string | null>(null)
 
   async function onConfirm() {
     setError(null)
     try {
-      await del.mutateAsync(garden.id)
+      await deletion.mutateAsync(garden.id)
       onClose()
     } catch (err) {
       setError(errorMessage(err, 'Could not delete the garden.'))
@@ -21,7 +21,7 @@ export function DeleteGardenModal({ garden, onClose }: { garden: Garden; onClose
   }
 
   return (
-    <Modal title="Delete garden" onClose={onClose}>
+    <Modal title="Delete garden" 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">{garden.name}</span> and everything planned in it?
@@ -29,16 +29,11 @@ export function DeleteGardenModal({ garden, onClose }: { garden: Garden; onClose
         </p>
         {error && <Alert>{error}</Alert>}
         <div className="flex justify-end gap-2">
-          <Button type="button" variant="ghost" onClick={onClose} disabled={del.isPending}>
+          <Button type="button" variant="ghost" onClick={onClose} disabled={deletion.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 type="button" variant="danger" onClick={onConfirm} disabled={deletion.isPending}>
+            {deletion.isPending ? 'Deleting…' : 'Delete'}
           </Button>
         </div>
       </div>
diff --git a/web/src/components/gardens/GardenCard.tsx b/web/src/components/gardens/GardenCard.tsx
index 1f34424..61828f5 100644
--- a/web/src/components/gardens/GardenCard.tsx
+++ b/web/src/components/gardens/GardenCard.tsx
@@ -32,14 +32,14 @@ export function GardenCard({
         <button
           type="button"
           onClick={onEdit}
-          className="rounded-md px-2.5 py-1 text-sm font-medium text-muted transition-colors hover:bg-border/50 hover:text-fg"
+          className="rounded-md px-2.5 py-1 text-sm font-medium text-muted outline-none transition-colors hover:bg-border/50 hover:text-fg focus-visible:ring-2 focus-visible:ring-accent/40"
         >
           Edit
         </button>
         <button
           type="button"
           onClick={onDelete}
-          className="rounded-md px-2.5 py-1 text-sm font-medium text-muted transition-colors hover:bg-red-500/10 hover:text-red-600 dark:hover:text-red-400"
+          className="rounded-md px-2.5 py-1 text-sm font-medium text-muted outline-none transition-colors hover:bg-red-500/10 hover:text-red-600 focus-visible:ring-2 focus-visible:ring-red-500/40 dark:hover:text-red-400"
         >
           Delete
         </button>
diff --git a/web/src/components/gardens/GardenFormModal.tsx b/web/src/components/gardens/GardenFormModal.tsx
index 7a4db68..14a7969 100644
--- a/web/src/components/gardens/GardenFormModal.tsx
+++ b/web/src/components/gardens/GardenFormModal.tsx
@@ -7,7 +7,13 @@ import { TextArea } from '@/components/ui/TextArea'
 import { TextField } from '@/components/ui/TextField'
 import { errorMessage } from '@/lib/api'
 import { conflictGarden, useCreateGarden, useUpdateGarden, type Garden } from '@/lib/gardens'
-import { cmFromDisplay, dimensionUnitLabel, displayFromCm, type UnitPref } from '@/lib/units'
+import {
+  cmFromDisplay,
+  dimensionUnitLabel,
+  displayFromCm,
+  isValidDimensionCm,
+  type UnitPref,
+} from '@/lib/units'
 
 const DEFAULT_METERS = 10 // matches the server's 10 m default
 
@@ -29,7 +35,7 @@ function dimString(cm: number | undefined, unit: UnitPref): string {
 export function GardenFormModal({ garden, onClose }: { garden?: Garden; onClose: () => void }) {
   const isEdit = !!garden
   const create = useCreateGarden()
-  const update = useUpdateGarden(garden?.id ?? 0)
+  const update = useUpdateGarden()
   const pending = create.isPending || update.isPending
 
   const [name, setName] = useState(garden?.name ?? '')
@@ -56,24 +62,25 @@ export function GardenFormModal({ garden, onClose }: { garden?: Garden; onClose:
     setFormError(null)
     setConflict(null)
 
-    const w = parseFloat(width)
-    const h = parseFloat(height)
-    if (!name.trim() || !Number.isFinite(w) || w <= 0 || !Number.isFinite(h) || h <= 0) {
-      setFormError('Enter a name and a positive width and height.')
+    if (!name.trim()) {
+      setFormError('Enter a name for the garden.')
+      return
+    }
+    // Validate the converted centimeter values against the same bounds the
+    // server enforces, so sub-cm or over-100m sizes fail here with a clear
+    // message instead of a generic server error.
+    const widthCm = cmFromDisplay(parseFloat(width), unit)
+    const heightCm = cmFromDisplay(parseFloat(height), unit)
+    if (!isValidDimensionCm(widthCm) || !isValidDimensionCm(heightCm)) {
+      setFormError('Width and height must be between 1 cm and 100 m.')
       return
     }
 
-    const input = {
-      name: name.trim(),
-      widthCm: cmFromDisplay(w, unit),
-      heightCm: cmFromDisplay(h, unit),
-      unitPref: unit,
-      notes: notes.trim(),
-    }
+    const input = { name: name.trim(), widthCm, heightCm, unitPref: unit, notes: notes.trim() }
 
     try {
       if (isEdit) {
-        await update.mutateAsync({ ...input, version })
+        await update.mutateAsync({ id: garden.id, ...input, version })
       } else {
         await create.mutateAsync(input)
       }
@@ -86,8 +93,8 @@ export function GardenFormModal({ garden, onClose }: { garden?: Garden; onClose:
         setVersion(current.version)
         setName(current.name)
         setUnit(current.unitPref)
-        setWidth(String(displayFromCm(current.widthCm, current.unitPref)))
-        setHeight(String(displayFromCm(current.heightCm, current.unitPref)))
+        setWidth(dimString(current.widthCm, current.unitPref))
+        setHeight(dimString(current.heightCm, current.unitPref))
         setNotes(current.notes)
         setConflict('This garden changed elsewhere. The latest values are shown — review and save again.')
         return
@@ -99,7 +106,7 @@ export function GardenFormModal({ garden, onClose }: { garden?: Garden; onClose:
   const unitLabel = dimensionUnitLabel(unit)
 
   return (
-    <Modal title={isEdit ? 'Edit garden' : 'New garden'} onClose={onClose}>
+    <Modal title={isEdit ? 'Edit garden' : 'New garden'} onClose={onClose} busy={pending}>
       <form onSubmit={onSubmit} className="flex flex-col gap-3">
         {conflict && <Alert tone="info">{conflict}</Alert>}
 
diff --git a/web/src/components/ui/Button.tsx b/web/src/components/ui/Button.tsx
index 331078f..9165349 100644
--- a/web/src/components/ui/Button.tsx
+++ b/web/src/components/ui/Button.tsx
@@ -1,7 +1,7 @@
 import type { ButtonHTMLAttributes } from 'react'
 import { cn } from '@/lib/cn'
 
-export type ButtonVariant = 'primary' | 'ghost'
+export type ButtonVariant = 'primary' | 'ghost' | 'danger'
 
 /** Shared button styling, exported so anchor "buttons" (e.g. the OIDC link) match. */
 export function buttonClasses(variant: ButtonVariant = 'primary', className?: string) {
@@ -11,6 +11,7 @@ export function buttonClasses(variant: ButtonVariant = 'primary', className?: st
     'disabled:cursor-not-allowed disabled:opacity-60',
     variant === 'primary' && 'bg-accent text-accent-contrast hover:bg-accent-strong',
     variant === 'ghost' && 'border border-border text-fg hover:bg-border/50',
+    variant === 'danger' && 'bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-500/40',
     className,
   )
 }
diff --git a/web/src/components/ui/Modal.tsx b/web/src/components/ui/Modal.tsx
index 1a5693b..e671552 100644
--- a/web/src/components/ui/Modal.tsx
+++ b/web/src/components/ui/Modal.tsx
@@ -1,35 +1,45 @@
 import { useEffect, useRef, type ReactNode } from 'react'
 
 /**
- * A centered modal dialog rendered over a dimmed backdrop. Closes on Escape or a
- * backdrop click. Wraps content in a native <dialog>-like card; the caller owns
- * the open/closed state (render it only when open).
+ * A centered modal dialog over a dimmed backdrop. Closes on Escape or a backdrop
+ * click, unless `busy` (a mutation is in flight) — then it stays put so the
+ * action can finish and report. The caller owns open/closed state (render only
+ * when open).
  */
 export function Modal({
   title,
   onClose,
+  busy = false,
   children,
 }: {
   title: string
   onClose: () => void
+  busy?: boolean
   children: ReactNode
 }) {
   const cardRef = useRef<HTMLDivElement>(null)
+  // Keep the latest onClose/busy in refs so the mount-only effect below never
+  // re-runs (which would re-attach the listener and steal focus on every parent
+  // re-render, e.g. during a background refetch).
+  const onCloseRef = useRef(onClose)
+  onCloseRef.current = onClose
+  const busyRef = useRef(busy)
+  busyRef.current = busy
 
   useEffect(() => {
+    cardRef.current?.focus()
     function onKey(e: KeyboardEvent) {
-      if (e.key === 'Escape') onClose()
+      if (e.key === 'Escape' && !busyRef.current) onCloseRef.current()
     }
     document.addEventListener('keydown', onKey)
-    cardRef.current?.focus()
     return () => document.removeEventListener('keydown', onKey)
-  }, [onClose])
+  }, [])
 
   return (
     <div
       className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 p-4 sm:items-center"
       onMouseDown={(e) => {
-        if (e.target === e.currentTarget) onClose()
+        if (e.target === e.currentTarget && !busy) onClose()
       }}
     >
       <div
diff --git a/web/src/components/ui/Select.tsx b/web/src/components/ui/Select.tsx
index e1ccb7a..2dbfcb3 100644
--- a/web/src/components/ui/Select.tsx
+++ b/web/src/components/ui/Select.tsx
@@ -1,34 +1,23 @@
-import { forwardRef, useId, type SelectHTMLAttributes } from 'react'
+import { forwardRef, type SelectHTMLAttributes } from 'react'
 import { cn } from '@/lib/cn'
+import { fieldControlClass, useFieldId } from './field'
 
 interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
   label: string
   options: { value: string; label: string }[]
 }
 
-// Labelled native <select>, styled to match the text inputs.
 export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(
   { label, options, id, name, className, ...props },
   ref,
 ) {
-  const generatedId = useId()
-  const fieldId = id ?? name ?? generatedId
+  const fieldId = useFieldId(id, name)
   return (
     <div className="flex flex-col gap-1.5">
       <label htmlFor={fieldId} className="text-sm font-medium text-fg">
         {label}
       </label>
-      <select
-        ref={ref}
-        id={fieldId}
-        name={name}
-        className={cn(
-          'w-full rounded-md border border-border bg-surface px-3 py-2 text-base text-fg',
-          'outline-none transition-colors focus:border-accent focus:ring-2 focus:ring-accent/30 disabled:opacity-60',
-          className,
-        )}
-        {...props}
-      >
+      <select ref={ref} id={fieldId} name={name} className={cn(fieldControlClass, className)} {...props}>
         {options.map((o) => (
           <option key={o.value} value={o.value}>
             {o.label}
diff --git a/web/src/components/ui/TextArea.tsx b/web/src/components/ui/TextArea.tsx
index 8a602ba..8759e4d 100644
--- a/web/src/components/ui/TextArea.tsx
+++ b/web/src/components/ui/TextArea.tsx
@@ -1,35 +1,22 @@
-import { forwardRef, useId, type TextareaHTMLAttributes } from 'react'
+import { forwardRef, type TextareaHTMLAttributes } from 'react'
 import { cn } from '@/lib/cn'
+import { fieldControlClass, useFieldId } from './field'
 
 interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
   label: string
 }
 
-// Labelled multi-line input, matching TextField's styling (16px text avoids iOS
-// zoom). The id falls back to name then a generated id so the label always binds.
 export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(
   { label, id, name, className, ...props },
   ref,
 ) {
-  const generatedId = useId()
-  const fieldId = id ?? name ?? generatedId
+  const fieldId = useFieldId(id, name)
   return (
     <div className="flex flex-col gap-1.5">
       <label htmlFor={fieldId} className="text-sm font-medium text-fg">
         {label}
       </label>
-      <textarea
-        ref={ref}
-        id={fieldId}
-        name={name}
-        className={cn(
-          'w-full rounded-md border border-border bg-surface px-3 py-2 text-base text-fg',
-          'placeholder:text-muted/70 outline-none transition-colors',
-          'focus:border-accent focus:ring-2 focus:ring-accent/30 disabled:opacity-60',
-          className,
-        )}
-        {...props}
-      />
+      <textarea ref={ref} id={fieldId} name={name} className={cn(fieldControlClass, className)} {...props} />
     </div>
   )
 })
diff --git a/web/src/components/ui/TextField.tsx b/web/src/components/ui/TextField.tsx
index d277c12..ca4d8cd 100644
--- a/web/src/components/ui/TextField.tsx
+++ b/web/src/components/ui/TextField.tsx
@@ -1,20 +1,17 @@
-import { forwardRef, useId, type InputHTMLAttributes } from 'react'
+import { forwardRef, type InputHTMLAttributes } from 'react'
 import { cn } from '@/lib/cn'
+import { fieldControlClass, useFieldId } from './field'
 
 interface TextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
   label: string
   hint?: string
 }
 
-// A labelled text input. text-base (16px) is deliberate: smaller fonts make iOS
-// Safari zoom on focus. The field id falls back to the name, then to a generated
-// id, so the label/hint associations always hold.
 export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(function TextField(
   { label, hint, id, name, className, ...props },
   ref,
 ) {
-  const generatedId = useId()
-  const inputId = id ?? name ?? generatedId
+  const inputId = useFieldId(id, name)
   const hintId = hint ? `${inputId}-hint` : undefined
   return (
     <div className="flex flex-col gap-1.5">
@@ -26,13 +23,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(function T
         id={inputId}
         name={name}
         aria-describedby={hintId}
-        className={cn(
-          'w-full rounded-md border border-border bg-surface px-3 py-2 text-base text-fg',
-          'placeholder:text-muted/70 outline-none transition-colors',
-          'focus:border-accent focus:ring-2 focus:ring-accent/30',
-          'disabled:opacity-60',
-          className,
-        )}
+        className={cn(fieldControlClass, className)}
         {...props}
       />
       {hint && (
diff --git a/web/src/components/ui/field.ts b/web/src/components/ui/field.ts
new file mode 100644
index 0000000..19e23e9
--- /dev/null
+++ b/web/src/components/ui/field.ts
@@ -0,0 +1,18 @@
+import { useId } from 'react'
+
+// Shared field plumbing for the labelled form controls (TextField, TextArea,
+// Select) so their id-fallback and base styling stay in one place.
+
+/** The field id: an explicit id, else the name, else a generated stable id, so
+ *  the label's htmlFor always binds to something. */
+export function useFieldId(id?: string, name?: string): string {
+  const generated = useId()
+  return id ?? name ?? generated
+}
+
+/** Base classes shared by the text/select/textarea controls. text-base (16px)
+ *  keeps iOS Safari from zooming on focus. */
+export const fieldControlClass =
+  'w-full rounded-md border border-border bg-surface px-3 py-2 text-base text-fg ' +
+  'outline-none transition-colors placeholder:text-muted/70 ' +
+  'focus:border-accent focus:ring-2 focus:ring-accent/30 disabled:opacity-60'
diff --git a/web/src/lib/gardens.ts b/web/src/lib/gardens.ts
index b0fa085..a95410b 100644
--- a/web/src/lib/gardens.ts
+++ b/web/src/lib/gardens.ts
@@ -6,7 +6,7 @@ import { z } from 'zod'
 import { ApiError, api } from './api'
 import type { UnitPref } from './units'
 
-const unitPrefSchema: z.ZodType<UnitPref> = z.enum(['metric', 'imperial'])
+const unitPrefSchema = z.enum(['metric', 'imperial'])
 
 export const gardenSchema = z.object({
   id: z.number(),
@@ -51,13 +51,16 @@ export function useCreateGarden() {
 }
 
 export interface GardenUpdate extends GardenInput {
+  id: number
   version: number
 }
 
-export function useUpdateGarden(id: number) {
+export function useUpdateGarden() {
   const qc = useQueryClient()
   return useMutation({
-    mutationFn: async (input: GardenUpdate): Promise<Garden> =>
+    // id travels with the mutation variables (not the hook) so callers don't need
+    // a placeholder id before a garden is chosen.
+    mutationFn: async ({ id, ...input }: GardenUpdate): Promise<Garden> =>
       gardenSchema.parse(await api.patch(`/gardens/${id}`, input)),
     onSuccess: () => qc.invalidateQueries({ queryKey: gardensKey }),
   })
diff --git a/web/src/lib/units.ts b/web/src/lib/units.ts
index b97f980..b7e3554 100644
--- a/web/src/lib/units.ts
+++ b/web/src/lib/units.ts
@@ -8,6 +8,15 @@ const CM_PER_INCH = 2.54
 const CM_PER_METER = 100
 const INCHES_PER_FOOT = 12
 
+// Mirrors the server's garden dimension bounds (service/gardens.go): [1cm, 100m].
+export const MIN_DIMENSION_CM = 1
+export const MAX_DIMENSION_CM = 10_000
+
+/** Whether a centimeter dimension is within the server's accepted range. */
+export function isValidDimensionCm(cm: number): boolean {
+  return Number.isFinite(cm) && cm >= MIN_DIMENSION_CM && cm <= MAX_DIMENSION_CM
+}
+
 /** Feet (+ optional inches) → whole centimeters. */
 export function cmFromFtIn(feet: number, inches = 0): number {
   return Math.round((feet * INCHES_PER_FOOT + inches) * CM_PER_INCH)
@@ -23,11 +32,15 @@ export function cmFromDisplay(value: number, unit: UnitPref): number {
   return unit === 'imperial' ? cmFromFtIn(value) : cmFromMeters(value)
 }
 
-/** Centimeters → a number in the given unit, for prefilling an input field. */
+/** Centimeters → a number in the given unit, for prefilling an input field.
+ *  Rounded so cm-quantization doesn't show through (e.g. 244cm shows as 8 ft,
+ *  not 8.01): meters to the cm (2 dp), feet to 0.1 ft. */
 export function displayFromCm(cm: number, unit: UnitPref): number {
-  const value = unit === 'imperial' ? cm / CM_PER_INCH / INCHES_PER_FOOT : cm / CM_PER_METER
-  // Trim floating-point noise (e.g. 122cm → 4.0026ft → 4).
-  return Math.round(value * 100) / 100
+  if (unit === 'imperial') {
+    const feet = cm / CM_PER_INCH / INCHES_PER_FOOT
+    return Math.round(feet * 10) / 10
+  }
+  return Math.round((cm / CM_PER_METER) * 100) / 100
 }
 
 /** Centimeters → a human string in the given unit (e.g. "1.22 m" or "4′ 0″"). */
diff --git a/web/src/pages/GardensPage.tsx b/web/src/pages/GardensPage.tsx
index 7913b26..847d9ec 100644
--- a/web/src/pages/GardensPage.tsx
+++ b/web/src/pages/GardensPage.tsx
@@ -12,14 +12,14 @@ type Dialog = { kind: 'create' } | { kind: 'edit'; garden: Garden } | { kind: 'd
 export function GardensPage() {
   const gardens = useGardens()
   const [dialog, setDialog] = useState<Dialog>(null)
+  const close = () => setDialog(null)
+  const hasGardens = !!gardens.data && gardens.data.length > 0
 
   return (
     <section>
       <div className="flex items-center justify-between gap-4">
         <h1 className="text-2xl font-semibold tracking-tight">Gardens</h1>
-        {gardens.data && gardens.data.length > 0 && (
-          <Button onClick={() => setDialog({ kind: 'create' })}>New garden</Button>
-        )}
+        {hasGardens && <Button onClick={() => setDialog({ kind: 'create' })}>New garden</Button>}
       </div>
 
       <div className="mt-6">
@@ -50,9 +50,9 @@ export function GardensPage() {
         )}
       </div>
 
-      {dialog?.kind === 'create' && <GardenFormModal onClose={() => setDialog(null)} />}
-      {dialog?.kind === 'edit' && <GardenFormModal garden={dialog.garden} onClose={() => setDialog(null)} />}
-      {dialog?.kind === 'delete' && <DeleteGardenModal garden={dialog.garden} onClose={() => setDialog(null)} />}
+      {dialog?.kind === 'create' && <GardenFormModal onClose={close} />}
+      {dialog?.kind === 'edit' && <GardenFormModal garden={dialog.garden} onClose={close} />}
+      {dialog?.kind === 'delete' && <DeleteGardenModal garden={dialog.garden} onClose={close} />}
     </section>
   )
 }
-- 
2.54.0