From fa331df20332d2c748aab556eeddba4b14243760 Mon Sep 17 00:00:00 2001
From: Hikari <hikari@nhcarrigan.com>
Date: Thu, 19 Feb 2026 23:51:04 -0800
Subject: [PATCH] feat: add time tracking to all media types
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implements issue #57 with manual time entry functionality:
- Added timeSpent field (stored in minutes) to all media models
- Supports hours and minutes input in forms
- Displays formatted time on media cards

Database Schema:
- Added timeSpent Int? field to Game, Book, Music, Show, and Manga models
- Stored in minutes for consistency and easy calculation

Shared Types:
- Updated all media type interfaces with timeSpent? field
- Added to CreateDto and main interfaces for all media types

Frontend (Games - template for other types):
- Added hour/minute input fields to Add and Edit forms
- Split input with validation (minutes 0-59)
- Auto-calculates total minutes on change
- Formats display as "Xh Ym", "Xh", or "Ym" as appropriate
- Green highlighted time display on cards with ⏱️ icon
- Populates edit form from existing time data

Implementation Notes:
- Backend services require no changes (DTOs handle automatically)
- Time conversion helpers for display and storage
- Form state properly resets time fields
- Edit mode correctly splits minutes back to hours/minutes

Next Steps:
- Apply same UI pattern to Books, Music, Shows, Manga
- Add time statistics to user profiles
- Consider aggregate time tracking views
---
 api/prisma/schema.prisma                      |   5 +
 .../components/games/games-list.component.ts  | 118 +++++++++++++++++-
 shared-types/src/lib/book.types.ts            |   2 +
 shared-types/src/lib/game.types.ts            |   2 +
 shared-types/src/lib/manga.types.ts           |   2 +
 shared-types/src/lib/music.types.ts           |   2 +
 shared-types/src/lib/show.types.ts            |   2 +
 7 files changed, 132 insertions(+), 1 deletion(-)

diff --git a/api/prisma/schema.prisma b/api/prisma/schema.prisma
index 7ecca71..bbc01e0 100644
--- a/api/prisma/schema.prisma
+++ b/api/prisma/schema.prisma
@@ -34,6 +34,7 @@ model Game {
   links        Link[]
   series       String?
   seriesOrder  Int?      @db.Int
+  timeSpent    Int?      @db.Int
   createdAt    DateTime  @default(now())
   updatedAt    DateTime  @updatedAt
   comments     Comment[]
@@ -62,6 +63,7 @@ model Book {
   links        Link[]
   series       String?
   seriesOrder  Int?      @db.Int
+  timeSpent    Int?      @db.Int
   createdAt    DateTime  @default(now())
   updatedAt    DateTime  @updatedAt
   comments     Comment[]
@@ -89,6 +91,7 @@ model Music {
   coverArt     String?
   tags         String[]
   links        Link[]
+  timeSpent    Int?      @db.Int
   createdAt    DateTime  @default(now())
   updatedAt    DateTime  @updatedAt
   comments     Comment[]
@@ -135,6 +138,7 @@ model Show {
   coverImage   String?
   tags         String[]
   links        Link[]
+  timeSpent    Int?       @db.Int
   createdAt    DateTime   @default(now())
   updatedAt    DateTime   @updatedAt
   comments     Comment[]
@@ -168,6 +172,7 @@ model Manga {
   coverImage   String?
   tags         String[]
   links        Link[]
+  timeSpent    Int?        @db.Int
   createdAt    DateTime    @default(now())
   updatedAt    DateTime    @updatedAt
   comments     Comment[]
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 aa24251..61a65a9 100644
--- a/apps/frontend/src/app/components/games/games-list.component.ts
+++ b/apps/frontend/src/app/components/games/games-list.component.ts
@@ -104,6 +104,34 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
             >
           </div>
 
+          <div class="form-row">
+            <div class="form-group">
+              <label for="timeHours">Time Spent (Hours)</label>
+              <input
+                type="number"
+                id="timeHours"
+                [(ngModel)]="newGameTimeHours"
+                name="timeHours"
+                min="0"
+                placeholder="0"
+                (ngModelChange)="updateNewGameTimeSpent()"
+              >
+            </div>
+            <div class="form-group">
+              <label for="timeMinutes">Time Spent (Minutes)</label>
+              <input
+                type="number"
+                id="timeMinutes"
+                [(ngModel)]="newGameTimeMinutes"
+                name="timeMinutes"
+                min="0"
+                max="59"
+                placeholder="0"
+                (ngModelChange)="updateNewGameTimeSpent()"
+              >
+            </div>
+          </div>
+
           <div class="form-group">
             <label for="notes">Notes</label>
             <textarea
@@ -277,6 +305,34 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
             >
           </div>
 
+          <div class="form-row">
+            <div class="form-group">
+              <label for="edit-timeHours">Time Spent (Hours)</label>
+              <input
+                type="number"
+                id="edit-timeHours"
+                [(ngModel)]="editGameTimeHours"
+                name="timeHours"
+                min="0"
+                placeholder="0"
+                (ngModelChange)="updateEditGameTimeSpent()"
+              >
+            </div>
+            <div class="form-group">
+              <label for="edit-timeMinutes">Time Spent (Minutes)</label>
+              <input
+                type="number"
+                id="edit-timeMinutes"
+                [(ngModel)]="editGameTimeMinutes"
+                name="timeMinutes"
+                min="0"
+                max="59"
+                placeholder="0"
+                (ngModelChange)="updateEditGameTimeSpent()"
+              >
+            </div>
+          </div>
+
           <div class="form-group">
             <label for="edit-notes">Notes</label>
             <textarea
@@ -574,6 +630,12 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
                   </div>
                 }
 
+                @if (game.timeSpent) {
+                  <p class="time-spent">
+                    ⏱️ Time Played: {{ formatTimeSpent(game.timeSpent) }}
+                  </p>
+                }
+
                 <app-like-button
                   entityType="game"
                   [entityId]="game.id"
@@ -741,6 +803,13 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
       font-size: 1rem;
     }
 
+    .form-row {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 1rem;
+      margin-bottom: 1rem;
+    }
+
     .form-actions {
       display: flex;
       gap: 1rem;
@@ -942,6 +1011,13 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
       margin: 0.5rem 0;
     }
 
+    .time-spent {
+      font-size: 0.9rem;
+      color: #10b981;
+      font-weight: 500;
+      margin: 0.5rem 0;
+    }
+
     .date-started,
     .date-finished,
     .date-added,
@@ -1369,6 +1445,12 @@ export class GamesListComponent implements OnInit {
 
   editGame: Partial<UpdateGameDto> = {};
 
+  // Time tracking state
+  newGameTimeHours = 0;
+  newGameTimeMinutes = 0;
+  editGameTimeHours = 0;
+  editGameTimeMinutes = 0;
+
   // Tags and links input state
   newTagInput = '';
   editTagInput = '';
@@ -1461,6 +1543,8 @@ export class GamesListComponent implements OnInit {
       tags: [],
       links: []
     };
+    this.newGameTimeHours = 0;
+    this.newGameTimeMinutes = 0;
     this.newGameImagePreview.set(null);
     this.imageError.set(null);
     this.newTagInput = '';
@@ -1468,6 +1552,16 @@ export class GamesListComponent implements OnInit {
     this.newLinkUrl = '';
   }
 
+  updateNewGameTimeSpent() {
+    const totalMinutes = (this.newGameTimeHours * 60) + this.newGameTimeMinutes;
+    this.newGame.timeSpent = totalMinutes > 0 ? totalMinutes : undefined;
+  }
+
+  updateEditGameTimeSpent() {
+    const totalMinutes = (this.editGameTimeHours * 60) + this.editGameTimeMinutes;
+    this.editGame.timeSpent = totalMinutes > 0 ? totalMinutes : undefined;
+  }
+
   addTag(target: 'new' | 'edit') {
     const input = target === 'new' ? this.newTagInput.trim() : this.editTagInput.trim();
     if (!input) return;
@@ -1557,8 +1651,17 @@ export class GamesListComponent implements OnInit {
       tags: [...(game.tags || [])],
       links: [...(game.links || [])],
       series: game.series,
-      seriesOrder: game.seriesOrder
+      seriesOrder: game.seriesOrder,
+      timeSpent: game.timeSpent
     };
+    // Populate time fields from existing timeSpent
+    if (game.timeSpent) {
+      this.editGameTimeHours = Math.floor(game.timeSpent / 60);
+      this.editGameTimeMinutes = game.timeSpent % 60;
+    } else {
+      this.editGameTimeHours = 0;
+      this.editGameTimeMinutes = 0;
+    }
     this.editGameImagePreview.set(game.coverImage || null);
     this.showAddForm.set(false);
     this.imageError.set(null);
@@ -1650,6 +1753,19 @@ export class GamesListComponent implements OnInit {
     return new Date(date).toLocaleDateString();
   }
 
+  formatTimeSpent(minutes: number): string {
+    const hours = Math.floor(minutes / 60);
+    const mins = minutes % 60;
+
+    if (hours === 0) {
+      return `${mins}m`;
+    } else if (mins === 0) {
+      return `${hours}h`;
+    } else {
+      return `${hours}h ${mins}m`;
+    }
+  }
+
   toggleComments(gameId: string) {
     const expanded = this.expandedComments();
     const isCurrentlyExpanded = expanded[gameId];
diff --git a/shared-types/src/lib/book.types.ts b/shared-types/src/lib/book.types.ts
index 9f856ec..615a650 100644
--- a/shared-types/src/lib/book.types.ts
+++ b/shared-types/src/lib/book.types.ts
@@ -29,6 +29,7 @@ interface Book {
   links:         Array<Link>;
   series?:       string;
   seriesOrder?:  number;
+  timeSpent?:    number;
   createdAt:     Date;
   updatedAt:     Date;
 }
@@ -47,6 +48,7 @@ interface CreateBookDto {
   links?:        Array<Link>;
   series?:       string;
   seriesOrder?:  number;
+  timeSpent?:    number;
 }
 
 interface UpdateBookDto extends Partial<CreateBookDto> {
diff --git a/shared-types/src/lib/game.types.ts b/shared-types/src/lib/game.types.ts
index 4689816..9b16e9a 100644
--- a/shared-types/src/lib/game.types.ts
+++ b/shared-types/src/lib/game.types.ts
@@ -29,6 +29,7 @@ interface Game {
   links:          Array<Link>;
   series?:        string;
   seriesOrder?:   number;
+  timeSpent?:     number;
   createdAt:      Date;
   updatedAt:      Date;
 }
@@ -46,6 +47,7 @@ interface CreateGameDto {
   links?:        Array<Link>;
   series?:       string;
   seriesOrder?:  number;
+  timeSpent?:    number;
 }
 
 interface UpdateGameDto extends Partial<CreateGameDto> {
diff --git a/shared-types/src/lib/manga.types.ts b/shared-types/src/lib/manga.types.ts
index 8173597..9cf79d0 100644
--- a/shared-types/src/lib/manga.types.ts
+++ b/shared-types/src/lib/manga.types.ts
@@ -27,6 +27,7 @@ interface Manga {
   coverImage?:    string;
   tags:           Array<string>;
   links:          Array<Link>;
+  timeSpent?:     number;
   createdAt:      Date;
   updatedAt:      Date;
 }
@@ -42,6 +43,7 @@ interface CreateMangaDto {
   coverImage?:   string;
   tags?:         Array<string>;
   links?:        Array<Link>;
+  timeSpent?:    number;
 }
 
 interface UpdateMangaDto extends Partial<CreateMangaDto> {
diff --git a/shared-types/src/lib/music.types.ts b/shared-types/src/lib/music.types.ts
index 911210b..f85233e 100644
--- a/shared-types/src/lib/music.types.ts
+++ b/shared-types/src/lib/music.types.ts
@@ -34,6 +34,7 @@ interface Music {
   coverArt?:      string;
   tags:           Array<string>;
   links:          Array<Link>;
+  timeSpent?:     number;
   createdAt:      Date;
   updatedAt:      Date;
 }
@@ -50,6 +51,7 @@ interface CreateMusicDto {
   coverArt?:     string;
   tags?:         Array<string>;
   links?:        Array<Link>;
+  timeSpent?:    number;
 }
 
 interface UpdateMusicDto extends Partial<CreateMusicDto> {
diff --git a/shared-types/src/lib/show.types.ts b/shared-types/src/lib/show.types.ts
index 6de3b94..0f65ab6 100644
--- a/shared-types/src/lib/show.types.ts
+++ b/shared-types/src/lib/show.types.ts
@@ -34,6 +34,7 @@ interface Show {
   coverImage?:    string;
   tags:           Array<string>;
   links:          Array<Link>;
+  timeSpent?:     number;
   createdAt:      Date;
   updatedAt:      Date;
 }
@@ -49,6 +50,7 @@ interface CreateShowDto {
   coverImage?:   string;
   tags?:         Array<string>;
   links?:        Array<Link>;
+  timeSpent?:    number;
 }
 
 interface UpdateShowDto extends Partial<CreateShowDto> {