feat: add category nav component

[andreasvirkus]

Overview

Hi team, just wanted to get the ball rolling with the implementation for #7

Very much a rough draft atm, would just love some light guidance on which direction to take this (namely sourcing the icons)

@marcbouchenoire

Screen.Recording.2025-12-15.at.11.32.55.mov

Discussion points

1. Did not use any icons yet, are there any preferences here for which icons to choose and where to keep a map of them?
2. This is most likely a separate issue - but could we make the site/src/components/reactions.tsx configurable locally, so the Liveblocks key wouldn't be necessary? Currently have to comment out the <ServerReactions /> component and LiveblocksClient() to test things
3. Is the current implementation a bit too primitive and leaves too much for the user to configure? If we had a fixed list of icons, I guess users could just add <EmojiPickerPrimitive.CategoryNav /> & we could remove the need to pass any children
4. The buttons are currently just a table of contents, but I think they should rather be a scroll guide, where the category icon activates depending on which section you've scrolled to (even if the scrolling happens outside of the nav)?

Market research

• Slack shows each category as their own page (meaning if you clicked on Animals, you cannot scroll to another category)
• EmojiMart uses the category quick-nav as a "scroll guide" as mentioned above, so you can scroll through all the categories manually and the category icons will show which category you're under (I like this a lot more than Slack's approach)

---

Note

Introduces EmojiPicker.CategoryNav with scrolling to categories, updates examples to use it, and disables server reactions in the site for local testing.

• Emoji Picker:
  • New CategoryNav: Implements EmojiPicker.CategoryNav exposing categories with scrollTo handlers.
  • Types/Exports: Adds EmojiPickerCategoryNavProps and related render props; re-exports from src/index.ts.
• Examples:
  • Integrates CategoryNav into usage examples (site/src/examples/usage/*).
• Site (dev convenience):
  • Comments out server reactions/Liveblocks client in site/src/components/reactions.tsx.
  • Adjusts Next.js type import in site/next-env.d.ts to ./.next/dev/types/routes.d.ts.

^{Written by Cursor Bugbot for commit 4a5de18. This will update automatically on new commits. Configure here.}

[andreasvirkus]

• Will uncomment all of this before squashing for merge

[cursor]

This PR is being reviewed by Cursor Bugbot

Details

Your team is on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle for each member of your team.

To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

[cursor]

Bug: Commented-out code accidentally committed for testing

The liveblocks client initialization and ServerReactions component are commented out, and the component usage in the Suspense block is replaced with a comment. The PR description explicitly mentions this was done for local testing ("Currently have to comment out the <ServerReactions /> component and LiveblocksClient() to test things"). With the actual component commented out, the Suspense children render as nothing, so users will see no content where the reactions component should appear.

 

[andreasvirkus]

Small ping @marcbouchenoire about this - would just need input on where to source the SVG icons and if you have any preference for them (we can also just keep the icons for the demo only and otherwise always leave it up to the user to provide them for true composability)