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

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

web/src/components/plants/CategoryChips.tsx

@@ -0,0 +1,37 @@
+import { cn } from '@/lib/cn'
+import { CATEGORY_LABELS, PLANT_CATEGORIES, type CategoryFilter } from '@/lib/plants'
+
+/**
+ * Horizontal, scrollable "All + each category" chip row. Shared by the /plants
+ * page and the PlantPicker so both filter the catalog identically.
+ */
+export function CategoryChips({
+  value,
+  onChange,
+  size = 'md',
+}: {
+  value: CategoryFilter
+  onChange: (c: CategoryFilter) => void
+  size?: 'sm' | 'md'
+}) {
+  const chip = (v: CategoryFilter, label: string) => (
+    <button
+      key={v}
+      type="button"
+      onClick={() => onChange(v)}
+      className={cn(
+        'shrink-0 rounded-full px-3 font-medium transition-colors',
+        size === 'sm' ? 'py-1 text-xs' : 'py-1 text-sm',
+        value === v ? 'bg-accent text-accent-contrast' : 'bg-border/50 text-muted hover:text-fg',
+      )}
+    >
+      {label}
+    </button>
+  )
+  return (
+    <div className="flex gap-1.5 overflow-x-auto">
+      {chip('all', 'All')}
+      {PLANT_CATEGORIES.map((c) => chip(c, CATEGORY_LABELS[c]))}
+    </div>
+  )
+}

web/src/components/plants/DeletePlantModal.tsx

@@ -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>
+  )
+}

web/src/components/plants/PlantCard.tsx

@@ -0,0 +1,72 @@
+import { PlantIcon } from './PlantIcon'
+import { CATEGORY_LABELS, isBuiltin, type Plant } from '@/lib/plants'
+import { formatSpacing, type UnitPref } from '@/lib/units'
+
+const actionClass =
+  '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'
+const dangerClass =
+  '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'
+
+/**
+ * One catalog plant as a card: icon tile tinted with the plant's color, name,
+ * category + mature spacing (unit-aware), and actions. Built-ins are badged and
+ * offer only "Duplicate" (they're read-only); own plants add Edit/Delete.
+ */
+export function PlantCard({
+  plant,
+  unit,
+  onEdit,
+  onDelete,
+  onDuplicate,
+}: {
+  plant: Plant
+  unit: UnitPref
+  onEdit: () => void
+  onDelete: () => void
+  onDuplicate: () => void
+}) {
+  const builtin = isBuiltin(plant)
+  return (
+    <div className="flex flex-col rounded-xl border border-border bg-surface">
+      <div className="flex items-start gap-3 p-4">
+        <PlantIcon color={plant.color} icon={plant.icon} className="h-11 w-11 rounded-lg text-2xl" />
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2">
+            <h3 className="truncate font-semibold text-fg">{plant.name}</h3>
+            {builtin && (
+              <span className="shrink-0 rounded bg-border/60 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted">
+                Built-in
+              </span>
+            )}
+          </div>
+          <p className="mt-0.5 text-sm text-muted">
+            {CATEGORY_LABELS[plant.category]} · {formatSpacing(plant.spacingCm, unit)} spacing
+          </p>
+          {plant.notes && <p className="mt-1 line-clamp-2 text-xs text-muted">{plant.notes}</p>}
+        </div>
+        <span
+          className="mt-1 h-4 w-4 shrink-0 rounded-full border border-black/10 dark:border-white/10"
+          style={{ backgroundColor: plant.color }}
+          title={plant.color}
+        />
+      </div>
+      <div className="flex justify-end gap-1 border-t border-border px-2 py-1.5">
+        <button type="button" onClick={onDuplicate} className={actionClass}>
+          Duplicate
+        </button>
+        {!builtin && (
+          <button type="button" onClick={onEdit} className={actionClass}>
+            Edit
+          </button>
+        )}
+        {!builtin && (
+          <button type="button" onClick={onDelete} className={dangerClass}>
+            Delete
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}

web/src/components/plants/PlantFormModal.tsx

@@ -0,0 +1,212 @@
+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 {
+  CATEGORY_LABELS,
+  PLANT_CATEGORIES,
+  conflictPlant,
+  useCreatePlant,
+  useUpdatePlant,
+  type Plant,
+  type PlantCategory,
+  type PlantInput,
+} from '@/lib/plants'
+import { cmFromSpacing, spacingFromCm, spacingUnitLabel, type UnitPref } from '@/lib/units'
+
+const DEFAULT_COLOR = '#4a7c3f'
+const DEFAULT_ICON = '🌱'
+
+const categoryOptions = PLANT_CATEGORIES.map((c) => ({ value: c, label: CATEGORY_LABELS[c] }))
+
+/** Expand a #rgb shorthand to #rrggbb so the native color input renders it. */
+function expandHex(color: string): string {
+  if (/^#[0-9a-fA-F]{3}$/.test(color)) {
+    const [, r, g, b] = color
+    return `#${r}${r}${g}${g}${b}${b}`
+  }
+  return /^#[0-9a-fA-F]{6}$/.test(color) ? color : DEFAULT_COLOR
+}
+
+/**
+ * Create or edit a custom plant. `plant` puts it in edit mode; `template` (a
+ * built-in or another plant, used by "Duplicate") pre-fills a fresh create. A
+ * 409 rebases the form onto the server's current row. Spacing is entered in the
+ * page's unit and converted to centimeters for the API.
+ */
+export function PlantFormModal({
+  plant,
+  template,
+  unit,
+  onClose,
+}: {
+  plant?: Plant
+  template?: Plant
+  unit: UnitPref
+  onClose: () => void
+}) {
+  const isEdit = !!plant
+  const source = plant ?? template
+  const create = useCreatePlant()
+  const update = useUpdatePlant()
+  const pending = create.isPending || update.isPending
+
+  const [name, setName] = useState(source ? (isEdit ? source.name : `${source.name} (copy)`) : '')
+  const [category, setCategory] = useState<PlantCategory>(source?.category ?? 'vegetable')
+  const [spacing, setSpacing] = useState(String(spacingFromCm(source?.spacingCm ?? 30, unit)))
+  const [color, setColor] = useState(expandHex(source?.color ?? DEFAULT_COLOR))
+  const [icon, setIcon] = useState(source?.icon ?? DEFAULT_ICON)
+  const [days, setDays] = useState(source?.daysToMaturity != null ? String(source.daysToMaturity) : '')
+  const [notes, setNotes] = useState(source?.notes ?? '')
+  const [version, setVersion] = useState(plant?.version ?? 0)
+  const [conflict, setConflict] = useState<string | null>(null)
+  const [formError, setFormError] = useState<string | null>(null)
+  const unitLabel = spacingUnitLabel(unit)
+
+  async function onSubmit(e: FormEvent) {
+    e.preventDefault()
+    setFormError(null)
+    setConflict(null)
+
+    if (!name.trim()) {
+      setFormError('Enter a name for the plant.')
+      return
+    }
+    if (!icon.trim()) {
+      setFormError('Pick an emoji icon.')
+      return
+    }
+    const spacingCm = cmFromSpacing(parseFloat(spacing), unit)
+    if (!Number.isFinite(spacingCm) || spacingCm < 1) {
+      setFormError(`Spacing must be at least 1 ${unitLabel}.`)
+      return
+    }
+    let daysToMaturity: number | null = null
+    if (days.trim()) {
+      // Number() (not parseInt) so "1.5" is rejected, not silently truncated to 1.
+      const d = Number(days)
+      if (!Number.isInteger(d) || d < 1) {
+        setFormError('Days to maturity must be a whole number of days, or left blank.')
+        return
+      }
+      daysToMaturity = d
+    }
+
+    const input: PlantInput = {
+      name: name.trim(),
+      category,
+      spacingCm,
+      color,
+      icon: icon.trim(),
+      daysToMaturity,
+      notes: notes.trim(),
+    }
+
+    try {
+      if (isEdit) {
+        await update.mutateAsync({ id: plant.id, ...input, version })
+      } else {
+        await create.mutateAsync(input)
+      }
+      onClose()
+    } catch (err) {
+      const current = conflictPlant(err)
+      if (current) {
+        // Someone else changed this plant: rebase onto the fresh row so a re-save
+        // applies against the current version.
+        setVersion(current.version)
+        setName(current.name)
+        setCategory(current.category)
+        setSpacing(String(spacingFromCm(current.spacingCm, unit)))
+        setColor(expandHex(current.color))
+        setIcon(current.icon)
+        setDays(current.daysToMaturity != null ? String(current.daysToMaturity) : '')
+        setNotes(current.notes)
+        setConflict('This plant changed elsewhere. The latest values are shown — review and save again.')
+        return
+      }
+      setFormError(errorMessage(err, isEdit ? 'Could not save changes.' : 'Could not create the plant.'))
+    }
+  }
+
+  return (
+    <Modal title={isEdit ? 'Edit plant' : 'New plant'} onClose={onClose} busy={pending}>
+      <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)} />
+
+        <div className="grid grid-cols-2 gap-3">
+          <Select
+            label="Category"
+            name="category"
+            value={category}
+            onChange={(e) => setCategory(e.target.value as PlantCategory)}
+            options={categoryOptions}
+          />
+          <TextField
+            label={`Spacing (${unitLabel})`}
+            name="spacing"
+            type="number"
+            inputMode="decimal"
+            step="any"
+            min="1"
+            required
+            value={spacing}
+            onChange={(e) => setSpacing(e.target.value)}
+          />
+        </div>
+
+        <div className="grid grid-cols-2 gap-3">
+          <div className="flex flex-col gap-1.5">
+            <label htmlFor="plant-color" className="text-sm font-medium text-fg">
+              Color
+            </label>
+            <input
+              id="plant-color"
+              type="color"
+              value={color}
+              onChange={(e) => setColor(e.target.value)}
+              className="h-10 w-full cursor-pointer rounded-md border border-border bg-surface"
+            />
+          </div>
+          <TextField
+            label="Icon (emoji)"
+            name="icon"
+            value={icon}
+            onChange={(e) => setIcon(e.target.value)}
+            hint="A single emoji, e.g. 🍅"
+          />
+        </div>
+
+        <TextField
+          label="Days to maturity (optional)"
+          name="days"
+          type="number"
+          inputMode="numeric"
+          step="1"
+          min="1"
+          value={days}
+          onChange={(e) => setDays(e.target.value)}
+        />
+
+        <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 plant'}
+          </Button>
+        </div>
+      </form>
+    </Modal>
+  )
+}

web/src/components/plants/PlantIcon.tsx

@@ -0,0 +1,18 @@
+import { cn } from '@/lib/cn'
+
+/**
+ * A plant's emoji on a tile tinted with its own color (via color-mix, so any
+ * valid CSS color works). Shared by PlantCard and the PlantPicker rows. Size and
+ * shape come from `className`.
+ */
+export function PlantIcon({ color, icon, className }: { color: string; icon: string; className?: string }) {
+  return (
+    <span
+      className={cn('grid shrink-0 place-items-center', className)}
+      style={{ backgroundColor: `color-mix(in srgb, ${color} 18%, transparent)` }}
+      aria-hidden
+    >
+      {icon}
+    </span>
+  )
+}