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
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.
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.
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.
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>
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>
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!
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
- 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)
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
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>
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
## Summary
This PR implements several improvements to the library application:
- Added start and finish date tracking for media items
- Added "Retired" category for abandoned media
- Implemented avatar-based user menu with dropdown navigation
- Added automatic background token refresh to prevent session expiry
- Created centralised logging system with frontend-to-API log forwarding
- Added toast notifications for error handling
## Changes
### Media Tracking (#41)
- Added `dateStarted` and `dateFinished` fields to Books, Games, Manga, Music, and Shows
- Updated TypeScript types, Prisma schema, and API services
- Added manual date input fields to frontend forms
- Properly converts HTML date strings to Date objects before API submission
### Retired Category (#43)
- Added `RETIRED` status to all media type enums
- Updated Prisma schema, frontend dropdowns, and filter buttons
- Added status label handling for retired items
### User Menu (#46)
- Replaced username text with avatar image in header
- Created dropdown menu with navigation items (Users, Audit, Suggestions)
- Added logout button to menu
- Implemented keyboard accessibility (tabindex, role, keyup handlers)
### Token Refresh (#44)
- Implemented automatic token refresh every 13 minutes in background
- Added proactive refresh to prevent token expiry during form filling
- Prevents users from losing form data due to expired sessions
### Centralised Logging (#1)
- Created `/log` endpoint on API to receive frontend logs
- Replaced API console.log calls with @nhcarrigan/logger
- Created ConsoleLoggerService to intercept all console methods on frontend
- Added global error handlers (window.error, unhandledrejection) on frontend
- Added process error handlers (uncaughtException, unhandledRejection, SIGTERM, SIGINT) on API
- All frontend console activity now forwarded to centralised logging
### Error Handling
- Created ToastService and ToastComponent for displaying errors
- Integrated with GlobalErrorHandler and HTTP interceptor
- Added accessibility features (keyboard navigation, ARIA attributes)
- Set toast opacity to 40% for optimal readability
### Testing & Build
- Fixed pre-existing test failure for GET / route (now returns version info)
- Added ESM module mocking (jsdom, marked, dompurify, @nhcarrigan/logger)
- Configured Jest with isolatedModules to handle TypeScript errors
- Excluded test-setup.ts from production build
- All tests passing (123 total)
- Build passing with no errors
## Test Plan
- [x] All tests pass (123 tests)
- [x] Build passes without errors
- [x] Lint passes (only pre-existing warnings)
- [x] Date fields work correctly on all media types
- [x] Retired status displays and filters properly
- [x] Avatar menu opens/closes correctly with keyboard and mouse
- [x] Token refresh prevents session expiry
- [x] Toast notifications appear for errors
- [x] Frontend logs forward to API successfully
- [x] Root route returns version information
Closes#41Closes#43Closes#44Closes#46Closes#1🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-authored-by: Hikari <hikari@nhcarrigan.com>
Reviewed-on: #50
Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com>
Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>
hikari
naomi
