setBody(e.target.value)}
      />
      <div className="flex items-end gap-2">
        <div className="flex-1">
          <TextField
            label="Observed"
            name="observedAt"
            type="date"
            value={observedAt}
            onChange={(e) => setObservedAt(e.target.value)}
          />
        </div>
        <Button className="shrink-0" disabled={create.isPending || body.trim() === ''} onClick={submit}>
          {create.isPending ? 'Saving…' : 'Save note'}
        </Button>
      </div>
      {error && <p className="text-xs text-red-700 dark:text-red-400">{error}</p>}
    </div>
  )
}

function Entry({
  entry,
  gardenId,
  objects,
  canDelete,
  canRewrite,
}: {
  entry: JournalEntry
  gardenId: number
  objects: EditorObject[]
  /** May remove it: the author, or the garden owner. */
  canDelete: boolean
  /** May rewrite the text: the author only — rewriting someone else's
   *  observation under their name is a different act from removing it. */
  canRewrite: boolean
}) {
  const update = useUpdateJournalEntry(gardenId)
  const del = useDeleteJournalEntry(gardenId)
  const [editing, setEditing] = useState(false)
  const [draft, setDraft] = useState(entry.body)
  const [error, setError] = useState<string | null>(null)
  const about = objects.find((o) => o.id === entry.objectId) ?? null

// Re-sync the draft when the entry changes underneath — a refetch after
  // someone else's edit, or this entry's own successful save. Skipped while
  // editing so a background refetch can't clobber what's being typed; the
  // version guard is what catches a genuine collision.
  const [syncedBody, setSyncedBody] = useState(entry.body)
  if (!editing && entry.body !== syncedBody) {
    setSyncedBody(entry.body)
    setDraft(entry.body)
  }

const save = () => {
    const text = draft.trim()
    if (!text) {
      // Silence here reads as a broken button; say why nothing happened.
      setError('An entry needs some text. Delete it instead if that\'s what you meant.')
      return
    }
    setError(null)
    update.mutate(
      { id: entry.id, version: entry.version, body: text },
      {
        onSuccess: () => {
          setEditing(false)
          setError(null)
        },
        onError: (err) => setError(errorMessage(err, "Couldn't save that edit.")),
      },
    )
  }

return (
    <li className="rounded-lg border border-border px-2.5 py-2 text-sm">
      {editing ? (
        <div className="flex flex-col gap-2">
          <TextArea label="Note" name={`entry-${entry.id}`} rows={3} value={draft} onChange={(e) => setDraft(e.target.value)} />
          <div className="flex justify-end gap-1">
            <Button
              variant="ghost"
              className="px-2 py-1 text-xs"
              onClick={() => {
                setDraft(entry.body)
                setEditing(false)
                setError(null)
              }}
            >
              Cancel
            </Button>
            <Button className="px-2 py-1 text-xs" disabled={update.isPending} onClick={save}>
              {update.isPending ? 'Saving…' : 'Save'}
            </Button>
          </div>
        </div>
      ) : (
        <p className="whitespace-pre-wrap text-fg">{entry.body}</p>
      )}

<p className="mt-1 flex flex-wrap items-center gap-x-1.5 gap-y-1 text-xs text-muted">
        <time dateTime={entry.observedAt}>{formatObservedAt(entry.observedAt)}</time>
        <span aria-hidden>·</span>
        <span>{entry.authorName}</span>
        {about && (
          <>
            <span aria-hidden>·</span>
            <span className="rounded bg-border/60 px-1 py-px">{objectDisplayName(about)}</span>
          </>
        )}
        {entry.plantingId != null && <span className="rounded bg-border/60 px-1 py-px">planting</span>}
      </p>

{(canRewrite || canDelete) && !editing && (
        <div className="mt-1 flex justify-end gap-1">
          {canRewrite && (
            <button
              type="button"
              onClick={() => setEditing(true)}
              className="rounded px-1.5 py-0.5 text-xs text-muted outline-none hover:text-fg focus-visible:ring-2 focus-visible:ring-accent/40"
            >
              Edit
            </button>
          )}
          {canDelete && (
            <button
              type="button"
              disabled={del.isPending}
              onClick={() => {
                setError(null) // clear a previous failure so a retry isn't read as another
                del.mutate(entry.id, {
                  onError: (err) => setError(errorMessage(err, "Couldn't delete that note.")),
                })
              }}
              className="rounded px-1.5 py-0.5 text-xs text-red-700 outline-none hover:underline focus-visible:ring-2 focus-visible:ring-accent/40 dark:text-red-400"
            >
              Delete
            </button>
          )}
        </div>
      )}
      {error && <p className="mt-1 text-xs text-red-700 dark:text-red-400">{error}</p>}
    </li>
  )
}