nhcarrigan/library
9
0
Fork 0
generated from nhcarrigan/template
Code Issues Pull Requests 54 Actions Releases 3 Activity

feat: display primary badge in comments

Browse Source 
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)
This commit is contained in:
Hikari
2026-02-19 20:31:24 -08:00
committed by Naomi Carrigan
parent 9d965808a7
commit 18cfe16d87
3 changed files with 44 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/app/components/comment-display/comment-display.component.ts
+32 -11
View File
@@ -7,6 +7,7 @@ import { Component, Input, Output, EventEmitter, signal, inject } from '@angular
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';
@@ -25,17 +26,34 @@ import { ReportModalComponent } from '../report-modal/report-modal.component';
<img [src]="comment.user.avatar" [alt]="comment.user.username" class="comment-avatar">
}
<span class="comment-author">{{ comment.user.username }}</span>
@if (comment.user.inDiscord) {
<span class="discord-badge">Discord</span>
}
@if (comment.user.isVip) {
<span class="vip-badge">VIP</span>
}
@if (comment.user.isMod) {
<span class="mod-badge">Mod</span>
}
@if (comment.user.isStaff) {
<span class="staff-badge">Staff</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>
}
} @else {
<!-- Show all badges if no primary badge is selected -->
@if (comment.user.isStaff) {
<span class="staff-badge">Staff</span>
}
@if (comment.user.isMod) {
<span class="mod-badge">Mod</span>
}
@if (comment.user.isVip) {
<span class="vip-badge">VIP</span>
}
@if (comment.user.inDiscord) {
<span class="discord-badge">Discord</span>
}
}
<span class="comment-date">{{ formatDate(comment.createdAt) }}</span>
@if (canEditComment(comment)) {
@@ -244,6 +262,9 @@ 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>();