Install Hotwire and migrate inline code to Stimulus + CSS tokens

ldraney commented

2026-05-24 18:20:16 +00:00

Owner

Type

Feature

Lineage

Standalone — discovered during Hotwire setup session.

Repo

ldraney/landscaping-assistant

User Story

As a landscaping crew member
I want the app to use proper Hotwire patterns with clean CSS
So that the codebase is maintainable and ready for new features

Context

The Gemfile declared turbo-rails, stimulus-rails, and importmap-rails but none were installed. All JS (~100 lines) and CSS lived inline in index.html.erb. The app needs Hotwire wired up properly before adding features like property browsing and route queues. CSS should follow the design token conventions from ~/ror-css-guide.

File Targets

Files modified:

app/assets/stylesheets/application.css -- design tokens, reset, component styles
app/views/properties/index.html.erb -- replace inline styles/JS with Stimulus data attributes
app/views/layouts/application.html.erb -- add javascript_importmap_tags
app/controllers/properties_controller.rb -- accept name, notes, service_ids in resolve

Files created:

app/javascript/application.js -- entry point
app/javascript/controllers/location_controller.js -- GPS, resolve, recent
app/javascript/controllers/application.js -- Stimulus app instance
app/javascript/controllers/index.js -- controller auto-loader
config/importmap.rb -- pin declarations
bin/importmap -- CLI
docs/hotwire.md -- setup docs and conventions

Acceptance Criteria

Importmap, Turbo, and Stimulus installed and wired into the layout
All inline styles moved to application.css with design tokens
All inline JS moved to a Stimulus controller
Property form includes name (required), services (checkboxes), notes (textarea)
No inline script or style attributes remain in ERB

Test Expectations

App loads at 0.0.0.0:9999 with form fields visible
GPS detection works and displays street
Save Property creates record with name, services, and notes
Recent list updates after save
Run command: docker compose exec web bin/rails test

Constraints

No Tailwind, no Sass, no build step — plain CSS via Propshaft
CSS follows ~/ror-css-guide token conventions
Stimulus toggles .is-* classes, never inline styles

Checklist

PR opened
Tests pass
No unrelated changes

landscaping-assistant -- project this affects

### Type Feature ### Lineage Standalone — discovered during Hotwire setup session. ### Repo `ldraney/landscaping-assistant` ### User Story As a landscaping crew member I want the app to use proper Hotwire patterns with clean CSS So that the codebase is maintainable and ready for new features ### Context The Gemfile declared turbo-rails, stimulus-rails, and importmap-rails but none were installed. All JS (~100 lines) and CSS lived inline in `index.html.erb`. The app needs Hotwire wired up properly before adding features like property browsing and route queues. CSS should follow the design token conventions from `~/ror-css-guide`. ### File Targets Files modified: - `app/assets/stylesheets/application.css` -- design tokens, reset, component styles - `app/views/properties/index.html.erb` -- replace inline styles/JS with Stimulus data attributes - `app/views/layouts/application.html.erb` -- add javascript_importmap_tags - `app/controllers/properties_controller.rb` -- accept name, notes, service_ids in resolve Files created: - `app/javascript/application.js` -- entry point - `app/javascript/controllers/location_controller.js` -- GPS, resolve, recent - `app/javascript/controllers/application.js` -- Stimulus app instance - `app/javascript/controllers/index.js` -- controller auto-loader - `config/importmap.rb` -- pin declarations - `bin/importmap` -- CLI - `docs/hotwire.md` -- setup docs and conventions ### Acceptance Criteria - [ ] Importmap, Turbo, and Stimulus installed and wired into the layout - [ ] All inline styles moved to application.css with design tokens - [ ] All inline JS moved to a Stimulus controller - [ ] Property form includes name (required), services (checkboxes), notes (textarea) - [ ] No inline script or style attributes remain in ERB ### Test Expectations - [ ] App loads at 0.0.0.0:9999 with form fields visible - [ ] GPS detection works and displays street - [ ] Save Property creates record with name, services, and notes - [ ] Recent list updates after save - Run command: `docker compose exec web bin/rails test` ### Constraints - No Tailwind, no Sass, no build step — plain CSS via Propshaft - CSS follows ~/ror-css-guide token conventions - Stimulus toggles .is-* classes, never inline styles ### Checklist - [ ] PR opened - [ ] Tests pass - [ ] No unrelated changes ### Related - `landscaping-assistant` -- project this affects