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

feat: add primary badge selection for user profiles

Browse Source 
Implements #49 - Allow users to select one primary badge to display
on their profile instead of showing all badges at once.

Changes:
- Add PrimaryBadge enum to Prisma schema and shared types (STAFF, MOD, VIP, DISCORD)
- Add primaryBadge field to User model and all user interfaces
- Update settings component with badge selection dropdown
- Only show badges the user actually has in the dropdown
- Update profile component to display only selected badge (or all if none selected)
- Add primaryBadge to admin profile edit modal
- Update API routes and services to handle primaryBadge
- Export PrimaryBadge enum from shared-types (not just as type)

Additional fixes:
- Fix Angular output naming: rename onEdit/onDelete to edit/delete
- Update all parent components using comment-display outputs
- Add type casting for Prisma PrimaryBadge enum to shared-types enum
This commit is contained in:
Hikari
2026-02-19 20:28:23 -08:00
committed by Naomi Carrigan
parent bbc3b040d0
commit 9d965808a7
16 changed files with 155 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
api/prisma/schema.prisma
+8
View File
@@ -176,6 +176,13 @@ enum MangaStatus {
RETIRED
}
enum PrimaryBadge {
STAFF
MOD
VIP
DISCORD
}
model User {
id String @id @default(auto()) @map("_id") @db.ObjectId
discordId String @unique
@@ -186,6 +193,7 @@ model User {
displayName String?
bio String?
profilePublic Boolean @default(true)
primaryBadge PrimaryBadge?
website String?
discordServer String?
bluesky String?
api/src/app/routes/users/index.ts
+4 -1
View File
@@ -5,7 +5,7 @@
*/
import { FastifyPluginAsync } from "fastify";
import { User, AuditAction, AuditCategory } from "@library/shared-types";
import { User, AuditAction, AuditCategory, PrimaryBadge } from "@library/shared-types";
import { UserService } from "../../services/user.service";
import { AuditService } from "../../services/audit.service";
import { adminGuard } from "../../middleware/admin-guard";
@@ -15,6 +15,7 @@ interface UpdateUserSettingsBody {
displayName?: string;
bio?: string;
profilePublic?: boolean;
primaryBadge?: PrimaryBadge;
website?: string;
discordServer?: string;
bluesky?: string;
@@ -31,6 +32,7 @@ interface UserProfileResponse {
avatar?: string;
bio?: string;
slug?: string;
primaryBadge?: PrimaryBadge;
website?: string;
discordServer?: string;
bluesky?: string;
@@ -144,6 +146,7 @@ const usersRoutes: FastifyPluginAsync = async (app) => {
avatar: profile.avatar,
bio: profile.bio,
slug: profile.slug,
primaryBadge: profile.primaryBadge,
website: profile.website,
discordServer: profile.discordServer,
bluesky: profile.bluesky,
api/src/app/services/user.service.ts
+10 -1
View File
@@ -4,7 +4,7 @@
* @author Naomi Carrigan
*/
import { User } from "@library/shared-types";
import { User, PrimaryBadge } from "@library/shared-types";
import { prisma } from "../lib/prisma";
import { SuggestionStatus } from "@prisma/client";
@@ -26,6 +26,7 @@ export class UserService {
displayName: user.displayName || undefined,
bio: user.bio || undefined,
profilePublic: user.profilePublic,
primaryBadge: (user.primaryBadge as PrimaryBadge) || undefined,
website: user.website || undefined,
discordServer: user.discordServer || undefined,
bluesky: user.bluesky || undefined,
@@ -61,6 +62,7 @@ export class UserService {
displayName: user.displayName || undefined,
bio: user.bio || undefined,
profilePublic: user.profilePublic,
primaryBadge: (user.primaryBadge as PrimaryBadge) || undefined,
website: user.website || undefined,
discordServer: user.discordServer || undefined,
bluesky: user.bluesky || undefined,
@@ -93,6 +95,7 @@ export class UserService {
displayName: user.displayName || undefined,
bio: user.bio || undefined,
profilePublic: user.profilePublic,
primaryBadge: (user.primaryBadge as PrimaryBadge) || undefined,
website: user.website || undefined,
discordServer: user.discordServer || undefined,
bluesky: user.bluesky || undefined,
@@ -125,6 +128,7 @@ export class UserService {
displayName: user.displayName || undefined,
bio: user.bio || undefined,
profilePublic: user.profilePublic,
primaryBadge: (user.primaryBadge as PrimaryBadge) || undefined,
website: user.website || undefined,
discordServer: user.discordServer || undefined,
bluesky: user.bluesky || undefined,
@@ -169,6 +173,7 @@ export class UserService {
displayName: user.displayName || undefined,
bio: user.bio || undefined,
profilePublic: user.profilePublic,
primaryBadge: (user.primaryBadge as PrimaryBadge) || undefined,
website: user.website || undefined,
discordServer: user.discordServer || undefined,
bluesky: user.bluesky || undefined,
@@ -192,6 +197,7 @@ export class UserService {
displayName?: string;
bio?: string;
profilePublic?: boolean;
primaryBadge?: PrimaryBadge;
website?: string;
discordServer?: string;
bluesky?: string;
@@ -216,6 +222,7 @@ export class UserService {
displayName: user.displayName || undefined,
bio: user.bio || undefined,
profilePublic: user.profilePublic,
primaryBadge: (user.primaryBadge as PrimaryBadge) || undefined,
website: user.website || undefined,
discordServer: user.discordServer || undefined,
bluesky: user.bluesky || undefined,
@@ -239,6 +246,7 @@ export class UserService {
avatar?: string | null;
bio?: string | null;
slug?: string | null;
primaryBadge?: PrimaryBadge | null;
website?: string | null;
discordServer?: string | null;
bluesky?: string | null;
@@ -294,6 +302,7 @@ export class UserService {
avatar: user.avatar,
bio: user.bio,
slug: user.slug,
primaryBadge: user.primaryBadge as PrimaryBadge,
website: user.website,
discordServer: user.discordServer,
bluesky: user.bluesky,
apps/frontend/src/app/components/admin-reports/admin-reports.component.ts
+31 -2
View File
@@ -14,7 +14,7 @@ import { CommentsService } from '../../services/comments.service';
import { UserService } from '../../services/user.service';
import { AuthService } from '../../services/auth.service';
import { ToastService } from '../../services/toast.service';
import { ProfileReportWithUsers, CommentReportWithDetails, ReportStatus, ReportReason } from '@library/shared-types';
import { ProfileReportWithUsers, CommentReportWithDetails, ReportStatus, ReportReason, PrimaryBadge } from '@library/shared-types';
@Component({
selector: 'app-admin-reports',
@@ -674,6 +674,31 @@ import { ProfileReportWithUsers, CommentReportWithDetails, ReportStatus, ReportR
></textarea>
<small class="form-help">{{ (profileEditForm.bio.length || 0) }} / 500 characters</small>
</div>
<div class="form-group">
<label for="primaryBadge">Primary Badge</label>
<select
id="primaryBadge"
name="primaryBadge"
[(ngModel)]="profileEditForm.primaryBadge"
class="form-control"
>
<option [ngValue]="undefined">None (show all badges)</option>
@if (editingProfile()?.profile?.badges.isStaff) {
<option [ngValue]="PrimaryBadge.STAFF">Staff</option>
}
@if (editingProfile()?.profile?.badges.isMod) {
<option [ngValue]="PrimaryBadge.MOD">Moderator</option>
}
@if (editingProfile()?.profile?.badges.isVip) {
<option [ngValue]="PrimaryBadge.VIP">VIP</option>
}
@if (editingProfile()?.profile?.badges.inDiscord) {
<option [ngValue]="PrimaryBadge.DISCORD">Discord Member</option>
}
</select>
<small class="form-help">Choose one badge to display on profile, or show all</small>
</div>
</div>
<div class="form-section">
@@ -1462,8 +1487,9 @@ export class AdminReportsComponent implements OnInit {
private toastService = inject(ToastService);
private router = inject(Router);
// Make ReportStatus accessible in template
// Make ReportStatus and PrimaryBadge accessible in template
protected readonly ReportStatus = ReportStatus;
protected readonly PrimaryBadge = PrimaryBadge;
reportType = signal<'profile' | 'comment'>('profile');
allProfileReports = signal<ProfileReportWithUsers[]>([]);
@@ -1487,6 +1513,7 @@ export class AdminReportsComponent implements OnInit {
slug: '',
bio: '',
profilePublic: true,
primaryBadge: undefined as PrimaryBadge | undefined,
website: '',
discordServer: '',
bluesky: '',
@@ -1773,6 +1800,7 @@ export class AdminReportsComponent implements OnInit {
slug: profile.slug || '',
bio: profile.bio || '',
profilePublic: true, // We'll get this from the full user object if needed
primaryBadge: profile.primaryBadge || undefined,
website: profile.website || '',
discordServer: profile.discordServer || '',
bluesky: profile.bluesky || '',
@@ -1798,6 +1826,7 @@ export class AdminReportsComponent implements OnInit {
slug: '',
bio: '',
profilePublic: true,
primaryBadge: undefined as PrimaryBadge | undefined,
website: '',
discordServer: '',
bluesky: '',
apps/frontend/src/app/components/art/art-gallery.component.ts
+2 -2
View File
@@ -471,8 +471,8 @@ import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity, Link } from
<app-comment-display
[comments]="getCommentsSignal(art.id)"
(onEdit)="handleCommentEdit(art.id, $event)"
(onDelete)="deleteComment(art.id, $event)"
(edit)="handleCommentEdit(art.id, $event)"
(delete)="deleteComment(art.id, $event)"
/>
</div>
}
apps/frontend/src/app/components/books/books-list.component.ts
+2 -2
View File
@@ -658,8 +658,8 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
} @else {
<app-comment-display
[comments]="getCommentsSignal(book.id)"
(onEdit)="handleCommentEdit(book.id, $event)"
(onDelete)="deleteComment(book.id, $event)"
(edit)="handleCommentEdit(book.id, $event)"
(delete)="deleteComment(book.id, $event)"
/>
}
</div>
apps/frontend/src/app/components/comment-display/comment-display.component.ts
+4 -4
View File
@@ -42,7 +42,7 @@ import { ReportModalComponent } from '../report-modal/report-modal.component';
<button (click)="startEdit(comment)" class="btn btn-secondary btn-xs">Edit</button>
}
@if (canDeleteComment(comment)) {
<button (click)="onDelete.emit(comment.id)" class="btn btn-danger btn-xs">Delete</button>
<button (click)="delete.emit(comment.id)" class="btn btn-danger btn-xs">Delete</button>
}
@if (canReportComment(comment)) {
<button (click)="openReportModal(comment)" class="btn btn-warning btn-xs">Report</button>
@@ -245,8 +245,8 @@ export class CommentDisplayComponent {
readonly sanitizeService = inject(SanitizeService);
@Input({ required: true }) comments = signal<Comment[]>([]);
@Output() onEdit = new EventEmitter<{ commentId: string; content: string }>();
@Output() onDelete = new EventEmitter<string>();
@Output() edit = new EventEmitter<{ commentId: string; content: string }>();
@Output() delete = new EventEmitter<string>();
editingCommentId = signal<string | null>(null);
editCommentContent = '';
@@ -289,7 +289,7 @@ export class CommentDisplayComponent {
}
saveEdit(commentId: string): void {
this.onEdit.emit({ commentId, content: this.editCommentContent });
this.edit.emit({ commentId, content: this.editCommentContent });
this.cancelEdit();
}
apps/frontend/src/app/components/games/games-list.component.ts
+2 -2
View File
@@ -611,8 +611,8 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
} @else {
<app-comment-display
[comments]="getCommentsSignal(game.id)"
(onEdit)="handleCommentEdit(game.id, $event)"
(onDelete)="deleteComment(game.id, $event)"
(edit)="handleCommentEdit(game.id, $event)"
(delete)="deleteComment(game.id, $event)"
/>
}
</div>
apps/frontend/src/app/components/manga/manga-list.component.ts
+2 -2
View File
@@ -613,8 +613,8 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
<app-comment-display
[comments]="getCommentsSignal(manga.id)"
(onEdit)="handleCommentEdit(manga.id, $event)"
(onDelete)="deleteComment(manga.id, $event)"
(edit)="handleCommentEdit(manga.id, $event)"
(delete)="deleteComment(manga.id, $event)"
/>
</div>
}
apps/frontend/src/app/components/music/music-list.component.ts
+2 -2
View File
@@ -689,8 +689,8 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
<app-comment-display
[comments]="getCommentsSignal(music.id)"
(onEdit)="handleCommentEdit(music.id, $event)"
(onDelete)="deleteComment(music.id, $event)"
(edit)="handleCommentEdit(music.id, $event)"
(delete)="deleteComment(music.id, $event)"
/>
</div>
}
apps/frontend/src/app/components/profile/profile.component.ts
+32 -11
View File
@@ -14,6 +14,7 @@ import { UserService, UserProfileResponse } from '../../services/user.service';
import { ToastService } from '../../services/toast.service';
import { AuthService } from '../../services/auth.service';
import { ReportModalComponent } from '../report-modal/report-modal.component';
import { PrimaryBadge } from '@library/shared-types';
@Component({
selector: 'app-profile',
@@ -58,17 +59,34 @@ import { ReportModalComponent } from '../report-modal/report-modal.component';
</div>
<div class="badges-section">
@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>
@if (profile()!.primaryBadge) {
<!-- Show only the selected primary badge -->
@if (profile()!.primaryBadge === PrimaryBadge.STAFF && profile()!.badges.isStaff) {
<span class="badge badge-staff">Staff</span>
}
@if (profile()!.primaryBadge === PrimaryBadge.MOD && profile()!.badges.isMod) {
<span class="badge badge-mod">Moderator</span>
}
@if (profile()!.primaryBadge === PrimaryBadge.VIP && profile()!.badges.isVip) {
<span class="badge badge-vip">VIP</span>
}
@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>
@@ -426,6 +444,9 @@ export class ProfileComponent implements OnInit {
error = signal<string | null>(null);
reportModalOpen = signal(false);
// Expose PrimaryBadge enum for template
readonly PrimaryBadge = PrimaryBadge;
// Font Awesome icons
faGlobe = faGlobe;
faGithub = faGithub;
apps/frontend/src/app/components/settings/settings.component.ts
+39 -3
View File
@@ -10,7 +10,7 @@ import { FormsModule } from '@angular/forms';
import { UserService, UpdateUserSettingsRequest } from '../../services/user.service';
import { AuthService } from '../../services/auth.service';
import { ToastService } from '../../services/toast.service';
import { User } from '@library/shared-types';
import { User, PrimaryBadge } from '@library/shared-types';
@Component({
selector: 'app-settings',
@@ -69,6 +69,30 @@ import { User } from '@library/shared-types';
></textarea>
<small class="form-help">{{ (formData.bio?.length || 0) }} / 500 characters</small>
</div>
<div class="form-group">
<label for="primaryBadge">Primary Badge</label>
<select
id="primaryBadge"
name="primaryBadge"
[(ngModel)]="formData.primaryBadge"
>
<option [ngValue]="undefined">None (show all badges)</option>
@if (user()!.isStaff) {
<option [ngValue]="PrimaryBadge.STAFF">Staff</option>
}
@if (user()!.isMod) {
<option [ngValue]="PrimaryBadge.MOD">Moderator</option>
}
@if (user()!.isVip) {
<option [ngValue]="PrimaryBadge.VIP">VIP</option>
}
@if (user()!.inDiscord) {
<option [ngValue]="PrimaryBadge.DISCORD">Discord Member</option>
}
</select>
<small class="form-help">Choose one badge to display on your profile, or show all</small>
</div>
</div>
<div class="form-section">
@@ -264,7 +288,8 @@ import { User } from '@library/shared-types';
}
.form-group input[type="text"],
.form-group textarea {
.form-group textarea,
.form-group select {
width: 100%;
padding: 0.75rem;
border: 1px solid rgba(155, 89, 182, 0.5);
@@ -275,8 +300,13 @@ import { User } from '@library/shared-types';
font-family: inherit;
}
.form-group select {
cursor: pointer;
}
.form-group input[type="text"]:focus,
.form-group textarea:focus {
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: var(--accent-colour, #9b59b6);
box-shadow: 0 0 0 2px rgba(155, 89, 182, 0.3);
@@ -375,11 +405,15 @@ export class SettingsComponent implements OnInit {
loading = signal(true);
saving = signal(false);
// Expose PrimaryBadge enum for template
readonly PrimaryBadge = PrimaryBadge;
formData: UpdateUserSettingsRequest & { bio?: string } = {
displayName: '',
slug: '',
bio: '',
profilePublic: true,
primaryBadge: undefined,
website: '',
discordServer: '',
bluesky: '',
@@ -398,6 +432,7 @@ export class SettingsComponent implements OnInit {
slug: userData.slug || '',
bio: userData.bio || '',
profilePublic: userData.profilePublic ?? true,
primaryBadge: userData.primaryBadge || undefined,
website: userData.website || '',
discordServer: userData.discordServer || '',
bluesky: userData.bluesky || '',
@@ -424,6 +459,7 @@ export class SettingsComponent implements OnInit {
slug: this.formData.slug || undefined,
bio: this.formData.bio || undefined,
profilePublic: this.formData.profilePublic,
primaryBadge: this.formData.primaryBadge || undefined,
website: this.formData.website || undefined,
discordServer: this.formData.discordServer || undefined,
bluesky: this.formData.bluesky || undefined,
apps/frontend/src/app/components/shows/shows-list.component.ts
+2 -2
View File
@@ -607,8 +607,8 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
<app-comment-display
[comments]="getCommentsSignal(show.id)"
(onEdit)="handleCommentEdit(show.id, $event)"
(onDelete)="deleteComment(show.id, $event)"
(edit)="handleCommentEdit(show.id, $event)"
(delete)="deleteComment(show.id, $event)"
/>
</div>
}
apps/frontend/src/app/services/user.service.ts
+3 -1
View File
@@ -7,7 +7,7 @@
import { Injectable, inject } from '@angular/core';
import { Observable } from 'rxjs';
import { ApiService } from './api.service';
import { User } from '@library/shared-types';
import { User, PrimaryBadge } from '@library/shared-types';
export interface UserProfileResponse {
id: string;
@@ -16,6 +16,7 @@ export interface UserProfileResponse {
avatar?: string;
bio?: string;
slug?: string;
primaryBadge?: PrimaryBadge;
website?: string;
discordServer?: string;
bluesky?: string;
@@ -43,6 +44,7 @@ export interface UpdateUserSettingsRequest {
displayName?: string;
bio?: string;
profilePublic?: boolean;
primaryBadge?: PrimaryBadge;
website?: string;
discordServer?: string;
bluesky?: string;
shared-types/src/index.ts
+1 -1
View File
@@ -5,7 +5,7 @@
*/
export type * from "./lib/art.types";
export * from "./lib/audit.types";
export type * from "./lib/auth.types";
export * from "./lib/auth.types";
export * from "./lib/book.types";
export type * from "./lib/comment.types";
export type * from "./lib/common.types";
shared-types/src/lib/auth.types.ts
+11
View File
@@ -4,6 +4,15 @@
* @author Naomi Carrigan
*/
/* eslint-disable @typescript-eslint/naming-convention -- Prisma enum values use UPPER_CASE */
enum PrimaryBadge {
STAFF = "STAFF",
MOD = "MOD",
VIP = "VIP",
DISCORD = "DISCORD",
}
/* eslint-enable @typescript-eslint/naming-convention */
interface User {
id: string;
email: string;
@@ -13,6 +22,7 @@ interface User {
displayName?: string;
bio?: string;
profilePublic: boolean;
primaryBadge?: PrimaryBadge;
website?: string;
discordServer?: string;
bluesky?: string;
@@ -47,4 +57,5 @@ interface AuthResponse {
user: User;
}
export { PrimaryBadge };
export type { AuthResponse, JwtPayload, User };