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
+
+ @for (manga of recentManga(); track manga.id) {
+ -
+ {{ manga.title }}
+ by {{ manga.author }}
+
+ }
+
+
+ }
+
+ @if (recentShows().length > 0) {
+
+
📺 Latest Shows
+
+ @for (show of recentShows(); track show.id) {
+ -
+ {{ show.title }}
+ {{ formatShowType(show.type) }}
+
+ }
+
+
+ }
+
+ @if (recentArt().length > 0) {
+
+
🎨 Latest Art
+
+ @for (art of recentArt(); track art.id) {
+ -
+ {{ art.title }}
+ by {{ art.artist }}
+
+ }
+
+
+ }
@@ -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; }