Configurable grid + snap-to-grid in the layout system (#45)

Closes #44. Two independent grids (garden + per-bed), each with a size and a snap toggle; snapping defaults off. See PR #45 for details.

Co-authored-by: Steve Dudenhoeffer <[email protected]>

web/src/components/gardens/GardenFormModal.tsx

@@ -9,13 +9,17 @@ import { errorMessage } from '@/lib/api'
 import { conflictGarden, useCreateGarden, useUpdateGarden, type Garden } from '@/lib/gardens'
 import {
   cmFromDisplay,
+  cmFromSpacing,
   dimensionUnitLabel,
   displayFromCm,
   isValidDimensionCm,
+  spacingFromCm,
+  spacingUnitLabel,
   type UnitPref,
 } from '@/lib/units'
 
 const DEFAULT_METERS = 10 // matches the server's 10 m default
+const DEFAULT_GRID_CM = 100 // matches the server's 1 m grid default
 
 const unitOptions = [
   { value: 'metric', label: 'Metric (m)' },
@@ -42,6 +46,10 @@ export function GardenFormModal({ garden, onClose }: { garden?: Garden; onClose:
   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 [gridSize, setGridSize] = useState(() =>
+    String(spacingFromCm(garden?.gridSizeCm ?? DEFAULT_GRID_CM, garden?.unitPref ?? 'metric')),
+  )
+  const [snapToGrid, setSnapToGrid] = useState(garden?.snapToGrid ?? false)
   const [notes, setNotes] = useState(garden?.notes ?? '')
   const [version, setVersion] = useState(garden?.version ?? 0)
   const [conflict, setConflict] = useState<string | null>(null)
@@ -52,8 +60,15 @@ export function GardenFormModal({ garden, onClose }: { garden?: Garden; onClose:
       const v = parseFloat(s)
       return Number.isFinite(v) ? String(displayFromCm(cmFromDisplay(v, unit), next)) : s
     }
+    // The grid is entered at spacing scale (cm/in), so it converts with the
+    // spacing helpers, not the dimension ones.
+    const convertGrid = (s: string) => {
+      const v = parseFloat(s)
+      return Number.isFinite(v) ? String(spacingFromCm(cmFromSpacing(v, unit), next)) : s
+    }
     setWidth(convert(width))
     setHeight(convert(height))
+    setGridSize(convertGrid(gridSize))
     setUnit(next)
   }
 
@@ -75,8 +90,21 @@ export function GardenFormModal({ garden, onClose }: { garden?: Garden; onClose:
       setFormError('Width and height must be between 1 cm and 100 m.')
       return
     }
+    const gridSizeCm = cmFromSpacing(parseFloat(gridSize), unit)
+    if (!isValidDimensionCm(gridSizeCm)) {
+      setFormError('Grid size must be between 1 cm and 100 m.')
+      return
+    }
 
-    const input = { name: name.trim(), widthCm, heightCm, unitPref: unit, notes: notes.trim() }
+    const input = {
+      name: name.trim(),
+      widthCm,
+      heightCm,
+      unitPref: unit,
+      notes: notes.trim(),
+      gridSizeCm,
+      snapToGrid,
+    }
 
     try {
       if (isEdit) {
@@ -95,6 +123,8 @@ export function GardenFormModal({ garden, onClose }: { garden?: Garden; onClose:
         setUnit(current.unitPref)
         setWidth(dimString(current.widthCm, current.unitPref))
         setHeight(dimString(current.heightCm, current.unitPref))
+        setGridSize(String(spacingFromCm(current.gridSizeCm, current.unitPref)))
+        setSnapToGrid(current.snapToGrid)
         setNotes(current.notes)
         setConflict('This garden changed elsewhere. The latest values are shown — review and save again.')
         return
@@ -145,6 +175,30 @@ export function GardenFormModal({ garden, onClose }: { garden?: Garden; onClose:
           />
         </div>
 
+        <div className="flex items-end gap-3">
+          <div className="flex-1">
+            <TextField
+              label={`Grid size (${spacingUnitLabel(unit)})`}
+              name="gridSize"
+              type="number"
+              inputMode="decimal"
+              step="any"
+              min="0"
+              value={gridSize}
+              onChange={(e) => setGridSize(e.target.value)}
+            />
+          </div>
+          <label className="flex h-9 items-center gap-2 whitespace-nowrap text-sm text-fg">
+            <input
+              type="checkbox"
+              checked={snapToGrid}
+              onChange={(e) => setSnapToGrid(e.target.checked)}
+              className="h-4 w-4 rounded border-border"
+            />
+            Snap objects
+          </label>
+        </div>
+
         <TextArea label="Notes" name="notes" rows={2} value={notes} onChange={(e) => setNotes(e.target.value)} />
 
         {formError && <Alert>{formError}</Alert>}