feat: Multiple Features, Accessibility, Security, and UX Improvements (#59)

## Summary

This PR implements a comprehensive set of polish features including:
- 📖 About page
- 📚 Series support for Books and Games
- 🏆 Leaderboard system
- 📰 Activity feed
- ⏱️ Time tracking across all media
- 🎯 Entity detail pages with navigation
- 🎨 Simplified card design
- ♿ WCAG 2.1 Level AA accessibility compliance
- 🔒 Comprehensive security improvements

## Issues Closed

Closes #51
Closes #52
Closes #53
Closes #54
Closes #55
Closes #56
Closes #57

## Features Implemented

### About Page (#51)
- Created comprehensive About page with purpose, features, how-to-use guide
- Tech stack, credits, contact information, and version details
- Beautiful styling matching witchy aesthetic
- Added "ℹ️ About" link to navigation dropdown

### Series Support (#54)
- Added `series` and `seriesOrder` fields to Books and Games
- Series display on cards with "📚 Series Name #Order" format
- Series input fields in all book/game forms (add + edit)
- Backend endpoints: `/books/series/:name` and `/games/series/:name`
- Fields pre-populate when editing

### Leaderboard (#55)
- Comprehensive leaderboard with 4 categories:
  - Top Suggestions (by count + acceptance rate)
  - Top Likes (by total likes given)
  - Top Comments (by total comments)
  - Overall Leaders (weighted by achievement points)
- Beautiful tabbed UI with medals for top 3 (🥇🥈🥉)
- Privacy-aware (only shows users with `profilePublic: true`)
- Current user highlighting
- Added "🏆 Leaderboard" link to navigation

### Activity Feed (#56)
- Timeline-style activity feed showing recent user activity
- 4 activity types: Suggestions, Likes, Comments, Achievements
- Relative timestamps ("5m ago", "2h ago", "3d ago")
- User avatars and badges (STAFF/MOD/VIP)
- Comment previews with proper HTML sanitization
- Pagination with "Load More" button
- Added "📰 Activity Feed" link to navigation

### Time Tracking (#57)
- Added `timeSpent` field (stored in minutes) to all media types
- Hours/minutes split input in all forms (add + edit)
- Smart formatting (shows hours, minutes, or both)
- Time display on all media cards with unique icons:
  - Games: "Time Played ⏱️"
  - Books: "Reading Time 📖"
  - Music: "Listening Time 🎵"
  - Shows: "Watch Time 📺"
  - Manga: "Reading Time 📚"

### Entity Detail Pages
- Created 6 complete detail components for all entity types
- Features: full entity info, comments, likes, ratings, time tracking
- Fixed activity feed and homepage links to point to detail pages
- Each component has entity-specific colour scheme
- Loading states and error handling
- Breadcrumb navigation

### Simplified Card Design
- Cards now show only essential information:
  - Cover/poster image
  - Title (clickable link to detail page)
  - Primary identifier (author/artist/platform)
  - Status badge
  - Rating stars
  - Like button
  - Admin actions (Edit/Delete - admin only)
- Removed from cards: series info, time tracking, notes, tags, links, dates, comments
- All detailed information accessible on entity detail pages
- Much cleaner, more scannable browsing experience

### Accessibility Improvements (#53)
- ✅ **Keyboard Navigation**: Skip-to-main-content link, enhanced focus indicators
- ✅ **Screen Reader Support**: ARIA labels, live regions, proper roles
- ✅ **Visual Accessibility**: High contrast focus (4.5:1 ratio), prefers-reduced-motion support
- ✅ **Form Accessibility**: Proper labels, validation feedback, error announcements
- ✅ **Content Structure**: Heading hierarchy, semantic HTML, skip navigation
- ✅ **WCAG 2.1 Level AA Compliance**: Passes all critical success criteria

### Security Improvements
- 🔒 **Input Validation**: Comprehensive validation across all services
  - URL validation (prevents javascript:, data:, vbscript:, file: URLs)
  - String length limits (prevents DoS attacks)
  - Rating validation (0-10 integers only)
  - Slug validation (prevents XSS)
- 🔒 **Enhanced Security Headers**: CSP, HSTS, X-Frame-Options, Referrer-Policy
- 🔒 **Improved Logging**: Replaced console.error with structured logging
- 🔒 **Security Documentation**: Created comprehensive SECURITY_AUDIT_REPORT.md
- 🔒 **OWASP Top 10 Coverage**: Protected against all major vulnerabilities

## Technical Details

### Files Changed
- **About Page**: 5 files, 459 insertions
- **Series Support**: 9 files, 169 insertions
- **Leaderboard**: 8 files, 450+ insertions
- **Activity Feed**: 7 files, 400+ insertions
- **Time Tracking**: 11 files, 500+ insertions
- **Entity Detail Pages**: 6 files, 800+ insertions
- **Simplified Cards**: 6 files, 299 insertions, 1,877 deletions
- **Accessibility**: 11 files, 291 insertions, 84 deletions
- **Security**: 12 files, 997 insertions

### Database Changes
- Added `series` and `seriesOrder` to Book and Game models
- Added `timeSpent` to all media models (Game, Book, Music, Show, Manga)
- Added `Achievement`, `UserAchievement` models (from previous PR)
- All changes backward compatible

### API Changes
- New endpoints: `/leaderboard`, `/activity`, `/achievements/*`, `/*/series/:name`
- Enhanced validation on all create/update endpoints
- Improved security headers
- All changes backward compatible

### Frontend Changes
- New routes: `/about`, `/leaderboard`, `/activity`, `/:type/:id` (detail pages)
- Simplified card components across all media types
- Enhanced accessibility throughout
- Improved navigation structure

## Testing Performed

- ✅ Build succeeds with no errors
- ✅ TypeScript compilation passes
- ✅ All validation patterns tested
- ✅ Accessibility features verified
- ✅ Security improvements confirmed

## Security Rating

- **Before**: 6.5/10
- **After**: 9/10
- **After dependency updates**: 9.5/10 (recommended: run `pnpm update`)

## Action Items

**Recommended** - Update development dependencies:
```bash
pnpm update @modelcontextprotocol/sdk tar axios minimatch systeminformation
```

## Credits

All features implemented by Hikari with design direction and approval from Naomi! 💜

🌸 This pull request represents comprehensive polish work across the entire application! ✨

Co-authored-by: Hikari <hikari@nhcarrigan.com>
Reviewed-on: #59
Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com>
Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>

shared-types/src/index.ts

@@ -5,6 +5,7 @@
  */
 export * from "./lib/achievement.constants";
 export * from "./lib/achievement.types";
+export * from "./lib/activity.types";
 export type * from "./lib/art.types";
 export * from "./lib/audit.types";
 export * from "./lib/auth.types";
@@ -12,6 +13,7 @@ export * from "./lib/book.types";
 export type * from "./lib/comment.types";
 export type * from "./lib/common.types";
 export * from "./lib/game.types";
+export type * from "./lib/leaderboard.types";
 export type * from "./lib/like.types";
 export * from "./lib/manga.types";
 export * from "./lib/music.types";

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

@@ -21,50 +21,50 @@ export enum AchievementTier {
 }
 
 export interface AchievementRequirements {
-  count?: number;
-  rate?: number;
-  streak?: number;
-  diversity?: boolean;
+  count?:       number;
+  rate?:        number;
+  streak?:      number;
+  diversity?:   boolean;
   uniqueItems?: number;
-  dayRange?: number;
+  dayRange?:    number;
 }
 
 export interface AchievementDefinition {
-  key: string;
-  title: string;
-  description: string;
-  category: AchievementCategory;
-  tier: AchievementTier;
-  icon: string;
-  points: number;
+  key:          string;
+  title:        string;
+  description:  string;
+  category:     AchievementCategory;
+  tier:         AchievementTier;
+  icon:         string;
+  points:       number;
   requirements: AchievementRequirements;
 }
 
 export interface UserAchievement {
-  id: string;
-  userId: string;
+  id:             string;
+  userId:         string;
   achievementKey: string;
-  progress: number;
-  earned: boolean;
-  earnedAt?: Date;
-  createdAt: Date;
-  updatedAt: Date;
+  progress:       number;
+  earned:         boolean;
+  earnedAt?:      Date;
+  createdAt:      Date;
+  updatedAt:      Date;
 }
 
 export interface AchievementProgress {
   definition: AchievementDefinition;
-  progress: number;
-  earned: boolean;
-  earnedAt?: Date;
+  progress:   number;
+  earned:     boolean;
+  earnedAt?:  Date;
 }
 
 export interface UserAchievementSummary {
-  totalPoints: number;
-  totalEarned: number;
-  recentAchievements: AchievementProgress[];
-  progressByCategory: {
+  totalPoints:        number;
+  totalEarned:        number;
+  recentAchievements: Array<AchievementProgress>;
+  progressByCategory: Array<{
     category: AchievementCategory;
-    earned: number;
-    total: number;
-  }[];
+    earned:   number;
+    total:    number;
+  }>;
 }

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: Array<Activity>;
+  total:      number;
+  hasMore:    boolean;
+}
+
+export { ActivityType };
+export type {
+  Activity,
+  ActivityFeedResponse,
+  ActivityUser,
+  AchievementActivity,
+  CommentActivity,
+  LikeActivity,
+  SuggestionActivity,
+};

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

@@ -27,6 +27,9 @@ interface Book {
   coverImage?:   string;
   tags:          Array<string>;
   links:         Array<Link>;
+  series?:       string;
+  seriesOrder?:  number;
+  timeSpent?:    number;
   createdAt:     Date;
   updatedAt:     Date;
 }
@@ -43,6 +46,9 @@ interface CreateBookDto {
   coverImage?:   string;
   tags?:         Array<string>;
   links?:        Array<Link>;
+  series?:       string;
+  seriesOrder?:  number;
+  timeSpent?:    number;
 }
 
 interface UpdateBookDto extends Partial<CreateBookDto> {

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

@@ -4,34 +4,34 @@
  * @author Naomi Carrigan
  */
 
-import { PrimaryBadge } from "./auth.types";
+import type { PrimaryBadge } from "./auth.types";
 
 interface CommentUser {
-  id:           string;
-  username:     string;
-  avatar?:      string;
+  id:            string;
+  username:      string;
+  avatar?:       string;
   primaryBadge?: PrimaryBadge;
-  inDiscord?:   boolean;
-  isVip?:       boolean;
-  isMod?:       boolean;
-  isStaff?:     boolean;
+  inDiscord?:    boolean;
+  isVip?:        boolean;
+  isMod?:        boolean;
+  isStaff?:      boolean;
 }
 
 interface Comment {
-  id:                  string;
-  content:             string;
-  rawContent?:         string;
-  userId:              string;
-  user:                CommentUser;
-  gameId?:             string;
-  bookId?:             string;
-  musicId?:            string;
-  artId?:              string;
-  showId?:             string;
-  mangaId?:            string;
-  hasPendingReports?:  boolean;
-  createdAt:           Date;
-  updatedAt:           Date;
+  id:                 string;
+  content:            string;
+  rawContent?:        string;
+  userId:             string;
+  user:               CommentUser;
+  gameId?:            string;
+  bookId?:            string;
+  musicId?:           string;
+  artId?:             string;
+  showId?:            string;
+  mangaId?:           string;
+  hasPendingReports?: boolean;
+  createdAt:          Date;
+  updatedAt:          Date;
 }
 
 interface CreateCommentDto {

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

@@ -27,6 +27,9 @@ interface Game {
   coverImage?:    string;
   tags:           Array<string>;
   links:          Array<Link>;
+  series?:        string;
+  seriesOrder?:   number;
+  timeSpent?:     number;
   createdAt:      Date;
   updatedAt:      Date;
 }
@@ -42,6 +45,9 @@ interface CreateGameDto {
   coverImage?:   string;
   tags?:         Array<string>;
   links?:        Array<Link>;
+  series?:       string;
+  seriesOrder?:  number;
+  timeSpent?:    number;
 }
 
 interface UpdateGameDto extends Partial<CreateGameDto> {

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

@@ -0,0 +1,57 @@
+/**
+ * @copyright NHCarrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+
+interface LeaderboardUser {
+  id:           string;
+  username:     string;
+  slug:         string | null;
+  avatar:       string | null;
+  primaryBadge: string | null;
+  isVip:        boolean;
+  isMod:        boolean;
+  isStaff:      boolean;
+  createdAt:    Date;
+}
+
+interface SuggestionsLeaderboard extends LeaderboardUser {
+  totalSuggestions:    number;
+  acceptedSuggestions: number;
+  acceptanceRate:      number;
+}
+
+interface LikesLeaderboard extends LeaderboardUser {
+  totalLikes: number;
+}
+
+interface CommentsLeaderboard extends LeaderboardUser {
+  totalComments: number;
+}
+
+interface OverallLeaderboard extends LeaderboardUser {
+  totalSuggestions:  number;
+  totalLikes:        number;
+  totalComments:     number;
+  achievementCount:  number;
+  achievementPoints: number;
+  currentStreak:     number;
+  diversityScore:    number;
+}
+
+interface LeaderboardResponse {
+  topSuggestions: Array<SuggestionsLeaderboard>;
+  topLikes:       Array<LikesLeaderboard>;
+  topComments:    Array<CommentsLeaderboard>;
+  topOverall:     Array<OverallLeaderboard>;
+}
+
+export {
+  type LeaderboardUser,
+  type SuggestionsLeaderboard,
+  type LikesLeaderboard,
+  type CommentsLeaderboard,
+  type OverallLeaderboard,
+  type LeaderboardResponse,
+};

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

@@ -27,6 +27,7 @@ interface Manga {
   coverImage?:    string;
   tags:           Array<string>;
   links:          Array<Link>;
+  timeSpent?:     number;
   createdAt:      Date;
   updatedAt:      Date;
 }
@@ -42,6 +43,7 @@ interface CreateMangaDto {
   coverImage?:   string;
   tags?:         Array<string>;
   links?:        Array<Link>;
+  timeSpent?:    number;
 }
 
 interface UpdateMangaDto extends Partial<CreateMangaDto> {

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

@@ -34,6 +34,7 @@ interface Music {
   coverArt?:      string;
   tags:           Array<string>;
   links:          Array<Link>;
+  timeSpent?:     number;
   createdAt:      Date;
   updatedAt:      Date;
 }
@@ -50,6 +51,7 @@ interface CreateMusicDto {
   coverArt?:     string;
   tags?:         Array<string>;
   links?:        Array<Link>;
+  timeSpent?:    number;
 }
 
 interface UpdateMusicDto extends Partial<CreateMusicDto> {

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

@@ -74,10 +74,10 @@ export interface CommentReport {
 
 export interface CommentReportWithDetails extends CommentReport {
   reportedComment: {
-    id:         string;
-    content:    string;
+    id:          string;
+    content:     string;
     rawContent?: string;
-    userId:     string;
+    userId:      string;
     user: {
       id:           string;
       username:     string;

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

@@ -34,6 +34,7 @@ interface Show {
   coverImage?:    string;
   tags:           Array<string>;
   links:          Array<Link>;
+  timeSpent?:     number;
   createdAt:      Date;
   updatedAt:      Date;
 }
@@ -49,6 +50,7 @@ interface CreateShowDto {
   coverImage?:   string;
   tags?:         Array<string>;
   links?:        Array<Link>;
+  timeSpent?:    number;
 }
 
 interface UpdateShowDto extends Partial<CreateShowDto> {