From 912a8887a5c87208eb19e48cbc4f825ba1046fcf Mon Sep 17 00:00:00 2001 From: Naomi Carrigan Date: Wed, 4 Feb 2026 18:32:55 -0800 Subject: [PATCH] feat: category colour schemes, add stats to home page --- .../components/art/art-gallery.component.ts | 12 +- .../components/books/books-list.component.ts | 24 +-- .../components/games/games-list.component.ts | 4 +- .../src/app/components/home/home.component.ts | 160 +++++++++++++++++- .../components/manga/manga-list.component.ts | 4 +- .../components/music/music-list.component.ts | 24 +-- .../components/shows/shows-list.component.ts | 4 +- 7 files changed, 187 insertions(+), 45 deletions(-) diff --git a/apps/frontend/src/app/components/art/art-gallery.component.ts b/apps/frontend/src/app/components/art/art-gallery.component.ts index 21d4446..c02c1f6 100644 --- a/apps/frontend/src/app/components/art/art-gallery.component.ts +++ b/apps/frontend/src/app/components/art/art-gallery.component.ts @@ -500,18 +500,18 @@ import { Art, CreateArtDto, UpdateArtDto, Comment } from '@library/shared-types' } .btn-primary { - background: var(--witch-rose); - color: var(--witch-moon); + background: #fdcb6e; + color: #333; } .btn-secondary { - background: var(--witch-mauve); - color: var(--witch-purple); + background: #6b7280; + color: white; } .btn-danger { - background: var(--witch-plum); - color: var(--witch-moon); + background: #ef4444; + color: white; } .btn-sm { diff --git a/apps/frontend/src/app/components/books/books-list.component.ts b/apps/frontend/src/app/components/books/books-list.component.ts index 93e6344..e745e8f 100644 --- a/apps/frontend/src/app/components/books/books-list.component.ts +++ b/apps/frontend/src/app/components/books/books-list.component.ts @@ -482,8 +482,8 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment } from '@librar } .filter-btn.active { - background: var(--witch-plum); - color: var(--witch-moon); + background: #8b6f47; + color: white; } .loading { @@ -623,33 +623,33 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment } from '@librar } .btn-primary { - background: var(--witch-rose); - color: var(--witch-moon); + background: #8b6f47; + color: white; } .btn-primary:hover { - background: var(--witch-plum); + background: #725a3a; transform: translateY(-2px); box-shadow: 0 4px 8px var(--witch-shadow); } .btn-secondary { - background: var(--witch-mauve); - color: var(--witch-purple); + background: #6b7280; + color: white; } .btn-secondary:hover { - background: var(--witch-rose); - color: var(--witch-moon); + background: #4b5563; + color: white; } .btn-danger { - background: var(--witch-plum); - color: var(--witch-moon); + background: #ef4444; + color: white; } .btn-danger:hover { - background: var(--witch-purple); + background: #dc2626; } .btn-sm { padding: 0.25rem 0.75rem; font-size: 0.85rem; } diff --git a/apps/frontend/src/app/components/games/games-list.component.ts b/apps/frontend/src/app/components/games/games-list.component.ts index 2af1ffc..f08c9b2 100644 --- a/apps/frontend/src/app/components/games/games-list.component.ts +++ b/apps/frontend/src/app/components/games/games-list.component.ts @@ -431,7 +431,7 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment } from '@librar } .filter-btn.active { - background: #3b82f6; + background: #ff6b6b; color: white; } @@ -539,7 +539,7 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment } from '@librar opacity: 0.8; } - .btn-primary { background: #3b82f6; color: white; } + .btn-primary { background: #ff6b6b; color: white; } .btn-secondary { background: #6b7280; color: white; } .btn-danger { background: #ef4444; color: white; } .btn-sm { padding: 0.25rem 0.75rem; font-size: 0.85rem; } diff --git a/apps/frontend/src/app/components/home/home.component.ts b/apps/frontend/src/app/components/home/home.component.ts index 3045431..d3a3506 100644 --- a/apps/frontend/src/app/components/home/home.component.ts +++ b/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

Welcome to Naomi's Library

-

A personal collection of games, books, and music

+

A personal collection of games, books, music, manga, shows, and art

@@ -50,6 +53,33 @@ import { Game, GameStatus, Book, BookStatus, Music, MusicType } from '@library/s

{{ albumsCount() }} albums, {{ singlesCount() }} singles

+ + +
📖
+
+

Manga

+
{{ mangaCount() }}
+

{{ currentlyReadingMangaCount() }} currently reading

+
+ + + +
📺
+
+

Shows

+
{{ showsCount() }}
+

{{ animeCount() }} anime, {{ filmsCount() }} films

+
+ + + +
🎨
+
+

Art

+
{{ artCount() }}
+

commissioned pieces

+
+
@@ -99,6 +129,48 @@ import { Game, GameStatus, Book, BookStatus, Music, MusicType } from '@library/s
} + + @if (recentManga().length > 0) { +
+

📖 Latest Manga

+ +
+ } + + @if (recentShows().length > 0) { +
+

📺 Latest Shows

+ +
+ } + + @if (recentArt().length > 0) { +
+

🎨 Latest Art

+ +
+ } @@ -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([]); books = signal([]); music = signal([]); + manga = signal([]); + shows = signal([]); + art = signal([]); 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); + } } \ No newline at end of file diff --git a/apps/frontend/src/app/components/manga/manga-list.component.ts b/apps/frontend/src/app/components/manga/manga-list.component.ts index 82fa999..552a01a 100644 --- a/apps/frontend/src/app/components/manga/manga-list.component.ts +++ b/apps/frontend/src/app/components/manga/manga-list.component.ts @@ -432,7 +432,7 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment } from '@li } .filter-btn.active { - background: #ec4899; + background: #00b894; color: white; } @@ -541,7 +541,7 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment } from '@li opacity: 0.8; } - .btn-primary { background: #ec4899; color: white; } + .btn-primary { background: #00b894; color: white; } .btn-secondary { background: #6b7280; color: white; } .btn-danger { background: #ef4444; color: white; } .btn-sm { padding: 0.25rem 0.75rem; font-size: 0.85rem; } diff --git a/apps/frontend/src/app/components/music/music-list.component.ts b/apps/frontend/src/app/components/music/music-list.component.ts index ef306c8..3e109a8 100644 --- a/apps/frontend/src/app/components/music/music-list.component.ts +++ b/apps/frontend/src/app/components/music/music-list.component.ts @@ -533,8 +533,8 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment } .filter-btn.active { - background: var(--witch-rose); - color: var(--witch-moon); + background: #74b9ff; + color: white; } .loading { @@ -695,33 +695,33 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment } .btn-primary { - background: var(--witch-rose); - color: var(--witch-moon); + background: #74b9ff; + color: white; } .btn-primary:hover { - background: var(--witch-plum); + background: #4a9ff5; transform: translateY(-2px); box-shadow: 0 4px 8px var(--witch-shadow); } .btn-secondary { - background: var(--witch-mauve); - color: var(--witch-purple); + background: #6b7280; + color: white; } .btn-secondary:hover { - background: var(--witch-rose); - color: var(--witch-moon); + background: #4b5563; + color: white; } .btn-danger { - background: var(--witch-plum); - color: var(--witch-moon); + background: #ef4444; + color: white; } .btn-danger:hover { - background: var(--witch-purple); + background: #dc2626; } .btn-sm { diff --git a/apps/frontend/src/app/components/shows/shows-list.component.ts b/apps/frontend/src/app/components/shows/shows-list.component.ts index 4bff65b..86bd73b 100644 --- a/apps/frontend/src/app/components/shows/shows-list.component.ts +++ b/apps/frontend/src/app/components/shows/shows-list.component.ts @@ -428,7 +428,7 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment } fro } .filter-btn.active { - background: #8b5cf6; + background: #e84393; color: white; } @@ -536,7 +536,7 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment } fro opacity: 0.8; } - .btn-primary { background: #8b5cf6; color: white; } + .btn-primary { background: #e84393; color: white; } .btn-secondary { background: #6b7280; color: white; } .btn-danger { background: #ef4444; color: white; } .btn-sm { padding: 0.25rem 0.75rem; font-size: 0.85rem; }