Started working on chapter detail page a bit more.

Changed so when on mobile and selecting something from side nav, it will collapse afterward.

API/Controllers/ChapterController.cs

@@ -0,0 +1,29 @@
+using System.Threading.Tasks;
+using API.Data;
+using API.Data.Repositories;
+using API.DTOs;
+using Microsoft.AspNetCore.Mvc;
+
+namespace API.Controllers;
+
+public class ChapterController : BaseApiController
+{
+    private readonly IUnitOfWork _unitOfWork;
+
+    public ChapterController(IUnitOfWork unitOfWork)
+    {
+        _unitOfWork = unitOfWork;
+    }
+
+    [HttpGet]
+    public async Task<ActionResult<ChapterDto>> GetChapter(int chapterId)
+    {
+        var chapter =
+            await _unitOfWork.ChapterRepository.GetChapterDtoAsync(chapterId,
+                ChapterIncludes.People | ChapterIncludes.Files);
+
+        return Ok(chapter);
+    }
+
+
+}

UI/Web/src/app/_models/chapter.ts

@@ -80,6 +80,6 @@ export interface Chapter {
   teams: Array<Person>;
   locations: Array<Person>;
 
-  primaryColor?: string;
-  secondaryColor?: string;
+  primaryColor: string;
+  secondaryColor: string;
 }

UI/Web/src/app/_services/chapter.service.ts

@@ -4,6 +4,7 @@ import {HttpClient} from "@angular/common/http";
 import {AccountService} from "./account.service";
 import {UserCollection} from "../_models/collection-tag";
 import {Chapter} from "../_models/chapter";
+import {HourEstimateRange} from "../_models/series-detail/hour-estimate-range";
 
 @Injectable({
   providedIn: 'root'
@@ -17,4 +18,5 @@ export class ChapterService {
   getChapterMetadata(chapterId: number) {
     return this.httpClient.get<Chapter>(this.baseUrl + 'chapter/?chapterId=' + chapterId);
   }
+
 }

UI/Web/src/app/chapter-detail/chapter-detail.component.html

@@ -18,7 +18,49 @@
         <!--      }-->
       </div>
       <div class="col-xlg-10 col-lg-8 col-md-8 col-xs-8 col-sm-6 mt-2">
-        Title | chapter {{chapterId}}
+        <h4 class="title">
+          {{series?.name}}
+        </h4>
+        <div class="subtitle">
+          <span>Issue #{{chapter.minNumber}}</span>
+          @if (chapter.titleName) {
+            <span class="ms-3">{{chapter.titleName}}</span>
+          }
+        </div>
+
+        <div class="mt-2">
+          @if (chapter.publishers.length > 0) {
+            <span class="me-2">{{chapter.publishers[0]}}</span>
+          }
+          @if (chapter.ageRating !== AgeRating.Unknown) {
+            <span class="me-2">
+              {{chapter.ageRating | ageRating}}
+            </span>
+          } @else {
+            <span class="me-2">
+              <app-image imageUrl="./assets/images/ratings/unknown-rating.png" height="32px" width="32px"></app-image>
+            </span>
+          }
+
+
+          <span class="me-2"><i class="fa-regular fa-clock me-1" aria-hidden="true"></i> {{chapter.avgHoursToRead | timeDuration }}</span>
+
+          <span>• {{chapter.pages}} pages</span>
+        </div>
+
+        <!-- Rating goes here (after I implement support for rating individual issues -->
+        @if (libraryType !== null && series) {
+          <div class="mt-2">
+            <app-external-rating [seriesId]="series.id"
+                                 [ratings]="[]"
+                                 [userRating]="series.userRating"
+                                 [hasUserRated]="series.hasUserRated"
+                                 [libraryType]="libraryType">
+            </app-external-rating>
+          </div>
+        }
+
+
       </div>
     </div>
   }

UI/Web/src/app/chapter-detail/chapter-detail.component.scss

@@ -0,0 +1,8 @@
+
+.title {
+  color: white;
+}
+
+.subtitle {
+  color: lightgrey;
+}

UI/Web/src/app/chapter-detail/chapter-detail.component.ts

@@ -39,6 +39,17 @@ import {ActivatedRoute, Router} from "@angular/router";
 import {ImageService} from "../_services/image.service";
 import {ChapterService} from "../_services/chapter.service";
 import {Chapter} from "../_models/chapter";
+import {forkJoin} from "rxjs";
+import {SeriesService} from "../_services/series.service";
+import {Series} from "../_models/series";
+import {AgeRating} from "../_models/metadata/age-rating";
+import {AgeRatingPipe} from "../_pipes/age-rating.pipe";
+import {HourEstimateRange} from "../_models/series-detail/hour-estimate-range";
+import {TimeDurationPipe} from "../_pipes/time-duration.pipe";
+import {ExternalRatingComponent} from "../series-detail/_components/external-rating/external-rating.component";
+import {LibraryType} from "../_models/library/library";
+import {LibraryService} from "../_services/library.service";
+import {ThemeService} from "../_services/theme.service";
 
 @Component({
   selector: 'app-chapter-detail',
@@ -68,7 +79,10 @@ import {Chapter} from "../_models/chapter";
     SeriesMetadataDetailComponent,
     TagBadgeComponent,
     VirtualScrollerModule,
-    NgStyle
+    NgStyle,
+    AgeRatingPipe,
+    TimeDurationPipe,
+    ExternalRatingComponent
   ],
   templateUrl: './chapter-detail.component.html',
   styleUrl: './chapter-detail.component.scss',
@@ -82,18 +96,26 @@ export class ChapterDetailComponent implements OnInit {
   private readonly cdRef = inject(ChangeDetectorRef);
   private readonly imageService = inject(ImageService);
   private readonly chapterService = inject(ChapterService);
+  private readonly seriesService = inject(SeriesService);
+  protected readonly libraryService = inject(LibraryService);
+  protected readonly themeService = inject(ThemeService);
 
 
   protected readonly TagBadgeCursor = TagBadgeCursor;
   protected readonly PageLayoutMode = PageLayoutMode;
+  protected readonly AgeRating = AgeRating;
 
   @ViewChild('scrollingBlock') scrollingBlock: ElementRef<HTMLDivElement> | undefined;
   @ViewChild('companionBar') companionBar: ElementRef<HTMLDivElement> | undefined;
 
   isLoading: boolean = true;
   coverImage: string = '';
   chapterId: number = 0;
+  seriesId: number = 0;
   chapter: Chapter | null = null;
+  series: Series | null = null;
+  libraryType: LibraryType | null = null;
+
 
 
   get ScrollingBlockHeight() {
@@ -116,8 +138,25 @@ export class ChapterDetailComponent implements OnInit {
       return;
     }
 
+    this.seriesId = parseInt(seriesId, 10);
     this.chapterId = parseInt(chapterId, 10);
 
+    forkJoin({
+      series: this.seriesService.getSeries(this.seriesId),
+      chapter: this.chapterService.getChapterMetadata(this.chapterId),
+      libraryType: this.libraryService.getLibraryType(parseInt(libraryId, 10))
+    }).subscribe(results => {
+      this.series = results.series;
+      this.chapter = results.chapter;
+      this.libraryType = results.libraryType;
+
+
+      this.themeService.setColorScape(this.chapter.primaryColor, this.chapter.secondaryColor);
+
+      this.isLoading = false;
+      this.cdRef.markForCheck();
+    });
+
     this.chapterService.getChapterMetadata(this.chapterId).subscribe(metadata => {
       this.chapter = metadata;
       this.isLoading = false;
@@ -128,5 +167,4 @@ export class ChapterDetailComponent implements OnInit {
     this.coverImage = this.imageService.getChapterCoverImage(this.chapterId);
     this.cdRef.markForCheck();
   }
-
 }

UI/Web/src/app/sidenav/_components/side-nav-item/side-nav-item.component.ts

@@ -1,18 +1,11 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  DestroyRef,
-  inject,
-  Input,
-  OnInit
-} from '@angular/core';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, inject, Input, OnInit} from '@angular/core';
 import {NavigationEnd, Router, RouterLink} from '@angular/router';
 import {filter, map, tap} from 'rxjs';
-import { NavService } from 'src/app/_services/nav.service';
+import {NavService} from 'src/app/_services/nav.service';
 import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
 import {AsyncPipe, NgClass, NgOptimizedImage, NgTemplateOutlet} from "@angular/common";
 import {ImageComponent} from "../../../shared/image/image.component";
+import {Breakpoint, UtilityService} from "../../../shared/_services/utility.service";
 
 
 @Component({
@@ -28,6 +21,7 @@ export class SideNavItemComponent implements OnInit {
   private readonly router = inject(Router);
   private readonly cdRef = inject(ChangeDetectorRef);
   protected readonly navService = inject(NavService);
+  protected readonly utilityService = inject(UtilityService);
 
   /**
    * Id for automatic scrolling to.
@@ -141,6 +135,8 @@ export class SideNavItemComponent implements OnInit {
   }
 
   openLink() {
+    this.collapseNavIfApplicable();
+
     if (Object.keys(this.queryParams).length !== 0) {
       this.router.navigateByUrl(this.link + '?' + this.queryParams);
       return;
@@ -152,4 +148,11 @@ export class SideNavItemComponent implements OnInit {
     this.router.navigateByUrl(this.link!);
   }
 
+  // If on mobile, automatically collapse the side nav after making a selection
+  collapseNavIfApplicable() {
+    if (this.utilityService.getActiveBreakpoint() < Breakpoint.Tablet) {
+      this.navService.collapseSideNav(true);
+    }
+  }
+
 }