From 8f95f57838e861a102e483ab97b6625d74429a39 Mon Sep 17 00:00:00 2001
From: Naomi Carrigan <commits@nhcarrigan.com>
Date: Thu, 19 Feb 2026 23:10:28 -0800
Subject: [PATCH] feat: display series information on book and game cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add series name and order display to book cards (books-list.component.ts:598-602)
- Add series name and order display to game cards (games-list.component.ts:560-564)
- Series shows as "📚 Series Name #Order" format
- Add brown-themed styling (#8b6f47) for series info
- Pre-populate series fields when editing books/games
- Series fields added to startEdit() methods for both books and games

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 .../components/books/books-list.component.ts    | 17 ++++++++++++++++-
 .../components/games/games-list.component.ts    | 17 ++++++++++++++++-
 2 files changed, 32 insertions(+), 2 deletions(-)

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 ceda6ed..e1575ed 100644
--- a/apps/frontend/src/app/components/books/books-list.component.ts
+++ b/apps/frontend/src/app/components/books/books-list.component.ts
@@ -595,6 +595,11 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
               <div class="book-info">
                 <h3>{{ book.title }}</h3>
                 <p class="author">by {{ book.author }}</p>
+                @if (book.series) {
+                  <p class="series">
+                    📚 {{ book.series }}@if (book.seriesOrder) { #{{ book.seriesOrder }}}
+                  </p>
+                }
 
                 <span class="status status-{{ book.status }}">
                   {{ getStatusLabel(book.status) }}
@@ -1011,6 +1016,14 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
       margin: 0.5rem 0;
     }
 
+    .series {
+      color: #8b6f47;
+      font-size: 0.85rem;
+      margin: 0.5rem 0;
+      font-weight: 500;
+      font-style: italic;
+    }
+
     .status {
       display: inline-block;
       padding: 0.25rem 0.5rem;
@@ -1747,7 +1760,9 @@ export class BooksListComponent implements OnInit {
       notes: book.notes,
       coverImage: book.coverImage,
       tags: [...(book.tags || [])],
-      links: [...(book.links || [])]
+      links: [...(book.links || [])],
+      series: book.series,
+      seriesOrder: book.seriesOrder
     };
     this.editBookImagePreview.set(book.coverImage || null);
     this.showAddForm.set(false);
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 dddb3b3..aa24251 100644
--- a/apps/frontend/src/app/components/games/games-list.component.ts
+++ b/apps/frontend/src/app/components/games/games-list.component.ts
@@ -557,6 +557,11 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
                 @if (game.platform) {
                   <p class="platform">{{ game.platform }}</p>
                 }
+                @if (game.series) {
+                  <p class="series">
+                    📚 {{ game.series }}@if (game.seriesOrder) { #{{ game.seriesOrder }}}
+                  </p>
+                }
                 <span class="status status-{{ game.status }}">
                   {{ getStatusLabel(game.status) }}
                 </span>
@@ -898,6 +903,14 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
       margin: 0.5rem 0;
     }
 
+    .series {
+      color: #8b6f47;
+      font-size: 0.85rem;
+      margin: 0.5rem 0;
+      font-weight: 500;
+      font-style: italic;
+    }
+
     .status {
       display: inline-block;
       padding: 0.25rem 0.5rem;
@@ -1542,7 +1555,9 @@ export class GamesListComponent implements OnInit {
       notes: game.notes,
       coverImage: game.coverImage,
       tags: [...(game.tags || [])],
-      links: [...(game.links || [])]
+      links: [...(game.links || [])],
+      series: game.series,
+      seriesOrder: game.seriesOrder
     };
     this.editGameImagePreview.set(game.coverImage || null);
     this.showAddForm.set(false);