feat: multiple improvements to library functionality (#50)

## Summary

This PR implements several improvements to the library application:

- Added start and finish date tracking for media items
- Added "Retired" category for abandoned media
- Implemented avatar-based user menu with dropdown navigation
- Added automatic background token refresh to prevent session expiry
- Created centralised logging system with frontend-to-API log forwarding
- Added toast notifications for error handling

## Changes

### Media Tracking (#41)
- Added `dateStarted` and `dateFinished` fields to Books, Games, Manga, Music, and Shows
- Updated TypeScript types, Prisma schema, and API services
- Added manual date input fields to frontend forms
- Properly converts HTML date strings to Date objects before API submission

### Retired Category (#43)
- Added `RETIRED` status to all media type enums
- Updated Prisma schema, frontend dropdowns, and filter buttons
- Added status label handling for retired items

### User Menu (#46)
- Replaced username text with avatar image in header
- Created dropdown menu with navigation items (Users, Audit, Suggestions)
- Added logout button to menu
- Implemented keyboard accessibility (tabindex, role, keyup handlers)

### Token Refresh (#44)
- Implemented automatic token refresh every 13 minutes in background
- Added proactive refresh to prevent token expiry during form filling
- Prevents users from losing form data due to expired sessions

### Centralised Logging (#1)
- Created `/log` endpoint on API to receive frontend logs
- Replaced API console.log calls with @nhcarrigan/logger
- Created ConsoleLoggerService to intercept all console methods on frontend
- Added global error handlers (window.error, unhandledrejection) on frontend
- Added process error handlers (uncaughtException, unhandledRejection, SIGTERM, SIGINT) on API
- All frontend console activity now forwarded to centralised logging

### Error Handling
- Created ToastService and ToastComponent for displaying errors
- Integrated with GlobalErrorHandler and HTTP interceptor
- Added accessibility features (keyboard navigation, ARIA attributes)
- Set toast opacity to 40% for optimal readability

### Testing & Build
- Fixed pre-existing test failure for GET / route (now returns version info)
- Added ESM module mocking (jsdom, marked, dompurify, @nhcarrigan/logger)
- Configured Jest with isolatedModules to handle TypeScript errors
- Excluded test-setup.ts from production build
- All tests passing (123 total)
- Build passing with no errors

## Test Plan

- [x] All tests pass (123 tests)
- [x] Build passes without errors
- [x] Lint passes (only pre-existing warnings)
- [x] Date fields work correctly on all media types
- [x] Retired status displays and filters properly
- [x] Avatar menu opens/closes correctly with keyboard and mouse
- [x] Token refresh prevents session expiry
- [x] Toast notifications appear for errors
- [x] Frontend logs forward to API successfully
- [x] Root route returns version information

Closes #41
Closes #43
Closes #44
Closes #46
Closes #1

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

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

@@ -77,9 +77,30 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
               <option [value]="MusicStatus.listening">Currently Listening</option>
               <option [value]="MusicStatus.completed">Completed</option>
               <option [value]="MusicStatus.wantToListen">Want to Listen</option>
+              <option [value]="MusicStatus.retired">Retired</option>
             </select>
           </div>
 
+          <div class="form-group">
+            <label for="dateStarted">Date Started</label>
+            <input
+              type="date"
+              id="dateStarted"
+              [(ngModel)]="newMusic.dateStarted"
+              name="dateStarted"
+            >
+          </div>
+
+          <div class="form-group">
+            <label for="dateFinished">Date Finished</label>
+            <input
+              type="date"
+              id="dateFinished"
+              [(ngModel)]="newMusic.dateFinished"
+              name="dateFinished"
+            >
+          </div>
+
           <div class="form-group">
             <label for="rating">Rating (1-10)</label>
             <input
@@ -124,8 +145,7 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
           </div>
 
           <div class="form-group">
-            <label>Tags</label>
-            <div class="tags-input-container">
+            <div class="tags-input-container" aria-label="Tags">
               @for (tag of newMusic.tags; track tag; let i = $index) {
                 <span class="tag">
                   {{ tag }}
@@ -142,8 +162,7 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
             </div>
           </div>
 
-          <div class="form-group">
-            <label>External Links</label>
+          <div class="form-group" aria-label="External Links">
             <div class="links-list">
               @for (link of newMusic.links; track link.url; let i = $index) {
                 <div class="link-item">
@@ -218,9 +237,30 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
               <option [value]="MusicStatus.listening">Currently Listening</option>
               <option [value]="MusicStatus.completed">Completed</option>
               <option [value]="MusicStatus.wantToListen">Want to Listen</option>
+              <option [value]="MusicStatus.retired">Retired</option>
             </select>
           </div>
 
+          <div class="form-group">
+            <label for="edit-dateStarted">Date Started</label>
+            <input
+              type="date"
+              id="edit-dateStarted"
+              [(ngModel)]="editMusicData.dateStarted"
+              name="dateStarted"
+            >
+          </div>
+
+          <div class="form-group">
+            <label for="edit-dateFinished">Date Finished</label>
+            <input
+              type="date"
+              id="edit-dateFinished"
+              [(ngModel)]="editMusicData.dateFinished"
+              name="dateFinished"
+            >
+          </div>
+
           <div class="form-group">
             <label for="edit-rating">Rating (1-10)</label>
             <input
@@ -265,8 +305,7 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
           </div>
 
           <div class="form-group">
-            <label>Tags</label>
-            <div class="tags-input-container">
+            <div class="tags-input-container" aria-label="Tags">
               @for (tag of editMusicData.tags; track tag; let i = $index) {
                 <span class="tag">
                   {{ tag }}
@@ -283,8 +322,7 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
             </div>
           </div>
 
-          <div class="form-group">
-            <label>External Links</label>
+          <div class="form-group" aria-label="External Links">
             <div class="links-list">
               @for (link of editMusicData.links; track link.url; let i = $index) {
                 <div class="link-item">
@@ -500,6 +538,13 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
           >
             Want to Listen ({{ wantToListenCount() }})
           </button>
+          <button
+            (click)="setStatusFilter(MusicStatus.retired)"
+            [class.active]="statusFilter() === MusicStatus.retired"
+            class="filter-btn"
+          >
+            Retired ({{ retiredCount() }})
+          </button>
         </div>
       </div>
 
@@ -581,9 +626,27 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
                   </div>
                 }
 
-                @if (music.dateCompleted) {
-                  <p class="date-completed">
-                    Completed: {{ formatDate(music.dateCompleted) }}
+                @if (music.dateStarted) {
+                  <p class="date-started">
+                    Started: {{ formatDate(music.dateStarted) }}
+                  </p>
+                }
+
+                @if (music.dateFinished) {
+                  <p class="date-finished">
+                    Finished: {{ formatDate(music.dateFinished) }}
+                  </p>
+                }
+
+                @if (music.createdAt) {
+                  <p class="date-added">
+                    Added: {{ formatDate(music.createdAt) }}
+                  </p>
+                }
+
+                @if (music.updatedAt) {
+                  <p class="date-updated">
+                    Updated: {{ formatDate(music.updatedAt) }}
                   </p>
                 }
 
@@ -1017,7 +1080,10 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
       margin: 0.5rem 0;
     }
 
-    .date-completed {
+    .date-started,
+    .date-finished,
+    .date-added,
+    .date-updated {
       font-size: 0.85rem;
       color: var(--witch-plum);
       margin-top: 0.5rem;
@@ -1435,6 +1501,7 @@ export class MusicListComponent implements OnInit {
   listeningCount = computed(() => this.music().filter(m => m.status === MusicStatus.listening).length);
   completedCount = computed(() => this.music().filter(m => m.status === MusicStatus.completed).length);
   wantToListenCount = computed(() => this.music().filter(m => m.status === MusicStatus.wantToListen).length);
+  retiredCount = computed(() => this.music().filter(m => m.status === MusicStatus.retired).length);
 
   allTags = computed(() => {
     const tagsSet = new Set<string>();
@@ -1488,11 +1555,13 @@ export class MusicListComponent implements OnInit {
 
   totalFilteredMusic = computed(() => this.filteredMusic().length);
 
-  newMusic: Partial<CreateMusicDto> = {
+  newMusic: Partial<CreateMusicDto> & { dateStarted?: Date; dateFinished?: Date } = {
     title: '',
     artist: '',
     type: MusicType.album,
     status: MusicStatus.wantToListen,
+    dateStarted: undefined,
+    dateFinished: undefined,
     rating: undefined,
     notes: '',
     tags: [],
@@ -1583,6 +1652,7 @@ export class MusicListComponent implements OnInit {
       case MusicStatus.listening: return 'Currently Listening';
       case MusicStatus.completed: return 'Completed';
       case MusicStatus.wantToListen: return 'Want to Listen';
+      case MusicStatus.retired: return 'Retired';
     }
   }
 
@@ -1599,6 +1669,8 @@ export class MusicListComponent implements OnInit {
       artist: '',
       type: MusicType.album,
       status: MusicStatus.wantToListen,
+      dateStarted: undefined,
+      dateFinished: undefined,
       rating: undefined,
       notes: '',
       coverArt: undefined,
@@ -1665,6 +1737,8 @@ export class MusicListComponent implements OnInit {
       artist: this.newMusic.artist,
       type: this.newMusic.type,
       status: this.newMusic.status,
+      dateStarted: this.newMusic.dateStarted ? new Date(this.newMusic.dateStarted) : undefined,
+      dateFinished: this.newMusic.dateFinished ? new Date(this.newMusic.dateFinished) : undefined,
       rating: this.newMusic.rating,
       notes: this.newMusic.notes,
       coverArt: this.newMusic.coverArt,
@@ -1693,6 +1767,8 @@ export class MusicListComponent implements OnInit {
       artist: music.artist,
       type: music.type,
       status: music.status,
+      dateStarted: music.dateStarted,
+      dateFinished: music.dateFinished,
       rating: music.rating,
       notes: music.notes,
       coverArt: music.coverArt,
@@ -1721,7 +1797,13 @@ export class MusicListComponent implements OnInit {
     const music = this.editingMusic();
     if (!music || !this.editMusicData.title || !this.editMusicData.artist || !this.editMusicData.type || !this.editMusicData.status) return;
 
-    this.musicService.updateMusic(music.id, this.editMusicData).subscribe(() => {
+    const updateData = {
+      ...this.editMusicData,
+      dateStarted: this.editMusicData.dateStarted ? new Date(this.editMusicData.dateStarted) : undefined,
+      dateFinished: this.editMusicData.dateFinished ? new Date(this.editMusicData.dateFinished) : undefined,
+    };
+
+    this.musicService.updateMusic(music.id, updateData).subscribe(() => {
       this.loadMusic();
       this.cancelEdit();
     });
@@ -1919,7 +2001,7 @@ export class MusicListComponent implements OnInit {
 
     try {
       await this.suggestionService.createSuggestion({
-        entityType: SuggestionEntity.MUSIC,
+        entityType: SuggestionEntity.music,
         title: this.suggestedMusic.title,
         artist: this.suggestedMusic.artist,
         type: this.suggestedMusic.type,