Add Emoji Picker for Goals

[Arsh-yusuf]

Summary

Implemented an emoji picker feature for goals in the GoalManager component. Users can now add and change icons (emojis) for their goals, with changes persisting via API updates.

Changes Made

• GoalManager.tsx (main file):
  • Added local state for icon and emojiPickerIsOpen.
  • Integrated EmojiPicker component from emoji-mart.
  • Added "Add icon" button (visible when no icon exists) and existing icon display.
  • Implemented pickEmojiOnClick handler: stops event propagation, updates local state, dispatches to Redux, and calls PUT API to persist changes.
  • Added addIconOnClick to open the picker.
  • Styled containers for conditional rendering (picker, buttons).
• API Integration: Used existing updateGoal PUT request in lib.ts to save icon changes to the database.
• UI/UX: Picker appears on click, closes on outside click or selection. Icons toggle the picker for editing.

Testing

• Verified emoji selection updates local state and Redux.
• Confirmed persistence: Changes survive browser refresh (tested via Postman PUT/GET).
• Added unit test for backend GetForUser route in GoalControllerTests.cs.

Files Changed

• src/ui/features/goalmanager/GoalManager.tsx
• src/api/lib.ts (already had the PUT method)
• GoalControllerTests.cs (new test file)

How to Test

1. Open a goal in the app.
2. Click "Add icon" or existing icon to open picker.
3. Select an emoji → It should appear and persist on refresh.