[codex] Make hearting optimistic and animated in every context#642
Draft
zachlatta wants to merge 1 commit into
Draft
[codex] Make hearting optimistic and animated in every context#642zachlatta wants to merge 1 commit into
zachlatta wants to merge 1 commit into
Conversation
The like button uses one shared partial everywhere but relied on
button_to + Turbo Stream, which only updates in place when Turbo Drive
is active. Inside target="_top" Turbo Frames (profile feed, paginated
home feed) and turbo:false regions, clicking the heart fell through to
a full page reload with no animation.
Add a `like` Stimulus controller that intercepts the submit, updates the
UI instantly (so the heart animation always plays) and persists via a
background fetch, so liking never navigates regardless of the Turbo
context. A JSON branch on LikesController returns the authoritative
{ liked, count } for the controller to reconcile against; button_to +
Turbo Stream stay as the no-JS fallback.
Also fix the filled heart rendering empty when several liked hearts
share a page: the gradient id in like-fill.svg is now namespaced per
record (LikesHelper#like_fill_icon), so each heart references its own
gradient instead of the first (display:none) match.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
4b31c42 to
e36d8fa
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
likecontroller so devlog hearts update optimistically, animate immediately, and persist with JSON requests instead of navigating/reloading inside feed/profile/project/devlog contexts.Scope guard
This branch is rebuilt from current
origin/mainand intentionally excludes the unrelatedimproved-agent-experiencecommits. Checked absent fromcodex/heart-animation-messaging:bca38f86,0799caf6,18f39f9b.Changed files are limited to the like implementation/tests; the flow GIFs below are hosted on cdn.hackclub.com.
AGENTS.md / repo conventions
LikePolicy; the JSON response path is added inside the already-authorized create/destroy actions.test/controllers; no RSpec was added.app/javascript/controllersand is registered through the Stimulus manifest used by the esbuild pipeline..like-buttonblock, uses classes instead of inline styles, and references Stardance CSS variables / brand tokens rather than new hardcoded theme colors.Validation
git diff --check origin/main...HEADRAILS_ENV=test DATABASE_URL=postgresql://postgres:pass@localhost:5432/stardance_test mise exec ruby@ruby-3.4.3 -- bin/rails test test/controllers/likes_controller_test.rbmise exec ruby@ruby-3.4.3 -- bundle exec rubocop app/controllers/likes_controller.rb app/helpers/likes_helper.rb test/controllers/likes_controller_test.rbmise exec ruby@ruby-3.4.3 -- bundle exec erb_lint app/views/likes/_button.html.erb./node_modules/.bin/prettier --check app/javascript/controllers/like_controller.js app/javascript/controllers/index.js app/assets/stylesheets/components/_like_button.scssnpm exec -- esbuild app/javascript/application.js --bundle --sourcemap --format=esm --outdir=/tmp/stardance-heart-build --public-path=/assets/devlogs/:id/like, stayed on the same URL, setaria-pressed="true", applied the liked class, and showed count1.200 image/gif.Note: Rails boot emitted the existing local
MJML 5binary warning during test/server commands.Flow GIFs
Home feed
Project page
Profile feed
Devlog detail