Redesign audience reaction UI with FAB and popup grid#9
Merged
jackson-jpeg merged 2 commits intov2from Feb 21, 2026
Merged
Conversation
Replace the cramped 8-emoji horizontal pill bar (which overflowed on small phones) with a clean FAB + popup grid pattern: - Single floating action button on bottom-right, above nav controls - Tap to expand a frosted-glass popup with 4x2 emoji grid - Each reaction has proper touch targets with labels - Cooldown shown as an SVG ring around the FAB - Floating emoji rise from FAB when reactions come in - Auto-dismiss on selection or tap outside - Host view unchanged (count badges + floating emojis) Removes all old .reaction-btn CSS (including duplicate block) since mobile reactions are now fully inline-styled in the component. https://claude.ai/code/session_014T4yzapvSSZdPBJCJgsRkP
Solo mode changes:
- Server: when host triggers CHAOS in solo mode, immediately pick a
random twist and inject it instead of starting a 15s vote timer
with no audience to vote
- Host UI: hide AudienceReactionBar and PlotTwistVoting in solo mode
(no audience to show reactions from or voting UI to)
- Rename CHAOS button to TWIST in solo mode
- Update toast message for solo ("PLOT TWIST incoming!" vs audience voting)
Voting phase was already skipped server-side for solo mode
(teleprompter.service.ts goes straight to RESULTS).
https://claude.ai/code/session_014T4yzapvSSZdPBJCJgsRkP
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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
2 participants
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
Redesigned the audience reaction interface from a horizontal button bar to a modern floating action button (FAB) with an expandable popup grid. This improves mobile UX by reducing screen clutter and providing better visual feedback. Also added solo mode support for plot twist voting.
Key Changes
Audience Reaction UI Redesign
Host View (Unchanged)
Solo Mode Plot Twist Support
Code Quality
MOTIONanimation presets from@/lib/animationsfor consistent spring/easingisSoloModeprop toHostPerformingcomponent for mode detectionImplementation Details
AnimatePresencefor smooth enter/exit animationsdelay: i * 0.03for a cascading effectstrokeDasharrayfor smooth ring animationbackdrop-filterwith webkit fallback for iOS supporthttps://claude.ai/code/session_014T4yzapvSSZdPBJCJgsRkP