From 18cfe16d8770c6af9398ded87c69289446303900 Mon Sep 17 00:00:00 2001
From: Hikari <hikari@nhcarrigan.com>
Date: Thu, 19 Feb 2026 20:31:24 -0800
Subject: [PATCH] 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       |  3 +-
 .../comment-display.component.ts              | 43 ++++++++++++++-----
 shared-types/src/lib/comment.types.ts         | 17 +++++---
 3 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/api/src/app/services/comment.service.ts b/api/src/app/services/comment.service.ts
index d47ce0a..8113af9 100644
--- a/api/src/app/services/comment.service.ts
+++ b/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,
diff --git a/apps/frontend/src/app/components/comment-display/comment-display.component.ts b/apps/frontend/src/app/components/comment-display/comment-display.component.ts
index 4a9f3dd..5008691 100644
--- a/apps/frontend/src/app/components/comment-display/comment-display.component.ts
+++ b/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) {
-                <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>();
diff --git a/shared-types/src/lib/comment.types.ts b/shared-types/src/lib/comment.types.ts
index 1f80e21..212e2ed 100644
--- a/shared-types/src/lib/comment.types.ts
+++ b/shared-types/src/lib/comment.types.ts
@@ -4,14 +4,17 @@
  * @author Naomi Carrigan
  */
 
+import { PrimaryBadge } from "./auth.types";
+
 interface CommentUser {
-  id:         string;
-  username:   string;
-  avatar?:    string;
-  inDiscord?: boolean;
-  isVip?:     boolean;
-  isMod?:     boolean;
-  isStaff?:   boolean;
+  id:           string;
+  username:     string;
+  avatar?:      string;
+  primaryBadge?: PrimaryBadge;
+  inDiscord?:   boolean;
+  isVip?:       boolean;
+  isMod?:       boolean;
+  isStaff?:     boolean;
 }
 
 interface Comment {