feat: implement user profiles with achievements and primary badge system #58

2026-02-19T22:12:18-08:00

naomi commented

2026-02-19 22:12:18 -08:00

Summary

This PR implements comprehensive user profile enhancements including:

User profile pages showing stats, badges, social links, and bio
Achievement system with 62 achievements across 5 categories
Primary badge selection allowing users to display their preferred badge
Admin profile editing capabilities

Changes

User Profiles (#45)

Frontend: User profile pages with stats display
- Profile cards showing avatar, display name, username, and bio
- Social links section (Website, GitHub, Bluesky, LinkedIn, Twitch, YouTube, Discord)
- Stats display (suggestions, accepted suggestions, likes, comments)
- Recent achievements section
- Badge display
- Report button for other users' profiles
Backend: Profile API endpoints
- Get user profile by username or ID
- Profile includes stats, badges, and achievement points

Achievement System (#48)

Database: UserAchievement model for tracking progress
62 Total Achievements across 5 categories:
- Suggestions (15): First suggestion through ultimate curator
- Likes (12): First like through legendary fan
- Comments (12): First comment through review legend
- Engagement (15): Login streaks and activity milestones
- Reports (8): Valid reports and accuracy tracking
Backend: AchievementService with real-time checking
- Integrated into all user interaction points
- API endpoints for achievement data
- Progress tracking to avoid recalculation
Frontend: Achievements page and profile integration
- Full achievements page with category filtering
- Tier-based styling (Bronze, Silver, Gold, Platinum, Diamond)
- Progress indicators for in-progress achievements
- Recent achievements on profile pages

Primary Badge System (#49)

Database: Add primaryBadge field to User model
Backend: Update profile endpoints to include primary badge
Frontend: Primary badge selection in settings
- Only shows badges the user has earned
- Displayed on profile page
- Displayed in comments (next to username)
- Falls back to no badge if selection is invalid
Admin Features: Admin can edit any user's primary badge

Admin Enhancements

Comprehensive profile editing modal for admins
- Edit display name, bio, slug, social links
- Set primary badge for users
- Visual feedback for save/error states
Admin action buttons in report review modals
- Ban user, delete comment, edit profile
- Integrated with report workflow

Quality Improvements

Improved dropdown option contrast for readability
Hide all badges when no primary badge is selected
"View All" achievements link only shown on own profile
Improved achievement text readability

Testing

✅ User profiles display correctly with stats and badges
✅ Achievement checking works for all interaction types
✅ Primary badge selection persists and displays correctly
✅ Admin profile editing saves successfully
✅ Report workflow integrated with admin actions
✅ Achievements page shows all 62 achievements with filtering
✅ Text readability improved across components

Closes #45
Closes #48
Closes #49

## Summary This PR implements comprehensive user profile enhancements including: - User profile pages showing stats, badges, social links, and bio - Achievement system with 62 achievements across 5 categories - Primary badge selection allowing users to display their preferred badge - Admin profile editing capabilities ## Changes ### User Profiles (#45) - **Frontend**: User profile pages with stats display - Profile cards showing avatar, display name, username, and bio - Social links section (Website, GitHub, Bluesky, LinkedIn, Twitch, YouTube, Discord) - Stats display (suggestions, accepted suggestions, likes, comments) - Recent achievements section - Badge display - Report button for other users' profiles - **Backend**: Profile API endpoints - Get user profile by username or ID - Profile includes stats, badges, and achievement points ### Achievement System (#48) - **Database**: UserAchievement model for tracking progress - **62 Total Achievements** across 5 categories: - **Suggestions (15)**: First suggestion through ultimate curator - **Likes (12)**: First like through legendary fan - **Comments (12)**: First comment through review legend - **Engagement (15)**: Login streaks and activity milestones - **Reports (8)**: Valid reports and accuracy tracking - **Backend**: AchievementService with real-time checking - Integrated into all user interaction points - API endpoints for achievement data - Progress tracking to avoid recalculation - **Frontend**: Achievements page and profile integration - Full achievements page with category filtering - Tier-based styling (Bronze, Silver, Gold, Platinum, Diamond) - Progress indicators for in-progress achievements - Recent achievements on profile pages ### Primary Badge System (#49) - **Database**: Add primaryBadge field to User model - **Backend**: Update profile endpoints to include primary badge - **Frontend**: Primary badge selection in settings - Only shows badges the user has earned - Displayed on profile page - Displayed in comments (next to username) - Falls back to no badge if selection is invalid - **Admin Features**: Admin can edit any user's primary badge ### Admin Enhancements - Comprehensive profile editing modal for admins - Edit display name, bio, slug, social links - Set primary badge for users - Visual feedback for save/error states - Admin action buttons in report review modals - Ban user, delete comment, edit profile - Integrated with report workflow ### Quality Improvements - Improved dropdown option contrast for readability - Hide all badges when no primary badge is selected - "View All" achievements link only shown on own profile - Improved achievement text readability ## Testing - ✅ User profiles display correctly with stats and badges - ✅ Achievement checking works for all interaction types - ✅ Primary badge selection persists and displays correctly - ✅ Admin profile editing saves successfully - ✅ Report workflow integrated with admin actions - ✅ Achievements page shows all 62 achievements with filtering - ✅ Text readability improved across components Closes #45 Closes #48 Closes #49

naomi added 16 commits 2026-02-19 22:12:18 -08:00

feat: implement user profiles and settings 34c7ca8ba2

Add comprehensive user profile system allowing users to showcase
their activity and customize their profiles.

Database Changes:
- Added profile fields to User model: slug, displayName, bio, profilePublic
- Added index on slug field for efficient lookups

API Changes:
- Added GET /users/me endpoint to fetch current user
- Added PUT /users/me endpoint to update user settings
- Added GET /users/profile/:identifier endpoint for public profiles
- Updated UserService with profile methods and statistics
- Modified AuthService to include profile fields in user responses

Frontend Changes:
- Created ProfileComponent to display user profiles with stats
- Created SettingsComponent for profile customization
- Added profile and settings routes
- Updated header dropdown menu with profile links
- Enhanced UserService with profile methods
- Added updateUser method to AuthService

Features:
- Custom profile slugs for clean URLs
- Display names separate from usernames
- User bios (up to 500 characters)
- Public/private profile toggle
- Activity statistics (suggestions, likes, comments, acceptance rate)
- Badge display (Staff, Mod, VIP, Discord Member)
- Beautiful witch-themed styling

Closes #45

feat: add social links with validation and Font Awesome icons 5eec4c7640

Added comprehensive social links functionality to user profiles:

**New Social Platforms:**
- Website (full URL validation)
- GitHub (username format)
- Bluesky (handle format)
- LinkedIn (username format)
- Twitch (username format)
- YouTube (handle or channel ID format)
- Discord Server (invite code format)

**Features:**
- Database schema updated with 7 new optional social link fields
- Backend services and API routes updated to handle all social links
- Settings form with input fields and helpful validation hints
- Profile display with Font Awesome icons for each platform
- Regex validation patterns for all fields with visual feedback
- Green border for valid input, red border for invalid input
- All form inputs use consistent type="text" for uniform styling
- Discord accepts just invite code (constructs full URL automatically)

**Technical Changes:**
- Installed @fortawesome/angular-fontawesome with pinned versions
- Replaced emoji icons with proper Font Awesome components
- Added FontAwesomeModule to profile component
- Updated all User type interfaces across frontend and backend
- Updated UserService mappings in all methods
- Added comprehensive regex patterns matching platform requirements

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

feat: implement profile reporting system with admin review d797d38ddd

Added comprehensive profile reporting system to allow users to report
inappropriate profiles and admins to review reports.

Features:
- User can report profiles with predefined reasons + custom details
- Duplicate prevention (one pending report per profile per user)
- Rate limiting (5 pending reports maximum per user)
- Admin dashboard to view and filter reports (All, Pending, Reviewed, etc.)
- Admin review modal to update status and add review notes
- Report button on profile page (only visible when viewing others)
- Font Awesome icons for better UI consistency

Database changes:
- New ProfileReport model with ReportReason/ReportStatus enums
- User relations for reports (reportsMade, reportsReceived, reportsReviewed)
- Indices for efficient querying

chore: add missing pieces for profile reporting and fix formatting 8f569e0bb4

- Added Reports link to admin dropdown menu
- Fixed log route path (changed from '/log' to '/')
- Exported report types from shared-types index
- Fixed whitespace alignment in auth and game types
- Fixed formatting in e2e test files (newlines, comment style)

feat: implement comment reporting system c514849f12

Added comprehensive comment reporting infrastructure similar to profile reporting.

API Changes:
- New CommentReport model in Prisma schema with relations to User and Comment
- CommentReportService with CRUD operations, duplicate prevention, and rate limiting
- API routes at /comment-reports for creating and managing comment reports
- Updated CommentService to include hasPendingReports flag for all comments

Frontend Changes:
- Created shared CommentDisplayComponent for reusable comment display with report button
- Updated ReportModalComponent to handle both profile and comment reports
- CommentReportService for API communication
- Integrated CommentDisplayComponent into games-list component
- Comments with pending reports show "[comment pending admin review]" message

Features:
- Users can report comments they didn't write
- Duplicate prevention (one pending report per comment per user)
- Rate limiting (5 pending reports maximum per user)
- Admins can review and action comment reports
- Comments are hidden during review to prevent abuse

Remaining Work:
- Need to integrate CommentDisplayComponent into remaining media components (books, music, art, shows, manga)
- Need to extend admin-reports page to display comment reports alongside profile reports

feat: integrate CommentDisplayComponent into all remaining media components e1bac9fd3e

Completed the integration of the shared CommentDisplayComponent across all media list views.

Updated Components:
- books-list.component.ts
- music-list.component.ts
- art-gallery.component.ts
- shows-list.component.ts
- manga-list.component.ts

All components now:
- Use the centralized CommentDisplayComponent for consistent UI
- Support comment reporting via the Report button
- Display pending review messages for reported comments
- Handle comment editing through the shared component

This completes the frontend integration for comment reporting across all media types!

feat: add comment report management to admin interface e728968fc9

Updated the admin-reports component to handle both profile and comment reports:
- Added report type toggle to switch between profile and comment reports
- Duplicated report display logic for comment reports
- Comment reports show the comment content with truncation
- Added separate review modals for profile and comment reports
- Comment reports display comment author instead of reported user
- Maintains all existing functionality for profile reports

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

feat: add admin action buttons to report review modals 8837055e97

Added admin-specific action buttons in the report review modals:
- Comment reports: Edit Comment and Delete Comment buttons
- Profile reports: Edit Profile and Make Private buttons

Admin actions include:
- Edit comment content directly from the modal
- Delete reported comments with confirmation
- Navigate to profile edit page
- Make reported profiles private

Methods are stubbed with TODOs for full API integration.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

feat: implement admin action APIs for comment and profile moderation 6e884b9ae8

Added full API implementation for admin action buttons in the report
management interface:

Backend Changes:
- Created new /api/comments routes for admin-only comment operations
- Added PUT /api/comments/:id for admin comment editing
- Added DELETE /api/comments/:id for admin comment deletion
- Added POST /api/users/:id/make-private for admin profile privacy control
- All endpoints protected with adminGuard and csrfProtection
- Proper audit logging for all admin actions
- Added onDelete: Cascade to CommentReport relation for safe comment deletion

Frontend Changes:
- Added adminUpdateComment() and adminDeleteComment() to CommentsService
- Added makeProfilePrivate() to UserService
- Integrated API calls into admin-reports component methods
- editComment() now updates comment via API and refreshes report list
- deleteComment() now deletes comment via API and refreshes report list
- makeProfilePrivate() now updates profile privacy via API
- editProfile() navigates using ObjectId instead of Discord username
- All actions show success/error toasts and close modals on completion

The admin interface now has full working moderation capabilities for both
comment and profile reports.

feat: add admin profile editing capability c154ef1897

Added admin endpoint and functionality for editing user profiles from the
report management interface:

Backend Changes:
- Added PUT /api/users/:id endpoint for admin-only profile editing
- Reuses existing updateUserSettings logic with slug uniqueness validation
- Protected with adminGuard and csrfProtection
- Proper audit logging for admin profile edits

Frontend Changes:
- Added adminUpdateUser() method to UserService
- Updated editProfile() in admin-reports to load profile and allow bio editing
- Uses prompt for quick bio editing (can be expanded to full form later)
- Shows success/error toasts and refreshes report list after edit

Admins can now quickly edit reported user profiles directly from the
report management interface.

feat: add comprehensive profile editing modal for admins bbc3b040d0

Replaced the simple prompt-based profile editing with a full-featured modal
that allows admins to edit all profile fields:

Profile Information:
- Display Name
- Profile URL Slug (with uniqueness validation)
- Bio (with character counter)

Social Links:
- Website
- Discord Server
- GitHub username
- Bluesky handle
- LinkedIn username
- Twitch username
- YouTube handle/channel

All fields include:
- Proper validation patterns
- Help text explaining format requirements
- Styled form sections for organization
- Loading states during submission
- Success/error toast notifications

The modal opens when clicking "Edit Profile" on a profile report, loads
the current profile data, and saves all changes via the admin API endpoint.

feat: add primary badge selection for user profiles 9d965808a7

Implements #49 - Allow users to select one primary badge to display
on their profile instead of showing all badges at once.

Changes:
- Add PrimaryBadge enum to Prisma schema and shared types (STAFF, MOD, VIP, DISCORD)
- Add primaryBadge field to User model and all user interfaces
- Update settings component with badge selection dropdown
- Only show badges the user actually has in the dropdown
- Update profile component to display only selected badge (or all if none selected)
- Add primaryBadge to admin profile edit modal
- Update API routes and services to handle primaryBadge
- Export PrimaryBadge enum from shared-types (not just as type)

Additional fixes:
- Fix Angular output naming: rename onEdit/onDelete to edit/delete
- Update all parent components using comment-display outputs
- Add type casting for Prisma PrimaryBadge enum to shared-types enum

feat: display primary badge in comments 18cfe16d87

Extend the primary badge selection feature to comments, so users see
only their selected badge next to their comments (or all badges if
none selected).

Changes:
- Add primaryBadge field to CommentUser interface
- Update comment service mapComment to include primaryBadge
- Update comment-display component to show primary badge logic
- Import and expose PrimaryBadge enum in comment-display component
- Use same conditional logic as profile (show primary or all badges)

fix: hide all badges when no primary badge is selected 6e93ea140f

Update the badge display logic so that if a user hasn't selected
a primary badge, no badges are shown at all (instead of showing
all badges).

Changes:
- Remove else clause from profile badge section (only show badges-section div if primaryBadge is set)
- Remove else clause from comment badge display
- Update help text from "show all" to "hide all" in settings
- Update help text in admin profile edit modal to match
- Clarify that badge selection applies to both profile and comments

fix: improve dropdown option contrast for readability 1f62d64ace

Add explicit background and text color styling to select option
elements to fix poor contrast that made dropdown options illegible.

Changes:
- Add option styling to settings component select dropdown
- Add option styling to admin reports component select dropdown
- Set background to match form background color
- Set text color to match standard text color
- Ensures dropdown options are readable on all backgrounds

feat: implement comprehensive achievement system with 62 achievements

Node.js CI / CI (pull_request) Failing after 1m21s

Details

Security Scan and Upload / Security & DefectDojo Upload (pull_request) Successful in 1m22s

Details

3da648544e

Adds a complete achievement system with gamification features across all user interactions.

**Database & Types:**
- Add UserAchievement model to track user progress and earned achievements
- Add achievement-related fields to User model (achievementPoints, currentStreak, lastStreakCheck)
- Add ACHIEVEMENT_UNLOCKED audit action type
- Define 62 achievements as TypeScript constants across 5 categories

**Achievement Categories:**
- Suggestions (15): First suggestion through ultimate curator milestones
- Likes (12): First like through legendary fan milestones
- Comments (12): First comment through review legend milestones
- Engagement (15): Login streaks and total activity tracking
- Reports (8): Valid reports and accuracy tracking

**Backend Implementation:**
- Create AchievementService with comprehensive checking logic
- Add achievement route with 6 API endpoints
- Integrate achievement checking into all user interaction points:
  - Suggestions (create + accept)
  - Likes (toggle)
  - Comments (all 6 media types)
  - Login streaks
  - Reports (profile + comment)
- Update UserService to include achievement points in profiles

**Frontend Implementation:**
- Create AchievementService for API communication
- Create achievements page showing all 62 achievements with:
  - Category filtering (All, Suggestions, Likes, Comments, Engagement, Reports)
  - Tier-based styling (Bronze, Silver, Gold, Platinum, Diamond)
  - Progress indicators for in-progress achievements
  - Earned date display for completed achievements
- Add "Recent Achievements" section to user profiles
- Add "🏆 Achievements" link to header navigation
- Only show "View All" link on own profile

**Technical Features:**
- Real-time achievement checking on user actions
- Progress tracking to avoid recalculation
- Points system for gamification
- Tier-based gradient styling
- Leaderboard-ready architecture

Resolves #48

Co-Authored-By: Hikari <hikari@nhcarrigan.com>

naomi added 1 commit 2026-02-19 22:17:14 -08:00

test: add profilePublic field to User test fixtures

Node.js CI / CI (pull_request) Successful in 1m19s

Details

Security Scan and Upload / Security & DefectDojo Upload (pull_request) Successful in 1m22s

Details

198fe240f7

Updates all User test objects in auth.types.spec.ts to include
the profilePublic field that was added to the User interface.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

naomi merged commit 86404497f0 into main

2026-02-19 22:21:18 -08:00

naomi deleted branch feat/user-profiles

2026-02-19 22:21:18 -08:00

naomi referenced this issue from a commit

2026-02-19 22:21:20 -08:00

feat: implement user profiles with achievements and primary badge system (#58)

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: nhcarrigan/library#58