Commit Graph
3 Commits
Author SHA1 Message Date
Brenda WallaceandClaude Opus 5 af77b798c5 Use the harvest and seed cards site-wide, and rate a planting in place
The new harvest cards and seed packets only appeared on plantings#show.
Everywhere else either used the old thumbnails or hand-rolled its own
markup, which is what made harvests and plantings look alike in the first
place.

- members#show and members/_harvests render harvests/card. The latter also
  wrapped each card in another .card, which nested a card in a card.
- The homepage harvest list was hand-rolled markup beside a seeds section
  that already used seeds/card; both now use the shared partials.
- Homepage seed packets go in an .index-cards grid. Outside one they have
  no width, and the packet's 3:4 ratio made each half the page wide.
- harvests/_harvest and seeds/_seed chose between card and thumbnail on a
  `full:` local that nothing passes. Both render the card.

The crop pages' harvest and seed panels are lists of links in a sidebar,
not card grids, so they are left alone.

Section "add" buttons now open the same dialogs as the actions menu, via a
data-planting-dialog attribute the island listens for. Their href stays as
the fallback without JavaScript.

The rating card is now clickable: for someone who may edit the planting it
renders StarRating, which saves the new rating and puts it back if the
save fails. The card's own heading is the label, so the fieldset legend is
hidden rather than saying "Rating" twice.

"More photos" is a plain link again, and only shows when there are more
photos than the page is displaying — the photos are now paginated to 12,
where before the whole set was loaded and the link always showed.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-23 08:41:09 +12:00
Brenda WallaceandClaude Opus 5 baff16e92e Tidy plantings#show, and make cards and menus consistent
This page read as a page about the crop rather than about one member's
planting, and its sections each did things their own way. Changes follow
the conventions written up in the UI consistency guide.

Identity
- Title, meta description and OpenGraph all read "<crop> planting by
  <owner>"; the hero carries a muted "planting by X in Y" subtitle and
  the scientific name moves to the crop card.
- Breadcrumb's last item is plain text, not a link to the current page.

Actions
- One actions menu per page: a quiet three-dot button in the top right of
  the hero, rendered by the new PlantingActions island, opening the
  EditPlanting, RecordHarvest, SaveSeeds, MarkFinished and AddPhoto
  dialogs that already existed for the garden list.
- Menu items are lower case, so a menu reads as a list of things you can
  do rather than a row of headings.
- Transplanting moves out of the sidebar into a dialog off that menu: it
  is done once in a planting's life and should not hold real estate.
- The second seed-saving dropdown and the loose photo buttons are gone;
  each section keeps one quiet "add" on its heading bar as the non-JS
  path.
- The plant-part icons from the server-rendered harvest form now reach
  the dialog, via icon_url on HarvestFormSerializer.

Fact cards
- Every card fills the same four slots, and the core cards always render
  so one planting's page has the same shape as the next.
- Progress reads as a percentage with "day 43 of 90" beneath; quantity
  and "grown from" merge into one card rather than both saying
  "seedling"; rating is stars and renders even when unrated.
- Dates go through I18n.l and standard_time_distance instead of
  assembling abbr_month_names by hand.
- Adds Planting#planned?, replacing three copies of age_in_days < 0.
- Perennial no longer claims the plant "grows back each year".

Cards by type
- Harvest cards get square corners, a warm accent and the harvest icon,
  and say "<crop> harvest", so they are not mistaken for plantings.
- Seed cards are drawn as seed packets: portrait, papery, torn top edge,
  printed band, small print along the foot and the year saved stamped on
  them.

Layout
- The page wrapper is .planting-show, not .planting: that is the planting
  *card's* class, and its absolutely positioned badges and quick actions
  were leaking onto this page.
- Sections are bordered blocks with their heading bar as the lid, so a
  heading and its content read as one thing.
- One spacing scale, and the hero aligns to the same left edge as
  everything below it.

Copy
- Section headings and empty states go through en.yml, in one voice.
- "Add a photo to visually track growth of this planting, to Flickr,
  iNaturalist or Pl@ntNet" was nonsense: photos come from Flickr only.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-23 08:15:45 +12:00
Brenda WallaceandClaude Sonnet 5 9dae899693 Quick planting addition form (#4808)
* Add rake tasks to pull crops and a member's data from production

crops:pull_from_production copies approved crops, and
members:pull_from_production copies one member's gardens, plantings and
planting photos, from growstuff.org into a local database. Both refuse to
run in a production environment.

They are built to be gentle on a server that has been struggling: one
request at a time with a pause between requests, exponential backoff
(honouring Retry-After) on timeouts, 429s and 5xx, and a hard stop rather
than endless retries. The client also stops if a server keeps sending the
same page, and will not follow a next link to another host.

Gardens and plantings come from the site's own JSON, which carries every
column; the JSON:API only exposes a garden's name, and its related
resource endpoints return the wrong records. Only the crops that a
member's plantings use are fetched. Flickr photos are stored as records
pointing at Flickr's image URLs, as on production, so nothing is
downloaded from Flickr.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* Add ACTIVE_ONLY option to the member import

ACTIVE_ONLY=true leaves out the site's all=1 flag, so production lists only
the member's active gardens and current (not finished, not failed)
plantings. The server does the filtering, so it also means fewer requests,
and no crops or photos are fetched for plantings that are skipped.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* Bundle JavaScript with esbuild via jsbundling-rails

Adds React and an esbuild build (yarn build, yarn build:watch) that writes
app/assets/builds/react_islands.js, which Sprockets serves. jsbundling-rails
runs the build as part of assets:precompile, which CI and the Dockerfile
already run after yarn install.

react_islands.jsx is the entry point: it mounts a React component into every
element with data-react-component. No components are registered yet.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* Add react_component view helper

Renders an empty element carrying the component name and its props as JSON,
for react_islands.jsx to mount a React component into. Props go through
Rails' attribute escaping.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* Show a React GardenSummary island on the gardens index

The first React island, to prove the pipeline end to end: server-rendered
props (owner and garden count) drive a small component with client-side
state. Loaded only on this page, deferred, via the scripts content block.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* Add GardenCardSerializer for the React garden cards

Turns a page of gardens into plain hashes: the garden, its owner, its
actions menu, and its active plantings split into perennials and annuals,
with progress, badges and quick actions. It mirrors what gardens/_card,
gardens/_actions and the planting partials render today, so the server
still decides labels, links and permissions.

Active plantings for the whole page are loaded in one query (with harvests
and the crop's parents), instead of several queries per garden.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* Render the garden cards on the index with React

The gardens index now hands GardenCardSerializer's output to a GardenCards
island instead of rendering gardens/_card per garden. The actions menu moves
to the top right of the card header. Everything else on the card is the same:
image, perennials, and each annual planting with badges, progress bar and its
own quick actions menu. The server still chooses labels, links and
permissions.

The dropdowns keep the existing Bootstrap and jquery_ujs markup
(data-bs-toggle, data-method, data-confirm), so mark inactive, delete and the
confirmations work unchanged. Menu button ids are now unique per card, so the
edit-from-index spec finds the menu by its Actions text instead of the old
repeated id.

gardens/_card stays for the activity page. This replaces the GardenSummary
island, which only proved the pipeline.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* Don't raise when validating a planting that has no garden

owner_must_match_garden_owner called garden.owner unconditionally, so a
planting with a missing garden raised NoMethodError (a 500) instead of
failing the garden presence validation.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* Create plantings as JSON for the React garden cards

POST /plantings.json returns the garden's updated card (201), or the
validation errors (422), so the cards can show a new planting without a page
reload. It is for our own pages only: session cookie plus CSRF token, and no
CORS headers, unlike the public /api/v1.

Creating now also checks the garden is yours. Before, can :create Planting
had no garden condition and create never authorized the garden, so a crafted
request could plant into someone else's garden. This applies to the HTML form
as well. A missing garden is still left to the presence validation.

CanCan::AccessDenied now answers JSON requests with a 403 and an error,
instead of redirecting them.

The request spec logs in through a real cookie session to exercise CSRF
protection: PlantingsController uses the null_session strategy, so a request
without the token is treated as signed out (401), and the sign_in test helper
would bypass that.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* Don't ask which garden when planting from a garden

Arriving at the planting form with a garden_id of one of your own gardens
(from 'Plant something here') now shows 'Planting in <garden>' with a hidden
garden field and a link to choose a different one, instead of the garden
radio buttons. Any other arrival, including a garden_id that isn't yours,
still asks as before.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* Open 'Plant something here' as a dialog over the garden cards

Clicking 'Plant something here' on a card opens a dialog to plant into that
garden, without leaving the list or asking which garden. Saving posts to
POST /plantings.json, swaps in the garden's updated card so the new planting
shows straight away (briefly highlighted, with a confirmation), and closes the
dialog. Errors show inside it and it stays open. A ctrl/cmd/shift-click still
opens the normal form.

The dialog is a React-controlled Bootstrap modal: focus moves in and is
trapped, Escape and the backdrop close it, and focus returns afterwards. The
crop picker searches /crops/search.json like the existing autosuggest, and the
planted-from and sun choices come from Planting's constants via props.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* Use the Bootstrap 4 class names the app's CSS defines in the card components

The stylesheet is MDB 4 (Bootstrap 4), with Bootstrap 5's JavaScript on top,
so Bootstrap 5-only classes had no styling: the dialog's close button was
btn-close (a small grey box), and visually-hidden, form-select and text-start
did nothing. Use close with a times sign, sr-only, form-control and text-left,
as the app's existing modals do.

dropdown-menu-end stays, because Bootstrap 5's dropdown JavaScript reads it to
place the menu; dropdown-menu-right is added for the CSS.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* Make the plant-something form read as a sentence

'I planted [N] [crop](s) on [date] from [seed] in [sun].' Each blank is an
underlined inline field: quantity, the crop search, the planted date, and
planted-from and sun/shade selects. The (s) drops away when the quantity is 1.
The blanks are labelled for screen readers (Quantity, Crop, Planted date,
Planted from, Sun or shade). Notes and 'Mark as finished' stay below.

The browser spec now fills in quantity, planted from and sun as well, and
checks they are saved.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* Hint at typing a crop name, and offer to request one that isn't found

The crop blank says 'type a crop name'. When a search finds nothing it says
so and links to the new-crop form (in a new tab, so the dialog stays open),
as the old planting form did.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* Say 'number' in the quantity blank

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* Choose a crop with the cursor keys

The crop picker is now an accessible combobox. As you type, matches appear in
a listbox: Up and Down move through them, Enter chooses the highlighted one
(or the top match if none is highlighted), and Escape closes the list before a
second Escape closes the dialog. Focus moves to 'Change' once a crop is chosen.
Matches can still be clicked.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* Trim the plant-something form to just the sentence

Remove 'Mark as finished' and the 'Tell us more about it' notes from the
dialog, along with the never-shown rating field it carried in its state.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* Make the highlighted crop match obvious

The theme's list-group 'active' shade was barely darker than the other
matches. The one Enter would choose now has a solid blue background, white
bold text and a darker left edge.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* Tidy the plant-something sentence layout

Group the sentence into phrases (I planted..., on..., from..., in...) that stay
together when it wraps, so a word is never stranded away from its blank. Hide
the quantity spinner that clipped 'number', widen the date, and give the two
selects a minimum width, with a grey 'optional' when they are still empty.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* Don't let a second Enter undo a chosen crop

After choosing a crop the input is replaced by the crop's name and a Change
button. Focus went to that button, so pressing Enter again pressed it and
cleared the choice. Focus now moves on to the date blank, so a second Enter
submits the form as it would from any field.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* Plant with one search and a confirmation, instead of the sentence form

The dialog asks one big question, 'What did you plant?', with the same
crop search as before (arrow keys, Enter, and a way to request a crop that
isn't found). Choosing a crop shows it back ('You're planting lettuce in
Orchard, today.') with Change and Plant it buttons, and focus lands on Plant
it so Enter confirms. The planting gets today's date and no other details;
those can be added later, which keeps adding one quick.

Drops the sentence blanks, their styles, and the planted-from/sun option lists
the page passed down.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* Fix unreadable text on a just-planted crop

The highlight for a newly added planting set an inline pale green background
on the crop chip. Chips are brown with white text, so the name became white on
light green. The highlight is now a CSS class that leaves the chip's colours
alone: a soft green row with a left bar for annual plantings, and a green ring
around the chip for perennials. The browser spec checks the chip carries no
inline style.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* Tidy the plant dialog and show what is happening at each stage

Standard patterns so the dialog always says where you are and what it is doing:
- a two-step indicator (Choose a crop, Confirm) with a tick on the finished step
- a spinner in the search box while searching, plus a 'Searching...' status, a
  count of matches, and an info icon on the 'no crops match' note
- the choice shown back as a Crop / Garden / When summary with a Change button
- Plant it as a filled green primary button that stays green while focused (the
  theme greys a focused button) and shows a spinner while planting, with Cancel
  and Change disabled meanwhile
- an error panel with a warning icon that says the choice is kept for retrying
- the matches listed in the dialog rather than floating over its buttons
- a tick on the 'Planted ...' notice on the cards
- the shovel (spade-marker.svg, the map marker) in the dialog title

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* Build the React bundle in CI and for fresh checkouts

app/assets/builds/react_islands.js is built by esbuild and not committed, so on
a fresh checkout pages that load it (the gardens index) fail with 'The asset
react_islands.js is not present in the asset pipeline'. The rspec CI job never
built it: only the browser-feature jobs did, through assets:precompile. Add a
yarn build step there, and have the specs build the bundle once if it is
missing so a local checkout doesn't fail either.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* Add the missing 'View' translation

The planting quick-actions menu used t('view'), which has no translation. In a
view Rails hides that by showing a humanised 'View'; the card serializer uses
I18n.t, which showed 'Translation missing: en.view' in the menu. Add
buttons.view, use it in both places, and add a serializer spec that fails if
any card label is a missing translation.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* Fix two crop_jsonld_data specs that could not pass

The helper builds its hash with symbol keys, but the spec read 'data["@context"]'
with a string key. And 'caps posts and photos at 50' relied on
create(:post, crops: [crop]), which creates no crop_posts rows here, and on
crop.photo_associations.create!, which the Crop model's own association leaves
without a photographable. Link posts with CropPost and photos with
PhotoAssociation explicitly.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* Run the helper and serializer specs in CI

The rspec job ran lib, services, models, controllers, views, routing and
requests, but not spec/helpers or spec/serializers, so those specs (including
the react_component helper and the card serializer) never ran there, and two
broken crops_helper specs went unnoticed.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* Tidy the garden cards

The cards were cluttered and misaligned. Now:
- the header has a smaller title with the owner under it, and the menu top right
- a smaller picture, and 'Perennials' and 'Annuals' headings instead of a
  divider and a gap; 'Nothing planted here yet.' for an empty garden
- each annual planting is a row of three aligned columns: the crop with when it
  was planted (which tells duplicates apart), then its badges and progress bar,
  then a labelled three-dots menu in place of a bare chevron
- the note when there is nothing to predict from is one short muted line that
  no longer repeats the crop name
- on a phone the picture and rows stack

Also restores the just-planted highlight styles, which a stylesheet edit had
dropped, and adds a spec that the highlight has a background, since the class
existing was all that was checked.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* Make the planting menu button compact

The theme gives every .btn a 5.5rem minimum width, so the three-dots button's
hover background was a wide grey box. It is now a 2.25rem round button.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-20 16:04:15 +09:30