feat: add an emoji picker#35019
Conversation
|
Size Change: +29.8 kB (+1.15%) Total Size: 2.61 MB
|
📸 UI snapshots have been updated6 snapshot changes in total. 0 added, 6 modified, 0 deleted:
Triggered by this commit. |
📸 UI snapshots have been updated6 snapshot changes in total. 0 added, 6 modified, 0 deleted:
Triggered by this commit. |
pauldambra
force-pushed
the
feat/pd/em-pi
branch
from
8fb0cff to
1b97dd8
Compare
📸 UI snapshots have been updated6 snapshot changes in total. 0 added, 6 modified, 0 deleted:
Triggered by this commit. |
📸 UI snapshots have been updated4 snapshot changes in total. 0 added, 4 modified, 0 deleted:
Triggered by this commit. |
📸 UI snapshots have been updated6 snapshot changes in total. 0 added, 6 modified, 0 deleted:
Triggered by this commit. |
|
split out #35040 to avoid crossing the streams |
| const EmojiPickerCategoryHeader = ({ category, ...props }: EmojiPickerListCategoryHeaderProps): JSX.Element => ( | ||
| <div className="bg-bg-light px-3 pt-3 pb-1.5 font-medium text-neutral-600 text-sm" {...props}> | ||
| {category.label} | ||
| </div> | ||
| ) | ||
|
|
||
| const EmojiPickerEmojiRow = ({ children, ...props }: EmojiPickerListRowProps): JSX.Element => ( | ||
| <div className="scroll-my-1.5 px-1.5" {...props}> | ||
| {children} | ||
| </div> | ||
| ) | ||
|
|
||
| const EmojiPickerEmojiButton = ({ emoji, ...props }: EmojiPickerListEmojiProps): JSX.Element => ( | ||
| <button | ||
| className="flex items-center justify-center rounded-md text-xl size-8 data-[active]:bg-secondary-3000-hover" | ||
| {...props} | ||
| > | ||
| {emoji.emoji} | ||
| </button> | ||
| ) |
There was a problem hiding this comment.
these don't really need to be split out... i was going to add recent emojis in this PR but decided to split it
i'll need these as separate components in that follow-up since I'll be adding a custom row of results
| icon={<IconComment className="text-lg" />} | ||
| sideAction={{ | ||
| icon: <IconEmoji className="text-lg" />, |
There was a problem hiding this comment.
this button and its bar are getting pretty busy again 🫠
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Greptile Summary
This PR improves the UX around emoji reactions by changing how users interact with emojis in comments. The main changes include:
- Replacing the down arrow with a dedicated emoji icon
- Adding an emoji picker popover using the 'frimousse' library
- Moving emoji selection from the comment form to a dedicated picker in the text area footer
- Updating the @posthog/icons package to support new emoji icons
The changes are well-scoped and address a specific UX issue where users were confused about emoji placement in comments. The implementation follows existing UI patterns and sets up for future improvements around emoji usage tracking.
Confidence score: 3/5
- This PR is moderately safe to merge but requires careful testing of the emoji picker integration
- While the core changes are solid, there's a TypeScript type issue in EmojiPickerPopover that needs attention, and the loading state handling could be improved
- Files needing attention:
- frontend/src/lib/components/EmojiPicker/EmojiPickerPopover.tsx (TypeScript issues)
- frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.tsx (spacing changes)
8 files reviewed, 6 comments
Edit PR Review Bot Settings | Greptile
There was a problem hiding this comment.
Pull Request Overview
This PR adds an emoji picker feature to improve emoji commenting in session recordings. The implementation includes tracking emoji usage frequency and replacing hardcoded emoji lists with user-personalized favorites.
- Adds a new emoji picker component with popover functionality using the
frimousselibrary - Implements emoji usage tracking with local storage persistence to show frequently used emojis
- Integrates emoji picker into both quick comment actions and text area markdown editor
Reviewed Changes
Copilot reviewed 10 out of 21 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Updates @posthog/icons dependency to support new emoji icons |
| frontend/package.json | Adds frimousse emoji picker library dependency |
| playerFrameCommentOverlayLogic.ts | Removes hardcoded quickEmojis array (moved to usage logic) |
| CommentOnRecordingButton.tsx | Integrates emoji usage tracking and picker into quick comment functionality |
| emojiUsageLogic.ts | New logic for tracking emoji usage frequency with 30-day retention |
| LemonTextAreaMarkdown.tsx | Adds emoji picker to markdown text area footer |
| LemonTextArea.tsx | Minor styling adjustment removing gap in footer actions |
| EmojiPickerPopover.tsx | New emoji picker popover component with custom styling |
| EmojiPickerPopover.stories.tsx | Storybook stories for the new emoji picker component |
| categories.ts | Adds new emoji icons to the icon categories |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
📸 UI snapshots have been updated8 snapshot changes in total. 0 added, 8 modified, 0 deleted:
Triggered by this commit. |
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
📸 UI snapshots have been updated2 snapshot changes in total. 0 added, 2 modified, 0 deleted:
Triggered by this commit. |
📸 UI snapshots have been updated2 snapshot changes in total. 0 added, 2 modified, 0 deleted:
Triggered by this commit. |
we want to make emoji commenting easier...
having the emojis in the comment form made people think they could add emojis to the text of the comment
reasonable
so...
locally it takes ~90ms to comment
earlier for some reason one of the calls took 3 seconds and I realised you get no feedback on a slower network so