feat: implement comprehensive activity feed feature

Implements issue #56 with a timeline-style activity feed showing recent
user activity across the library.

Activity Types Displayed:
- Suggestions: Shows suggested items with status badges
- Likes: Shows liked content with links to items
- Comments: Shows comments with preview text
- Achievements: Shows earned achievements with icons and points

Database & Backend:
- Created ActivityService to aggregate from existing data sources
- No new database table needed (uses existing suggestions, likes, comments, achievements)
- Efficient querying with parallel data fetching
- Privacy-aware: Only shows activity from users with profilePublic: true
- Filters out banned users automatically

API Endpoints:
- GET /api/activity - Get general activity feed with pagination
- GET /api/activity/:userId - Get specific user's activity
- Query parameters: limit (max 100, default 50), offset (default 0)
- Returns: activities array, total count, hasMore flag

Frontend Activity Feed:
- Beautiful timeline layout with user avatars and badges
- Relative timestamps ("5m ago", "2h ago", "3d ago")
- Activity type icons (💡 💬 ❤️ 🏆)
- Colour-coded status badges for suggestions
- Comment previews with styled quote blocks
- Achievement displays with icons and points
- Infinite scroll with "Load More" button
- Links to user profiles and content items

UI Components:
- Responsive card-based design
- User avatars with placeholder fallback
- Badge display (STAFF, MOD, VIP, primary badges)
- Entity links that route to appropriate media pages
- Clean typography and spacing
- Loading and empty states

Privacy & Performance:
- Respects profilePublic setting (existing privacy control)
- Only displays activity from non-banned users
- Pagination to prevent loading too much data
- Efficient aggregation with limit multipliers
- Clean separation of concerns (service/routes/component)

Navigation:
- Added /activity route
- Added "📰 Activity Feed" link to user dropdown menu
- Positioned between Leaderboard and About

Implementation Notes:
- Built entirely from existing data (no activity table needed)
- Retroactive: Shows all historical activity automatically
- Type-safe with full TypeScript interfaces
- Activity union type for type discrimination
- Standalone Angular component
- Clean, maintainable code structure

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

@@ -0,0 +1,52 @@
+/**
+ * @copyright 2026 NHCarrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+
+import { FastifyPluginAsync } from "fastify";
+import type { ActivityFeedResponse } from "@library/shared-types";
+import { ActivityService } from "../../services/activity.service";
+
+const activityRoutes: FastifyPluginAsync = async (app) => {
+  const activityService = new ActivityService();
+
+  /**
+   * Get activity feed with optional filters.
+   */
+  app.get<{
+    Querystring: { limit?: number; offset?: number; userId?: string };
+    Reply: ActivityFeedResponse;
+  }>("/", async (request) => {
+    const limit = request.query.limit && request.query.limit > 0
+      ? Math.min(request.query.limit, 100)
+      : 50;
+    const offset = request.query.offset && request.query.offset >= 0
+      ? request.query.offset
+      : 0;
+    const userId = request.query.userId;
+
+    return activityService.getActivityFeed(limit, offset, userId);
+  });
+
+  /**
+   * Get activity feed for a specific user.
+   */
+  app.get<{
+    Params: { userId: string };
+    Querystring: { limit?: number; offset?: number };
+    Reply: ActivityFeedResponse;
+  }>("/:userId", async (request) => {
+    const { userId } = request.params;
+    const limit = request.query.limit && request.query.limit > 0
+      ? Math.min(request.query.limit, 100)
+      : 50;
+    const offset = request.query.offset && request.query.offset >= 0
+      ? request.query.offset
+      : 0;
+
+    return activityService.getActivityFeed(limit, offset, userId);
+  });
+};
+
+export default activityRoutes;

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

@@ -0,0 +1,350 @@
+/**
+ * @copyright 2026 NHCarrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+
+import type {
+  Activity,
+  ActivityFeedResponse,
+  ActivityType,
+  ActivityUser,
+} from "@library/shared-types";
+import { ACHIEVEMENTS } from "@library/shared-types";
+import { prisma } from "../lib/prisma";
+
+export class ActivityService {
+  private prisma = prisma;
+
+  constructor() {}
+
+  /**
+   * Get activity feed with pagination.
+   */
+  async getActivityFeed(
+    limit = 50,
+    offset = 0,
+    userId?: string
+  ): Promise<ActivityFeedResponse> {
+    // Fetch suggestions, likes, comments, and achievements
+    const [suggestions, likes, comments, achievements] = await Promise.all([
+      this.getSuggestionActivities(limit, offset, userId),
+      this.getLikeActivities(limit, offset, userId),
+      this.getCommentActivities(limit, offset, userId),
+      this.getAchievementActivities(limit, offset, userId),
+    ]);
+
+    // Combine and sort by createdAt
+    const activities: Activity[] = [
+      ...suggestions,
+      ...likes,
+      ...comments,
+      ...achievements,
+    ].sort((a, b) => {
+      return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+    });
+
+    // Apply pagination to combined results
+    const paginatedActivities = activities.slice(offset, offset + limit);
+    const hasMore = activities.length > offset + limit;
+
+    return {
+      activities: paginatedActivities,
+      total: activities.length,
+      hasMore,
+    };
+  }
+
+  /**
+   * Get suggestion activities.
+   */
+  private async getSuggestionActivities(
+    limit: number,
+    offset: number,
+    userId?: string
+  ) {
+    const where = userId
+      ? { userId, user: { profilePublic: true, isBanned: false } }
+      : { user: { profilePublic: true, isBanned: false } };
+
+    const suggestions = await this.prisma.suggestion.findMany({
+      where,
+      include: {
+        user: {
+          select: {
+            id: true,
+            username: true,
+            slug: true,
+            avatar: true,
+            primaryBadge: true,
+            isVip: true,
+            isMod: true,
+            isStaff: true,
+          },
+        },
+      },
+      orderBy: { createdAt: "desc" },
+      take: limit * 2, // Get more since we're combining
+    });
+
+    return suggestions.map((suggestion) => ({
+      id: `suggestion-${suggestion.id}`,
+      type: "SUGGESTION" as ActivityType,
+      user: suggestion.user as ActivityUser,
+      entityType: suggestion.entityType,
+      suggestionTitle: suggestion.title,
+      status: suggestion.status,
+      createdAt: suggestion.createdAt,
+    }));
+  }
+
+  /**
+   * Get like activities.
+   */
+  private async getLikeActivities(
+    limit: number,
+    offset: number,
+    userId?: string
+  ) {
+    const where = userId
+      ? { userId, user: { profilePublic: true, isBanned: false } }
+      : { user: { profilePublic: true, isBanned: false } };
+
+    const likes = await this.prisma.like.findMany({
+      where,
+      include: {
+        user: {
+          select: {
+            id: true,
+            username: true,
+            slug: true,
+            avatar: true,
+            primaryBadge: true,
+            isVip: true,
+            isMod: true,
+            isStaff: true,
+          },
+        },
+      },
+      orderBy: { createdAt: "desc" },
+      take: limit * 2,
+    });
+
+    // For each like, fetch the entity title
+    const likesWithTitles = await Promise.all(
+      likes.map(async (like) => {
+        const entityTitle = await this.getEntityTitle(
+          like.entityType,
+          like.entityId
+        );
+        return {
+          id: `like-${like.id}`,
+          type: "LIKE" as ActivityType,
+          user: like.user as ActivityUser,
+          entityType: like.entityType,
+          entityId: like.entityId,
+          entityTitle,
+          createdAt: like.createdAt,
+        };
+      })
+    );
+
+    return likesWithTitles;
+  }
+
+  /**
+   * Get comment activities.
+   */
+  private async getCommentActivities(
+    limit: number,
+    offset: number,
+    userId?: string
+  ) {
+    const where = userId
+      ? { userId, user: { profilePublic: true, isBanned: false } }
+      : { user: { profilePublic: true, isBanned: false } };
+
+    const comments = await this.prisma.comment.findMany({
+      where,
+      include: {
+        user: {
+          select: {
+            id: true,
+            username: true,
+            slug: true,
+            avatar: true,
+            primaryBadge: true,
+            isVip: true,
+            isMod: true,
+            isStaff: true,
+          },
+        },
+        game: { select: { id: true, title: true } },
+        book: { select: { id: true, title: true } },
+        music: { select: { id: true, title: true } },
+        art: { select: { id: true, title: true } },
+        show: { select: { id: true, title: true } },
+        manga: { select: { id: true, title: true } },
+      },
+      orderBy: { createdAt: "desc" },
+      take: limit * 2,
+    });
+
+    return comments.map((comment) => {
+      let entityType = "";
+      let entityId = "";
+      let entityTitle = "";
+
+      if (comment.game) {
+        entityType = "game";
+        entityId = comment.game.id;
+        entityTitle = comment.game.title;
+      } else if (comment.book) {
+        entityType = "book";
+        entityId = comment.book.id;
+        entityTitle = comment.book.title;
+      } else if (comment.music) {
+        entityType = "music";
+        entityId = comment.music.id;
+        entityTitle = comment.music.title;
+      } else if (comment.art) {
+        entityType = "art";
+        entityId = comment.art.id;
+        entityTitle = comment.art.title;
+      } else if (comment.show) {
+        entityType = "show";
+        entityId = comment.show.id;
+        entityTitle = comment.show.title;
+      } else if (comment.manga) {
+        entityType = "manga";
+        entityId = comment.manga.id;
+        entityTitle = comment.manga.title;
+      }
+
+      // Get first 100 characters of comment
+      const commentPreview =
+        comment.content.length > 100
+          ? `${comment.content.slice(0, 100)}...`
+          : comment.content;
+
+      return {
+        id: `comment-${comment.id}`,
+        type: "COMMENT" as ActivityType,
+        user: comment.user as ActivityUser,
+        entityType,
+        entityId,
+        entityTitle,
+        commentPreview,
+        createdAt: comment.createdAt,
+      };
+    });
+  }
+
+  /**
+   * Get achievement activities.
+   */
+  private async getAchievementActivities(
+    limit: number,
+    offset: number,
+    userId?: string
+  ) {
+    const where = userId
+      ? {
+          userId,
+          earned: true,
+          user: { profilePublic: true, isBanned: false },
+        }
+      : { earned: true, user: { profilePublic: true, isBanned: false } };
+
+    const userAchievements = await this.prisma.userAchievement.findMany({
+      where,
+      include: {
+        user: {
+          select: {
+            id: true,
+            username: true,
+            slug: true,
+            avatar: true,
+            primaryBadge: true,
+            isVip: true,
+            isMod: true,
+            isStaff: true,
+          },
+        },
+      },
+      orderBy: { earnedAt: "desc" },
+      take: limit * 2,
+    });
+
+    return userAchievements
+      .filter((ua) => ua.earnedAt) // Only show earned achievements
+      .map((ua) => {
+        const achievement = ACHIEVEMENTS[ua.achievementKey];
+        return {
+          id: `achievement-${ua.id}`,
+          type: "ACHIEVEMENT" as ActivityType,
+          user: ua.user as ActivityUser,
+          achievementKey: ua.achievementKey,
+          achievementName: achievement.name,
+          achievementIcon: achievement.icon,
+          achievementPoints: achievement.points,
+          createdAt: ua.earnedAt!,
+        };
+      });
+  }
+
+  /**
+   * Helper to get entity title by type and ID.
+   */
+  private async getEntityTitle(
+    entityType: string,
+    entityId: string
+  ): Promise<string> {
+    switch (entityType) {
+      case "game": {
+        const game = await this.prisma.game.findUnique({
+          where: { id: entityId },
+          select: { title: true },
+        });
+        return game?.title || "Unknown Game";
+      }
+      case "book": {
+        const book = await this.prisma.book.findUnique({
+          where: { id: entityId },
+          select: { title: true },
+        });
+        return book?.title || "Unknown Book";
+      }
+      case "music": {
+        const music = await this.prisma.music.findUnique({
+          where: { id: entityId },
+          select: { title: true },
+        });
+        return music?.title || "Unknown Music";
+      }
+      case "art": {
+        const art = await this.prisma.art.findUnique({
+          where: { id: entityId },
+          select: { title: true },
+        });
+        return art?.title || "Unknown Art";
+      }
+      case "show": {
+        const show = await this.prisma.show.findUnique({
+          where: { id: entityId },
+          select: { title: true },
+        });
+        return show?.title || "Unknown Show";
+      }
+      case "manga": {
+        const manga = await this.prisma.manga.findUnique({
+          where: { id: entityId },
+          select: { title: true },
+        });
+        return manga?.title || "Unknown Manga";
+      }
+      default:
+        return "Unknown Item";
+    }
+  }
+}

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

@@ -69,6 +69,10 @@ export const appRoutes: Route[] = [
     path: 'leaderboard',
     loadComponent: () => import('./components/leaderboard/leaderboard.component').then(m => m.LeaderboardComponent)
   },
+  {
+    path: 'activity',
+    loadComponent: () => import('./components/activity/activity-feed.component').then(m => m.ActivityFeedComponent)
+  },
   {
     path: 'about',
     loadComponent: () => import('./components/about/about.component').then(m => m.AboutComponent)

apps/frontend/src/app/components/activity/activity-feed.component.ts

@@ -0,0 +1,426 @@
+/**
+ * @copyright 2026 NHCarrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+
+import { Component, OnInit, inject, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import type { Activity, ActivityType } from '@library/shared-types';
+import { ActivityService } from '../../services/activity.service';
+
+@Component({
+  selector: 'app-activity-feed',
+  standalone: true,
+  imports: [CommonModule, RouterLink],
+  template: `
+    <div class="activity-container">
+      <h1>Recent Activity</h1>
+      <p class="subtitle">See what's happening in the library community</p>
+
+      @if (loading()) {
+        <p class="loading">Loading activities...</p>
+      } @else if (activities().length === 0) {
+        <p class="no-activities">No recent activity to display.</p>
+      } @else {
+        <div class="activity-feed">
+          @for (activity of activities(); track activity.id) {
+            <div class="activity-card">
+              <div class="activity-header">
+                <div class="user-info">
+                  @if (activity.user.avatar) {
+                    <img [src]="activity.user.avatar" [alt]="activity.user.username" class="user-avatar">
+                  } @else {
+                    <div class="user-avatar-placeholder">
+                      {{ activity.user.username.charAt(0).toUpperCase() }}
+                    </div>
+                  }
+                  <div class="user-details">
+                    <a
+                      [routerLink]="['/profile', activity.user.slug || activity.user.id]"
+                      class="username"
+                    >
+                      {{ activity.user.username }}
+                    </a>
+                    @if (activity.user.primaryBadge) {
+                      <span class="badge badge-{{ activity.user.primaryBadge.toLowerCase() }}">
+                        {{ activity.user.primaryBadge }}
+                      </span>
+                    }
+                    @if (activity.user.isStaff && !activity.user.primaryBadge) {
+                      <span class="badge badge-staff">STAFF</span>
+                    }
+                    @if (activity.user.isMod && !activity.user.primaryBadge) {
+                      <span class="badge badge-mod">MOD</span>
+                    }
+                    @if (activity.user.isVip && !activity.user.primaryBadge) {
+                      <span class="badge badge-vip">VIP</span>
+                    }
+                  </div>
+                </div>
+                <span class="timestamp">{{ formatTime(activity.createdAt) }}</span>
+              </div>
+
+              <div class="activity-content">
+                @switch (activity.type) {
+                  @case ('SUGGESTION') {
+                    <div class="activity-suggestion">
+                      <span class="activity-icon">💡</span>
+                      <span class="activity-text">
+                        suggested
+                        <strong>{{ activity.suggestionTitle }}</strong>
+                        <span class="status-badge status-{{ activity.status.toLowerCase() }}">
+                          {{ formatStatus(activity.status) }}
+                        </span>
+                      </span>
+                    </div>
+                  }
+                  @case ('LIKE') {
+                    <div class="activity-like">
+                      <span class="activity-icon">❤️</span>
+                      <span class="activity-text">
+                        liked
+                        <a [routerLink]="['/' + activity.entityType + 's']" class="entity-link">
+                          {{ activity.entityTitle }}
+                        </a>
+                      </span>
+                    </div>
+                  }
+                  @case ('COMMENT') {
+                    <div class="activity-comment">
+                      <span class="activity-icon">💬</span>
+                      <span class="activity-text">
+                        commented on
+                        <a [routerLink]="['/' + activity.entityType + 's']" class="entity-link">
+                          {{ activity.entityTitle }}
+                        </a>
+                      </span>
+                      <p class="comment-preview">"{{ activity.commentPreview }}"</p>
+                    </div>
+                  }
+                  @case ('ACHIEVEMENT') {
+                    <div class="activity-achievement">
+                      <span class="activity-icon">{{ activity.achievementIcon }}</span>
+                      <span class="activity-text">
+                        earned the
+                        <strong>{{ activity.achievementName }}</strong>
+                        achievement
+                        <span class="points">({{ activity.achievementPoints }} pts)</span>
+                      </span>
+                    </div>
+                  }
+                }
+              </div>
+            </div>
+          }
+        </div>
+
+        @if (hasMore()) {
+          <div class="load-more-container">
+            <button (click)="loadMore()" class="btn btn-primary" [disabled]="loadingMore()">
+              {{ loadingMore() ? 'Loading...' : 'Load More' }}
+            </button>
+          </div>
+        }
+      }
+    </div>
+  `,
+  styles: [`
+    .activity-container {
+      max-width: 800px;
+      margin: 2rem auto;
+      padding: 0 1rem;
+    }
+
+    h1 {
+      font-size: 2rem;
+      margin-bottom: 0.5rem;
+      color: #1f2937;
+    }
+
+    .subtitle {
+      color: #6b7280;
+      margin-bottom: 2rem;
+    }
+
+    .loading, .no-activities {
+      text-align: center;
+      padding: 3rem;
+      color: #6b7280;
+      font-size: 1.1rem;
+    }
+
+    .activity-feed {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    }
+
+    .activity-card {
+      background: white;
+      border-radius: 8px;
+      padding: 1.5rem;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+      border: 1px solid #e5e7eb;
+    }
+
+    .activity-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: start;
+      margin-bottom: 1rem;
+    }
+
+    .user-info {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+    }
+
+    .user-avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      object-fit: cover;
+    }
+
+    .user-avatar-placeholder {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 600;
+      font-size: 1.2rem;
+    }
+
+    .user-details {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+    }
+
+    .username {
+      font-weight: 600;
+      color: #1f2937;
+      text-decoration: none;
+    }
+
+    .username:hover {
+      color: #10b981;
+    }
+
+    .badge {
+      display: inline-block;
+      padding: 0.125rem 0.5rem;
+      border-radius: 4px;
+      font-size: 0.75rem;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+
+    .badge-staff {
+      background: #ef4444;
+      color: white;
+    }
+
+    .badge-mod {
+      background: #3b82f6;
+      color: white;
+    }
+
+    .badge-vip {
+      background: #f59e0b;
+      color: white;
+    }
+
+    .badge-discord {
+      background: #5865f2;
+      color: white;
+    }
+
+    .timestamp {
+      font-size: 0.875rem;
+      color: #9ca3af;
+    }
+
+    .activity-content {
+      padding-left: 55px;
+    }
+
+    .activity-suggestion,
+    .activity-like,
+    .activity-comment,
+    .activity-achievement {
+      display: flex;
+      align-items: start;
+      gap: 0.75rem;
+    }
+
+    .activity-icon {
+      font-size: 1.5rem;
+      line-height: 1;
+    }
+
+    .activity-text {
+      color: #4b5563;
+      line-height: 1.6;
+    }
+
+    .activity-text strong {
+      color: #1f2937;
+      font-weight: 600;
+    }
+
+    .entity-link {
+      color: #10b981;
+      text-decoration: none;
+      font-weight: 500;
+    }
+
+    .entity-link:hover {
+      text-decoration: underline;
+    }
+
+    .comment-preview {
+      margin-top: 0.5rem;
+      padding: 0.75rem;
+      background: #f9fafb;
+      border-left: 3px solid #10b981;
+      border-radius: 4px;
+      color: #4b5563;
+      font-style: italic;
+    }
+
+    .status-badge {
+      display: inline-block;
+      padding: 0.125rem 0.5rem;
+      border-radius: 4px;
+      font-size: 0.75rem;
+      font-weight: 600;
+      margin-left: 0.5rem;
+    }
+
+    .status-unreviewed {
+      background: #fef3c7;
+      color: #92400e;
+    }
+
+    .status-accepted {
+      background: #d1fae5;
+      color: #065f46;
+    }
+
+    .status-declined {
+      background: #fee2e2;
+      color: #991b1b;
+    }
+
+    .points {
+      color: #10b981;
+      font-weight: 600;
+      margin-left: 0.25rem;
+    }
+
+    .load-more-container {
+      display: flex;
+      justify-content: center;
+      margin-top: 2rem;
+    }
+
+    .btn {
+      padding: 0.75rem 1.5rem;
+      border: none;
+      border-radius: 6px;
+      font-size: 1rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+
+    .btn-primary {
+      background: #10b981;
+      color: white;
+    }
+
+    .btn-primary:hover:not(:disabled) {
+      background: #059669;
+    }
+
+    .btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  `]
+})
+export class ActivityFeedComponent implements OnInit {
+  private activityService = inject(ActivityService);
+
+  activities = signal<Activity[]>([]);
+  loading = signal(true);
+  loadingMore = signal(false);
+  hasMore = signal(false);
+  offset = 0;
+  limit = 50;
+
+  ngOnInit() {
+    this.loadActivities();
+  }
+
+  loadActivities() {
+    this.activityService.getActivityFeed(this.limit, this.offset).subscribe({
+      next: (response) => {
+        this.activities.set(response.activities);
+        this.hasMore.set(response.hasMore);
+        this.loading.set(false);
+      },
+      error: () => {
+        this.loading.set(false);
+      }
+    });
+  }
+
+  loadMore() {
+    this.loadingMore.set(true);
+    this.offset += this.limit;
+
+    this.activityService.getActivityFeed(this.limit, this.offset).subscribe({
+      next: (response) => {
+        this.activities.update(current => [...current, ...response.activities]);
+        this.hasMore.set(response.hasMore);
+        this.loadingMore.set(false);
+      },
+      error: () => {
+        this.loadingMore.set(false);
+      }
+    });
+  }
+
+  formatTime(date: Date): string {
+    const now = new Date();
+    const activityDate = new Date(date);
+    const diffMs = now.getTime() - activityDate.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
+
+    if (diffMins < 1) return 'just now';
+    if (diffMins < 60) return `${diffMins}m ago`;
+    if (diffHours < 24) return `${diffHours}h ago`;
+    if (diffDays < 7) return `${diffDays}d ago`;
+    return activityDate.toLocaleDateString();
+  }
+
+  formatStatus(status: string): string {
+    switch (status) {
+      case 'UNREVIEWED': return 'Pending';
+      case 'ACCEPTED': return 'Accepted';
+      case 'DECLINED': return 'Declined';
+      default: return status;
+    }
+  }
+}

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

@@ -54,6 +54,7 @@ import { ApiService } from '../../services/api.service';
                   <a routerLink="/settings" class="dropdown-item" (click)="closeDropdown()">Settings</a>
                   <a routerLink="/achievements" class="dropdown-item" (click)="closeDropdown()">🏆 Achievements</a>
                   <a routerLink="/leaderboard" class="dropdown-item" (click)="closeDropdown()">🏆 Leaderboard</a>
+                  <a routerLink="/activity" class="dropdown-item" (click)="closeDropdown()">📰 Activity Feed</a>
                   <a routerLink="/about" class="dropdown-item" (click)="closeDropdown()">ℹ️ About</a>
                   @if (!user.isAdmin) {
                     <a routerLink="/my-suggestions" class="dropdown-item" (click)="closeDropdown()">My Suggestions</a>

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

@@ -0,0 +1,42 @@
+/**
+ * @copyright 2026 NHCarrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+
+import { Injectable, inject } from '@angular/core';
+import { Observable } from 'rxjs';
+import type { ActivityFeedResponse } from '@library/shared-types';
+import { ApiService } from './api.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ActivityService {
+  private apiService = inject(ApiService);
+
+  /**
+   * Get activity feed with pagination.
+   */
+  getActivityFeed(limit = 50, offset = 0, userId?: string): Observable<ActivityFeedResponse> {
+    const params = new URLSearchParams();
+    params.append('limit', limit.toString());
+    params.append('offset', offset.toString());
+    if (userId) {
+      params.append('userId', userId);
+    }
+
+    return this.apiService.get<ActivityFeedResponse>(`/activity?${params.toString()}`);
+  }
+
+  /**
+   * Get activity feed for a specific user.
+   */
+  getUserActivityFeed(userId: string, limit = 50, offset = 0): Observable<ActivityFeedResponse> {
+    const params = new URLSearchParams();
+    params.append('limit', limit.toString());
+    params.append('offset', offset.toString());
+
+    return this.apiService.get<ActivityFeedResponse>(`/activity/${userId}?${params.toString()}`);
+  }
+}

shared-types/src/index.ts

@@ -5,6 +5,7 @@
  */
 export * from "./lib/achievement.constants";
 export * from "./lib/achievement.types";
+export type * from "./lib/activity.types";
 export type * from "./lib/art.types";
 export * from "./lib/audit.types";
 export * from "./lib/auth.types";

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

@@ -0,0 +1,79 @@
+/**
+ * @copyright 2026 NHCarrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+
+enum ActivityType {
+  suggestion = "SUGGESTION",
+  like = "LIKE",
+  comment = "COMMENT",
+  achievement = "ACHIEVEMENT",
+}
+
+interface ActivityUser {
+  id:           string;
+  username:     string;
+  slug:         string | null;
+  avatar:       string | null;
+  primaryBadge: string | null;
+  isVip:        boolean;
+  isMod:        boolean;
+  isStaff:      boolean;
+}
+
+interface BaseActivity {
+  id:        string;
+  type:      ActivityType;
+  user:      ActivityUser;
+  createdAt: Date;
+}
+
+interface SuggestionActivity extends BaseActivity {
+  type:           ActivityType.suggestion;
+  entityType:     string;
+  suggestionTitle: string;
+  status:         string;
+}
+
+interface LikeActivity extends BaseActivity {
+  type:       ActivityType.like;
+  entityType: string;
+  entityId:   string;
+  entityTitle: string;
+}
+
+interface CommentActivity extends BaseActivity {
+  type:        ActivityType.comment;
+  entityType:  string;
+  entityId:    string;
+  entityTitle: string;
+  commentPreview: string;
+}
+
+interface AchievementActivity extends BaseActivity {
+  type:             ActivityType.achievement;
+  achievementKey:   string;
+  achievementName:  string;
+  achievementIcon:  string;
+  achievementPoints: number;
+}
+
+type Activity = SuggestionActivity | LikeActivity | CommentActivity | AchievementActivity;
+
+interface ActivityFeedResponse {
+  activities: Activity[];
+  total:      number;
+  hasMore:    boolean;
+}
+
+export { ActivityType };
+export type {
+  Activity,
+  ActivityFeedResponse,
+  ActivityUser,
+  AchievementActivity,
+  CommentActivity,
+  LikeActivity,
+  SuggestionActivity,
+};