Skip to content

Add draggable chat reaction sheet picker#1238

Open
dnlbui wants to merge 7 commits intomainfrom
phase-10-chat-modal-bottom-sheet
Open

Add draggable chat reaction sheet picker#1238
dnlbui wants to merge 7 commits intomainfrom
phase-10-chat-modal-bottom-sheet

Conversation

@dnlbui
Copy link
Copy Markdown
Collaborator

@dnlbui dnlbui commented Apr 10, 2026

What changed

This adds a bottom-sheet reaction picker to the chat modal.

The picker now:

  • opens from the existing reaction flow
  • shows categorized emoji tabs
  • keeps the target message visible while open
  • supports swipe-down dismissal from the top drag region
  • uses static sheet markup in index.html instead of building the shell in JavaScript

Why it changed

The existing quick reaction row was too limited for broader emoji selection. A bottom sheet gives more room for a larger picker while staying inside the chat modal.

User impact

Users can choose from a larger organized emoji set without leaving chat context, and they can dismiss the picker with a natural downward swipe.

Root cause

The previous reaction UI only exposed a small fixed quick-reaction set and did not provide a scalable picker pattern for broader emoji selection.

Validation

  • node --check app.js

Notes

This PR only covers app.js, index.html, and styles.css. Local untracked docs and patch files were left out of scope.

dnlbui added 5 commits April 13, 2026 11:11
…d a new overlay for selecting reactions, including various categories like smileys, nature, and food. Enhanced chat modal to support the expanded emoji picker, improving user interaction with reactions in chat.
…ded state management for dragging, including event listeners for pointer events. Updated styles to accommodate dynamic padding based on the reaction sheet's visibility and drag state, enhancing user interaction with the emoji picker.
…Modal. Introduced constants for drag thresholds and improved error handling with assertions for required elements. Streamlined initialization of reaction sheet components, enhancing user interaction with the emoji picker.
… query and transaction injection functions. This cleanup enhances code clarity and eliminates unnecessary complexity in the chat modal functionality.
…oved emoji categories into a new file for better organization and maintainability. Updated imports in app.js to utilize the new structure, enhancing clarity and separation of concerns in the chat reaction functionality.
@dnlbui dnlbui force-pushed the phase-10-chat-modal-bottom-sheet branch from 6b0c5d1 to 2da9cf5 Compare April 13, 2026 16:11
dnlbui added 2 commits April 13, 2026 12:00
…assertions for required elements and simplified the updateReactionSheetViewport method by eliminating the messageEl parameter. This enhances code clarity and maintains the intended behavior of the reaction sheet while improving overall maintainability.
…thods. Removed unnecessary assertions and streamlined logic for setting the active reaction category, enhancing code clarity and maintainability in the chat reaction functionality.
@dnlbui dnlbui changed the base branch from phase-8-reaction-set-rollback to main April 13, 2026 17:12
@dnlbui dnlbui changed the title [codex] Add draggable chat reaction sheet picker Add draggable chat reaction sheet picker Apr 13, 2026
@dnlbui dnlbui marked this pull request as ready for review April 13, 2026 17:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Phase 10: Add full emoji picker modal from add-reaction chip React with emoji to message

1 participant