feat: add badges

api/prisma/schema.prisma

@@ -153,6 +153,10 @@ model User {
   avatar       String?
   isAdmin      Boolean   @default(false)
   isBanned     Boolean   @default(false)
+  inDiscord    Boolean   @default(false)
+  isVip        Boolean   @default(false)
+  isMod        Boolean   @default(false)
+  isStaff      Boolean   @default(false)
   createdAt    DateTime  @default(now())
   updatedAt    DateTime  @updatedAt
   comments     Comment[]

api/src/app/plugins/auth.ts

@@ -65,7 +65,7 @@ const authPlugin: FastifyPluginAsync = async (app) => {
   // Register Discord OAuth2
   app.register(fastifyOauth2, {
     name: "oauth2Discord",
-    scope: ["identify", "email"],
+    scope: ["identify", "email", "guilds", "guilds.members.read"],
     credentials: {
       client: {
         id: process.env.DISCORD_CLIENT_ID || "",

api/src/app/routes/auth/index.ts

@@ -28,8 +28,56 @@ const authRoutes: FastifyPluginAsync = async (app) => {
 
       const userData = await discordResponse.json();
 
+      // Check if user is in our Discord server and has special roles
+      let inDiscord = false;
+      let isVip = false;
+      let isMod = false;
+      let isStaff = false;
+      const guildId = process.env.DISCORD_GUILD_ID;
+      const sponsorRoleId = process.env.SPONSOR_ROLE_ID;
+      const modRoleId = process.env.MOD_ROLE_ID;
+      const staffRoleId = process.env.STAFF_ROLE_ID;
+
+      if (guildId) {
+        const guildsResponse = await fetch("https://discord.com/api/users/@me/guilds", {
+          headers: {
+            Authorization: `Bearer ${tokenResult.token.access_token}`,
+          },
+        });
+
+        if (guildsResponse.ok) {
+          const guilds = await guildsResponse.json() as Array<{ id: string }>;
+          inDiscord = guilds.some(guild => guild.id === guildId);
+        }
+
+        // If user is in Discord, check for special roles
+        if (inDiscord) {
+          const memberResponse = await fetch(
+            `https://discord.com/api/users/@me/guilds/${guildId}/member`,
+            {
+              headers: {
+                Authorization: `Bearer ${tokenResult.token.access_token}`,
+              },
+            }
+          );
+
+          if (memberResponse.ok) {
+            const memberData = await memberResponse.json() as { roles: string[] };
+            if (sponsorRoleId) {
+              isVip = memberData.roles.includes(sponsorRoleId);
+            }
+            if (modRoleId) {
+              isMod = memberData.roles.includes(modRoleId);
+            }
+            if (staffRoleId) {
+              isStaff = memberData.roles.includes(staffRoleId);
+            }
+          }
+        }
+      }
+
       // Create or update user in database
-      const user = await authService.createOrUpdateUserFromDiscord(userData);
+      const user = await authService.createOrUpdateUserFromDiscord(userData, inDiscord, isVip, isMod, isStaff);
 
       // Generate JWT
       const jwt = await authService.generateToken(user);

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

@@ -50,13 +50,17 @@ export class AuthService {
       avatarUrl: dbUser.avatar || undefined,
       isAdmin: dbUser.isAdmin,
       isBanned: dbUser.isBanned,
+      inDiscord: dbUser.inDiscord,
+      isVip: dbUser.isVip,
+      isMod: dbUser.isMod,
+      isStaff: dbUser.isStaff,
     };
   }
 
   /**
    * Create or update user from Discord OAuth data.
    */
-  async createOrUpdateUserFromDiscord(discordData: DiscordUser): Promise<User> {
+  async createOrUpdateUserFromDiscord(discordData: DiscordUser, inDiscord: boolean, isVip: boolean, isMod: boolean, isStaff: boolean): Promise<User> {
     const avatarUrl = discordData.avatar
       ? `https://cdn.discordapp.com/avatars/${discordData.id}/${discordData.avatar}.png`
       : undefined;
@@ -72,11 +76,19 @@ export class AuthService {
         email: discordData.email,
         avatar: avatarUrl,
         isAdmin: discordData.id === process.env.ADMIN_DISCORD_ID,
+        inDiscord,
+        isVip,
+        isMod,
+        isStaff,
       },
       update: {
         username: discordData.username,
         email: discordData.email,
         avatar: avatarUrl,
+        inDiscord,
+        isVip,
+        isMod,
+        isStaff,
       },
     });
 
@@ -88,6 +100,10 @@ export class AuthService {
       avatarUrl: dbUser.avatar || undefined,
       isAdmin: dbUser.isAdmin,
       isBanned: dbUser.isBanned,
+      inDiscord: dbUser.inDiscord,
+      isVip: dbUser.isVip,
+      isMod: dbUser.isMod,
+      isStaff: dbUser.isStaff,
     };
   }
 }

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

@@ -60,6 +60,10 @@ export class CommentService {
         id: comment.user.id,
         username: comment.user.username,
         avatar: comment.user.avatar || undefined,
+        inDiscord: comment.user.inDiscord,
+        isVip: comment.user.isVip,
+        isMod: comment.user.isMod,
+        isStaff: comment.user.isStaff,
       },
       gameId: comment.gameId || undefined,
       bookId: comment.bookId || undefined,

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

@@ -23,6 +23,10 @@ export class UserService {
       avatarUrl: user.avatar || undefined,
       isAdmin: user.isAdmin,
       isBanned: user.isBanned,
+      inDiscord: user.inDiscord,
+      isVip: user.isVip,
+      isMod: user.isMod,
+      isStaff: user.isStaff,
     }));
   }
 
@@ -43,6 +47,10 @@ export class UserService {
       avatarUrl: user.avatar || undefined,
       isAdmin: user.isAdmin,
       isBanned: user.isBanned,
+      inDiscord: user.inDiscord,
+      isVip: user.isVip,
+      isMod: user.isMod,
+      isStaff: user.isStaff,
     };
   }
 
@@ -60,6 +68,10 @@ export class UserService {
       avatarUrl: user.avatar || undefined,
       isAdmin: user.isAdmin,
       isBanned: user.isBanned,
+      inDiscord: user.inDiscord,
+      isVip: user.isVip,
+      isMod: user.isMod,
+      isStaff: user.isStaff,
     };
   }
 
@@ -77,6 +89,10 @@ export class UserService {
       avatarUrl: user.avatar || undefined,
       isAdmin: user.isAdmin,
       isBanned: user.isBanned,
+      inDiscord: user.inDiscord,
+      isVip: user.isVip,
+      isMod: user.isMod,
+      isStaff: user.isStaff,
     };
   }
 

apps/frontend/src/app/components/admin/admin-users.component.ts

@@ -42,6 +42,18 @@ import { User } from '@library/shared-types';
                   @if (user.isBanned) {
                     <span class="banned-badge">Banned</span>
                   }
+                  @if (user.inDiscord) {
+                    <span class="discord-badge">Discord</span>
+                  }
+                  @if (user.isVip) {
+                    <span class="vip-badge">VIP</span>
+                  }
+                  @if (user.isMod) {
+                    <span class="mod-badge">Mod</span>
+                  }
+                  @if (user.isStaff) {
+                    <span class="staff-badge">Staff</span>
+                  }
                 </div>
               </div>
               <div class="user-actions">
@@ -167,6 +179,49 @@ import { User } from '@library/shared-types';
       width: fit-content;
     }
 
+    .discord-badge {
+      display: inline-block;
+      background: #5865f2;
+      color: var(--witch-moon);
+      padding: 0.15rem 0.5rem;
+      border-radius: 4px;
+      font-size: 0.75rem;
+      width: fit-content;
+    }
+
+    .vip-badge {
+      display: inline-block;
+      background: linear-gradient(135deg, #ffd700, #ffaa00);
+      color: #1a1a1a;
+      padding: 0.15rem 0.5rem;
+      border-radius: 4px;
+      font-size: 0.75rem;
+      font-weight: 600;
+      width: fit-content;
+    }
+
+    .mod-badge {
+      display: inline-block;
+      background: linear-gradient(135deg, #00b894, #00cec9);
+      color: var(--witch-moon);
+      padding: 0.15rem 0.5rem;
+      border-radius: 4px;
+      font-size: 0.75rem;
+      font-weight: 600;
+      width: fit-content;
+    }
+
+    .staff-badge {
+      display: inline-block;
+      background: linear-gradient(135deg, #e84393, #fd79a8);
+      color: var(--witch-moon);
+      padding: 0.15rem 0.5rem;
+      border-radius: 4px;
+      font-size: 0.75rem;
+      font-weight: 600;
+      width: fit-content;
+    }
+
     .user-actions {
       display: flex;
       gap: 0.5rem;

apps/frontend/src/app/components/art/art-gallery.component.ts

@@ -238,6 +238,18 @@ import { Art, CreateArtDto, UpdateArtDto, Comment } from '@library/shared-types'
                                 <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>
+                              }
                               <span class="comment-date">{{ formatDate(comment.createdAt) }}</span>
                               @if (canEditComment(comment)) {
                                 <button (click)="startEditComment(art.id, comment)" class="btn btn-secondary btn-xs">Edit</button>
@@ -628,6 +640,42 @@ import { Art, CreateArtDto, UpdateArtDto, Comment } from '@library/shared-types'
       color: var(--witch-plum);
     }
 
+    .discord-badge {
+      background: #5865f2;
+      color: white;
+      padding: 0.1rem 0.4rem;
+      border-radius: 3px;
+      font-size: 0.7rem;
+      font-weight: 500;
+    }
+
+    .vip-badge {
+      background: linear-gradient(135deg, #ffd700, #ffaa00);
+      color: #1a1a1a;
+      padding: 0.1rem 0.4rem;
+      border-radius: 3px;
+      font-size: 0.7rem;
+      font-weight: 600;
+    }
+
+    .mod-badge {
+      background: linear-gradient(135deg, #00b894, #00cec9);
+      color: white;
+      padding: 0.1rem 0.4rem;
+      border-radius: 3px;
+      font-size: 0.7rem;
+      font-weight: 600;
+    }
+
+    .staff-badge {
+      background: linear-gradient(135deg, #e84393, #fd79a8);
+      color: white;
+      padding: 0.1rem 0.4rem;
+      border-radius: 3px;
+      font-size: 0.7rem;
+      font-weight: 600;
+    }
+
     .comment-date {
       font-size: 0.75rem;
       color: var(--witch-mauve);

apps/frontend/src/app/components/books/books-list.component.ts

@@ -345,6 +345,18 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment } from '@librar
                                 <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>
+                              }
                               <span class="comment-date">{{ formatDate(comment.createdAt) }}</span>
                               @if (canEditComment(comment)) {
                                 <button (click)="startEditComment(book.id, comment)" class="btn btn-secondary btn-xs">Edit</button>
@@ -705,6 +717,42 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment } from '@librar
       color: var(--witch-plum);
     }
 
+    .discord-badge {
+      background: #5865f2;
+      color: white;
+      padding: 0.1rem 0.4rem;
+      border-radius: 3px;
+      font-size: 0.7rem;
+      font-weight: 500;
+    }
+
+    .vip-badge {
+      background: linear-gradient(135deg, #ffd700, #ffaa00);
+      color: #1a1a1a;
+      padding: 0.1rem 0.4rem;
+      border-radius: 3px;
+      font-size: 0.7rem;
+      font-weight: 600;
+    }
+
+    .mod-badge {
+      background: linear-gradient(135deg, #00b894, #00cec9);
+      color: white;
+      padding: 0.1rem 0.4rem;
+      border-radius: 3px;
+      font-size: 0.7rem;
+      font-weight: 600;
+    }
+
+    .staff-badge {
+      background: linear-gradient(135deg, #e84393, #fd79a8);
+      color: white;
+      padding: 0.1rem 0.4rem;
+      border-radius: 3px;
+      font-size: 0.7rem;
+      font-weight: 600;
+    }
+
     .comment-date {
       font-size: 0.75rem;
       color: var(--witch-mauve);

apps/frontend/src/app/components/games/games-list.component.ts

@@ -310,6 +310,18 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment } from '@librar
                                 <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>
+                              }
                               <span class="comment-date">{{ formatDate(comment.createdAt) }}</span>
                               @if (canEditComment(comment)) {
                                 <button (click)="startEditComment(game.id, comment)" class="btn btn-secondary btn-xs">Edit</button>
@@ -588,6 +600,42 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment } from '@librar
       color: #374151;
     }
 
+    .discord-badge {
+      background: #5865f2;
+      color: white;
+      padding: 0.1rem 0.4rem;
+      border-radius: 3px;
+      font-size: 0.7rem;
+      font-weight: 500;
+    }
+
+    .vip-badge {
+      background: linear-gradient(135deg, #ffd700, #ffaa00);
+      color: #1a1a1a;
+      padding: 0.1rem 0.4rem;
+      border-radius: 3px;
+      font-size: 0.7rem;
+      font-weight: 600;
+    }
+
+    .mod-badge {
+      background: linear-gradient(135deg, #00b894, #00cec9);
+      color: white;
+      padding: 0.1rem 0.4rem;
+      border-radius: 3px;
+      font-size: 0.7rem;
+      font-weight: 600;
+    }
+
+    .staff-badge {
+      background: linear-gradient(135deg, #e84393, #fd79a8);
+      color: white;
+      padding: 0.1rem 0.4rem;
+      border-radius: 3px;
+      font-size: 0.7rem;
+      font-weight: 600;
+    }
+
     .comment-date {
       font-size: 0.75rem;
       color: #6b7280;

apps/frontend/src/app/components/manga/manga-list.component.ts

@@ -310,6 +310,18 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment } from '@li
                                 <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>
+                              }
                               <span class="comment-date">{{ formatDate(comment.createdAt) }}</span>
                               @if (canEditComment(comment)) {
                                 <button (click)="startEditComment(manga.id, comment)" class="btn btn-secondary btn-xs">Edit</button>
@@ -590,6 +602,42 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment } from '@li
       color: #374151;
     }
 
+    .discord-badge {
+      background: #5865f2;
+      color: white;
+      padding: 0.1rem 0.4rem;
+      border-radius: 3px;
+      font-size: 0.7rem;
+      font-weight: 500;
+    }
+
+    .vip-badge {
+      background: linear-gradient(135deg, #ffd700, #ffaa00);
+      color: #1a1a1a;
+      padding: 0.1rem 0.4rem;
+      border-radius: 3px;
+      font-size: 0.7rem;
+      font-weight: 600;
+    }
+
+    .mod-badge {
+      background: linear-gradient(135deg, #00b894, #00cec9);
+      color: white;
+      padding: 0.1rem 0.4rem;
+      border-radius: 3px;
+      font-size: 0.7rem;
+      font-weight: 600;
+    }
+
+    .staff-badge {
+      background: linear-gradient(135deg, #e84393, #fd79a8);
+      color: white;
+      padding: 0.1rem 0.4rem;
+      border-radius: 3px;
+      font-size: 0.7rem;
+      font-weight: 600;
+    }
+
     .comment-date {
       font-size: 0.75rem;
       color: #6b7280;

apps/frontend/src/app/components/music/music-list.component.ts

@@ -383,6 +383,18 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment
                                 <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>
+                              }
                               <span class="comment-date">{{ formatDate(comment.createdAt) }}</span>
                               @if (canEditComment(comment)) {
                                 <button (click)="startEditComment(music.id, comment)" class="btn btn-secondary btn-xs">Edit</button>
@@ -781,6 +793,42 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment
       color: var(--witch-plum);
     }
 
+    .discord-badge {
+      background: #5865f2;
+      color: white;
+      padding: 0.1rem 0.4rem;
+      border-radius: 3px;
+      font-size: 0.7rem;
+      font-weight: 500;
+    }
+
+    .vip-badge {
+      background: linear-gradient(135deg, #ffd700, #ffaa00);
+      color: #1a1a1a;
+      padding: 0.1rem 0.4rem;
+      border-radius: 3px;
+      font-size: 0.7rem;
+      font-weight: 600;
+    }
+
+    .mod-badge {
+      background: linear-gradient(135deg, #00b894, #00cec9);
+      color: white;
+      padding: 0.1rem 0.4rem;
+      border-radius: 3px;
+      font-size: 0.7rem;
+      font-weight: 600;
+    }
+
+    .staff-badge {
+      background: linear-gradient(135deg, #e84393, #fd79a8);
+      color: white;
+      padding: 0.1rem 0.4rem;
+      border-radius: 3px;
+      font-size: 0.7rem;
+      font-weight: 600;
+    }
+
     .comment-date {
       font-size: 0.75rem;
       color: var(--witch-mauve);

apps/frontend/src/app/components/shows/shows-list.component.ts

@@ -306,6 +306,18 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment } fro
                                 <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>
+                              }
                               <span class="comment-date">{{ formatDate(comment.createdAt) }}</span>
                               @if (canEditComment(comment)) {
                                 <button (click)="startEditComment(show.id, comment)" class="btn btn-secondary btn-xs">Edit</button>
@@ -585,6 +597,42 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment } fro
       color: #374151;
     }
 
+    .discord-badge {
+      background: #5865f2;
+      color: white;
+      padding: 0.1rem 0.4rem;
+      border-radius: 3px;
+      font-size: 0.7rem;
+      font-weight: 500;
+    }
+
+    .vip-badge {
+      background: linear-gradient(135deg, #ffd700, #ffaa00);
+      color: #1a1a1a;
+      padding: 0.1rem 0.4rem;
+      border-radius: 3px;
+      font-size: 0.7rem;
+      font-weight: 600;
+    }
+
+    .mod-badge {
+      background: linear-gradient(135deg, #00b894, #00cec9);
+      color: white;
+      padding: 0.1rem 0.4rem;
+      border-radius: 3px;
+      font-size: 0.7rem;
+      font-weight: 600;
+    }
+
+    .staff-badge {
+      background: linear-gradient(135deg, #e84393, #fd79a8);
+      color: white;
+      padding: 0.1rem 0.4rem;
+      border-radius: 3px;
+      font-size: 0.7rem;
+      font-weight: 600;
+    }
+
     .comment-date {
       font-size: 0.75rem;
       color: #6b7280;

package.json

@@ -12,7 +12,9 @@
     "start:api:dev": "nx serve api",
     "start:frontend:dev": "nx serve frontend",
     "start:prod": "NODE_ENV=production node dist/api/main.js",
-    "start": "NODE_ENV=production op run --env-file=prod.env -- node dist/api/main.js"
+    "start": "NODE_ENV=production op run --env-file=prod.env -- node dist/api/main.js",
+    "db:push": "op run --env-file=prod.env -- pnpm prisma db push --schema api/prisma/schema.prisma",
+    "db:gen": "pnpm prisma generate --schema api/prisma/schema.prisma"
   },
   "private": true,
   "dependencies": {

prod.env

@@ -11,5 +11,11 @@ DISCORD_CLIENT_SECRET="op://Environment Variables - Naomi/Library/discord client
 # Admin Configuration
 ADMIN_DISCORD_ID="op://Environment Variables - Naomi/Library/admin discord id"
 
+# Discord Server
+DISCORD_GUILD_ID="op://Environment Variables - Naomi/Library/discord server id"
+SPONSOR_ROLE_ID="op://Environment Variables - Naomi/Library/sponsor role id"
+MOD_ROLE_ID="op://Environment Variables - Naomi/Library/mod role id"
+STAFF_ROLE_ID="op://Environment Variables - Naomi/Library/staff role id"
+
 # Application URL
 BASE_URL="op://Environment Variables - Naomi/Library/base url"

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

@@ -12,6 +12,10 @@ export interface User {
   discordId: string;
   isAdmin: boolean;
   isBanned: boolean;
+  inDiscord: boolean;
+  isVip: boolean;
+  isMod: boolean;
+  isStaff: boolean;
 }
 
 export interface JwtPayload {

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

@@ -8,6 +8,10 @@ export interface CommentUser {
   id: string;
   username: string;
   avatar?: string;
+  inDiscord?: boolean;
+  isVip?: boolean;
+  isMod?: boolean;
+  isStaff?: boolean;
 }
 
 export interface Comment {