feat: add social links with validation and Font Awesome icons

Added comprehensive social links functionality to user profiles:

**New Social Platforms:**
- Website (full URL validation)
- GitHub (username format)
- Bluesky (handle format)
- LinkedIn (username format)
- Twitch (username format)
- YouTube (handle or channel ID format)
- Discord Server (invite code format)

**Features:**
- Database schema updated with 7 new optional social link fields
- Backend services and API routes updated to handle all social links
- Settings form with input fields and helpful validation hints
- Profile display with Font Awesome icons for each platform
- Regex validation patterns for all fields with visual feedback
- Green border for valid input, red border for invalid input
- All form inputs use consistent type="text" for uniform styling
- Discord accepts just invite code (constructs full URL automatically)

**Technical Changes:**
- Installed @fortawesome/angular-fontawesome with pinned versions
- Replaced emoji icons with proper Font Awesome components
- Added FontAwesomeModule to profile component
- Updated all User type interfaces across frontend and backend
- Updated UserService mappings in all methods
- Added comprehensive regex patterns matching platform requirements

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

api/prisma/schema.prisma

@@ -182,6 +182,17 @@ model User {
   username      String
   email         String         @unique
   avatar        String?
+  slug          String?
+  displayName   String?
+  bio           String?
+  profilePublic Boolean        @default(true)
+  website       String?
+  discordServer String?
+  bluesky       String?
+  github        String?
+  linkedin      String?
+  twitch        String?
+  youtube       String?
   isAdmin       Boolean        @default(false)
   isBanned      Boolean        @default(false)
   inDiscord     Boolean        @default(false)
@@ -194,6 +205,8 @@ model User {
   suggestions   Suggestion[]
   likes         Like[]
   refreshTokens RefreshToken[]
+
+  @@index([slug], map: "User_slug_key")
 }
 
 model Comment {

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

@@ -10,6 +10,49 @@ import { UserService } from "../../services/user.service";
 import { AuditService } from "../../services/audit.service";
 import { adminGuard } from "../../middleware/admin-guard";
 
+interface UpdateUserSettingsBody {
+  slug?: string;
+  displayName?: string;
+  bio?: string;
+  profilePublic?: boolean;
+  website?: string;
+  discordServer?: string;
+  bluesky?: string;
+  github?: string;
+  linkedin?: string;
+  twitch?: string;
+  youtube?: string;
+}
+
+interface UserProfileResponse {
+  id: string;
+  username: string;
+  displayName?: string;
+  avatar?: string;
+  bio?: string;
+  slug?: string;
+  website?: string;
+  discordServer?: string;
+  bluesky?: string;
+  github?: string;
+  linkedin?: string;
+  twitch?: string;
+  youtube?: string;
+  badges: {
+    isStaff: boolean;
+    isMod: boolean;
+    isVip: boolean;
+    inDiscord: boolean;
+  };
+  stats: {
+    suggestionsCount: number;
+    suggestionsAcceptedCount: number;
+    likesCount: number;
+    commentsCount: number;
+  };
+  createdAt: Date;
+}
+
 const usersRoutes: FastifyPluginAsync = async (app) => {
   const userService = new UserService();
 
@@ -23,6 +66,107 @@ const usersRoutes: FastifyPluginAsync = async (app) => {
     }
   );
 
+  app.get<{ Reply: User }>(
+    "/me",
+    {
+      preValidation: [app.authenticate],
+    },
+    async (request) => {
+      const currentUser = request.user as { id: string };
+      const user = await userService.getUserById(currentUser.id);
+      if (!user) {
+        throw new Error("User not found");
+      }
+      return user;
+    }
+  );
+
+  app.put<{ Body: UpdateUserSettingsBody; Reply: User | { error: string } }>(
+    "/me",
+    {
+      preValidation: [app.authenticate],
+      preHandler: [app.csrfProtection],
+    },
+    async (request, reply) => {
+      const currentUser = request.user as { id: string };
+      const updates = request.body;
+
+      // If slug is being updated, check if it's unique
+      if (updates.slug) {
+        const existingUser = await userService.getUserBySlug(updates.slug);
+        if (existingUser && existingUser.id !== currentUser.id) {
+          return reply.code(400).send({ error: "Slug already taken" });
+        }
+      }
+
+      const updatedUser = await userService.updateUserSettings(
+        currentUser.id,
+        updates
+      );
+
+      if (!updatedUser) {
+        return reply.code(404).send({ error: "User not found" });
+      }
+
+      return updatedUser;
+    }
+  );
+
+  app.get<{
+    Params: { identifier: string };
+    Reply: UserProfileResponse | { error: string };
+  }>(
+    "/profile/:identifier",
+    async (request, reply) => {
+      const { identifier } = request.params;
+
+      try {
+        const profile = await userService.getUserProfile(identifier);
+
+        if (!profile) {
+          return reply.code(404).send({ error: "User not found" });
+        }
+
+      if (!profile.profilePublic) {
+        // Check if the requesting user is viewing their own profile
+        const currentUser = request.user as { id: string } | undefined;
+        if (!currentUser || currentUser.id !== profile.id) {
+          return reply
+            .code(403)
+            .send({ error: "This profile is private" });
+        }
+      }
+
+      return {
+        id: profile.id,
+        username: profile.username,
+        displayName: profile.displayName,
+        avatar: profile.avatar,
+        bio: profile.bio,
+        slug: profile.slug,
+        website: profile.website,
+        discordServer: profile.discordServer,
+        bluesky: profile.bluesky,
+        github: profile.github,
+        linkedin: profile.linkedin,
+        twitch: profile.twitch,
+        youtube: profile.youtube,
+        badges: {
+          isStaff: profile.isStaff,
+          isMod: profile.isMod,
+          isVip: profile.isVip,
+          inDiscord: profile.inDiscord,
+        },
+        stats: profile.stats,
+        createdAt: profile.createdAt,
+      };
+      } catch (error) {
+        console.error("Error fetching profile:", error);
+        return reply.code(500).send({ error: "Failed to fetch profile" });
+      }
+    }
+  );
+
   app.get<{ Params: { id: string }; Reply: User | null }>(
     "/:id",
     {

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

@@ -71,6 +71,15 @@ export class AuthService {
       username: dbUser.username,
       email: dbUser.email,
       avatar: dbUser.avatar || undefined,
+      slug: dbUser.slug || undefined,
+      displayName: dbUser.displayName || undefined,
+      bio: dbUser.bio || undefined,
+      profilePublic: dbUser.profilePublic,
+      website: dbUser.website || undefined,
+      discordServer: dbUser.discordServer || undefined,
+      bluesky: dbUser.bluesky || undefined,
+      github: dbUser.github || undefined,
+      linkedin: dbUser.linkedin || undefined,
       isAdmin: dbUser.isAdmin,
       isBanned: dbUser.isBanned,
       inDiscord: dbUser.inDiscord,
@@ -167,6 +176,15 @@ export class AuthService {
       username: dbUser.username,
       email: dbUser.email,
       avatar: dbUser.avatar || undefined,
+      slug: dbUser.slug || undefined,
+      displayName: dbUser.displayName || undefined,
+      bio: dbUser.bio || undefined,
+      profilePublic: dbUser.profilePublic,
+      website: dbUser.website || undefined,
+      discordServer: dbUser.discordServer || undefined,
+      bluesky: dbUser.bluesky || undefined,
+      github: dbUser.github || undefined,
+      linkedin: dbUser.linkedin || undefined,
       isAdmin: dbUser.isAdmin,
       isBanned: dbUser.isBanned,
       inDiscord: dbUser.inDiscord,
@@ -217,6 +235,15 @@ export class AuthService {
       username: dbUser.username,
       email: dbUser.email,
       avatar: dbUser.avatar || undefined,
+      slug: dbUser.slug || undefined,
+      displayName: dbUser.displayName || undefined,
+      bio: dbUser.bio || undefined,
+      profilePublic: dbUser.profilePublic,
+      website: dbUser.website || undefined,
+      discordServer: dbUser.discordServer || undefined,
+      bluesky: dbUser.bluesky || undefined,
+      github: dbUser.github || undefined,
+      linkedin: dbUser.linkedin || undefined,
       isAdmin: dbUser.isAdmin,
       isBanned: dbUser.isBanned,
       inDiscord: dbUser.inDiscord,

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

@@ -6,6 +6,7 @@
 
 import { User } from "@library/shared-types";
 import { prisma } from "../lib/prisma";
+import { SuggestionStatus } from "@prisma/client";
 
 export class UserService {
   private prisma = prisma;
@@ -21,6 +22,17 @@ export class UserService {
       username: user.username,
       email: user.email,
       avatar: user.avatar || undefined,
+      slug: user.slug || undefined,
+      displayName: user.displayName || undefined,
+      bio: user.bio || undefined,
+      profilePublic: user.profilePublic,
+      website: user.website || undefined,
+      discordServer: user.discordServer || undefined,
+      bluesky: user.bluesky || undefined,
+      github: user.github || undefined,
+      linkedin: user.linkedin || undefined,
+      twitch: user.twitch || undefined,
+      youtube: user.youtube || undefined,
       isAdmin: user.isAdmin,
       isBanned: user.isBanned,
       inDiscord: user.inDiscord,
@@ -45,6 +57,17 @@ export class UserService {
       username: user.username,
       email: user.email,
       avatar: user.avatar || undefined,
+      slug: user.slug || undefined,
+      displayName: user.displayName || undefined,
+      bio: user.bio || undefined,
+      profilePublic: user.profilePublic,
+      website: user.website || undefined,
+      discordServer: user.discordServer || undefined,
+      bluesky: user.bluesky || undefined,
+      github: user.github || undefined,
+      linkedin: user.linkedin || undefined,
+      twitch: user.twitch || undefined,
+      youtube: user.youtube || undefined,
       isAdmin: user.isAdmin,
       isBanned: user.isBanned,
       inDiscord: user.inDiscord,
@@ -66,6 +89,17 @@ export class UserService {
       username: user.username,
       email: user.email,
       avatar: user.avatar || undefined,
+      slug: user.slug || undefined,
+      displayName: user.displayName || undefined,
+      bio: user.bio || undefined,
+      profilePublic: user.profilePublic,
+      website: user.website || undefined,
+      discordServer: user.discordServer || undefined,
+      bluesky: user.bluesky || undefined,
+      github: user.github || undefined,
+      linkedin: user.linkedin || undefined,
+      twitch: user.twitch || undefined,
+      youtube: user.youtube || undefined,
       isAdmin: user.isAdmin,
       isBanned: user.isBanned,
       inDiscord: user.inDiscord,
@@ -87,6 +121,17 @@ export class UserService {
       username: user.username,
       email: user.email,
       avatar: user.avatar || undefined,
+      slug: user.slug || undefined,
+      displayName: user.displayName || undefined,
+      bio: user.bio || undefined,
+      profilePublic: user.profilePublic,
+      website: user.website || undefined,
+      discordServer: user.discordServer || undefined,
+      bluesky: user.bluesky || undefined,
+      github: user.github || undefined,
+      linkedin: user.linkedin || undefined,
+      twitch: user.twitch || undefined,
+      youtube: user.youtube || undefined,
       isAdmin: user.isAdmin,
       isBanned: user.isBanned,
       inDiscord: user.inDiscord,
@@ -104,4 +149,172 @@ export class UserService {
 
     return user?.isBanned ?? false;
   }
+
+  async getUserBySlug(slug: string): Promise<User | null> {
+    const user = await this.prisma.user.findFirst({
+      where: { slug },
+    });
+
+    if (!user) {
+      return null;
+    }
+
+    return {
+      id: user.id,
+      discordId: user.discordId,
+      username: user.username,
+      email: user.email,
+      avatar: user.avatar || undefined,
+      slug: user.slug || undefined,
+      displayName: user.displayName || undefined,
+      bio: user.bio || undefined,
+      profilePublic: user.profilePublic,
+      website: user.website || undefined,
+      discordServer: user.discordServer || undefined,
+      bluesky: user.bluesky || undefined,
+      github: user.github || undefined,
+      linkedin: user.linkedin || undefined,
+      twitch: user.twitch || undefined,
+      youtube: user.youtube || undefined,
+      isAdmin: user.isAdmin,
+      isBanned: user.isBanned,
+      inDiscord: user.inDiscord,
+      isVip: user.isVip,
+      isMod: user.isMod,
+      isStaff: user.isStaff,
+    };
+  }
+
+  async updateUserSettings(
+    id: string,
+    updates: {
+      slug?: string;
+      displayName?: string;
+      bio?: string;
+      profilePublic?: boolean;
+      website?: string;
+      discordServer?: string;
+      bluesky?: string;
+      github?: string;
+      linkedin?: string;
+      twitch?: string;
+      youtube?: string;
+    }
+  ): Promise<User | null> {
+    const user = await this.prisma.user.update({
+      where: { id },
+      data: updates,
+    });
+
+    return {
+      id: user.id,
+      discordId: user.discordId,
+      username: user.username,
+      email: user.email,
+      avatar: user.avatar || undefined,
+      slug: user.slug || undefined,
+      displayName: user.displayName || undefined,
+      bio: user.bio || undefined,
+      profilePublic: user.profilePublic,
+      website: user.website || undefined,
+      discordServer: user.discordServer || undefined,
+      bluesky: user.bluesky || undefined,
+      github: user.github || undefined,
+      linkedin: user.linkedin || undefined,
+      twitch: user.twitch || undefined,
+      youtube: user.youtube || undefined,
+      isAdmin: user.isAdmin,
+      isBanned: user.isBanned,
+      inDiscord: user.inDiscord,
+      isVip: user.isVip,
+      isMod: user.isMod,
+      isStaff: user.isStaff,
+    };
+  }
+
+  async getUserProfile(identifier: string): Promise<{
+    id: string;
+    username: string;
+    displayName?: string | null;
+    avatar?: string | null;
+    bio?: string | null;
+    slug?: string | null;
+    website?: string | null;
+    discordServer?: string | null;
+    bluesky?: string | null;
+    github?: string | null;
+    linkedin?: string | null;
+    twitch?: string | null;
+    youtube?: string | null;
+    isStaff: boolean;
+    isMod: boolean;
+    isVip: boolean;
+    inDiscord: boolean;
+    profilePublic: boolean;
+    createdAt: Date;
+    stats: {
+      suggestionsCount: number;
+      suggestionsAcceptedCount: number;
+      likesCount: number;
+      commentsCount: number;
+    };
+  } | null> {
+    // Try to find by slug first, then by id if it's a valid ObjectId
+    const isValidObjectId = /^[0-9a-f]{24}$/i.test(identifier);
+
+    const whereConditions = isValidObjectId
+      ? [{ slug: identifier }, { id: identifier }]
+      : [{ slug: identifier }];
+
+    const user = await this.prisma.user.findFirst({
+      where: {
+        OR: whereConditions,
+      },
+      include: {
+        suggestions: {
+          select: { id: true, status: true },
+        },
+        likes: {
+          select: { id: true },
+        },
+        comments: {
+          select: { id: true },
+        },
+      },
+    });
+
+    if (!user) {
+      return null;
+    }
+
+    return {
+      id: user.id,
+      username: user.username,
+      displayName: user.displayName,
+      avatar: user.avatar,
+      bio: user.bio,
+      slug: user.slug,
+      website: user.website,
+      discordServer: user.discordServer,
+      bluesky: user.bluesky,
+      github: user.github,
+      linkedin: user.linkedin,
+      twitch: user.twitch,
+      youtube: user.youtube,
+      isStaff: user.isStaff,
+      isMod: user.isMod,
+      isVip: user.isVip,
+      inDiscord: user.inDiscord,
+      profilePublic: user.profilePublic,
+      createdAt: user.createdAt,
+      stats: {
+        suggestionsCount: user.suggestions.length,
+        suggestionsAcceptedCount: user.suggestions.filter(
+          (suggestion) => suggestion.status === SuggestionStatus.ACCEPTED
+        ).length,
+        likesCount: user.likes.length,
+        commentsCount: user.comments.length,
+      },
+    };
+  }
 }

apps/frontend/src/app/app.routes.ts

@@ -49,6 +49,14 @@ export const appRoutes: Route[] = [
     path: 'my-likes',
     loadComponent: () => import('./components/my-likes/my-likes.component').then(m => m.MyLikesComponent)
   },
+  {
+    path: 'profile/:identifier',
+    loadComponent: () => import('./components/profile/profile.component').then(m => m.ProfileComponent)
+  },
+  {
+    path: 'settings',
+    loadComponent: () => import('./components/settings/settings.component').then(m => m.SettingsComponent)
+  },
   {
     path: '**',
     redirectTo: ''

apps/frontend/src/app/components/header/header.component.ts

@@ -50,6 +50,8 @@ import { ApiService } from '../../services/api.service';
               }
               @if (showDropdown()) {
                 <div class="dropdown-menu">
+                  <a [routerLink]="['/profile', user.slug || user.id]" class="dropdown-item" (click)="closeDropdown()">My Profile</a>
+                  <a routerLink="/settings" class="dropdown-item" (click)="closeDropdown()">Settings</a>
                   @if (!user.isAdmin) {
                     <a routerLink="/my-suggestions" class="dropdown-item" (click)="closeDropdown()">My Suggestions</a>
                   }

apps/frontend/src/app/components/profile/profile.component.ts

@@ -0,0 +1,415 @@
+/**
+ * @copyright 2026 NHCarrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+
+import { Component, inject, signal, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faGlobe, faCloud } from '@fortawesome/free-solid-svg-icons';
+import { faGithub, faLinkedin, faTwitch, faYoutube, faDiscord } from '@fortawesome/free-brands-svg-icons';
+import { UserService, UserProfileResponse } from '../../services/user.service';
+import { ToastService } from '../../services/toast.service';
+
+@Component({
+  selector: 'app-profile',
+  standalone: true,
+  imports: [CommonModule, FontAwesomeModule],
+  template: `
+    <div class="profile-container">
+      @if (loading()) {
+        <div class="loading">Loading profile...</div>
+      } @else if (error()) {
+        <div class="error">{{ error() }}</div>
+      } @else if (profile()) {
+        <div class="profile-card">
+          <div class="profile-header">
+            @if (profile()?.avatar) {
+              <img [src]="profile()!.avatar" [alt]="profile()!.username" class="profile-avatar" />
+            } @else {
+              <div class="profile-avatar-placeholder">
+                {{ profile()!.username[0]?.toUpperCase() }}
+              </div>
+            }
+            <div class="profile-info">
+              <h1 class="profile-username">{{ profile()!.displayName || profile()!.username }}</h1>
+              @if (profile()!.displayName) {
+                <p class="profile-handle">\@{{ profile()!.username }}</p>
+              }
+              @if (profile()!.slug) {
+                <p class="profile-slug">library.nhcarrigan.com/profile/{{ profile()!.slug }}</p>
+              }
+            </div>
+          </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>
+            }
+          </div>
+
+          @if (profile()!.bio) {
+            <div class="bio-section">
+              <p class="bio-text">{{ profile()!.bio }}</p>
+            </div>
+          }
+
+          @if (profile()!.website || profile()!.github || profile()!.bluesky || profile()!.linkedin || profile()!.twitch || profile()!.youtube || profile()!.discordServer) {
+            <div class="social-links-section">
+              <h2>Social Links</h2>
+              <div class="social-links">
+                @if (profile()!.website) {
+                  <a [href]="profile()!.website" target="_blank" rel="noopener noreferrer" class="social-link" title="Website">
+                    <fa-icon [icon]="faGlobe" class="icon"></fa-icon>
+                    <span class="label">Website</span>
+                  </a>
+                }
+                @if (profile()!.github) {
+                  <a [href]="'https://github.com/' + profile()!.github" target="_blank" rel="noopener noreferrer" class="social-link" title="GitHub">
+                    <fa-icon [icon]="faGithub" class="icon"></fa-icon>
+                    <span class="label">GitHub</span>
+                  </a>
+                }
+                @if (profile()!.bluesky) {
+                  <a [href]="'https://bsky.app/profile/' + profile()!.bluesky" target="_blank" rel="noopener noreferrer" class="social-link" title="Bluesky">
+                    <fa-icon [icon]="faCloud" class="icon"></fa-icon>
+                    <span class="label">Bluesky</span>
+                  </a>
+                }
+                @if (profile()!.linkedin) {
+                  <a [href]="'https://linkedin.com/in/' + profile()!.linkedin" target="_blank" rel="noopener noreferrer" class="social-link" title="LinkedIn">
+                    <fa-icon [icon]="faLinkedin" class="icon"></fa-icon>
+                    <span class="label">LinkedIn</span>
+                  </a>
+                }
+                @if (profile()!.twitch) {
+                  <a [href]="'https://twitch.tv/' + profile()!.twitch" target="_blank" rel="noopener noreferrer" class="social-link" title="Twitch">
+                    <fa-icon [icon]="faTwitch" class="icon"></fa-icon>
+                    <span class="label">Twitch</span>
+                  </a>
+                }
+                @if (profile()!.youtube) {
+                  <a [href]="'https://youtube.com/' + profile()!.youtube" target="_blank" rel="noopener noreferrer" class="social-link" title="YouTube">
+                    <fa-icon [icon]="faYoutube" class="icon"></fa-icon>
+                    <span class="label">YouTube</span>
+                  </a>
+                }
+                @if (profile()!.discordServer) {
+                  <a [href]="'https://discord.gg/' + profile()!.discordServer" target="_blank" rel="noopener noreferrer" class="social-link" title="Discord Server">
+                    <fa-icon [icon]="faDiscord" class="icon"></fa-icon>
+                    <span class="label">Discord</span>
+                  </a>
+                }
+              </div>
+            </div>
+          }
+
+          <div class="stats-section">
+            <h2>Activity Statistics</h2>
+            <div class="stats-grid">
+              <div class="stat-card">
+                <span class="stat-value">{{ profile()!.stats.suggestionsCount }}</span>
+                <span class="stat-label">Suggestions</span>
+              </div>
+              <div class="stat-card">
+                <span class="stat-value">{{ profile()!.stats.suggestionsAcceptedCount }}</span>
+                <span class="stat-label">Accepted</span>
+              </div>
+              <div class="stat-card">
+                <span class="stat-value">{{ profile()!.stats.likesCount }}</span>
+                <span class="stat-label">Likes</span>
+              </div>
+              <div class="stat-card">
+                <span class="stat-value">{{ profile()!.stats.commentsCount }}</span>
+                <span class="stat-label">Comments</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="footer-section">
+            <p class="member-since">Member since {{ formatDate(profile()!.createdAt) }}</p>
+          </div>
+        </div>
+      }
+    </div>
+  `,
+  styles: [`
+    .profile-container {
+      max-width: 800px;
+      margin: 2rem auto;
+      padding: 0 1rem;
+    }
+
+    .loading, .error {
+      text-align: center;
+      padding: 2rem;
+      font-size: 1.2rem;
+    }
+
+    .error {
+      color: var(--error-colour, #c41e3a);
+    }
+
+    .profile-card {
+      background: var(--card-background, #1a1a2e);
+      border-radius: 12px;
+      padding: 2rem;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+
+    .profile-header {
+      display: flex;
+      align-items: center;
+      gap: 1.5rem;
+      margin-bottom: 1.5rem;
+    }
+
+    .profile-avatar {
+      width: 100px;
+      height: 100px;
+      border-radius: 50%;
+      border: 3px solid var(--accent-colour, #9b59b6);
+    }
+
+    .profile-avatar-placeholder {
+      width: 100px;
+      height: 100px;
+      border-radius: 50%;
+      background: var(--accent-colour, #9b59b6);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 2.5rem;
+      font-weight: bold;
+      color: white;
+    }
+
+    .profile-info {
+      flex: 1;
+    }
+
+    .profile-username {
+      margin: 0;
+      font-size: 2rem;
+      color: var(--text-colour, #e0e0e0);
+    }
+
+    .profile-handle {
+      margin: 0.25rem 0;
+      color: var(--text-muted, #a0a0a0);
+      font-size: 1.1rem;
+    }
+
+    .profile-slug {
+      margin: 0.25rem 0;
+      color: var(--text-muted, #a0a0a0);
+      font-size: 0.9rem;
+    }
+
+    .badges-section {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+      margin-bottom: 1.5rem;
+    }
+
+    .badge {
+      padding: 0.4rem 0.8rem;
+      border-radius: 20px;
+      font-size: 0.85rem;
+      font-weight: 600;
+    }
+
+    .badge-staff {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+    }
+
+    .badge-mod {
+      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+      color: white;
+    }
+
+    .badge-vip {
+      background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
+      color: white;
+    }
+
+    .badge-member {
+      background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
+      color: #333;
+    }
+
+    .bio-section {
+      margin-bottom: 1.5rem;
+      padding: 1rem;
+      background: rgba(155, 89, 182, 0.1);
+      border-radius: 8px;
+    }
+
+    .bio-text {
+      margin: 0;
+      color: var(--text-colour, #e0e0e0);
+      line-height: 1.6;
+      white-space: pre-wrap;
+    }
+
+    .social-links-section {
+      margin-bottom: 1.5rem;
+    }
+
+    .social-links-section h2 {
+      margin: 0 0 1rem 0;
+      color: var(--accent-colour, #9b59b6);
+      font-size: 1.5rem;
+    }
+
+    .social-links {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.75rem;
+    }
+
+    .social-link {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.75rem 1rem;
+      background: rgba(155, 89, 182, 0.2);
+      border: 1px solid rgba(155, 89, 182, 0.3);
+      border-radius: 8px;
+      color: var(--text-colour, #e0e0e0);
+      text-decoration: none;
+      transition: all 0.2s ease;
+    }
+
+    .social-link:hover {
+      background: rgba(155, 89, 182, 0.3);
+      border-color: var(--accent-colour, #9b59b6);
+      transform: translateY(-2px);
+    }
+
+    .social-link fa-icon {
+      font-size: 1.3rem;
+      width: 1.5rem;
+    }
+
+    .social-link fa-icon ::ng-deep svg {
+      width: 1.3rem;
+      height: 1.3rem;
+    }
+
+    .social-link .label {
+      font-weight: 500;
+    }
+
+    .stats-section {
+      margin-bottom: 1.5rem;
+    }
+
+    .stats-section h2 {
+      margin: 0 0 1rem 0;
+      color: var(--accent-colour, #9b59b6);
+      font-size: 1.5rem;
+    }
+
+    .stats-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+      gap: 1rem;
+    }
+
+    .stat-card {
+      text-align: center;
+      padding: 1rem;
+      background: rgba(155, 89, 182, 0.2);
+      border-radius: 8px;
+      border: 1px solid rgba(155, 89, 182, 0.3);
+    }
+
+    .stat-value {
+      display: block;
+      font-size: 2rem;
+      font-weight: bold;
+      color: var(--accent-colour, #9b59b6);
+    }
+
+    .stat-label {
+      display: block;
+      font-size: 0.9rem;
+      color: var(--text-muted, #a0a0a0);
+      margin-top: 0.25rem;
+    }
+
+    .footer-section {
+      text-align: center;
+      padding-top: 1rem;
+      border-top: 1px solid rgba(155, 89, 182, 0.3);
+    }
+
+    .member-since {
+      margin: 0;
+      color: var(--text-muted, #a0a0a0);
+      font-size: 0.9rem;
+    }
+  `]
+})
+export class ProfileComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private userService = inject(UserService);
+  private toastService = inject(ToastService);
+
+  profile = signal<UserProfileResponse | null>(null);
+  loading = signal(true);
+  error = signal<string | null>(null);
+
+  // Font Awesome icons
+  faGlobe = faGlobe;
+  faGithub = faGithub;
+  faCloud = faCloud;
+  faLinkedin = faLinkedin;
+  faTwitch = faTwitch;
+  faYoutube = faYoutube;
+  faDiscord = faDiscord;
+
+  ngOnInit(): void {
+    const identifier = this.route.snapshot.paramMap.get('identifier');
+    if (!identifier) {
+      this.error.set('No user identifier provided');
+      this.loading.set(false);
+      return;
+    }
+
+    this.userService.getProfile(identifier).subscribe({
+      next: (profileData: UserProfileResponse) => {
+        this.profile.set(profileData);
+        this.loading.set(false);
+      },
+      error: (err: Error) => {
+        console.error('Error loading profile:', err);
+        this.error.set('Failed to load profile');
+        this.loading.set(false);
+        this.toastService.error('Failed to load profile');
+      }
+    });
+  }
+
+  formatDate(date: Date | string): string {
+    return new Date(date).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    });
+  }
+}

apps/frontend/src/app/components/settings/settings.component.ts

@@ -0,0 +1,450 @@
+/**
+ * @copyright 2026 NHCarrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+
+import { Component, inject, signal, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+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';
+
+@Component({
+  selector: 'app-settings',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div class="settings-container">
+      <h1>Profile Settings</h1>
+
+      @if (loading()) {
+        <div class="loading">Loading settings...</div>
+      } @else if (user()) {
+        <form class="settings-form" (ngSubmit)="saveSettings()">
+          <div class="form-section">
+            <h2>Profile Information</h2>
+
+            <div class="form-group">
+              <label for="displayName">Display Name</label>
+              <input
+                type="text"
+                id="displayName"
+                name="displayName"
+                [(ngModel)]="formData.displayName"
+                placeholder="Your display name"
+                maxlength="50"
+              />
+              <small class="form-help">This will be shown instead of your username</small>
+            </div>
+
+            <div class="form-group">
+              <label for="slug">Profile URL Slug</label>
+              <input
+                type="text"
+                id="slug"
+                name="slug"
+                [(ngModel)]="formData.slug"
+                placeholder="your-custom-url"
+                maxlength="30"
+                pattern="[a-z0-9-]+"
+              />
+              <small class="form-help">
+                Your profile will be at: library.nhcarrigan.com/profile/{{ formData.slug || 'your-slug' }}
+              </small>
+              <small class="form-help">Only lowercase letters, numbers, and hyphens allowed</small>
+            </div>
+
+            <div class="form-group">
+              <label for="bio">Bio</label>
+              <textarea
+                id="bio"
+                name="bio"
+                [(ngModel)]="formData.bio"
+                placeholder="Tell us about yourself..."
+                rows="4"
+                maxlength="500"
+              ></textarea>
+              <small class="form-help">{{ (formData.bio?.length || 0) }} / 500 characters</small>
+            </div>
+          </div>
+
+          <div class="form-section">
+            <h2>Social Links</h2>
+
+            <div class="form-group">
+              <label for="website">Website</label>
+              <input
+                type="text"
+                id="website"
+                name="website"
+                [(ngModel)]="formData.website"
+                placeholder="https://yourwebsite.com"
+                pattern="https?://.+"
+              />
+              <small class="form-help">Your personal website or portfolio (must start with http:// or https://)</small>
+            </div>
+
+            <div class="form-group">
+              <label for="github">GitHub</label>
+              <input
+                type="text"
+                id="github"
+                name="github"
+                [(ngModel)]="formData.github"
+                placeholder="username"
+                pattern="[a-zA-Z0-9]([a-zA-Z0-9-]{0,37}[a-zA-Z0-9])?"
+              />
+              <small class="form-help">Just your GitHub username (alphanumeric and hyphens, 1-39 characters)</small>
+            </div>
+
+            <div class="form-group">
+              <label for="bluesky">Bluesky</label>
+              <input
+                type="text"
+                id="bluesky"
+                name="bluesky"
+                [(ngModel)]="formData.bluesky"
+                placeholder="username.bsky.social"
+                pattern="[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}"
+              />
+              <small class="form-help">Your full Bluesky handle (e.g., username.bsky.social)</small>
+            </div>
+
+            <div class="form-group">
+              <label for="linkedin">LinkedIn</label>
+              <input
+                type="text"
+                id="linkedin"
+                name="linkedin"
+                [(ngModel)]="formData.linkedin"
+                placeholder="username"
+                pattern="[a-zA-Z0-9-]{3,100}"
+              />
+              <small class="form-help">Just your LinkedIn username (alphanumeric and hyphens, 3-100 characters)</small>
+            </div>
+
+            <div class="form-group">
+              <label for="twitch">Twitch</label>
+              <input
+                type="text"
+                id="twitch"
+                name="twitch"
+                [(ngModel)]="formData.twitch"
+                placeholder="username"
+                pattern="[a-zA-Z0-9_]{4,25}"
+              />
+              <small class="form-help">Just your Twitch username (alphanumeric and underscores, 4-25 characters)</small>
+            </div>
+
+            <div class="form-group">
+              <label for="youtube">YouTube</label>
+              <input
+                type="text"
+                id="youtube"
+                name="youtube"
+                [(ngModel)]="formData.youtube"
+                placeholder="@username or channel-id"
+                pattern="(@[a-zA-Z0-9_.-]{3,30}|UC[a-zA-Z0-9_-]{22})"
+              />
+              <small class="form-help">Your YouTube handle (@username) or channel ID (UC...)</small>
+            </div>
+
+            <div class="form-group">
+              <label for="discordServer">Discord Server</label>
+              <input
+                type="text"
+                id="discordServer"
+                name="discordServer"
+                [(ngModel)]="formData.discordServer"
+                placeholder="invite-code"
+                pattern="[a-zA-Z0-9]{2,32}"
+              />
+              <small class="form-help">Just your Discord server invite code (alphanumeric, 2-32 characters)</small>
+            </div>
+          </div>
+
+          <div class="form-section">
+            <h2>Privacy</h2>
+
+            <div class="form-group checkbox-group">
+              <label>
+                <input
+                  type="checkbox"
+                  name="profilePublic"
+                  [(ngModel)]="formData.profilePublic"
+                />
+                <span>Make my profile public</span>
+              </label>
+              <small class="form-help">
+                When disabled, only you can view your profile
+              </small>
+            </div>
+          </div>
+
+          <div class="form-section">
+            <h2>Account Information</h2>
+            <div class="info-item">
+              <strong>Username:</strong> {{ user()!.username }}
+            </div>
+            <div class="info-item">
+              <strong>Email:</strong> {{ user()!.email }}
+            </div>
+            @if (user()!.avatar) {
+              <div class="info-item">
+                <strong>Avatar:</strong>
+                <img [src]="user()!.avatar" alt="Avatar" class="avatar-preview" />
+              </div>
+            }
+            <small class="form-help">
+              Username, email, and avatar are managed through Discord and cannot be changed here
+            </small>
+          </div>
+
+          <div class="form-actions">
+            <button type="submit" class="btn btn-primary" [disabled]="saving()">
+              {{ saving() ? 'Saving...' : 'Save Changes' }}
+            </button>
+          </div>
+        </form>
+      }
+    </div>
+  `,
+  styles: [`
+    .settings-container {
+      max-width: 700px;
+      margin: 2rem auto;
+      padding: 0 1rem;
+    }
+
+    h1 {
+      color: var(--accent-colour, #9b59b6);
+      margin-bottom: 2rem;
+    }
+
+    .loading {
+      text-align: center;
+      padding: 2rem;
+      font-size: 1.2rem;
+    }
+
+    .settings-form {
+      background: var(--card-background, #1a1a2e);
+      border-radius: 12px;
+      padding: 2rem;
+    }
+
+    .form-section {
+      margin-bottom: 2rem;
+      padding-bottom: 2rem;
+      border-bottom: 1px solid rgba(155, 89, 182, 0.3);
+    }
+
+    .form-section:last-of-type {
+      border-bottom: none;
+    }
+
+    .form-section h2 {
+      color: var(--accent-colour, #9b59b6);
+      font-size: 1.3rem;
+      margin-bottom: 1rem;
+    }
+
+    .form-group {
+      margin-bottom: 1.5rem;
+    }
+
+    .form-group label {
+      display: block;
+      margin-bottom: 0.5rem;
+      color: var(--text-colour, #e0e0e0);
+      font-weight: 600;
+    }
+
+    .form-group input[type="text"],
+    .form-group textarea {
+      width: 100%;
+      padding: 0.75rem;
+      border: 1px solid rgba(155, 89, 182, 0.5);
+      border-radius: 8px;
+      background: rgba(0, 0, 0, 0.2);
+      color: var(--text-colour, #e0e0e0);
+      font-size: 1rem;
+      font-family: inherit;
+    }
+
+    .form-group input[type="text"]:focus,
+    .form-group textarea:focus {
+      outline: none;
+      border-color: var(--accent-colour, #9b59b6);
+      box-shadow: 0 0 0 2px rgba(155, 89, 182, 0.3);
+    }
+
+    .form-group input[type="text"]:invalid:not(:focus):not(:placeholder-shown),
+    .form-group textarea:invalid:not(:focus):not(:placeholder-shown) {
+      border-color: var(--error-colour, #c41e3a);
+    }
+
+    .form-group input[type="text"]:valid:not(:placeholder-shown),
+    .form-group textarea:valid:not(:placeholder-shown) {
+      border-color: rgba(46, 204, 113, 0.5);
+    }
+
+    .form-group textarea {
+      resize: vertical;
+      min-height: 100px;
+    }
+
+    .form-help {
+      display: block;
+      margin-top: 0.25rem;
+      color: var(--text-muted, #a0a0a0);
+      font-size: 0.85rem;
+    }
+
+    .checkbox-group label {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      cursor: pointer;
+    }
+
+    .checkbox-group input[type="checkbox"] {
+      width: 20px;
+      height: 20px;
+      cursor: pointer;
+    }
+
+    .info-item {
+      margin-bottom: 1rem;
+      color: var(--text-colour, #e0e0e0);
+    }
+
+    .info-item strong {
+      color: var(--accent-colour, #9b59b6);
+    }
+
+    .avatar-preview {
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      margin-left: 0.5rem;
+      vertical-align: middle;
+    }
+
+    .form-actions {
+      display: flex;
+      justify-content: flex-end;
+      padding-top: 1rem;
+    }
+
+    .btn {
+      padding: 0.75rem 2rem;
+      border: none;
+      border-radius: 8px;
+      font-size: 1rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s ease;
+    }
+
+    .btn-primary {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+    }
+
+    .btn-primary:hover:not(:disabled) {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    }
+
+    .btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  `]
+})
+export class SettingsComponent implements OnInit {
+  private userService = inject(UserService);
+  private authService = inject(AuthService);
+  private toastService = inject(ToastService);
+
+  user = signal<User | null>(null);
+  loading = signal(true);
+  saving = signal(false);
+
+  formData: UpdateUserSettingsRequest & { bio?: string } = {
+    displayName: '',
+    slug: '',
+    bio: '',
+    profilePublic: true,
+    website: '',
+    discordServer: '',
+    bluesky: '',
+    github: '',
+    linkedin: '',
+    twitch: '',
+    youtube: ''
+  };
+
+  ngOnInit(): void {
+    this.userService.getMe().subscribe({
+      next: (userData: User) => {
+        this.user.set(userData);
+        this.formData = {
+          displayName: userData.displayName || '',
+          slug: userData.slug || '',
+          bio: userData.bio || '',
+          profilePublic: userData.profilePublic ?? true,
+          website: userData.website || '',
+          discordServer: userData.discordServer || '',
+          bluesky: userData.bluesky || '',
+          github: userData.github || '',
+          linkedin: userData.linkedin || '',
+          twitch: userData.twitch || '',
+          youtube: userData.youtube || ''
+        };
+        this.loading.set(false);
+      },
+      error: (err: Error) => {
+        console.error('Error loading user profile:', err);
+        this.toastService.error('Failed to load profile');
+        this.loading.set(false);
+      }
+    });
+  }
+
+  saveSettings(): void {
+    this.saving.set(true);
+
+    const updates: UpdateUserSettingsRequest = {
+      displayName: this.formData.displayName || undefined,
+      slug: this.formData.slug || undefined,
+      bio: this.formData.bio || undefined,
+      profilePublic: this.formData.profilePublic,
+      website: this.formData.website || undefined,
+      discordServer: this.formData.discordServer || undefined,
+      bluesky: this.formData.bluesky || undefined,
+      github: this.formData.github || undefined,
+      linkedin: this.formData.linkedin || undefined,
+      twitch: this.formData.twitch || undefined,
+      youtube: this.formData.youtube || undefined
+    };
+
+    this.userService.updateSettings(updates).subscribe({
+      next: (updatedUser: User) => {
+        this.user.set(updatedUser);
+        this.authService.updateUser(updatedUser);
+        this.saving.set(false);
+        this.toastService.success('Settings saved successfully!');
+      },
+      error: (err: Error) => {
+        console.error('Error saving settings:', err);
+        this.toastService.error('Failed to save settings');
+        this.saving.set(false);
+      }
+    });
+  }
+}

apps/frontend/src/app/services/auth.service.ts

@@ -123,6 +123,10 @@ export class AuthService {
     return this.user() !== null;
   }
 
+  updateUser(user: User): void {
+    this.currentUser.set(user);
+  }
+
   isAdmin(): boolean {
     return this.user()?.isAdmin === true;
   }

apps/frontend/src/app/services/user.service.ts

@@ -9,6 +9,49 @@ import { Observable } from 'rxjs';
 import { ApiService } from './api.service';
 import { User } from '@library/shared-types';
 
+export interface UserProfileResponse {
+  id: string;
+  username: string;
+  displayName?: string;
+  avatar?: string;
+  bio?: string;
+  slug?: string;
+  website?: string;
+  discordServer?: string;
+  bluesky?: string;
+  github?: string;
+  linkedin?: string;
+  twitch?: string;
+  youtube?: string;
+  badges: {
+    isStaff: boolean;
+    isMod: boolean;
+    isVip: boolean;
+    inDiscord: boolean;
+  };
+  stats: {
+    suggestionsCount: number;
+    suggestionsAcceptedCount: number;
+    likesCount: number;
+    commentsCount: number;
+  };
+  createdAt: Date;
+}
+
+export interface UpdateUserSettingsRequest {
+  slug?: string;
+  displayName?: string;
+  bio?: string;
+  profilePublic?: boolean;
+  website?: string;
+  discordServer?: string;
+  bluesky?: string;
+  github?: string;
+  linkedin?: string;
+  twitch?: string;
+  youtube?: string;
+}
+
 @Injectable({
   providedIn: 'root'
 })
@@ -26,4 +69,16 @@ export class UserService {
   unbanUser(userId: string): Observable<User> {
     return this.api.post<User>(`/users/${userId}/unban`, {});
   }
+
+  getMe(): Observable<User> {
+    return this.api.get<User>('/users/me');
+  }
+
+  updateSettings(settings: UpdateUserSettingsRequest): Observable<User> {
+    return this.api.put<User>('/users/me', settings);
+  }
+
+  getProfile(identifier: string): Observable<UserProfileResponse> {
+    return this.api.get<UserProfileResponse>(`/users/profile/${identifier}`);
+  }
 }

package.json

@@ -35,6 +35,10 @@
     "@fastify/rate-limit": "10.3.0",
     "@fastify/sensible": "6.0.4",
     "@fastify/static": "9.0.0",
+    "@fortawesome/angular-fontawesome": "4.0.0",
+    "@fortawesome/fontawesome-svg-core": "7.2.0",
+    "@fortawesome/free-brands-svg-icons": "7.2.0",
+    "@fortawesome/free-solid-svg-icons": "7.2.0",
     "@nhcarrigan/logger": "1.1.1",
     "@prisma/client": "6.19.2",
     "dompurify": "3.3.1",

pnpm-lock.yaml

@@ -56,6 +56,18 @@ importers:
       '@fastify/static':
         specifier: 9.0.0
         version: 9.0.0
+      '@fortawesome/angular-fontawesome':
+        specifier: 4.0.0
+        version: 4.0.0(@angular/core@21.1.2(@angular/compiler@21.1.2)(rxjs@7.8.2))
+      '@fortawesome/fontawesome-svg-core':
+        specifier: 7.2.0
+        version: 7.2.0
+      '@fortawesome/free-brands-svg-icons':
+        specifier: 7.2.0
+        version: 7.2.0
+      '@fortawesome/free-solid-svg-icons':
+        specifier: 7.2.0
+        version: 7.2.0
       '@nhcarrigan/logger':
         specifier: 1.1.1
         version: 1.1.1
@@ -1659,6 +1671,27 @@ packages:
   '@fastify/static@9.0.0':
     resolution: {integrity: sha512-r64H8Woe/vfilg5RTy7lwWlE8ZZcTrc3kebYFMEUBrMqlydhQyoiExQXdYAy2REVpST/G35+stAM8WYp1WGmMA==}
 
+  '@fortawesome/angular-fontawesome@4.0.0':
+    resolution: {integrity: sha512-TCqHqT5ovFY1A4RgMpoBUgS+RX3OVs39+CzHFgzDhbCPAopOa26J748TZJcuZwJAvGAk9tbWeVEmWuLByINAeg==}
+    peerDependencies:
+      '@angular/core': ^21.0.0
+
+  '@fortawesome/fontawesome-common-types@7.2.0':
+    resolution: {integrity: sha512-IpR0bER9FY25p+e7BmFH25MZKEwFHTfRAfhOyJubgiDnoJNsSvJ7nigLraHtp4VOG/cy8D7uiV0dLkHOne5Fhw==}
+    engines: {node: '>=6'}
+
+  '@fortawesome/fontawesome-svg-core@7.2.0':
+    resolution: {integrity: sha512-6639htZMjEkwskf3J+e6/iar+4cTNM9qhoWuRfj9F3eJD6r7iCzV1SWnQr2Mdv0QT0suuqU8BoJCZUyCtP9R4Q==}
+    engines: {node: '>=6'}
+
+  '@fortawesome/free-brands-svg-icons@7.2.0':
+    resolution: {integrity: sha512-VNG8xqOip1JuJcC3zsVsKRQ60oXG9+oYNDCosjoU/H9pgYmLTEwWw8pE0jhPz/JWdHeUuK6+NQ3qsM4gIbdbYQ==}
+    engines: {node: '>=6'}
+
+  '@fortawesome/free-solid-svg-icons@7.2.0':
+    resolution: {integrity: sha512-YTVITFGN0/24PxzXrwqCgnyd7njDuzp5ZvaCx5nq/jg55kUYd94Nj8UTchBdBofi/L0nwRfjGOg0E41d2u9T1w==}
+    engines: {node: '>=6'}
+
   '@hapi/boom@10.0.1':
     resolution: {integrity: sha512-ERcCZaEjdH3OgSJlyjVk8pHIFeus91CjKP3v+MpgBNp5IvGzP2l/bRiD78nqYcKPaZdbKkK5vDBVPd2ohHBlsA==}
 
@@ -11651,6 +11684,26 @@ snapshots:
       fastq: 1.20.1
       glob: 13.0.1
 
+  '@fortawesome/angular-fontawesome@4.0.0(@angular/core@21.1.2(@angular/compiler@21.1.2)(rxjs@7.8.2))':
+    dependencies:
+      '@angular/core': 21.1.2(@angular/compiler@21.1.2)(rxjs@7.8.2)
+      '@fortawesome/fontawesome-svg-core': 7.2.0
+      tslib: 2.8.1
+
+  '@fortawesome/fontawesome-common-types@7.2.0': {}
+
+  '@fortawesome/fontawesome-svg-core@7.2.0':
+    dependencies:
+      '@fortawesome/fontawesome-common-types': 7.2.0
+
+  '@fortawesome/free-brands-svg-icons@7.2.0':
+    dependencies:
+      '@fortawesome/fontawesome-common-types': 7.2.0
+
+  '@fortawesome/free-solid-svg-icons@7.2.0':
+    dependencies:
+      '@fortawesome/fontawesome-common-types': 7.2.0
+
   '@hapi/boom@10.0.1':
     dependencies:
       '@hapi/hoek': 11.0.7

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

@@ -9,6 +9,17 @@ interface User {
   email:         string;
   username:      string;
   avatar?:       string;
+  slug?:         string;
+  displayName?:  string;
+  bio?:          string;
+  profilePublic: boolean;
+  website?:      string;
+  discordServer?: string;
+  bluesky?:      string;
+  github?:       string;
+  linkedin?:     string;
+  twitch?:       string;
+  youtube?:      string;
   discordId:     string;
   isAdmin:       boolean;
   isBanned:      boolean;