Skip to content

Add goal icon feature with emoji picker#199

Open
Seifudinsec wants to merge 10 commits into
fencer-so:mainfrom
Seifudinsec:icons
Open

Add goal icon feature with emoji picker#199
Seifudinsec wants to merge 10 commits into
fencer-so:mainfrom
Seifudinsec:icons

Conversation

@Seifudinsec

Copy link
Copy Markdown

Implements emoji selection for goals using emoji-mart v3.0.1.

Implements emoji selection for goals using emoji-mart v3.0.1, allowing users to personalize their goal cards with icons.

Changes

Backend
Added Icon field to Goal model in CommBank-Server/CommBank-Server/Models/Goal.cs

Frontend

  1. Updated Goal interface to include icon: string | null field in src/api/types.ts
  2. Created EmojiPicker component using emoji-mart v3.0.1 in src/ui/components/EmojiPicker.tsx
  3. Integrated emoji picker in GoalManager with add/remove icon functionality in src/ui/features/goalmanager/GoalManager.tsx
  4. Display icon on goal card in src/ui/pages/Main/goals/GoalCard.tsx

Testing

  1. Added unit test for GetForUser endpoint in CommBank-Server/CommBank.Tests/GoalControllerTests.cs
  2. All 11 tests passing

Manual Testing

  1. Open in development mode
  2. Click a goal card to open the modal
  3. Click "Add icon" button to open emoji picker
  4. Select an emoji - it saves immediately
  5. Refresh browser - emoji persists on goal card
  6. Click existing icon to remove it
Screenshot From 2026-06-29 16-42-19

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant