feat: category colour schemes, add stats to home page

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

@@ -10,7 +10,10 @@ import { RouterModule } from '@angular/router';
 import { GamesService } from '../../services/games.service';
 import { BooksService } from '../../services/books.service';
 import { MusicService } from '../../services/music.service';
-import { Game, GameStatus, Book, BookStatus, Music, MusicType } from '@library/shared-types';
+import { MangaService } from '../../services/manga.service';
+import { ShowsService } from '../../services/shows.service';
+import { ArtService } from '../../services/art.service';
+import { Game, GameStatus, Book, BookStatus, Music, MusicType, Manga, MangaStatus, Show, ShowStatus, ShowType, Art } from '@library/shared-types';
 
 @Component({
   selector: 'app-home',
@@ -20,7 +23,7 @@ import { Game, GameStatus, Book, BookStatus, Music, MusicType } from '@library/s
     <div class="container">
       <div class="hero">
         <h1>Welcome to Naomi's Library</h1>
-        <p class="tagline">A personal collection of games, books, and music</p>
+        <p class="tagline">A personal collection of games, books, music, manga, shows, and art</p>
       </div>
 
       <div class="stats-grid">
@@ -50,6 +53,33 @@ import { Game, GameStatus, Book, BookStatus, Music, MusicType } from '@library/s
             <p>{{ albumsCount() }} albums, {{ singlesCount() }} singles</p>
           </div>
         </a>
+
+        <a routerLink="/manga" class="stat-card manga-card">
+          <div class="icon">📖</div>
+          <div class="stat-info">
+            <h3>Manga</h3>
+            <div class="count">{{ mangaCount() }}</div>
+            <p>{{ currentlyReadingMangaCount() }} currently reading</p>
+          </div>
+        </a>
+
+        <a routerLink="/shows" class="stat-card shows-card">
+          <div class="icon">📺</div>
+          <div class="stat-info">
+            <h3>Shows</h3>
+            <div class="count">{{ showsCount() }}</div>
+            <p>{{ animeCount() }} anime, {{ filmsCount() }} films</p>
+          </div>
+        </a>
+
+        <a routerLink="/art" class="stat-card art-card">
+          <div class="icon">🎨</div>
+          <div class="stat-info">
+            <h3>Art</h3>
+            <div class="count">{{ artCount() }}</div>
+            <p>commissioned pieces</p>
+          </div>
+        </a>
       </div>
 
       <div class="recent-section">
@@ -99,6 +129,48 @@ import { Game, GameStatus, Book, BookStatus, Music, MusicType } from '@library/s
               </ul>
             </div>
           }
+
+          @if (recentManga().length > 0) {
+            <div class="recent-category">
+              <h3>📖 Latest Manga</h3>
+              <ul class="recent-list">
+                @for (manga of recentManga(); track manga.id) {
+                  <li>
+                    <a routerLink="/manga">{{ manga.title }}</a>
+                    <span class="author">by {{ manga.author }}</span>
+                  </li>
+                }
+              </ul>
+            </div>
+          }
+
+          @if (recentShows().length > 0) {
+            <div class="recent-category">
+              <h3>📺 Latest Shows</h3>
+              <ul class="recent-list">
+                @for (show of recentShows(); track show.id) {
+                  <li>
+                    <a routerLink="/shows">{{ show.title }}</a>
+                    <span class="show-type">{{ formatShowType(show.type) }}</span>
+                  </li>
+                }
+              </ul>
+            </div>
+          }
+
+          @if (recentArt().length > 0) {
+            <div class="recent-category">
+              <h3>🎨 Latest Art</h3>
+              <ul class="recent-list">
+                @for (art of recentArt(); track art.id) {
+                  <li>
+                    <a routerLink="/art">{{ art.title }}</a>
+                    <span class="artist">by {{ art.artist }}</span>
+                  </li>
+                }
+              </ul>
+            </div>
+          }
         </div>
       </div>
     </div>
@@ -154,9 +226,12 @@ import { Game, GameStatus, Book, BookStatus, Music, MusicType } from '@library/s
       background: var(--witch-moon);
     }
 
-    .games-card:hover { border-color: var(--witch-rose); }
-    .books-card:hover { border-color: var(--witch-plum); }
-    .music-card:hover { border-color: var(--witch-purple); }
+    .games-card:hover { border-color: #ff6b6b; }
+    .books-card:hover { border-color: #8b6f47; }
+    .music-card:hover { border-color: #74b9ff; }
+    .manga-card:hover { border-color: #00b894; }
+    .shows-card:hover { border-color: #e84393; }
+    .art-card:hover { border-color: #fdcb6e; }
 
     .icon {
       font-size: 3rem;
@@ -176,9 +251,12 @@ import { Game, GameStatus, Book, BookStatus, Music, MusicType } from '@library/s
       margin-bottom: 0.5rem;
     }
 
-    .games-card .count { color: var(--witch-rose); }
-    .books-card .count { color: var(--witch-plum); }
-    .music-card .count { color: var(--witch-purple); }
+    .games-card .count { color: #ff6b6b; }
+    .books-card .count { color: #8b6f47; }
+    .music-card .count { color: #74b9ff; }
+    .manga-card .count { color: #00b894; }
+    .shows-card .count { color: #e84393; }
+    .art-card .count { color: #fdcb6e; }
 
     .stat-info p {
       margin: 0;
@@ -239,7 +317,8 @@ import { Game, GameStatus, Book, BookStatus, Music, MusicType } from '@library/s
 
     .platform,
     .author,
-    .artist {
+    .artist,
+    .show-type {
       display: block;
       font-size: 0.85rem;
       color: var(--witch-plum);
@@ -251,16 +330,25 @@ export class HomeComponent implements OnInit {
   gamesService = inject(GamesService);
   booksService = inject(BooksService);
   musicService = inject(MusicService);
+  mangaService = inject(MangaService);
+  showsService = inject(ShowsService);
+  artService = inject(ArtService);
 
   games = signal<Game[]>([]);
   books = signal<Book[]>([]);
   music = signal<Music[]>([]);
+  manga = signal<Manga[]>([]);
+  shows = signal<Show[]>([]);
+  art = signal<Art[]>([]);
 
   ngOnInit() {
     // Load all data
     this.gamesService.getAllGames().subscribe(games => this.games.set(games));
     this.booksService.getAllBooks().subscribe(books => this.books.set(books));
     this.musicService.getAllMusic().subscribe(music => this.music.set(music));
+    this.mangaService.getAllManga().subscribe(manga => this.manga.set(manga));
+    this.showsService.getAllShows().subscribe(shows => this.shows.set(shows));
+    this.artService.getAllArt().subscribe(art => this.art.set(art));
   }
 
   // Games stats
@@ -305,4 +393,58 @@ export class HomeComponent implements OnInit {
   recentMusic() {
     return this.music().slice(0, 5);
   }
+
+  // Manga stats
+  mangaCount() {
+    return this.manga().length;
+  }
+
+  currentlyReadingMangaCount() {
+    return this.manga().filter(m => m.status === MangaStatus.reading).length;
+  }
+
+  recentManga() {
+    return this.manga().slice(0, 5);
+  }
+
+  // Shows stats
+  showsCount() {
+    return this.shows().length;
+  }
+
+  animeCount() {
+    return this.shows().filter(s => s.type === ShowType.anime).length;
+  }
+
+  filmsCount() {
+    return this.shows().filter(s => s.type === ShowType.film).length;
+  }
+
+  recentShows() {
+    return this.shows().slice(0, 5);
+  }
+
+  formatShowType(type: ShowType): string {
+    switch (type) {
+      case ShowType.tvSeries:
+        return 'TV Series';
+      case ShowType.anime:
+        return 'Anime';
+      case ShowType.film:
+        return 'Film';
+      case ShowType.documentary:
+        return 'Documentary';
+      default:
+        return type;
+    }
+  }
+
+  // Art stats
+  artCount() {
+    return this.art().length;
+  }
+
+  recentArt() {
+    return this.art().slice(0, 5);
+  }
 }