Emoji picker for reactions #81
Merged
+1,014
−237
Conversation
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
WalkthroughReplaces WnMessageMenu with a new MessageActionsScreen/MessageActionsModal, adds WnEmojiPicker and emoji_picker_flutter dependency, extends WnIcons, registers the plugin on desktop platforms, and updates tests and chat screen invocation to await and unfocus after the actions screen. Changes
Sequence DiagramsequenceDiagram
participant User
participant ChatScreen
participant MessageActionsScreen
participant MessageActionsModal
participant WnEmojiPicker
participant MessageService
User->>ChatScreen: Long-press message
ChatScreen->>MessageActionsScreen: MessageActionsScreen.show(message, ...)
MessageActionsScreen->>MessageActionsModal: build & present modal
MessageActionsModal-->>User: show message, reactions, emoji button
alt open emoji picker
User->>MessageActionsModal: tap emoji picker
MessageActionsModal->>WnEmojiPicker: show picker
User->>WnEmojiPicker: select emoji
WnEmojiPicker->>MessageActionsModal: onEmojiSelected(emoji)
MessageActionsModal->>MessageService: onReaction(emoji)
MessageActionsModal->>ChatScreen: pop modal
ChatScreen->>ChatScreen: unfocus input
else delete message
User->>MessageActionsModal: tap delete
MessageActionsModal->>MessageService: onDelete()
MessageActionsModal->>ChatScreen: pop modal
ChatScreen->>ChatScreen: unfocus input
else close
User->>MessageActionsModal: tap close
MessageActionsModal->>ChatScreen: pop modal
ChatScreen->>ChatScreen: unfocus input
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~50 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
❌ Coverage: 99.6% → 97.85% (-1.75%) |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@lib/screens/message_actions_screen.dart`:
- Around line 64-118: The Delete button is currently shown for own messages even
when the optional onDelete callback is null; update the prop passed to
MessageActionsModal so onDelete is only provided when both isOwnMessage and
onDelete != null (i.e., change the onDelete argument from onDelete: isOwnMessage
? handleDelete : null to onDelete: (isOwnMessage && onDelete != null) ?
handleDelete : null) so the modal only renders a delete action when a real
handler exists; ensure references are to the existing handleDelete function and
the MessageActionsModal's onDelete prop.
josefinalliende
force-pushed
the
feat/emoji-picker
branch
from
94d83af to
11a5f0e
Compare
✅ Coverage: 99.6% → 99.61% (+0.01%) |
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
test/screens/chat_screen_test.dart (1)
557-569: Minor typo in test description.The test description has a typo: "close messages actions" should be "closes message actions".
Suggested fix
- testWidgets('close messages actions after deletion', (tester) async { + testWidgets('closes message actions after deletion', (tester) async {
🤖 Fix all issues with AI agents
In `@lib/screens/message_actions_screen.dart`:
- Around line 476-479: The icon mapping for Category.ACTIVITIES and
Category.TRAVEL is reversed; update the return values in the switch handling (in
message_actions_screen.dart where Category.ACTIVITIES and Category.TRAVEL are
matched) so ACTIVITIES returns WnIcon(WnIcons.running, color: color, size: size)
and TRAVEL returns WnIcon(WnIcons.building, color: color, size: size); adjust
the two case branches (the switch/method that builds these icons) accordingly
and run a quick UI check to confirm the icons now match their categories.
In `@test/screens/message_actions_screen_test.dart`:
- Around line 850-895: The mountCategoryBar helper duplicates the widget setup
used by mountShowTest—extract the shared TestWidget scaffold into a new helper
in test_helpers.dart (e.g., buildTestApp or mountTestScaffold) that constructs
ScreenUtilInit, MaterialApp, DefaultTabController, and accepts parameters like
PageController, CategoryViewBuilder, EmojiViewState or a callback to build it;
update mountCategoryBar and mountShowTest to call this new helper and pass only
the differing pieces (customCategoryView, emojiConfig, onTabController, pc) so
the common setup is centralized and reused.
✅ Coverage: 99.6% → 99.61% (+0.01%) |
untreu2
requested changes
Jan 26, 2026
Member
untreu2
left a comment
untreu2
left a comment
There was a problem hiding this comment.
The feature works great - left a few comments about the code.
| return WnIcon(WnIcons.flag, color: color, size: size); | ||
| } | ||
| } | ||
| } |
Member
There was a problem hiding this comment.
And I think we should modularize this - could split into separate widgets I mean.
Collaborator
Author
There was a problem hiding this comment.
I was doubting if to move the emoji picker to its own widget or not cause it's only used in this screen but it was getting bigger. I'll move it.
josefinalliende
force-pushed
the
feat/emoji-picker
branch
from
e93dd82 to
cebd94b
Compare
✅ Coverage: 99.62% → 99.63% (+0.01%) |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@test/screens/message_actions_screen_test.dart`:
- Around line 689-753: Add an end-to-end widget test that verifies selecting an
emoji from the picker invokes the provided onReaction callback and closes the
MessageActionsScreen: reuse the openEmojiPicker helper to open the picker (which
taps the widget keyed 'emoji_picker_button' and shows MessageActionsScreen via
MessageActionsScreen.show), provide an onReaction that captures the emoji
string, simulate tapping an emoji widget (e.g., find.text('😀') or the emoji
tile used by the picker), pumpAndSettle, then assert the captured emoji equals
the expected value and that the menu is closed (e.g., expect(find.text('Message
actions'), findsNothing) and that the 'emoji_picker_close_button' is not found).
cebd94b to
9158fa6
Compare
✅ Coverage: 99.62% → 99.63% (+0.01%) |
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.
Description
We wanted to add an emoji picker as the white noise app did. Also, the message menu was not really a widget but a whole screen that now needs to handle more than just a modal. So besides adding the emoji picker logic, in this PR the widget is moved to screens and renamed to MessageActionsScreen
Short video of reaction using emoji picker:
custom-reaction.MP4
Emoji picker icons changes
Type of Change
Checklist
just precommitto ensure that formatting and linting are correctCHANGELOG.mdfile with your changes (if they affect the user experience)Summary by CodeRabbit
New Features
UI/UX Improvements
Tests
✏️ Tip: You can customize this high-level summary in your review settings.