Feature issue#303

[AnUbH75]

Summary

• Added a reusable emoji picker component for private chat.
• Added emoji data with categories and emojilib keyword support.
• Added emoji search, category filtering, recently used emojis, and keyboard navigation.
• Integrated the new emoji picker into the private chat dialog.
• Preserved the existing caret-position emoji insertion behavior.
• Updated the picker styling to provide a compact layout without horizontal overflow.

Linked issue

Closes #303

How to test

1. Open a private chat.
2. Click the emoji button to open the emoji picker.
3. Verify emojis are displayed across the available categories.
4. Switch between emoji categories and verify the displayed emojis change.
5. Search for an emoji by name or keyword and verify the results.
6. Select emojis and verify they are added to the recently used section.
7. Refresh the page and verify recently used emojis are persisted.
8. Use keyboard navigation to navigate and select emojis.
9. Place the cursor at different positions in the message input and verify the selected emoji is inserted at the caret position.
10. Verify the existing sticker picker still works.
11. Verify the emoji picker layout has no unwanted horizontal scrolling.

Notes / Risk

• No database migrations, feature flags, or rollout changes.
• Existing sticker functionality and message insertion logic are preserved.
• Emoji data is provided by unicode-emoji-json and keyword search uses emojilib.

[AnUbH75]

Hi @DenizAltunkapan, The implementation works, but adding the emoji datasets increases the initial bundle from 2.00 MB to 2.21 MB. Should I lazy-load the emoji picker/data, or should we adjust the existing budget?

[prashantpiyush1111]

Reviewed PR #331 against the linked issue and the changed implementation. The emoji picker is scoped to the private-chat flow and the diff preserves the existing caret-position insertion path while adding categories, search, recents, keyboard navigation, and layout handling. I did not identify a blocking correctness issue in the reviewed diff. One validation caveat: I was not able to execute the repository test suite in this environment, so this review is based on the actual PR diff and repository context rather than claiming locally executed tests.

[prashantpiyush1111]

Merge-gate review — Changes Requested

I re-verified PR #331 against issue #303 and the current head SHA cf7c924ec3f91dc3e6890ff339ef66e7f3d7cbb5 rather than relying on the PR description.

Blocking findings

1. Frontend CI is failing on the PR head. GitHub Actions run 33338027105 for cf7c924ec3f91dc3e6890ff339ef66e7f3d7cbb5 completed with failure; Install dependencies and Prettier passed, but the Build project step failed. The repository workflow defines that step as npm run build in frontend, so this PR is not currently merge-gate clean. I could not execute the checkout locally because this review environment cannot resolve github.com, so I am not claiming a local test/build result. Please fix the build failure and rerun CI.

Acceptance criteria verification

• Full standard emoji set: Implemented in diff via unicode-emoji-json and EMOJI_LIST.
• Search by name and keyword: Implemented in diff in visibleEmojis.
• Category tabs: Implemented in diff for the requested categories.
• Recently used, persisted per user: Implemented in diff via the namespaced localStorage key and 24-item list.
• Keyboard navigation + caret insertion: Implemented in diff; the picker uses arrow-key focus movement and emits the selected character back to the existing insertEmoji($event) path.

Validation / failure-path review

• Unknown emoji-data groups are skipped (if (!category) continue): fail-closed for unsupported groups; they are not exposed accidentally.
• Empty/malformed localStorage recents fall back to an empty list through the catch: fail-closed for recents, without breaking the picker.
• localStorage write failures are deliberately swallowed: fail-open only for the optional recents persistence feature; the selected emoji is still emitted, so message insertion is not blocked.
• Grid keyboard handling returns for unsupported keys and leaves native button behavior intact; no unsafe input path is introduced.

Test coverage gap

The PR changes 9 files and adds no test file/change. The linked issue has interaction-heavy requirements (search, categories, recents persistence, keyboard navigation, and caret insertion), so these should have automated coverage. This is especially important because the CI workflow currently runs formatting/build only and does not execute Angular tests.

Verdict: Changes Requested.

Please fix the failing frontend build first; then add/restore focused component tests for the new picker behavior and rerun CI.

[AnUbH75]

Hi @prashantpiyush1111 @DenizAltunkapan please check now

[DenizAltunkapan]

@AnUbH75 thanks, looks good!