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" [(ngModel)]="profileEditForm.primaryBadge"
class="form-control" class="form-control"
> >
<option [ngValue]="undefined">None (show all badges)</option> <option [ngValue]="undefined">None (hide all badges)</option>
@if (editingProfile()?.profile?.badges.isStaff) { @if (editingProfile()?.profile?.badges.isStaff) {
<option [ngValue]="PrimaryBadge.STAFF">Staff</option> <option [ngValue]="PrimaryBadge.STAFF">Staff</option>
} }
@@ -697,7 +697,7 @@ import { ProfileReportWithUsers, CommentReportWithDetails, ReportStatus, ReportR
<option [ngValue]="PrimaryBadge.DISCORD">Discord Member</option> <option [ngValue]="PrimaryBadge.DISCORD">Discord Member</option>
} }
</select> </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>
</div> </div>
@@ -40,20 +40,6 @@ import { ReportModalComponent } from '../report-modal/report-modal.component';
@if (comment.user.primaryBadge === PrimaryBadge.DISCORD && comment.user.inDiscord) { @if (comment.user.primaryBadge === PrimaryBadge.DISCORD && comment.user.inDiscord) {
<span class="discord-badge">Discord</span> <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> <span class="comment-date">{{ formatDate(comment.createdAt) }}</span>
@if (canEditComment(comment)) { @if (canEditComment(comment)) {
@@ -58,8 +58,8 @@ import { PrimaryBadge } from '@library/shared-types';
} }
</div> </div>
<div class="badges-section"> @if (profile()!.primaryBadge) {
@if (profile()!.primaryBadge) { <div class="badges-section">
<!-- Show only the selected primary badge --> <!-- Show only the selected primary badge -->
@if (profile()!.primaryBadge === PrimaryBadge.STAFF && profile()!.badges.isStaff) { @if (profile()!.primaryBadge === PrimaryBadge.STAFF && profile()!.badges.isStaff) {
<span class="badge badge-staff">Staff</span> <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) { @if (profile()!.primaryBadge === PrimaryBadge.DISCORD && profile()!.badges.inDiscord) {
<span class="badge badge-member">Discord Member</span> <span class="badge badge-member">Discord Member</span>
} }
} @else { </div>
<!-- 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) { @if (profile()!.bio) {
<div class="bio-section"> <div class="bio-section">
@@ -77,7 +77,7 @@ import { User, PrimaryBadge } from '@library/shared-types';
name="primaryBadge" name="primaryBadge"
[(ngModel)]="formData.primaryBadge" [(ngModel)]="formData.primaryBadge"
> >
<option [ngValue]="undefined">None (show all badges)</option> <option [ngValue]="undefined">None (hide all badges)</option>
@if (user()!.isStaff) { @if (user()!.isStaff) {
<option [ngValue]="PrimaryBadge.STAFF">Staff</option> <option [ngValue]="PrimaryBadge.STAFF">Staff</option>
} }
@@ -91,7 +91,7 @@ import { User, PrimaryBadge } from '@library/shared-types';
<option [ngValue]="PrimaryBadge.DISCORD">Discord Member</option> <option [ngValue]="PrimaryBadge.DISCORD">Discord Member</option>
} }
</select> </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>
</div> </div>