generated from nhcarrigan/template
feat: implement user profiles with achievements and primary badge system (#58)
## 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 Co-authored-by: Hikari <hikari@nhcarrigan.com> Reviewed-on: #58 Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com> Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>
This commit was merged in pull request #58.
This commit is contained in:
@@ -0,0 +1,317 @@
|
||||
/**
|
||||
* @copyright NHCarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
import { Component, Input, Output, EventEmitter, signal, inject } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import type { Comment } from '@library/shared-types';
|
||||
import { PrimaryBadge } from '@library/shared-types';
|
||||
import { AuthService } from '../../services/auth.service';
|
||||
import { SanitizeService } from '../../services/sanitize.service';
|
||||
import { ReportModalComponent } from '../report-modal/report-modal.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-comment-display',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule, ReportModalComponent],
|
||||
template: `
|
||||
<div class="comments-section">
|
||||
@if (comments().length > 0) {
|
||||
@for (comment of comments(); track comment.id) {
|
||||
<div class="comment">
|
||||
<div class="comment-header">
|
||||
@if (comment.user.avatar) {
|
||||
<img [src]="comment.user.avatar" [alt]="comment.user.username" class="comment-avatar">
|
||||
}
|
||||
<span class="comment-author">{{ comment.user.username }}</span>
|
||||
@if (comment.user.primaryBadge) {
|
||||
<!-- Show only the selected primary badge -->
|
||||
@if (comment.user.primaryBadge === PrimaryBadge.STAFF && comment.user.isStaff) {
|
||||
<span class="staff-badge">Staff</span>
|
||||
}
|
||||
@if (comment.user.primaryBadge === PrimaryBadge.MOD && comment.user.isMod) {
|
||||
<span class="mod-badge">Mod</span>
|
||||
}
|
||||
@if (comment.user.primaryBadge === PrimaryBadge.VIP && comment.user.isVip) {
|
||||
<span class="vip-badge">VIP</span>
|
||||
}
|
||||
@if (comment.user.primaryBadge === PrimaryBadge.DISCORD && comment.user.inDiscord) {
|
||||
<span class="discord-badge">Discord</span>
|
||||
}
|
||||
}
|
||||
<span class="comment-date">{{ formatDate(comment.createdAt) }}</span>
|
||||
@if (canEditComment(comment)) {
|
||||
<button (click)="startEdit(comment)" class="btn btn-secondary btn-xs">Edit</button>
|
||||
}
|
||||
@if (canDeleteComment(comment)) {
|
||||
<button (click)="delete.emit(comment.id)" class="btn btn-danger btn-xs">Delete</button>
|
||||
}
|
||||
@if (canReportComment(comment)) {
|
||||
<button (click)="openReportModal(comment)" class="btn btn-warning btn-xs">Report</button>
|
||||
}
|
||||
</div>
|
||||
@if (editingCommentId() === comment.id) {
|
||||
<div class="comment-edit-form">
|
||||
<textarea
|
||||
[(ngModel)]="editCommentContent"
|
||||
name="editComment"
|
||||
rows="3"
|
||||
></textarea>
|
||||
<div class="comment-edit-actions">
|
||||
<button (click)="saveEdit(comment.id)" class="btn btn-primary btn-xs">Save</button>
|
||||
<button (click)="cancelEdit()" class="btn btn-secondary btn-xs">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
} @else {
|
||||
@if (comment.hasPendingReports) {
|
||||
<div class="comment-pending-review">[comment pending admin review]</div>
|
||||
} @else {
|
||||
<div class="comment-content" [innerHTML]="sanitizeService.sanitizeHtml(comment.content)"></div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
}
|
||||
} @else {
|
||||
<div class="no-comments">No comments yet. Be the first to comment!</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (showReportModal()) {
|
||||
<app-report-modal
|
||||
[reportType]="'comment'"
|
||||
[targetId]="reportingCommentId()"
|
||||
(closeModal)="closeReportModal()"
|
||||
/>
|
||||
}
|
||||
`,
|
||||
styles: [`
|
||||
.comments-section {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.comment {
|
||||
background: #f9fafb;
|
||||
padding: 0.75rem;
|
||||
border-radius: 0.375rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.comment-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.comment-avatar {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.comment-author {
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.discord-badge,
|
||||
.vip-badge,
|
||||
.mod-badge,
|
||||
.staff-badge {
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.discord-badge {
|
||||
background: #5865f2;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.vip-badge {
|
||||
background: #fbbf24;
|
||||
color: #78350f;
|
||||
}
|
||||
|
||||
.mod-badge {
|
||||
background: #10b981;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.staff-badge {
|
||||
background: #8b5cf6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.comment-date {
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.comment-content {
|
||||
font-size: 0.9rem;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.comment-pending-review {
|
||||
font-size: 0.9rem;
|
||||
color: #9b59b6;
|
||||
font-style: italic;
|
||||
padding: 0.5rem;
|
||||
background: #f3e8ff;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.comment-edit-form {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.comment-edit-form textarea {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.375rem;
|
||||
font-family: inherit;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.comment-edit-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.no-comments {
|
||||
text-align: center;
|
||||
color: #6b7280;
|
||||
padding: 2rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.25rem 0.75rem;
|
||||
border: none;
|
||||
border-radius: 0.25rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-xs {
|
||||
padding: 0.125rem 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #6b7280;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #4b5563;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #dc2626;
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background: #f59e0b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-warning:hover {
|
||||
background: #d97706;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class CommentDisplayComponent {
|
||||
private readonly authService = inject(AuthService);
|
||||
readonly sanitizeService = inject(SanitizeService);
|
||||
|
||||
// Expose PrimaryBadge enum for template
|
||||
readonly PrimaryBadge = PrimaryBadge;
|
||||
|
||||
@Input({ required: true }) comments = signal<Comment[]>([]);
|
||||
@Output() edit = new EventEmitter<{ commentId: string; content: string }>();
|
||||
@Output() delete = new EventEmitter<string>();
|
||||
|
||||
editingCommentId = signal<string | null>(null);
|
||||
editCommentContent = '';
|
||||
showReportModal = signal(false);
|
||||
reportingCommentId = signal<string>('');
|
||||
|
||||
formatDate(date: Date | string): string {
|
||||
const d = new Date(date);
|
||||
return d.toLocaleDateString('en-GB', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
}
|
||||
|
||||
canEditComment(comment: Comment): boolean {
|
||||
const user = this.authService.user();
|
||||
if (!user) return false;
|
||||
return comment.userId === user.id || this.authService.isAdmin();
|
||||
}
|
||||
|
||||
canDeleteComment(comment: Comment): boolean {
|
||||
const user = this.authService.user();
|
||||
if (!user) return false;
|
||||
return comment.userId === user.id || this.authService.isAdmin();
|
||||
}
|
||||
|
||||
canReportComment(comment: Comment): boolean {
|
||||
const user = this.authService.user();
|
||||
if (!user) return false;
|
||||
// Users can report comments they didn't write (but not their own)
|
||||
return comment.userId !== user.id;
|
||||
}
|
||||
|
||||
startEdit(comment: Comment): void {
|
||||
this.editingCommentId.set(comment.id);
|
||||
this.editCommentContent = comment.rawContent ?? comment.content;
|
||||
}
|
||||
|
||||
saveEdit(commentId: string): void {
|
||||
this.edit.emit({ commentId, content: this.editCommentContent });
|
||||
this.cancelEdit();
|
||||
}
|
||||
|
||||
cancelEdit(): void {
|
||||
this.editingCommentId.set(null);
|
||||
this.editCommentContent = '';
|
||||
}
|
||||
|
||||
openReportModal(comment: Comment): void {
|
||||
this.reportingCommentId.set(comment.id);
|
||||
this.showReportModal.set(true);
|
||||
}
|
||||
|
||||
closeReportModal(): void {
|
||||
this.showReportModal.set(false);
|
||||
this.reportingCommentId.set('');
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user