feat: display primary badge in comments

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)

api/src/app/services/comment.service.ts

@@ -4,7 +4,7 @@
  * @author Naomi Carrigan
  */
 
-import { Comment, CreateCommentDto } from "@library/shared-types";
+import { Comment, CreateCommentDto, PrimaryBadge } from "@library/shared-types";
 import { prisma } from "../lib/prisma";
 import createDOMPurify from "dompurify";
 import { JSDOM } from "jsdom";
@@ -65,6 +65,7 @@ export class CommentService {
         id: comment.user.id,
         username: comment.user.username,
         avatar: comment.user.avatar || undefined,
+        primaryBadge: (comment.user.primaryBadge as PrimaryBadge) || undefined,
         inDiscord: comment.user.inDiscord,
         isVip: comment.user.isVip,
         isMod: comment.user.isMod,

apps/frontend/src/app/components/comment-display/comment-display.component.ts

@@ -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) {
+              @if (comment.user.primaryBadge) {
-                <span class="discord-badge">Discord</span>
+                <!-- Show only the selected primary badge -->
-              }
+                @if (comment.user.primaryBadge === PrimaryBadge.STAFF && comment.user.isStaff) {
-              @if (comment.user.isVip) {
+                  <span class="staff-badge">Staff</span>
-                <span class="vip-badge">VIP</span>
+                }
-              }
+                @if (comment.user.primaryBadge === PrimaryBadge.MOD && comment.user.isMod) {
-              @if (comment.user.isMod) {
+                  <span class="mod-badge">Mod</span>
-                <span class="mod-badge">Mod</span>
+                }
-              }
+                @if (comment.user.primaryBadge === PrimaryBadge.VIP && comment.user.isVip) {
-              @if (comment.user.isStaff) {
+                  <span class="vip-badge">VIP</span>
-                <span class="staff-badge">Staff</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>();

shared-types/src/lib/comment.types.ts

@@ -4,14 +4,17 @@
  * @author Naomi Carrigan
  */
 
+import { PrimaryBadge } from "./auth.types";
+
 interface CommentUser {
-  id:         string;
+  id:           string;
-  username:   string;
+  username:     string;
-  avatar?:    string;
+  avatar?:      string;
-  inDiscord?: boolean;
+  primaryBadge?: PrimaryBadge;
-  isVip?:     boolean;
+  inDiscord?:   boolean;
-  isMod?:     boolean;
+  isVip?:       boolean;
-  isStaff?:   boolean;
+  isMod?:       boolean;
+  isStaff?:     boolean;
 }
 
 interface Comment {