Close actions menu before opening mobile emoji picker and enable picker scrolling

[prxt6529]

Motivation

• The mobile emoji picker opened inside MobileWrapperDialog could not be scrolled vertically, causing poor UX on touch devices.
• Stacked dialogs (actions sheet remaining open underneath the emoji picker) can interfere with touch/scroll behavior, so the actions sheet should close before the picker opens.

Description

• Added an optional onOpenPicker callback to WaveDropActionsAddReaction and invoke it when the picker is opened on mobile via onOpenPicker?.() to notify parents to close first.
• Wired WaveDropMobileMenu to pass closeMenu as onOpenPicker so the mobile actions sheet closes before the emoji picker opens.
• Adjusted the mobile picker container inside WaveDropActionsAddReaction to use tw-overflow-y-auto (<div className="tw-flex tw-size-full tw-justify-center tw-overflow-y-auto">) so emoji categories and content can scroll vertically on mobile.

Testing

• Ran npm run lint:uncommitted:tight, which failed in this environment due to missing eslint (Error: Cannot find package 'eslint').
• Ran a Playwright script to capture a mobile screenshot, which failed because no local app server was available (ERR_EMPTY_RESPONSE when requesting http://127.0.0.1:3001).

---

Codex Task

Summary by CodeRabbit

• New Features

  • Add external control to open the emoji picker and an option to hide the reaction trigger.
  • Improved mobile picker layout with scrollable behavior for long lists.

• Bug Fixes

  • Mobile menu now closes reliably when opening the reaction picker.
  • Better mobile reaction flow to avoid unexpected toggles.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds optional props (onOpenPicker, externalOpenSignal, hideTrigger) to WaveDropActionsAddReaction, integrates a signal-based external picker opener from WaveDropMobileMenu, and adjusts mobile picker rendering/overflow and trigger rendering behavior. Mobile menu closes when opening the emoji picker via the new callback/signal.

Changes

Cohort / File(s)	Summary
Reaction Picker Component components/waves/drops/WaveDropActionsAddReaction.tsx	Added public props onOpenPicker?, externalOpenSignal?, hideTrigger?. New effect opens picker when externalOpenSignal changes on mobile. onReact now calls onOpenPicker on mobile if provided; trigger button can be hidden via hideTrigger. Added mobile wrapper tw-overflow-y-auto and adjusted container classes.
Mobile Menu & Integration components/waves/drops/WaveDropMobileMenu.tsx	Added emojiPickerOpenSignal state and openEmojiPicker handler that closes the menu and increments the signal. Wired onOpenPicker={openEmojiPicker} into the menu instance and added a hidden external WaveDropActionsAddReaction instance with hideTrigger + externalOpenSignal to coordinate picker opening externally.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant MobileMenu as WaveDropMobileMenu
  participant ActionsVisible as WaveDropActionsAddReaction (visible)
  participant ActionsHidden as WaveDropActionsAddReaction (hidden/external)
  participant Picker as EmojiPicker

  User->>MobileMenu: tap "reactions" (open menu)
  User->>ActionsVisible: tap reaction trigger on mobile
  ActionsVisible->>MobileMenu: call onOpenPicker (openEmojiPicker)
  MobileMenu->>MobileMenu: closeMenu()
  MobileMenu->>ActionsHidden: increment externalOpenSignal
  ActionsHidden->>Picker: open picker (mobile mode)
  Picker-->>User: show emoji picker (with overflow scrolling)

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested reviewers

• simo6529
• GelatoGenesis

Poem

🐰 I tapped the menu, a signal hopped free,

The hidden picker woke and smiled at me,
Menu folded up, the scroll began to sing,
Emojis danced — what a wondrous spring! 🥕✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title accurately describes the main changes: closing the actions menu before opening the mobile emoji picker and enabling picker scrolling via overflow-y-auto.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch codex/fix-emoji-picker-scrolling-issue

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@components/waves/drops/WaveDropActionsAddReaction.tsx`:
- Around line 161-167: The useEffect that opens the picker on mobile when
externalOpenSignal changes should also short‑circuit if reactions are
disallowed; update the effect that references externalOpenSignal, isMobile and
calls setShowPicker so it checks canReact (e.g., if (!isMobile ||
externalOpenSignal === undefined || !canReact) return) and only calls
setShowPicker(true) when canReact is true, ensuring temporary/disabled drops
cannot be opened via externalOpenSignal.
- Line 298: The outside-click predicate currently requires the trigger element
(buttonRef.current) to exist, so when hideTrigger is true the handler never
closes the picker; update the predicate in the outside-click handler used by
WaveDropActionsAddReaction (check where buttonRef and pickerRef are referenced)
to allow a missing trigger by treating a null buttonRef as "outside" (e.g.,
consider it outside when !buttonRef.current) and still check pickerRef.contains
for inside clicks—i.e., change the condition to close the picker when the click
is not inside pickerRef AND (buttonRef is null OR the click is not inside
buttonRef) so the picker closes even if hideTrigger removed the button.