feat: add retired category

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

@@ -79,6 +79,7 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
               <option [value]="BookStatus.reading">Currently Reading</option>
               <option [value]="BookStatus.finished">Finished</option>
               <option [value]="BookStatus.toRead">To Read</option>
+              <option [value]="BookStatus.retired">Retired</option>
             </select>
           </div>
 
@@ -240,6 +241,7 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
               <option [value]="BookStatus.reading">Currently Reading</option>
               <option [value]="BookStatus.finished">Finished</option>
               <option [value]="BookStatus.toRead">To Read</option>
+              <option [value]="BookStatus.retired">Retired</option>
             </select>
           </div>
 
@@ -510,6 +512,13 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
         >
           To Read ({{ toReadCount() }})
         </button>
+        <button
+          (click)="setFilter(BookStatus.retired)"
+          [class.active]="statusFilter() === BookStatus.retired"
+          class="filter-btn"
+        >
+          Retired ({{ retiredCount() }})
+        </button>
       </div>
 
       @if (loading()) {
@@ -1473,6 +1482,7 @@ export class BooksListComponent implements OnInit {
   readingCount = computed(() => this.books().filter(book => book.status === BookStatus.reading).length);
   finishedCount = computed(() => this.books().filter(book => book.status === BookStatus.finished).length);
   toReadCount = computed(() => this.books().filter(book => book.status === BookStatus.toRead).length);
+  retiredCount = computed(() => this.books().filter(book => book.status === BookStatus.retired).length);
 
   // Get all unique tags from all books
   allTags = computed(() => {
@@ -1610,6 +1620,7 @@ export class BooksListComponent implements OnInit {
       case BookStatus.reading: return 'Currently Reading';
       case BookStatus.finished: return 'Finished';
       case BookStatus.toRead: return 'To Read';
+      case BookStatus.retired: return 'Retired';
     }
   }
 

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

@@ -67,6 +67,7 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
               <option [value]="GameStatus.playing">Currently Playing</option>
               <option [value]="GameStatus.completed">Completed</option>
               <option [value]="GameStatus.backlog">In Backlog</option>
+              <option [value]="GameStatus.retired">Retired</option>
             </select>
           </div>
 
@@ -216,6 +217,7 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
               <option [value]="GameStatus.playing">Currently Playing</option>
               <option [value]="GameStatus.completed">Completed</option>
               <option [value]="GameStatus.backlog">In Backlog</option>
+              <option [value]="GameStatus.retired">Retired</option>
             </select>
           </div>
 
@@ -472,6 +474,13 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
         >
           Backlog ({{ backlogCount() }})
         </button>
+        <button
+          (click)="setFilter(GameStatus.retired)"
+          [class.active]="statusFilter() === GameStatus.retired"
+          class="filter-btn"
+        >
+          Retired ({{ retiredCount() }})
+        </button>
       </div>
 
       @if (loading()) {
@@ -1278,6 +1287,7 @@ export class GamesListComponent implements OnInit {
   playingCount = computed(() => this.games().filter(game => game.status === GameStatus.playing).length);
   completedCount = computed(() => this.games().filter(game => game.status === GameStatus.completed).length);
   backlogCount = computed(() => this.games().filter(game => game.status === GameStatus.backlog).length);
+  retiredCount = computed(() => this.games().filter(game => game.status === GameStatus.retired).length);
 
   allTags = computed(() => {
     const tagsSet = new Set<string>();
@@ -1408,6 +1418,7 @@ export class GamesListComponent implements OnInit {
       case GameStatus.playing: return 'Currently Playing';
       case GameStatus.completed: return 'Completed';
       case GameStatus.backlog: return 'In Backlog';
+      case GameStatus.retired: return 'Retired';
     }
   }
 

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

@@ -68,6 +68,7 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
               <option [value]="MangaStatus.reading">Currently Reading</option>
               <option [value]="MangaStatus.completed">Completed</option>
               <option [value]="MangaStatus.wantToRead">Want to Read</option>
+              <option [value]="MangaStatus.retired">Retired</option>
             </select>
           </div>
 
@@ -218,6 +219,7 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
               <option [value]="MangaStatus.reading">Currently Reading</option>
               <option [value]="MangaStatus.completed">Completed</option>
               <option [value]="MangaStatus.wantToRead">Want to Read</option>
+              <option [value]="MangaStatus.retired">Retired</option>
             </select>
           </div>
 
@@ -475,6 +477,13 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
         >
           Want to Read ({{ wantToReadCount() }})
         </button>
+        <button
+          (click)="setFilter(MangaStatus.retired)"
+          [class.active]="statusFilter() === MangaStatus.retired"
+          class="filter-btn"
+        >
+          Retired ({{ retiredCount() }})
+        </button>
       </div>
 
       @if (loading()) {
@@ -1285,6 +1294,7 @@ export class MangaListComponent implements OnInit {
   readingCount = computed(() => this.mangaList().filter(m => m.status === MangaStatus.reading).length);
   completedCount = computed(() => this.mangaList().filter(m => m.status === MangaStatus.completed).length);
   wantToReadCount = computed(() => this.mangaList().filter(m => m.status === MangaStatus.wantToRead).length);
+  retiredCount = computed(() => this.mangaList().filter(m => m.status === MangaStatus.retired).length);
 
   allTags = computed(() => {
     const tagsSet = new Set<string>();
@@ -1415,6 +1425,7 @@ export class MangaListComponent implements OnInit {
       case MangaStatus.reading: return 'Currently Reading';
       case MangaStatus.completed: return 'Completed';
       case MangaStatus.wantToRead: return 'Want to Read';
+      case MangaStatus.retired: return 'Retired';
     }
   }
 

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

@@ -77,6 +77,7 @@ 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>
 
@@ -236,6 +237,7 @@ 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>
 
@@ -536,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>
 
@@ -1492,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>();
@@ -1642,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';
     }
   }
 

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

@@ -66,6 +66,7 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
               <option [value]="ShowStatus.watching">Currently Watching</option>
               <option [value]="ShowStatus.completed">Completed</option>
               <option [value]="ShowStatus.wantToWatch">Want to Watch</option>
+              <option [value]="ShowStatus.retired">Retired</option>
             </select>
           </div>
 
@@ -214,6 +215,7 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
               <option [value]="ShowStatus.watching">Currently Watching</option>
               <option [value]="ShowStatus.completed">Completed</option>
               <option [value]="ShowStatus.wantToWatch">Want to Watch</option>
+              <option [value]="ShowStatus.retired">Retired</option>
             </select>
           </div>
 
@@ -469,6 +471,13 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
         >
           Want to Watch ({{ wantToWatchCount() }})
         </button>
+        <button
+          (click)="setFilter(ShowStatus.retired)"
+          [class.active]="statusFilter() === ShowStatus.retired"
+          class="filter-btn"
+        >
+          Retired ({{ retiredCount() }})
+        </button>
       </div>
 
       @if (loading()) {
@@ -1279,6 +1288,7 @@ export class ShowsListComponent implements OnInit {
   watchingCount = computed(() => this.shows().filter(show => show.status === ShowStatus.watching).length);
   completedCount = computed(() => this.shows().filter(show => show.status === ShowStatus.completed).length);
   wantToWatchCount = computed(() => this.shows().filter(show => show.status === ShowStatus.wantToWatch).length);
+  retiredCount = computed(() => this.shows().filter(show => show.status === ShowStatus.retired).length);
 
   allTags = computed(() => {
     const tagsSet = new Set<string>();
@@ -1409,6 +1419,7 @@ export class ShowsListComponent implements OnInit {
       case ShowStatus.watching: return 'Currently Watching';
       case ShowStatus.completed: return 'Completed';
       case ShowStatus.wantToWatch: return 'Want to Watch';
+      case ShowStatus.retired: return 'Retired';
     }
   }