Feat/add goal category tags#2674
Conversation
GSSoC Label Checklist 🏷️@Umbrella-io — please apply the appropriate labels before merging: Difficulty (pick one):
Quality (optional):
Validation (required to score):
|
|
New UI/feature PRs are on hold during the code quality sprint — see discussion #2651. PRs for tests, refactoring, bug fixes, docs, and performance are welcome. |
|
On hold — new features are not being merged during the code quality sprint. See discussion #2651. |
|
New feature/UI PRs are on hold during the code-quality sprint — see discussion #2651. We'll revisit after the sprint; tests, refactors, and bug-fix PRs are the priority right now. |
|
Closing in favor of #3194, which implements the same goal category-tags feature more completely — it adds the DB migration + schema update, enum validation on the API, category badges in the GoalTracker UI, and keeps the existing test fixtures compiling. Consolidating on that one. Thanks for the idea here — it's what prompted the feature. |
Summary
Closes #
Type of Change
What Changed
Database Schema: Added a new category column to the goals table via a Supabase migration to store the selected tag.
Goal Creation UI: Introduced an optional "Category Tag" dropdown in the goal creation form supporting predefined categories (Side Project, Work, DSA, Open Source).
Goal Filtering: Added a row of toggle filter pills at the top of the Goal Tracker widget, allowing developers to filter their progress view by a single specific tag.
Progress Cards: Enhanced individual goal progress cards to render the selected category as a visually distinct, color-coded micro-badge next to the goal title.
API & Types: Updated the POST /api/goals route and relevant data payloads to accept, validate, and securely persist the new category field.
How to Test
Check out the feat/add-goal-category-tags branch and start your local development server.
Run the local Supabase migrations to apply the new category column to your database.
Navigate to a dashboard with the Goal Tracker widget.
Create a new goal and select a category (e.g., "DSA") from the new dropdown.
Once created, confirm that the goal card displays the correct color-coded micro-badge.
Create several goals across different categories.
Click the new filter toggle pills ("All", "Work", "Side Project", etc.) at the top of the widget.
Verify that the goal list updates to only show goals belonging to the selected category, and layout state transitions remain smooth.
Expected result:
Users can optionally categorize their goals upon creation.
A clean, accessible micro-badge appears on categorized goals.
Users can quickly filter their active and completed goals by category, eliminating visual clutter when managing multiple distinct work streams.
The component transitions cleanly without causing horizontal overflow shifts.
Checklist
console.log, debug code, or commented-out blocksnpm run lintpasses locallynpm run type-check)Accessibility (UI changes only)
Additional Context