fix: hide all badges when no primary badge is selected

Update the badge display logic so that if a user hasn't selected
a primary badge, no badges are shown at all (instead of showing
all badges).

Changes:
- Remove else clause from profile badge section (only show badges-section div if primaryBadge is set)
- Remove else clause from comment badge display
- Update help text from "show all" to "hide all" in settings
- Update help text in admin profile edit modal to match
- Clarify that badge selection applies to both profile and comments
This commit is contained in:
2026-02-19 20:36:42 -08:00
committed by Naomi Carrigan
parent 18cfe16d87
commit 6e93ea140f
4 changed files with 8 additions and 36 deletions
@@ -683,7 +683,7 @@ import { ProfileReportWithUsers, CommentReportWithDetails, ReportStatus, ReportR
[(ngModel)]="profileEditForm.primaryBadge"
class="form-control"
>
<option [ngValue]="undefined">None (show all badges)</option>
<option [ngValue]="undefined">None (hide all badges)</option>
@if (editingProfile()?.profile?.badges.isStaff) {
<option [ngValue]="PrimaryBadge.STAFF">Staff</option>
}
@@ -697,7 +697,7 @@ import { ProfileReportWithUsers, CommentReportWithDetails, ReportStatus, ReportR
<option [ngValue]="PrimaryBadge.DISCORD">Discord Member</option>
}
</select>
<small class="form-help">Choose one badge to display on profile, or show all</small>
<small class="form-help">Choose one badge to display on profile and comments</small>
</div>
</div>
@@ -40,20 +40,6 @@ import { ReportModalComponent } from '../report-modal/report-modal.component';
@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)) {
@@ -58,8 +58,8 @@ import { PrimaryBadge } from '@library/shared-types';
}
</div>
<div class="badges-section">
@if (profile()!.primaryBadge) {
<div class="badges-section">
<!-- Show only the selected primary badge -->
@if (profile()!.primaryBadge === PrimaryBadge.STAFF && profile()!.badges.isStaff) {
<span class="badge badge-staff">Staff</span>
@@ -73,22 +73,8 @@ import { PrimaryBadge } from '@library/shared-types';
@if (profile()!.primaryBadge === PrimaryBadge.DISCORD && profile()!.badges.inDiscord) {
<span class="badge badge-member">Discord Member</span>
}
} @else {
<!-- Show all badges if no primary badge is selected -->
@if (profile()!.badges.isStaff) {
<span class="badge badge-staff">Staff</span>
}
@if (profile()!.badges.isMod) {
<span class="badge badge-mod">Moderator</span>
}
@if (profile()!.badges.isVip) {
<span class="badge badge-vip">VIP</span>
}
@if (profile()!.badges.inDiscord) {
<span class="badge badge-member">Discord Member</span>
}
}
</div>
}
@if (profile()!.bio) {
<div class="bio-section">
@@ -77,7 +77,7 @@ import { User, PrimaryBadge } from '@library/shared-types';
name="primaryBadge"
[(ngModel)]="formData.primaryBadge"
>
<option [ngValue]="undefined">None (show all badges)</option>
<option [ngValue]="undefined">None (hide all badges)</option>
@if (user()!.isStaff) {
<option [ngValue]="PrimaryBadge.STAFF">Staff</option>
}
@@ -91,7 +91,7 @@ import { User, PrimaryBadge } from '@library/shared-types';
<option [ngValue]="PrimaryBadge.DISCORD">Discord Member</option>
}
</select>
<small class="form-help">Choose one badge to display on your profile, or show all</small>
<small class="form-help">Choose one badge to display on your profile and comments</small>
</div>
</div>