More Epub Fixes (#4017)

Co-authored-by: Amelia <77553571+Fesaa@users.noreply.github.com>

API.Tests/AbstractDbTest.cs

@@ -30,7 +30,6 @@ public abstract class AbstractDbTest(ITestOutputHelper testOutputHelper): Abstra
             .EnableSensitiveDataLogging()
             .Options;
 
-        var connection = RelationalOptionsExtension.Extract(contextOptions).Connection;
         var context = new DataContext(contextOptions);
 
         await context.Database.EnsureCreatedAsync();
@@ -59,9 +58,7 @@ public abstract class AbstractDbTest(ITestOutputHelper testOutputHelper): Abstra
     {
         try
         {
-            await context.Database.EnsureCreatedAsync();
             var filesystem = CreateFileSystem();
-
             await Seed.SeedSettings(context, new DirectoryService(Substitute.For<ILogger<DirectoryService>>(), filesystem));
 
             var setting = await context.ServerSetting.Where(s => s.Key == ServerSettingKey.CacheDirectory).SingleAsync();

API.Tests/Repository/SeriesRepositoryTests.cs

@@ -6,6 +6,7 @@ using System.Threading.Tasks;
 using API.Data;
 using API.Entities;
 using API.Entities.Enums;
+using API.Entities.Metadata;
 using API.Helpers;
 using API.Helpers.Builders;
 using API.Services;
@@ -158,6 +159,58 @@ public class SeriesRepositoryTests
         }
     }
 
+    [Theory]
+    [InlineData(12345, null, 12345)] // Case 1: Prioritize existing ExternalSeries id
+    [InlineData(0, "https://anilist.co/manga/100664/Ijiranaide-Nagatorosan/", 100664)] // Case 2: Extract from weblink if no external series id
+    [InlineData(0, "", null)] // Case 3: Return null if neither exist
+    public async Task GetPlusSeriesDto_Should_PrioritizeAniListId_Correctly(int externalAniListId, string? webLinks, int? expectedAniListId)
+    {
+        // Arrange
+        await ResetDb();
+
+        var series = new SeriesBuilder("Test Series")
+            .WithFormat(MangaFormat.Archive)
+            .Build();
+
+        var library = new LibraryBuilder("Test Library", LibraryType.Manga)
+            .WithFolderPath(new FolderPathBuilder("C:/data/manga/").Build())
+            .WithSeries(series)
+            .Build();
+
+
+
+        // Set up ExternalSeriesMetadata
+        series.ExternalSeriesMetadata = new ExternalSeriesMetadata()
+        {
+            AniListId = externalAniListId,
+            CbrId = 0,
+            MalId = 0,
+            GoogleBooksId = string.Empty
+        };
+
+        // Set up SeriesMetadata with WebLinks
+        series.Metadata = new SeriesMetadata()
+        {
+            WebLinks = webLinks,
+            ReleaseYear = 2021
+        };
+
+        _unitOfWork.LibraryRepository.Add(library);
+        _unitOfWork.SeriesRepository.Add(series);
+        await _unitOfWork.CommitAsync();
+
+        // Act
+        var result = await _unitOfWork.SeriesRepository.GetPlusSeriesDto(series.Id);
+
+        // Assert
+        Assert.NotNull(result);
+        Assert.Equal(expectedAniListId, result.AniListId);
+        Assert.Equal("Test Series", result.SeriesName);
+    }
+
     // TODO: GetSeriesDtoForLibraryIdV2Async Tests (On Deck)
 
+
+
+
 }

API/DTOs/Scrobbling/PlusSeriesDto.cs

@@ -4,7 +4,7 @@
 /// <summary>
 /// Represents information about a potential Series for Kavita+
 /// </summary>
-public sealed record PlusSeriesRequestDto
+public class PlusSeriesRequestDto
 {
     public int? AniListId { get; set; }
     public long? MalId { get; set; }

API/Data/Repositories/SeriesRepository.cs

@@ -752,7 +752,10 @@ public class SeriesRepository : ISeriesRepository
 
     public async Task<PlusSeriesRequestDto?> GetPlusSeriesDto(int seriesId)
     {
-        return await _context.Series
+
+        // I need to check Weblinks when AniListId/MalId is already set in ExternalSeries
+        // Updating stale data should prioritize ExernalSeriesMetada before Weblinks, to priorize prior matches
+        var result = await _context.Series
             .Where(s => s.Id == seriesId)
             .Include(s => s.ExternalSeriesMetadata)
             .Select(series => new PlusSeriesRequestDto()
@@ -760,13 +763,16 @@ public class SeriesRepository : ISeriesRepository
                 MediaFormat = series.Library.Type.ConvertToPlusMediaFormat(series.Format),
                 SeriesName = series.Name,
                 AltSeriesName = series.LocalizedName,
-                AniListId = ScrobblingService.ExtractId<int?>(series.Metadata.WebLinks,
+                AniListId = series.ExternalSeriesMetadata.AniListId != 0
-                    ScrobblingService.AniListWeblinkWebsite),
+                    ? series.ExternalSeriesMetadata.AniListId
-                MalId = ScrobblingService.ExtractId<long?>(series.Metadata.WebLinks,
+                    : ScrobblingService.ExtractId<int?>(series.Metadata.WebLinks, ScrobblingService.AniListWeblinkWebsite),
-                    ScrobblingService.MalWeblinkWebsite),
+                MalId = series.ExternalSeriesMetadata.MalId != 0
+                    ? series.ExternalSeriesMetadata.MalId
+                    : ScrobblingService.ExtractId<long?>(series.Metadata.WebLinks, ScrobblingService.MalWeblinkWebsite),
                 CbrId = series.ExternalSeriesMetadata.CbrId,
-                GoogleBooksId = ScrobblingService.ExtractId<string?>(series.Metadata.WebLinks,
+                GoogleBooksId = !string.IsNullOrEmpty(series.ExternalSeriesMetadata.GoogleBooksId)
-                    ScrobblingService.GoogleBooksWeblinkWebsite),
+                    ? series.ExternalSeriesMetadata.GoogleBooksId
+                    : ScrobblingService.ExtractId<string?>(series.Metadata.WebLinks, ScrobblingService.GoogleBooksWeblinkWebsite),
                 MangaDexId = ScrobblingService.ExtractId<string?>(series.Metadata.WebLinks,
                     ScrobblingService.MangaDexWeblinkWebsite),
                 VolumeCount = series.Volumes.Count,
@@ -774,6 +780,8 @@ public class SeriesRepository : ISeriesRepository
                 Year = series.Metadata.ReleaseYear
             })
             .FirstOrDefaultAsync();
+
+        return result;
     }
 
     public async Task<int> GetCountAsync()

API/Services/Plus/ExternalMetadataService.cs

@@ -121,8 +121,17 @@ public class ExternalMetadataService : IExternalMetadataService
     {
         // Find all Series that are eligible and limit
         var ids = await _unitOfWork.ExternalSeriesMetadataRepository.GetSeriesThatNeedExternalMetadata(25);
-        if (ids.Count == 0) return;
+        if (ids.Count == 0)
-        ids = await _unitOfWork.ExternalSeriesMetadataRepository.GetSeriesThatNeedExternalMetadata(25, true);
+        {
+            ids = await _unitOfWork.ExternalSeriesMetadataRepository.GetSeriesThatNeedExternalMetadata(25, true);
+        }
+
+        if (ids.Count == 0)
+        {
+            _logger.LogInformation("[Kavita+ Data Refresh] No series need matching or refreshing (stale data)");
+            return;
+        }
+
 
         _logger.LogInformation("[Kavita+ Data Refresh] Started Refreshing {Count} series data from Kavita+: {Ids}", ids.Count, string.Join(',', ids));
         var count = 0;
@@ -137,7 +146,7 @@ public class ExternalMetadataService : IExternalMetadataService
                 count++;
                 successfulMatches.Add(seriesId);
             }
-            await Task.Delay(6000); // Currently AL is degraded and has 30 requests/min, give a little padding since this is a background request
+            await Task.Delay(10000); // Currently AL is degraded and has 30 requests/min, give a little padding since this is a background request
         }
         _logger.LogInformation("[Kavita+ Data Refresh] Finished Refreshing {Count} / {Total} series data from Kavita+: {Ids}", count, ids.Count, string.Join(',', successfulMatches));
     }

UI/Web/package.json

@@ -18,17 +18,17 @@
   "private": true,
   "dependencies": {
     "@angular-slider/ngx-slider": "^20.0.0",
-    "@angular/animations": "^20.1.4",
+    "@angular/animations": "^20.2.3",
-    "@angular/cdk": "^20.1.4",
+    "@angular/cdk": "^20.2.1",
-    "@angular/common": "^20.1.4",
+    "@angular/common": "^20.2.3",
-    "@angular/compiler": "^20.1.4",
+    "@angular/compiler": "^20.2.3",
-    "@angular/core": "^20.1.4",
+    "@angular/core": "^20.2.3",
-    "@angular/forms": "^20.1.4",
+    "@angular/forms": "^20.2.3",
-    "@angular/localize": "^20.1.4",
+    "@angular/localize": "^20.2.3",
-    "@angular/platform-browser": "^20.1.4",
+    "@angular/platform-browser": "^20.2.3",
-    "@angular/platform-browser-dynamic": "^20.1.4",
+    "@angular/platform-browser-dynamic": "^20.2.3",
-    "@angular/router": "^20.1.4",
+    "@angular/router": "^20.2.3",
-    "@fortawesome/fontawesome-free": "^7.0.0",
+    "@fortawesome/fontawesome-free": "^7.0.1",
     "@iharbeck/ngx-virtual-scroller": "^19.0.1",
     "@iplab/ngx-color-picker": "^20.0.0",
     "@iplab/ngx-file-upload": "^20.0.0",
@@ -43,6 +43,7 @@
     "@siemens/ngx-datatable": "^22.4.1",
     "@swimlane/ngx-charts": "^23.0.0-alpha.0",
     "@tweenjs/tween.js": "^25.0.0",
+    "afterframe": "^1.0.2",
     "bootstrap": "^5.3.2",
     "charts.css": "^1.2.0",
     "file-saver": "^2.0.5",
@@ -68,16 +69,16 @@
     "@angular-eslint/eslint-plugin-template": "^20.1.1",
     "@angular-eslint/schematics": "^20.1.1",
     "@angular-eslint/template-parser": "^20.1.1",
-    "@angular/build": "^20.1.4",
+    "@angular/build": "^20.2.1",
-    "@angular/cli": "^20.1.4",
+    "@angular/cli": "^20.2.1",
-    "@angular/compiler-cli": "^20.1.4",
+    "@angular/compiler-cli": "^20.2.3",
     "@types/d3": "^7.4.3",
     "@types/file-saver": "^2.0.7",
     "@types/luxon": "^3.6.2",
     "@types/marked": "^5.0.2",
     "@types/node": "^24.0.14",
     "@typescript-eslint/eslint-plugin": "^8.38.0",
-    "@typescript-eslint/parser": "^8.38.0",
+    "@typescript-eslint/parser": "^8.42.0",
     "eslint": "^9.31.0",
     "jsonminify": "^0.4.2",
     "karma-coverage": "~2.2.0",

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

@@ -1,4 +1,4 @@
-import {HttpClient, HttpHeaders} from '@angular/common/http';
+import {HttpClient} from '@angular/common/http';
 import {DestroyRef, inject, Injectable} from '@angular/core';
 import {Observable, of, ReplaySubject, shareReplay} from 'rxjs';
 import {filter, map, switchMap, tap} from 'rxjs/operators';
@@ -48,6 +48,10 @@ export class AccountService {
   private readonly destroyRef = inject(DestroyRef);
   private readonly licenseService = inject(LicenseService);
   private readonly localizationService = inject(LocalizationService);
+  private readonly httpClient = inject(HttpClient);
+  private readonly router = inject(Router);
+  private readonly messageHub = inject(MessageHubService);
+  private readonly themeService = inject(ThemeService);
 
   baseUrl = environment.apiUrl;
   userKey = 'kavita-user';
@@ -72,9 +76,8 @@ export class AccountService {
 
   private isOnline: boolean = true;
 
-  constructor(private httpClient: HttpClient, private router: Router,
+  constructor() {
-    private messageHub: MessageHubService, private themeService: ThemeService) {
+      this.messageHub.messages$.pipe(filter(evt => evt.event === EVENTS.UserUpdate),
-      messageHub.messages$.pipe(filter(evt => evt.event === EVENTS.UserUpdate),
         map(evt => evt.payload as UserUpdateEvent),
         filter(userUpdateEvent => userUpdateEvent.userName === this.currentUser?.username),
         switchMap(() => this.refreshAccount()))

UI/Web/src/app/_services/epub-reader-menu.service.ts

@@ -1,8 +1,5 @@
 import {inject, Injectable, signal} from '@angular/core';
 import {NgbOffcanvas} from "@ng-bootstrap/ng-bootstrap";
-import {
-  ViewAnnotationsDrawerComponent
-} from "../book-reader/_components/_drawers/view-annotations-drawer/view-annotations-drawer.component";
 import {
   LoadPageEvent,
   ViewBookmarkDrawerComponent
@@ -50,11 +47,16 @@ export class EpubReaderMenuService {
   }
 
 
-  openViewAnnotationsDrawer(loadAnnotationCallback: (annotation: Annotation) => void) {
+  async openViewAnnotationsDrawer(loadAnnotationCallback: (annotation: Annotation) => void) {
     if (this.offcanvasService.hasOpenOffcanvas()) {
       this.offcanvasService.dismiss();
     }
 
+    // This component needs to be imported dynamically as something breaks within Angular if it's not.
+    // I do not know what, but this fixes the drawer from not showing up in a production build.
+    const module = await import('../book-reader/_components/_drawers/view-annotations-drawer/view-annotations-drawer.component');
+    const ViewAnnotationsDrawerComponent = module.ViewAnnotationsDrawerComponent;
+
     const ref = this.offcanvasService.open(ViewAnnotationsDrawerComponent, {position: 'end'});
     ref.componentInstance.loadAnnotation.subscribe((annotation: Annotation) => {
       loadAnnotationCallback(annotation);

UI/Web/src/app/_single-module/actionable-modal/actionable-modal.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'actionable'">
+<ng-container *transloco="let t; prefix: 'actionable'">
   <div class="modal-container">
     <div class="modal-header">
       <h4 class="modal-title">

UI/Web/src/app/_single-module/card-actionables/card-actionables.component.html

@@ -1,4 +1,4 @@
-  <ng-container *transloco="let t; read: 'actionable'">
+  <ng-container *transloco="let t; prefix: 'actionable'">
     @if (actions.length > 0) {
       @if ((utilityService.activeBreakpoint$ | async)! <= Breakpoint.Tablet) {
         <button [disabled]="disabled" class="btn {{btnClass}} px-3" id="actions-{{labelBy}}"

UI/Web/src/app/_single-module/cover-image/cover-image.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'series-detail'">
+<ng-container *transloco="let t; prefix: 'series-detail'">
     @if(mobileSeriesImgBackground === 'true') {
       <app-image [styles]="{'background': 'none'}" [imageUrl]="coverImage"></app-image>
     } @else {

UI/Web/src/app/_single-module/details-tab/details-tab.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'details-tab'">
+<ng-container *transloco="let t; prefix: 'details-tab'">
 <div class="details pb-3">
 
   @if (readingTime) {

UI/Web/src/app/_single-module/edit-chapter-modal/edit-chapter-modal.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'edit-chapter-modal'">
+<ng-container *transloco="let t; prefix: 'edit-chapter-modal'">
   <div class="modal-container">
     <div class="modal-header">
       <h4 class="modal-title">{{t('title')}} <app-entity-title [libraryType]="libraryType" [entity]="chapter" [prioritizeTitleName]="false"></app-entity-title></h4>

UI/Web/src/app/_single-module/edit-volume-modal/edit-volume-modal.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'edit-volume-modal'">
+<ng-container *transloco="let t; prefix: 'edit-volume-modal'">
   <div class="modal-container">
     <div class="modal-header">
       <h4 class="modal-title">{{t('title')}} <app-entity-title [libraryType]="libraryType" [entity]="volume" [prioritizeTitleName]="false"></app-entity-title></h4>

UI/Web/src/app/_single-module/match-series-modal/match-series-modal.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read:'match-series-modal'">
+<ng-container *transloco="let t; prefix:'match-series-modal'">
   <div>
     <div class="modal-header">
       <h4 class="modal-title" id="modal-basic-title">

UI/Web/src/app/_single-module/match-series-result-item/match-series-result-item.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read:'match-series-result-item'">
+<ng-container *transloco="let t; prefix:'match-series-result-item'">
 <div class="match-item-container p-3 mt-3 {{isDarkMode ? 'dark' : 'light'}}">
   <div class="d-flex clickable match-item" (click)="selectItem()">
     <div class="me-1">

UI/Web/src/app/_single-module/related-tab/related-tab.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'related-tab'">
+<ng-container *transloco="let t; prefix: 'related-tab'">
   <div class="pb-2">
     @if (relations.length > 0) {
       <app-carousel-reel [items]="relations" [title]="t('relations-title')">

UI/Web/src/app/_single-module/review-card-modal/review-card-modal.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read:'review-card-modal'">
+<ng-container *transloco="let t; prefix:'review-card-modal'">
   <div>
     <div class="modal-header">
       <h4 class="modal-title" id="modal-basic-title">

UI/Web/src/app/_single-module/review-card/review-card.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read:'review-card'">
+<ng-container *transloco="let t; prefix:'review-card'">
   <div class="card review-card clickable mb-3" (click)="showModal()">
     <div class="row g-0">
       <div class="col-md-2 col-sm-2 col-2 d-block p-2">

UI/Web/src/app/_single-module/review-modal/review-modal.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read:'review-modal'">
+<ng-container *transloco="let t; prefix:'review-modal'">
   <div>
       <div class="modal-header">
           <h4 class="modal-title" id="modal-basic-title">{{t('title')}}</h4>

UI/Web/src/app/_single-module/reviews/reviews.component.ts

@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, OnInit} from '@angular/core';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input} from '@angular/core';
 import {CarouselReelComponent} from "../../carousel/_components/carousel-reel/carousel-reel.component";
 import {ReviewCardComponent} from "../review-card/review-card.component";
 import {TranslocoDirective} from "@jsverse/transloco";
@@ -6,13 +6,13 @@ import {UserReview} from "../review-card/user-review";
 import {User} from "../../_models/user";
 import {AccountService} from "../../_services/account.service";
 import {
-  ReviewModalComponent, ReviewModalCloseAction,
+  ReviewModalCloseAction,
-  ReviewModalCloseEvent
+  ReviewModalCloseEvent,
+  ReviewModalComponent
 } from "../review-modal/review-modal.component";
 import {DefaultModalOptions} from "../../_models/default-modal-options";
 import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
 import {Series} from "../../_models/series";
-import {Volume} from "../../_models/volume";
 import {Chapter} from "../../_models/chapter";
 
 @Component({
@@ -28,19 +28,19 @@ import {Chapter} from "../../_models/chapter";
 })
 export class ReviewsComponent {
 
+  private readonly accountService = inject(AccountService);
+  private readonly modalService = inject(NgbModal);
+  private readonly cdRef = inject(ChangeDetectorRef);
+
   @Input({required: true}) userReviews!: Array<UserReview>;
   @Input({required: true}) plusReviews!: Array<UserReview>;
   @Input({required: true}) series!: Series;
   @Input() volumeId: number | undefined;
   @Input() chapter: Chapter | undefined;
 
-  user: User | undefined;
+  user: User | undefined = undefined;
-
-  constructor(
-    private accountService: AccountService,
-    private modalService: NgbModal,
-    private cdRef: ChangeDetectorRef) {
 
+  constructor() {
     this.accountService.currentUser$.subscribe(user => {
       if (user) {
         this.user = user;

UI/Web/src/app/_single-module/spoiler/spoiler.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read:'spoiler'">
+<ng-container *transloco="let t; prefix:'spoiler'">
   <div (click)="toggle()" [attr.aria-expanded]="!isCollapsed" class="btn spoiler" tabindex="0">
     @if (isCollapsed) {
       <span>{{t('click-to-show')}}</span>

UI/Web/src/app/_single-module/user-scrobble-history/user-scrobble-history.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read:'user-scrobble-history'">
+<ng-container *transloco="let t; prefix:'user-scrobble-history'">
 
   @let currentUser = accountService.currentUser$ | async;
 

UI/Web/src/app/admin/_modals/copy-settings-from-library-modal/copy-settings-from-library-modal.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read:'copy-settings-from-library-modal'">
+<ng-container *transloco="let t; prefix:'copy-settings-from-library-modal'">
 
   <div class="modal-header">
     <h4 class="modal-title" id="modal-basic-title">{{t('title')}}</h4>

UI/Web/src/app/admin/_modals/directory-picker/directory-picker.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read:'directory-picker'">
+<ng-container *transloco="let t; prefix:'directory-picker'">
   <div class="modal-header">
     <h4 class="modal-title" id="modal-basic-title">{{t('title')}}</h4>
     <button type="button" class="btn-close" [attr.aria-label]="t('close')" (click)="close()"></button>

UI/Web/src/app/admin/_modals/library-access-modal/library-access-modal.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read:'library-access-modal'">
+<ng-container *transloco="let t; prefix:'library-access-modal'">
 
   <div class="modal-header">
     <h4 class="modal-title" id="modal-basic-title">{{t('title')}}</h4>

UI/Web/src/app/admin/_modals/reset-password-modal/reset-password-modal.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read:'reset-password-modal'">
+<ng-container *transloco="let t; prefix:'reset-password-modal'">
   <form [formGroup]="resetPasswordForm">
     <div class="modal-header">
       <h4 class="modal-title" id="modal-basic-title">{{t('title', {username: member.username | sentenceCase})}}</h4>

UI/Web/src/app/admin/email-history/email-history.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read:'email-history'">
+<ng-container *transloco="let t; prefix:'email-history'">
   <p>{{t('description')}}</p>
 
   <ngx-datatable

UI/Web/src/app/admin/invite-user/invite-user.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'invite-user'">
+<ng-container *transloco="let t; prefix: 'invite-user'">
   <div class="modal-container">
     <div class="modal-header">
       <h4 class="modal-title" id="modal-basic-title">{{t('title')}}</h4>

UI/Web/src/app/admin/library-selector/library-selector.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'library-selector'">
+<ng-container *transloco="let t; prefix: 'library-selector'">
 
   <div class="d-flex justify-content-between">
     <div class="col-auto">

UI/Web/src/app/admin/license/license.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'license'">
+<ng-container *transloco="let t; prefix: 'license'">
 
   <div class="position-relative">
     <a class="position-absolute custom-position btn btn-outline-primary" [href]="WikiLink.KavitaPlusFAQ" target="_blank" rel="noreferrer nofollow">{{t('faq-title')}}</a>
@@ -7,14 +7,16 @@
   <div>
     <p>{{t('kavita+-desc-part-1')}} <a [href]="WikiLink.KavitaPlus" target="_blank" rel="noreferrer nofollow">{{t('kavita+-desc-part-2')}}</a> {{t('kavita+-desc-part-3')}}</p>
 
+    <p>{{t('kavita+-warning')}}</p>
+
     <form [formGroup]="formGroup">
       <div class="mt-2">
-        <app-setting-item [title]="t('title')" (editMode)="updateEditMode($event)" [isEditMode]="!isViewMode" [showEdit]="hasLicense" [fixedExtras]="true">
+        <app-setting-item [title]="t('title')" (editMode)="updateEditMode($event)" [isEditMode]="!isViewMode()" [showEdit]="hasLicense()" [fixedExtras]="true">
           <ng-template #titleExtra>
             <button class="btn btn-icon btn-sm" (click)="loadLicenseInfo(true)">
-              @if (isChecking) {
+              @if (isChecking()) {
-                <app-loading [loading]="isChecking" size="spinner-border-sm"></app-loading>
+                <app-loading [loading]="isChecking()" size="spinner-border-sm"></app-loading>
-              } @else if (hasLicense) {
+              } @else if (hasLicense()) {
                 <span>
                 <i class="fa-solid fa-refresh" tabindex="0" [ngbTooltip]="t('check')"></i>
               </span>
@@ -22,15 +24,15 @@
             </button>
           </ng-template>
           <ng-template #view>
-            @if (hasLicense) {
+            @if (hasLicense()) {
               <span class="me-1">*********</span>
 
-              @if (isChecking) {
+              @if (isChecking()) {
                 <div class="spinner-border spinner-border-sm text-primary" role="status">
                   <span class="visually-hidden">{{t('loading')}}</span>
                 </div>
               } @else {
-                @if (licenseInfo?.isActive) {
+                @if (licenseInfo()?.isActive) {
                   <i [ngbTooltip]="t('license-valid')" class="fa-solid fa-check-circle successful-validation ms-1">
                     <span class="visually-hidden">{{t('license-valid')}}</span>
                   </i>
@@ -40,7 +42,7 @@
                   </i>
                 }
               }
-              @if (!isChecking && hasLicense && !licenseInfo) {
+              @if (!isChecking() && hasLicense() && !licenseInfo) {
                 <div><span class="error">{{t('license-mismatch')}}</span></div>
               }
 
@@ -86,29 +88,29 @@
               </button>
               <button type="submit" class="flex-fill btn btn-primary" aria-describedby="license-key-header"
                       [disabled]="!formGroup.get('email')?.value || !formGroup.get('licenseKey')?.value" (click)="saveForm()">
-                @if (!isSaving) {
+                @if (!isSaving()) {
                   <span>{{t('activate-save')}}</span>
                 }
 
-                <app-loading [loading]="isSaving" size="spinner-border-sm"></app-loading>
+                <app-loading [loading]="isSaving()" size="spinner-border-sm"></app-loading>
               </button>
             </div>
 
           </ng-template>
 
           <ng-template #titleActions>
-            @if (hasLicense) {
+            @if (hasLicense()) {
-              @if (licenseInfo?.isActive) {
+              @if (licenseInfo()?.isActive) {
-                <a class="btn btn-outline-primary btn-sm me-1" [href]="manageLink" target="_blank" rel="noreferrer nofollow">{{t('manage')}}</a>
+                <a class="btn btn-outline-primary btn-sm me-1" [href]="manageLink()" target="_blank" rel="noreferrer nofollow">{{t('manage')}}</a>
               } @else {
                 <a class="btn btn-outline-primary btn-sm me-1"
                    [ngbTooltip]="t('invalid-license-tooltip')"
-                   href="mailto:kavitareader@gmail.com?subject=Kavita+Subscription+Renewal&body=Description%3A%0D%0A%0D%0ALicense%20Key%3A%0D%0A%0D%0AYour%20Email%3A"
+                   href="mailto:kavitareader@gmail.com?subject=Kavita%20Subscription%20Renewal&body=Description%3A%0D%0A%0D%0ALicense%20Key%3A%0D%0A%0D%0AYour%20Email%3A"
                 >{{t('renew')}}</a>
               }
             } @else {
               <a class="btn btn-secondary btn-sm me-1" [href]="buyLink" target="_blank" rel="noreferrer nofollow">{{t('buy')}}</a>
-              <button class="btn btn-primary btn-sm" (click)="toggleViewMode()">{{isViewMode ? t('activate') : t('cancel')}}</button>
+              <button class="btn btn-primary btn-sm" (click)="toggleViewMode()">{{isViewMode() ? t('activate') : t('cancel')}}</button>
             }
           </ng-template>
         </app-setting-item>
@@ -116,8 +118,9 @@
     </form>
 
 
+    @let licInfo = licenseInfo();
+    @if (hasLicense() && licInfo) {
 
-    @if (hasLicense && licenseInfo) {
       <div class="setting-section-break"></div>
 
       <div class="row g-0 mt-3">
@@ -125,11 +128,11 @@
         <div class="mb-2 col-md-6 col-sm-12">
           <app-setting-item [canEdit]="false" [showEdit]="false" [title]="t('license-active-label')">
             <ng-template #view>
-              @if (isChecking) {
+              @if (isChecking()) {
                 {{null | defaultValue}}
               } @else {
-                <i class="fas {{licenseInfo.isActive ? 'fa-check-circle' : 'fa-circle-xmark error'}}">
+                <i class="fas {{licInfo.isActive ? 'fa-check-circle' : 'fa-circle-xmark error'}}">
-                  <span class="visually-hidden">{{licenseInfo.isActive ? t('valid') : t('invalid')}]</span>
+                  <span class="visually-hidden">{{licInfo.isActive ? t('valid') : t('invalid')}]</span>
                 </i>
               }
             </ng-template>
@@ -139,7 +142,7 @@
         <div class="mb-2 col-md-6 col-sm-12">
           <app-setting-item [canEdit]="false" [showEdit]="false" [title]="t('supported-version-label')">
             <ng-template #view>
-              <i class="fas {{licenseInfo.isValidVersion ? 'fa-check-circle' : 'fa-circle-xmark error'}}">
+              <i class="fas {{licInfo.isValidVersion ? 'fa-check-circle' : 'fa-circle-xmark error'}}">
                 <span class="visually-hidden">{{isValidVersion ? t('valid') : t('invalid')}]</span>
               </i>
             </ng-template>
@@ -149,7 +152,7 @@
         <div class="mb-2 col-md-6 col-sm-12">
           <app-setting-item [canEdit]="false" [showEdit]="false" [title]="t('expiration-label')">
             <ng-template #view>
-              {{licenseInfo.expirationDate | utcToLocalTime | defaultValue}}
+              {{licInfo.expirationDate | utcToLocalTime | defaultValue}}
             </ng-template>
           </app-setting-item>
         </div>
@@ -157,7 +160,7 @@
         <div class="mb-2 col-md-6 col-sm-12">
           <app-setting-item [canEdit]="false" [showEdit]="false" [title]="t('total-subbed-months-label')">
             <ng-template #view>
-              {{licenseInfo.totalMonthsSubbed | number}}
+              {{licInfo.totalMonthsSubbed | number}}
             </ng-template>
           </app-setting-item>
         </div>
@@ -166,8 +169,8 @@
           <app-setting-item [canEdit]="false" [showEdit]="false" [title]="t('email-label')">
             <ng-template #view>
             <span (click)="toggleEmailShow()" class="col-12 clickable">
-              @if (showEmail) {
+              @if (showEmail()) {
-                {{licenseInfo.registeredEmail}}
+                {{licInfo.registeredEmail}}
               } @else {
                 ***************
               }
@@ -181,9 +184,15 @@
         <!-- Actions around license -->
         <h3>{{t('actions-title')}}</h3>
 
+        <div class="mt-2 mb-2">
+          <app-setting-button [subtitle]="t('cancel-tooltip')">
+            <a class="btn btn-danger btn-sm mt-1" [href]="manageLink()" target="_blank" rel="noreferrer nofollow">{{t('cancel-label')}}</a>
+          </app-setting-button>
+        </div>
+
         <div class="mt-2 mb-2">
           <app-setting-button [subtitle]="t('delete-tooltip')">
-            <button type="button" class="flex-fill btn btn-danger mt-1" aria-describedby="license-key-header" (click)="deleteLicense()">
+            <button type="button" class="flex-fill btn btn-danger btn-sm mt-1" aria-describedby="license-key-header" (click)="deleteLicense()">
               {{t('activate-delete')}}
             </button>
           </app-setting-button>
@@ -191,7 +200,7 @@
 
         <div class="mt-2 mb-2">
           <app-setting-button [subtitle]="t('manage-tooltip')">
-            <a class="btn btn-primary btn-sm mt-1" [href]="manageLink" target="_blank" rel="noreferrer nofollow">{{t('manage')}}</a>
+            <a class="btn btn-primary btn-sm mt-1" [href]="manageLink()" target="_blank" rel="noreferrer nofollow">{{t('manage')}}</a>
           </app-setting-button>
         </div>
       </div>

UI/Web/src/app/admin/license/license.component.ts

@@ -1,15 +1,10 @@
-import {
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, computed, inject, model, OnInit} from '@angular/core';
-  ChangeDetectionStrategy,
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
-  ChangeDetectorRef,
-  Component, DestroyRef, inject,
-  OnInit
-} from '@angular/core';
-import { FormControl, FormGroup, Validators, ReactiveFormsModule } from "@angular/forms";
 import {AccountService} from "../../_services/account.service";
 import {ToastrService} from "ngx-toastr";
 import {ConfirmService} from "../../shared/confirm.service";
-import { LoadingComponent } from '../../shared/loading/loading.component';
+import {LoadingComponent} from '../../shared/loading/loading.component';
-import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
+import {NgbTooltip} from '@ng-bootstrap/ng-bootstrap';
 import {environment} from "../../../environments/environment";
 import {translate, TranslocoDirective} from "@jsverse/transloco";
 import {WikiLink} from "../../_models/wiki";
@@ -34,58 +29,59 @@ import {LicenseService} from "../../_services/license.service";
 export class LicenseComponent implements OnInit {
 
   private readonly cdRef = inject(ChangeDetectorRef);
-  private readonly destroyRef = inject(DestroyRef);
   private readonly toastr = inject(ToastrService);
   private readonly confirmService = inject(ConfirmService);
   protected readonly accountService = inject(AccountService);
   protected readonly licenseService = inject(LicenseService);
   protected readonly WikiLink = WikiLink;
+  protected readonly buyLink = environment.buyLink;
 
-  formGroup: FormGroup = new FormGroup({});
+  formGroup: FormGroup = new FormGroup({
-  isViewMode: boolean = true;
+    'licenseKey': new FormControl('', [Validators.required]),
-  isChecking: boolean = true;
+    'email': new FormControl('', [Validators.required]),
-  isSaving: boolean = false;
+    'discordId': new FormControl('', [Validators.pattern(/\d+/)])
+  });
+  isViewMode = model<boolean>(true);
+  isChecking = model<boolean>(true);
+  isSaving = model<boolean>(false);
+  hasLicense = model<boolean>(false);
+  licenseInfo = model<LicenseInfo | null>(null);
+  showEmail = model<boolean>(false);
+
+  /**
+   * Either the normal manageLink or with a prefilled email to ease the user
+   */
+  readonly manageLink = computed(() => {
+    const email = this.licenseInfo()?.registeredEmail;
+    if (!email) return environment.manageLink;
+
+    return environment.manageLink + '?prefilled_email=' + encodeURIComponent(email);
+  })
 
 
 
-  hasLicense: boolean = false;
-  licenseInfo: LicenseInfo | null = null;
-  showEmail: boolean = false;
-
-  buyLink = environment.buyLink;
-  manageLink = environment.manageLink;
-
 
   ngOnInit(): void {
-    this.formGroup.addControl('licenseKey', new FormControl('', [Validators.required]));
-    this.formGroup.addControl('email', new FormControl('', [Validators.required]));
-    this.formGroup.addControl('discordId', new FormControl('', [Validators.pattern(/\d+/)]));
-
     this.loadLicenseInfo().subscribe();
-
   }
 
   loadLicenseInfo(forceCheck = false) {
-    this.isChecking = true;
+    this.isChecking.set(true);
-    this.cdRef.markForCheck();
 
     return this.licenseService.hasAnyLicense()
       .pipe(
         tap(res => {
-          this.hasLicense = res;
+          this.hasLicense.set(res);
-          this.isChecking = false;
+          this.isChecking.set(false);
-          this.cdRef.markForCheck();
         }),
         filter(hasLicense => hasLicense),
         tap(_ => {
-          this.isChecking = true;
+          this.isChecking.set(true);
-          this.cdRef.markForCheck();
         }),
         switchMap(_ => this.licenseService.licenseInfo(forceCheck)),
         tap(licenseInfo => {
-          this.licenseInfo = licenseInfo;
+          this.licenseInfo.set(licenseInfo);
-          this.isChecking = false;
+          this.isChecking.set(false);
-          this.cdRef.markForCheck();
         })
       );
   }
@@ -99,30 +95,37 @@ export class LicenseComponent implements OnInit {
   }
 
   saveForm() {
-    this.isSaving = true;
+    this.isSaving.set(true);
-    this.cdRef.markForCheck();
-    const hadActiveLicenseBefore = this.licenseInfo?.isActive;
-    this.licenseService.updateUserLicense(this.formGroup.get('licenseKey')!.value.trim(), this.formGroup.get('email')!.value.trim(), this.formGroup.get('discordId')!.value.trim())
-      .subscribe(() => {
 
-        this.resetForm();
+    const hadActiveLicenseBefore = this.licenseInfo()?.isActive;
-        this.isViewMode = true;
+
-        this.isSaving = false;
+    const license = this.formGroup.get('licenseKey')!.value.trim();
-        this.cdRef.markForCheck();
+    const email = this.formGroup.get('email')!.value.trim();
-        this.loadLicenseInfo().subscribe(async (info) => {
+    const discordId = this.formGroup.get('discordId')!.value.trim();
-          if (info?.isActive && !hadActiveLicenseBefore) {
+
-            await this.confirmService.info(translate('license.k+-unlocked-description'), translate('license.k+-unlocked'));
+    this.licenseService.updateUserLicense(license, email, discordId)
-          } else {
+      .subscribe({
-            this.toastr.info(translate('toasts.k+-license-saved'));
+        next: () => {
-          }
+          this.resetForm();
-        });
+          this.isViewMode.set(true);
-    }, async (err) => {
+          this.isSaving.set(false);
-        await this.handleError(err);
+          this.cdRef.markForCheck();
+          this.loadLicenseInfo().subscribe(async (info) => {
+            if (info?.isActive && !hadActiveLicenseBefore) {
+              await this.confirmService.info(translate('license.k+-unlocked-description'), translate('license.k+-unlocked'));
+            } else {
+              this.toastr.info(translate('toasts.k+-license-saved'));
+            }
+          });
+        },
+        error: async err => {
+          await this.handleError(err);
+        }
       });
   }
 
   private async handleError(err: any) {
-    this.isSaving = false;
+    this.isSaving.set(false);
     this.cdRef.markForCheck();
 
     if (err.hasOwnProperty('error')) {
@@ -163,8 +166,7 @@ export class LicenseComponent implements OnInit {
   }
 
   forceSave() {
-    this.isSaving = false;
+    this.isSaving.set(false);
-    this.cdRef.markForCheck();
 
     this.licenseService.resetLicense(this.formGroup.get('licenseKey')!.value.trim(), this.formGroup.get('email')!.value.trim())
       .subscribe(_ => {
@@ -179,10 +181,9 @@ export class LicenseComponent implements OnInit {
 
     this.licenseService.deleteLicense().subscribe(() => {
       this.resetForm();
-      this.isViewMode = true;
+      this.isViewMode.set(true);
-      this.licenseInfo = null;
+      this.licenseInfo.set(null);
-      this.hasLicense = false;
+      this.hasLicense.set(false);
-      //this.hasValidLicense = false;
       this.cdRef.markForCheck();
     });
   }
@@ -197,38 +198,16 @@ export class LicenseComponent implements OnInit {
     });
   }
 
-  //
-  // validateLicense(forceCheck = false) {
-  //   return of().pipe(
-  //     startWith(null),
-  //     tap(_ => {
-  //       this.isChecking = true;
-  //       this.cdRef.markForCheck();
-  //     }),
-  //     switchMap(_ => this.licenseService.licenseInfo(forceCheck)),
-  //     tap(licenseInfo => {
-  //       this.licenseInfo = licenseInfo;
-  //       //this.hasValidLicense = licenseInfo?.isActive || false;
-  //       this.isChecking = false;
-  //       this.cdRef.markForCheck();
-  //     })
-  //   )
-  //
-  // }
-
   updateEditMode(mode: boolean) {
-    this.isViewMode = !mode;
+    this.isViewMode.set(!mode);
-    this.cdRef.markForCheck();
   }
 
   toggleViewMode() {
-    this.isViewMode = !this.isViewMode;
+    this.isViewMode.update(v => !v);
-    this.cdRef.markForCheck();
     this.resetForm();
   }
 
   toggleEmailShow() {
-    this.showEmail = !this.showEmail;
+    this.showEmail.update(v => !v);
-    this.cdRef.markForCheck();
   }
 }

UI/Web/src/app/admin/manage-email-settings/manage-email-settings.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'manage-email-settings'">
+<ng-container *transloco="let t; prefix: 'manage-email-settings'">
 
   <div class="position-relative">
     <button type="button" class="btn btn-outline-primary position-absolute custom-position" (click)="test()">{{t('test')}}</button>

UI/Web/src/app/admin/manage-library/manage-library.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'manage-library'">
+<ng-container *transloco="let t; prefix: 'manage-library'">
   <div class="position-relative">
     <div class="position-absolute custom-position-2">
       <app-card-actionables [inputActions]="bulkActions" btnClass="btn-outline-primary ms-1" [label]="t('bulk-action-label')"

UI/Web/src/app/admin/manage-matched-metadata/manage-matched-metadata.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read:'manage-matched-metadata'">
+<ng-container *transloco="let t; prefix:'manage-matched-metadata'">
   <p>{{t('description')}}</p>
 
   <form [formGroup]="filterGroup">

UI/Web/src/app/admin/manage-media-issues/manage-media-issues.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'manage-media-issues'">
+<ng-container *transloco="let t; prefix: 'manage-media-issues'">
   <p>{{t('description-part-1')}} <a rel="noopener noreferrer" target="_blank" [href]="WikiLink.MediaIssues">{{t('description-part-2')}}</a></p>
 
   <form [formGroup]="formGroup">

UI/Web/src/app/admin/manage-media-settings/manage-media-settings.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'manage-media-settings'">
+<ng-container *transloco="let t; prefix: 'manage-media-settings'">
     <form [formGroup]="settingsForm">
       <div class="mb-4">
         <p>

UI/Web/src/app/admin/manage-metadata-settings/manage-metadata-settings.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read:'manage-metadata-settings'">
+<ng-container *transloco="let t; prefix:'manage-metadata-settings'">
 
   <p>{{t('description')}}</p>
   @if (isLoaded) {

UI/Web/src/app/admin/manage-scrobble-errors/manage-scrobble-errors.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'manage-scrobble-errors'">
+<ng-container *transloco="let t; prefix: 'manage-scrobble-errors'">
   <h4>{{t('title')}}</h4>
   <p>{{t('description')}}</p>
 

UI/Web/src/app/admin/manage-settings/manage-settings.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'manage-settings'">
+<ng-container *transloco="let t; prefix: 'manage-settings'">
 
   <div class="position-relative">
     <button type="button" class="btn btn-outline-primary position-absolute custom-position" (click)="resetToDefaults()">{{t('reset-to-default')}}</button>

UI/Web/src/app/admin/manage-system/manage-system.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'manage-system'">
+<ng-container *transloco="let t; prefix: 'manage-system'">
   @if (serverInfo) {
     <div class="mb-3">
       <h3>{{t('title')}}</h3>

UI/Web/src/app/admin/manage-tasks-settings/manage-tasks-settings.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'manage-tasks-settings'">
+<ng-container *transloco="let t; prefix: 'manage-tasks-settings'">
   @if (serverSettings) {
     <form [formGroup]="settingsForm">
 

UI/Web/src/app/admin/manage-user-tokens/manage-user-tokens.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read:'manage-user-tokens'">
+<ng-container *transloco="let t; prefix:'manage-user-tokens'">
   <p>{{t('description')}}</p>
 
 

UI/Web/src/app/admin/manage-users/manage-users.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'manage-users'">
+<ng-container *transloco="let t; prefix: 'manage-users'">
   <div class="position-relative">
     <button class="btn btn-outline-primary position-absolute custom-position" (click)="inviteUser()">
       <i class="fa fa-plus" aria-hidden="true"></i><span class="phone-hidden">&nbsp;{{t('invite')}}</span>

UI/Web/src/app/admin/role-selector/role-selector.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read:'role-selector'">
+<ng-container *transloco="let t; prefix:'role-selector'">
   <div class="d-flex justify-content-between">
     <div class="col-auto">
       <h4>{{t('title')}}</h4>

UI/Web/src/app/all-filters/all-filters.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'all-filters'">
+<ng-container *transloco="let t; prefix: 'all-filters'">
   <div class="main-container">
     <app-side-nav-companion-bar [hasFilter]="false">
       <h4 title>

UI/Web/src/app/all-series/_components/all-series/all-series.component.html

@@ -1,5 +1,5 @@
 <div class="main-container container-fluid">
-  <ng-container *transloco="let t; read: 'all-series'">
+  <ng-container *transloco="let t; prefix: 'all-series'">
     <app-side-nav-companion-bar [hasFilter]="true" (filterOpen)="filterOpen.emit($event)" [filterActive]="filterActive">
       <h4 title>
         {{title}}

UI/Web/src/app/announcements/_components/announcements/announcements.component.html

@@ -1,5 +1,5 @@
 <div class="main-container container-fluid">
-  <ng-container *transloco="let t; read: 'announcements'">
+  <ng-container *transloco="let t; prefix: 'announcements'">
     <app-side-nav-companion-bar>
       <h4 title>
         {{t('title')}}

UI/Web/src/app/announcements/_components/changelog-update-item/changelog-update-item.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read:'changelog-update-item'">
+<ng-container *transloco="let t; prefix:'changelog-update-item'">
   @if (update) {
     <div class="update-details">
       @if (update.blogPart) {

UI/Web/src/app/announcements/_components/changelog/changelog.component.html

@@ -1,5 +1,5 @@
 <div class="main-container container-fluid">
-  <ng-container *transloco="let t; read: 'changelog'">
+  <ng-container *transloco="let t; prefix: 'changelog'">
     <div class="changelog">
 
       @for(update of updates; track update; let indx = $index) {

UI/Web/src/app/announcements/_components/new-update-modal/new-update-modal.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read:'new-version-modal'">
+<ng-container *transloco="let t; prefix:'new-version-modal'">
   <div class="modal-header">
     <h4 class="modal-title" id="modal-basic-title">{{t('title')}}</h4>
   </div>

UI/Web/src/app/announcements/_components/out-of-date-modal/out-of-date-modal.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read:'out-of-date-modal'">
+<ng-container *transloco="let t; prefix:'out-of-date-modal'">
   <div class="modal-header">
     <h4 class="modal-title" id="modal-basic-title">{{t('title')}}</h4>
     <button type="button" class="btn-close" [attr.aria-label]="t('close')" (click)="close()"></button>

UI/Web/src/app/announcements/_components/update-notification/update-notification-modal.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'update-notification-modal'">
+<ng-container *transloco="let t; prefix: 'update-notification-modal'">
   <div class="modal-header">
     <h4 class="modal-title">{{t('title')}}</h4>
     <button type="button" class="btn-close" [attr.aria-label]="t('close')" (click)="close()"></button>

UI/Web/src/app/book-reader/_components/_annotations/highlight-bar/highlight-bar.component.html

@@ -32,6 +32,7 @@
                 [selected]="slot.slotNumber === selectedSlotIndex()"
                 (selectPicker)="selectSlot(index, slot)"
                 [editMode]="isEditMode()"
+                [canChangeEditMode]="canChangeEditMode()"
                 (editModeChange)="isEditMode.set($event)"
                 [first]="$first"
                 [last]="$last"

UI/Web/src/app/book-reader/_components/_annotations/highlight-bar/highlight-bar.component.ts

@@ -31,6 +31,7 @@ export class HighlightBarComponent {
   isCollapsed = model<boolean>(true);
   canCollapse = model<boolean>(true);
   isEditMode = model<boolean>(false);
+  canChangeEditMode = model<boolean>(true);
 
   slots = this.annotationService.slots;
 
@@ -53,6 +54,8 @@ export class HighlightBarComponent {
   }
 
   toggleEditMode() {
+    if (!this.canChangeEditMode()) return;
+
     const existingEdit = this.isEditMode();
     this.isEditMode.set(!existingEdit);
   }

UI/Web/src/app/book-reader/_components/_drawers/view-toc-drawer/view-toc-drawer.component.html

@@ -8,6 +8,6 @@
 
   <div class="offcanvas-body">
     <app-table-of-contents [chapters]="chapters()" [chapterId]="chapterId()!" [pageNum]="pageNum()"
-                           (loadChapter)="loadChapterPage($event)" />
+                           (loadChapter)="loadChapterPage($event)" [loading]="loading()" />
   </div>
 </ng-container>

UI/Web/src/app/book-reader/_components/_drawers/view-toc-drawer/view-toc-drawer.component.ts

@@ -5,7 +5,7 @@ import {
   effect,
   EventEmitter,
   inject,
-  model
+  model, signal
 } from '@angular/core';
 import {TranslocoDirective} from "@jsverse/transloco";
 import {NgbActiveOffcanvas} from "@ng-bootstrap/ng-bootstrap";
@@ -40,6 +40,7 @@ export class ViewTocDrawerComponent {
    * The actual pages from the epub, used for showing on table of contents. This must be here as we need access to it for scroll anchors
    */
   chapters = model<Array<BookChapterItem>>([]);
+  loading = signal(true);
 
 
   loadPage: EventEmitter<LoadPageEvent | null> = new EventEmitter<LoadPageEvent | null>();
@@ -54,6 +55,7 @@ export class ViewTocDrawerComponent {
       }
 
       this.bookService.getBookChapters(id).subscribe(bookChapters => {
+        this.loading.set(false);
         this.chapters.set(bookChapters);
         this.cdRef.markForCheck();
       });

UI/Web/src/app/book-reader/_components/book-line-overlay/book-line-overlay.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'book-line-overlay'">
+<ng-container *transloco="let t; prefix: 'book-line-overlay'">
   @if(selectedText.length > 0 || mode !== BookLineOverlayMode.None) {
     <div class="overlay">
 

UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.html

@@ -43,7 +43,7 @@
 
         <div #readingHtml class="book-content {{layoutMode() | columnLayoutClass}} {{writingStyle() | writingStyleClass}}"
              [ngStyle]="{'max-height': columnHeight(), 'max-width': verticalBookContentWidth(), 'width': verticalBookContentWidth(), 'column-width': columnWidth()}"
-             [ngClass]="{'immersive': immersiveMode() && actionBarVisible}"
+             [ngClass]="{'immersive': immersiveMode() && actionBarVisible, 'debug': debugMode()}"
              [innerHtml]="page()" (click)="toggleMenu($event)" (mousedown)="mouseDown($event)" (wheel)="onWheel($event)"></div>
 
           @if (shouldShowBottomActionBar()) {
@@ -89,6 +89,13 @@
                   <i class="fa fa-reply" aria-hidden="true"></i>
                 </button>
               }
+
+              @if (debugMode()) {
+                <button class="btn btn-secondary btn-icon me-1" (click)="debugInsertViewportView()">
+                  V
+                </button>
+              }
+
               <button class="btn btn-secondary btn-icon me-1" (click)="viewBookmarkImages()">
                 <i class="fa-solid fa-book-bookmark" aria-hidden="true"></i>
               </button>
@@ -103,14 +110,6 @@
               </button>
             </div>
           </div>
-
-          <div class="progress-bar-container">
-            @if (isLoading()) {
-              <ngb-progressbar type="primary" height="10px" [value]="1" [max]="1" [striped]="true"></ngb-progressbar>
-            } @else {
-              <ngb-progressbar type="primary" height="10px" [value]="virtualizedPageNum()" [max]="virtualizedMaxPages()" (click)="goToPage()" [showValue]="true"></ngb-progressbar>
-            }
-          </div>
         </div>
       }
     </ng-template>
@@ -146,6 +145,12 @@
                 </span>
             }
           }
+
+          @if (debugMode()) {
+            @let vp = getVirtualPage();
+            {{vp[0] * vp[2]}} / {{vp[1] * vp[2]}}
+          }
+
         </div>
 
         <button class="btn btn-outline-secondary btn-icon col-2  col-xs-1"

UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.scss

@@ -1,66 +1,66 @@
 @font-face {
-    font-family: "Fira_Sans";
+  font-family: "Fira_Sans";
-    src: url(../../../../assets/fonts/Fira_Sans/FiraSans-Regular.woff2) format("woff2");
+  src: url(../../../../assets/fonts/Fira_Sans/FiraSans-Regular.woff2) format("woff2");
-    font-display: swap;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: "Lato";
+  font-family: "Lato";
-    src: url(../../../../assets/fonts/Lato/Lato-Regular.woff2) format("woff2");
+  src: url(../../../../assets/fonts/Lato/Lato-Regular.woff2) format("woff2");
-    font-display: swap;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: "Libre_Baskerville";
+  font-family: "Libre_Baskerville";
-    src: url(../../../../assets/fonts/Libre_Baskerville/LibreBaskerville-Regular.woff2) format("woff2");
+  src: url(../../../../assets/fonts/Libre_Baskerville/LibreBaskerville-Regular.woff2) format("woff2");
-    font-display: swap;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: "Merriweather";
+  font-family: "Merriweather";
-    src: url(../../../../assets/fonts/Merriweather/Merriweather-Regular.woff2) format("woff2");
+  src: url(../../../../assets/fonts/Merriweather/Merriweather-Regular.woff2) format("woff2");
-    font-display: swap;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: "Nanum_Gothic";
+  font-family: "Nanum_Gothic";
-    src: url(../../../../assets/fonts/Nanum_Gothic/NanumGothic-Regular.woff2) format("woff2");
+  src: url(../../../../assets/fonts/Nanum_Gothic/NanumGothic-Regular.woff2) format("woff2");
-    font-display: swap;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: "RocknRoll_One";
+  font-family: "RocknRoll_One";
-    src: url(../../../../assets/fonts/RocknRoll_One/RocknRollOne-Regular.woff2) format("woff2");
+  src: url(../../../../assets/fonts/RocknRoll_One/RocknRollOne-Regular.woff2) format("woff2");
-    font-display: swap;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: "OpenDyslexic2";
+  font-family: "OpenDyslexic2";
-    src: url(../../../../assets/fonts/OpenDyslexic2/OpenDyslexic-Regular.woff2) format("woff2");
+  src: url(../../../../assets/fonts/OpenDyslexic2/OpenDyslexic-Regular.woff2) format("woff2");
-    font-display: swap;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: "FastFontSerif";
+  font-family: "FastFontSerif";
-    src: url(../../../../assets/fonts/Fast_Font/Fast_Serif.woff2) format("woff2");
+  src: url(../../../../assets/fonts/Fast_Font/Fast_Serif.woff2) format("woff2");
-    font-display: swap;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: "FastFontSans";
+  font-family: "FastFontSans";
-    src: url(../../../../assets/fonts/Fast_Font/Fast_Sans.woff2) format("woff2");
+  src: url(../../../../assets/fonts/Fast_Font/Fast_Sans.woff2) format("woff2");
-    font-display: swap;
+  font-display: swap;
 }
 
 
 
 :root {
-    --br-actionbar-button-text-color: #6c757d;
+  --br-actionbar-button-text-color: #6c757d;
-    --accordion-body-bg-color: black;
+  --accordion-body-bg-color: black;
-    --accordion-header-bg-color: grey;
+  --accordion-header-bg-color: grey;
-    --br-actionbar-button-hover-border-color: #6c757d;
+  --br-actionbar-button-hover-border-color: #6c757d;
-    --br-actionbar-bg-color: white;
+  --br-actionbar-bg-color: white;
-    --default-state-scrollbar: var(--primary-color-scrollbar);
+  --default-state-scrollbar: var(--primary-color-scrollbar);
 }
 
 
@@ -85,150 +85,115 @@ $action-bar-height: 38px;
   }
 }
 
-// Drawer
-.control-container {
-    padding-bottom: 5px;
-}
-
-.page-stub {
-    margin-top: 6px;
-    padding-left: 2px;
-    padding-right: 2px;
-}
-
-.drawer-body {
-    overflow: auto;
-
-    .reader-pills {
-        justify-content: center;
-        margin: 0 0.25rem;
-
-        li a {
-            border: 1px solid var(--primary-color);
-            margin: 0 0.25rem;
-
-            .active {
-                border: unset;
-            }
-        }
-    }
-}
-
-//          Drawer End
-
 .fixed-top {
-    z-index: 1022;
+  z-index: 1022;
-    direction: ltr;
+  direction: ltr;
 }
 
 .dark-mode .overlay {
-    opacity: 0;
+  opacity: 0;
 }
 
 
 .action-bar {
-    background-color: var(--br-actionbar-bg-color);
+  background-color: var(--br-actionbar-bg-color);
+  overflow: hidden;
+  box-shadow: 0 0 6px 0 rgb(0 0 0 / 70%);
+  max-height: $action-bar-height;
+  height: $action-bar-height;
+
+  .book-title-text {
+    text-align: center;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
     overflow: hidden;
-    box-shadow: 0 0 6px 0 rgb(0 0 0 / 70%);
+  }
-    max-height: $action-bar-height;
-    height: $action-bar-height;
-
-    .book-title-text {
-        text-align: center;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp: 1;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-    }
-
-    @media(max-width: 875px) {
-        .book-title {
-            display: none;
-        }
-    }
 
+  @media(max-width: 875px) {
     .book-title {
-        margin-top: 10px;
+      display: none;
-        text-align: center;
-        text-transform: capitalize;
-        max-height: inherit;
     }
+  }
 
-    .next-page-highlight {
+  .book-title {
-        color: var(--primary-color);
+    margin-top: 10px;
-    }
+    text-align: center;
+    text-transform: capitalize;
+    max-height: inherit;
+  }
+
+  .next-page-highlight {
+    color: var(--primary-color);
+  }
 }
 
 .reader-container {
-    outline: none; // Only the reading section itself shouldn't receive any outline. We use it to shift focus in fullscreen mode
+  outline: none; // Only the reading section itself shouldn't receive any outline. We use it to shift focus in fullscreen mode
-    overflow: auto;
+  overflow: auto;
-    height: calc(var(--vh, 1vh) * 100);
+  height: calc(var(--vh, 1vh) * 100);
-    position: relative;
+  position: relative;
-    // This is completely invisible, everything else renders over it
+  // This is completely invisible, everything else renders over it
 
-    &.column-layout-1 {
+  &.column-layout-1 {
-        height: calc(var(--vh) * 100);
+    height: calc(var(--vh) * 100);
-    }
+  }
 
-    &.column-layout-2 {
+  &.column-layout-2 {
-        height: calc(var(--vh) * 100);
+    height: calc(var(--vh) * 100);
-    }
+  }
 
-    &.writing-style-vertical {
+  &.writing-style-vertical {
-        direction: rtl;
+    direction: rtl;
-    }
+  }
 }
 
 .reading-section {
-    width: 100%;
+  width: 100%;
-    //overflow: auto;  // This will break progress reporting
+  //overflow: auto;  // This will break progress reporting
-    height: 100vh;
+  height: 100vh;
-    padding-top: $action-bar-height;
+  padding-top: $action-bar-height;
-    padding-bottom: $action-bar-height;
+  padding-bottom: $action-bar-height;
-    position: relative;
+  position: relative;
-    direction: ltr;
+  direction: ltr;
 
-    //background-color: green !important;
+  //background-color: green !important;
 
-    &.column-layout-1 {
+  &.column-layout-1 {
-        height: calc((var(--vh, 1vh) * 100) - $action-bar-height);
+    height: calc((var(--vh, 1vh) * 100) - $action-bar-height);
-    }
+  }
 
-    &.column-layout-2 {
+  &.column-layout-2 {
-        height: calc((var(--vh, 1vh) * 100) - $action-bar-height);
+    height: calc((var(--vh, 1vh) * 100) - $action-bar-height);
-    }
+  }
 
-    &.immersive {
+  &.immersive {
-        height: calc((var(--vh, 1vh) * 100));
+    height: calc((var(--vh, 1vh) * 100));
-        //padding-top: 0px;
+  }
-        //padding-bottom: 0px;
-    }
 
-    &.writing-style-vertical {
+  &.writing-style-vertical {
-        writing-mode: vertical-rl;
+    writing-mode: vertical-rl;
-        height: 100%;
+    height: 100%;
-    }
+  }
 }
 
 .book-container {
-    position: relative;
+  position: relative;
-    height: 100%;
+  height: 100%;
 
-   //background-color: purple !important;
+  &.column-layout-1 {
+    height: calc((var(--vh, 1vh) * 100) - $action-bar-height);
+  }
 
-    &.column-layout-1 {
+  &.column-layout-2 {
-        height: calc((var(--vh, 1vh) * 100) - $action-bar-height);
+    height: calc((var(--vh, 1vh) * 100) - $action-bar-height);
-    }
+  }
 
-    &.column-layout-2 {
+  &.writing-style-vertical {
-        height: calc((var(--vh, 1vh) * 100) - $action-bar-height);
+    // Fixes an issue where chrome will cut of margins, doesn't seem to affect other browsers
-    }
+    overflow: auto;
-
+  }
-    &.writing-style-vertical {
-        // Fixes an issue where chrome will cut of margins, doesn't seem to affect other browsers
-        overflow: auto;
-    }
 }
 
 .book-content {
@@ -237,45 +202,50 @@ $action-bar-height: 38px;
   padding: 20px 0px;
 
   &.column-layout-1 {
-      height: calc((var(--vh) * 100) - calc($action-bar-height)); //  * 2
+    height: calc((var(--vh) * 100) - calc($action-bar-height)); //  * 2
 
-      &.writing-style-vertical {
+    &.writing-style-vertical {
-          padding: 0 10px 0 0;
+      padding: 0 10px 0 0;
-          margin: 20px 0;
+      margin: 20px 0;
-      }
     }
+  }
 
-    &.column-layout-2 {
+  &.column-layout-2 {
-        height: calc((var(--vh) * 100) - calc($action-bar-height)); //  * 2
+    height: calc((var(--vh) * 100) - calc($action-bar-height)); //  * 2
+    column-fill: balance;
 
-        &.writing-style-vertical {
+    &.debug {
-            padding: 0 10px 0 0;
+      column-rule: 2px dashed #666666;
-            margin: 20px 0;
-        }
     }
 
     &.writing-style-vertical {
-        height: auto;
+      padding: 0 10px 0 0;
+      margin: 20px 0;
     }
+  }
 
-    // &.immersive {
+  &.writing-style-vertical {
-    //     // Note: I removed this for bug: https://github.com/Kareadita/Kavita/issues/1726
+    height: auto;
-    //     //height: calc((var(--vh, 1vh) * 100) - $action-bar-height);
+  }
-    // }
 
-    a, :link {
+  // &.immersive {
-        color: var(--brtheme-link-text-color);
+  //     // Note: I removed this for bug: https://github.com/Kareadita/Kavita/issues/1726
-    }
+  //     //height: calc((var(--vh, 1vh) * 100) - $action-bar-height);
+  // }
 
-    background-color: var(--brtheme-bg-color);
+  a, :link {
+    color: var(--brtheme-link-text-color);
+  }
+
+  background-color: var(--brtheme-bg-color);
 }
 
 .pagination-cont {
-    background: var(--br-actionbar-bg-color);
+  background: var(--br-actionbar-bg-color);
-    border-radius: 5px;
+  border-radius: 5px;
-    padding: 5px 15px;
+  padding: 5px 15px;
-    margin: 0 0 5px;
+  margin: 0 0 5px;
-    border: var(--drawer-pagination-border);
+  border: var(--drawer-pagination-border);
 }
 
 .virt-pagination-cont {
@@ -285,70 +255,74 @@ $action-bar-height: 38px;
 }
 
 .bottom-bar {
-    position: fixed;
+  position: fixed;
-    width: 100%;
+  width: 100%;
-    bottom: 0;
+  bottom: 0;
-    left: 0;
+  left: 0;
-    writing-mode: horizontal-tb;
+  writing-mode: horizontal-tb;
 }
 
 
 
 // This is essentially fitting the text to height and when you press next you are scrolling over by page width
 .column-layout-1 {
-    .book-content {
+  .book-content {
-        column-count: 1;
+    column-count: 1;
-        column-gap: 20px;
+    column-gap: 20px;
-        overflow: hidden;
+    overflow: hidden;
-        word-break: break-word;
+    word-break: break-word;
-        overflow-wrap: break-word;
+    overflow-wrap: break-word;
-    }
+  }
 }
 
 .column-layout-2 {
-    .book-content {
+  .book-content {
-        column-count: 2;
+    column-count: 2;
-        column-gap: 20px;
+    column-gap: 20px;
-        overflow: hidden;
+    overflow: hidden;
-        word-break: break-word;
+    word-break: break-word;
-        overflow-wrap: break-word;
+    overflow-wrap: break-word;
+
+    &.debug {
+      overflow: scroll;
+      overflow-y: hidden;
     }
+  }
 }
 
 // A bunch of resets so books render correctly
 ::ng-deep .book-content {
-    & a, & :link {
+  & a, & :link {
-        color: #8db2e5;
+    color: #8db2e5;
-    }
+  }
 }
 
 // This is applied to images in the backend
 ::ng-deep .kavita-scale-width-container {
-    width: auto;
+  width: auto;
-    max-height: calc(var(--book-reader-content-max-height) - ($action-bar-height)) !important;
+  max-height: calc(var(--book-reader-content-max-height) - ($action-bar-height)) !important;
-    max-width: calc(var(--book-reader-content-max-width)) !important;
+  max-width: calc(var(--book-reader-content-max-width)) !important;
-    position: var(--book-reader-content-position) !important;
+  position: var(--book-reader-content-position) !important;
-    top: var(--book-reader-content-top) !important;
+  top: var(--book-reader-content-top) !important;
-    left: var(--book-reader-content-left) !important;
+  left: var(--book-reader-content-left) !important;
-    transform: var(--book-reader-content-transform) !important;
+  transform: var(--book-reader-content-transform) !important;
-
 }
 
 // This is applied to images in the backend
 ::ng-deep .kavita-scale-width {
-    max-height: calc(var(--book-reader-content-max-height) - ($action-bar-height)) !important;
+  max-height: calc(var(--book-reader-content-max-height) - ($action-bar-height)) !important;
-    max-width: calc(var(--book-reader-content-max-width)) !important;
+  max-width: calc(var(--book-reader-content-max-width)) !important;
-    object-fit: contain;
+  object-fit: contain;
-    object-position: top center;
+  object-position: top center;
-    break-inside: avoid;
+  break-inside: avoid;
-    break-before: column;
+  break-before: column;
-    max-height: 100vh;
+  max-height: 100vh;
 }
 
 
 // Click to Paginate styles
 .icon-primary-color {
-    color: $primary-color;
+  color: $primary-color;
 }
 
 $pagination-color: transparent;
@@ -361,63 +335,63 @@ $pagination-opacity: 0;
 
 
 .right {
-    position: absolute;
+  position: absolute;
-    right: 0px;
+  right: 0px;
-    top: $action-bar-height;
+  top: $action-bar-height;
-    width: 20vw;
+  width: 20vw;
-    z-index: 3;
+  z-index: 3;
-    background: $pagination-color;
+  background: $pagination-color;
-    border-color: transparent;
+  border-color: transparent;
-    border: none !important;
+  border: none !important;
-    opacity: 0;
+  opacity: 0;
-    outline: none;
+  outline: none;
-    cursor: pointer;
+  cursor: pointer;
 
-    &.immersive {
+  &.immersive {
-        top: 0;
+    top: 0;
-    }
+  }
 
-    &.no-pointer-events {
+  &.no-pointer-events {
-        pointer-events: none;
+    pointer-events: none;
-    }
+  }
 }
 
 // This class pushes the click area to the left a bit to let users click the scrollbar
 .right-with-scrollbar {
-    position: absolute;
+  position: absolute;
-    right: 17px;
+  right: 17px;
-    top: $action-bar-height;
+  top: $action-bar-height;
-    width: 18%;
+  width: 18%;
-    z-index: 3;
+  z-index: 3;
-    background: $pagination-color;
+  background: $pagination-color;
-    opacity: $pagination-opacity;
+  opacity: $pagination-opacity;
-    border-color: transparent;
+  border-color: transparent;
-    border: none !important;
+  border: none !important;
-    outline: none;
+  outline: none;
-    cursor: pointer;
+  cursor: pointer;
 
-    &.immersive {
+  &.immersive {
-        top: 0;
+    top: 0;
-    }
+  }
 }
 
 .left {
-    position: absolute;
+  position: absolute;
-    left: 0px;
+  left: 0px;
-    top: $action-bar-height;
+  top: $action-bar-height;
-    width: 20vw;
+  width: 20vw;
-    background: $pagination-color;
+  background: $pagination-color;
-    opacity: $pagination-opacity;
+  opacity: $pagination-opacity;
-    border-color: transparent;
+  border-color: transparent;
-    border: none !important;
+  border: none !important;
-    z-index: 3;
+  z-index: 3;
-    outline: none;
+  outline: none;
-    height: 100vw;
+  height: 100vw;
-    cursor: pointer;
+  cursor: pointer;
 
-    &.immersive {
+  &.immersive {
-        top: 0px;
+    top: 0px;
-    }
+  }
 }
 
 
@@ -436,40 +410,40 @@ $pagination-opacity: 0;
 
 // TODO: Figure out why book-reader has it's own button overrides
 .btn {
-    &.btn-secondary {
+  &.btn-secondary {
-        color: var(--br-actionbar-button-text-color);
+    color: var(--br-actionbar-button-text-color);
-        border-color: transparent;
+    border-color: transparent;
-        background-color: unset;
+    background-color: unset;
 
-        &:hover, &:focus {
+    &:hover, &:focus {
-            border-color: var(--br-actionbar-button-hover-border-color);
+      border-color: var(--br-actionbar-button-hover-border-color);
-        }
     }
+  }
 
-    &.btn-outline-secondary {
+  &.btn-outline-secondary {
-        border-color: transparent;
+    border-color: transparent;
-        background-color: unset;
+    background-color: unset;
 
-        &:hover, &:focus {
+    &:hover, &:focus {
-            border-color: var(--br-actionbar-button-hover-border-color);
+      border-color: var(--br-actionbar-button-hover-border-color);
-        }
     }
+  }
 
-    span {
+  span {
-        background-color: unset;
+    background-color: unset;
-        color: var(--br-actionbar-button-text-color);
+    color: var(--br-actionbar-button-text-color);
-    }
+  }
 
-    i {
+  i {
-        background-color: unset;
+    background-color: unset;
-        color: var(--br-actionbar-button-text-color);
+    color: var(--br-actionbar-button-text-color);
-    }
+  }
 
-    &:active {
+  &:active {
-        * {
+    * {
-            color: white;
+      color: white;
-        }
     }
+  }
 }
 
 
@@ -480,17 +454,6 @@ $pagination-opacity: 0;
   background-color: var(--bs-body-bg);
 }
 
-.progress-bar-container {
-  border-top: 1px solid var(--bs-border-color-translucent);
-  background-color: var(--br-actionbar-bg-color); // TODO: BUG: This isn't coloring well
-  max-height: 10px;
-
-  .progress {
-    border-radius: 0;
-    background-color: var(--br-actionbar-bg-color);
-  }
-}
-
 .page-progress-slider {
   margin: 0;
 }

UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.ts

@@ -47,7 +47,7 @@ import {ThemeService} from 'src/app/_services/theme.service';
 import {ScrollService} from 'src/app/_services/scroll.service';
 import {PAGING_DIRECTION} from 'src/app/manga-reader/_models/reader-enums';
 import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
-import {NgbProgressbar, NgbTooltip} from '@ng-bootstrap/ng-bootstrap';
+import {NgbTooltip} from '@ng-bootstrap/ng-bootstrap';
 import {BookLineOverlayComponent} from "../book-line-overlay/book-line-overlay.component";
 import {translate, TranslocoDirective} from "@jsverse/transloco";
 import {ReadingProfile} from "../../../_models/preferences/reading-profiles";
@@ -67,6 +67,7 @@ import {LayoutMeasurementService} from "../../../_services/layout-measurement.se
 import {ColorscapeService} from "../../../_services/colorscape.service";
 import {environment} from "../../../../environments/environment";
 import {LoadPageEvent} from "../_drawers/view-bookmarks-drawer/view-bookmark-drawer.component";
+import afterFrame from "afterframe";
 
 
 interface HistoryPoint {
@@ -124,7 +125,7 @@ const SCROLL_DELAY = 10;
         ])
     ],
   imports: [NgTemplateOutlet, NgStyle, NgClass, NgbTooltip,
-    BookLineOverlayComponent, TranslocoDirective, ColumnLayoutClassPipe, WritingStyleClassPipe, ReadTimeLeftPipe, PercentPipe, NgxSliderModule, NgbProgressbar],
+    BookLineOverlayComponent, TranslocoDirective, ColumnLayoutClassPipe, WritingStyleClassPipe, ReadTimeLeftPipe, PercentPipe, NgxSliderModule],
   providers: [EpubReaderSettingsService, LayoutMeasurementService],
 })
 export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
@@ -354,6 +355,11 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
    */
   firstLoad: boolean = true;
 
+  /**
+   * Injects information to help debug issues
+   */
+  debugMode = model<boolean>(!environment.production && true);
+
 
 
   @ViewChild('bookContainer', {static: false}) bookContainerElemRef!: ElementRef<HTMLDivElement>;
@@ -361,10 +367,12 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
    * book-content class
    */
   @ViewChild('readingHtml', {static: false}) bookContentElemRef!: ElementRef<HTMLDivElement>;
+  @ViewChild('readingHtml', { read: ViewContainerRef }) readingContainer!: ViewContainerRef;
+
   @ViewChild('readingSection', {static: false}) readingSectionElemRef!: ElementRef<HTMLDivElement>;
   @ViewChild('stickyTop', {static: false}) stickyTopElemRef!: ElementRef<HTMLDivElement>;
   @ViewChild('reader', {static: false}) reader!: ElementRef;
-  @ViewChild('readingHtml', { read: ViewContainerRef }) readingContainer!: ViewContainerRef;
+
 
 
   protected readonly layoutMode = this.readerSettingsService.layoutMode;
@@ -525,15 +533,23 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
       const layoutMode = this.layoutMode();
       const writingStyle = this.writingStyle();
 
+      const windowWidth = this.windowWidth();
       const base = writingStyle === WritingStyle.Vertical ? this.pageHeight() : this.pageWidth();
 
+      // console.log('window width: ', windowWidth)
+      // console.log('book content width: ', this.readingSectionElemRef?.nativeElement?.clientWidth);
+      // console.log('column width: ', base / 4);
+
+
       switch (layoutMode) {
         case BookPageLayoutMode.Default:
           return 'unset';
         case BookPageLayoutMode.Column1:
           return ((base / 2) - 4) + 'px';
         case BookPageLayoutMode.Column2:
-          return (base / 4) + 'px'
+          //return (this.readingSectionElemRef?.nativeElement?.clientWidth - this.getMargin() + 1) / 2 + 'px';
+          return (((this.readingSectionElemRef?.nativeElement?.clientWidth ?? base)) / 4) + 1 + 'px'
+          //return ((base) / 4) + 6 + 'px'
         default:
           return 'unset';
       }
@@ -562,6 +578,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
 
 
       if (layoutMode !== BookPageLayoutMode.Default && writingStyle !== WritingStyle.Horizontal) {
+        console.log('verticalBookContentWidth: ', verticalPageWidth)
         return `${verticalPageWidth}px`;
       }
       return '';
@@ -974,6 +991,9 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
       case KEY_CODES.F:
         this.applyFullscreen();
         break;
+      case KEY_CODES.SPACE:
+        this.actionBarVisible.update(x => !x);
+        break;
     }
   }
 
@@ -1093,30 +1113,30 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
    */
   addLinkClickHandlers() {
     const links = this.readingSectionElemRef.nativeElement.querySelectorAll('a');
-      links.forEach((link: any) => {
+    links.forEach((link: any) => {
-        link.addEventListener('click', (e: any) => {
+      link.addEventListener('click', (e: any) => {
-          e.stopPropagation();
+        e.stopPropagation();
-          let targetElem = e.target;
+        let targetElem = e.target;
-          if (e.target.nodeName !== 'A' && e.target.parentNode.nodeName === 'A') {
+        if (e.target.nodeName !== 'A' && e.target.parentNode.nodeName === 'A') {
-            // Certain combos like <a><sup>text</sup></a> can cause the target to be the sup tag and not the anchor
+          // Certain combos like <a><sup>text</sup></a> can cause the target to be the sup tag and not the anchor
-            targetElem = e.target.parentNode;
+          targetElem = e.target.parentNode;
-          }
+        }
-          if (!targetElem.attributes.hasOwnProperty('kavita-page')) { return; }
+        if (!targetElem.attributes.hasOwnProperty('kavita-page')) { return; }
-          const page = parseInt(targetElem.attributes['kavita-page'].value, 10);
+        const page = parseInt(targetElem.attributes['kavita-page'].value, 10);
-          if (this.adhocPageHistory.peek()?.page !== this.pageNum()) {
+        if (this.adhocPageHistory.peek()?.page !== this.pageNum()) {
-            this.adhocPageHistory.push({page: this.pageNum(), scrollPart: this.readerService.scopeBookReaderXpath(this.lastSeenScrollPartPath)});
+          this.adhocPageHistory.push({page: this.pageNum(), scrollPart: this.readerService.scopeBookReaderXpath(this.lastSeenScrollPartPath)});
-          }
+        }
 
-          const partValue = targetElem.attributes.hasOwnProperty('kavita-part') ? targetElem.attributes['kavita-part'].value : undefined;
+        const partValue = targetElem.attributes.hasOwnProperty('kavita-part') ? targetElem.attributes['kavita-part'].value : undefined;
-          if (partValue && page === this.pageNum()) {
+        if (partValue && page === this.pageNum()) {
-            this.scrollTo(targetElem.attributes['kavita-part'].value);
+          this.scrollTo(targetElem.attributes['kavita-part'].value);
-            return;
+          return;
-          }
+        }
 
-          this.setPageNum(page);
+        this.setPageNum(page);
-          this.loadPage(partValue);
+        this.loadPage(partValue);
-        });
       });
+    });
   }
 
   moveFocus() {
@@ -1159,39 +1179,41 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   loadPage(part?: string | undefined, scrollTop?: number | undefined) {
+
+    console.log('load page called with: part: ', part, 'scrollTop: ', scrollTop);
     this.isLoading.set(true);
     this.cdRef.markForCheck();
 
     this.bookService.getBookPage(this.chapterId, this.pageNum()).subscribe(content => {
-      this.isSingleImagePage = this.checkSingleImagePage(content) // This needs be performed before we set this.page to avoid image jumping
+      this.isSingleImagePage = this.checkSingleImagePage(content); // This needs be performed before we set this.page to avoid image jumping
       this.updateSingleImagePageStyles();
+
       this.page.set(this.domSanitizer.bypassSecurityTrustHtml(content));
+
       this.scrollService.unlock();
+      this.setupObservers();
 
-      this.cdRef.markForCheck();
+      afterFrame(() => {
-
-      setTimeout(() => {
         this.addLinkClickHandlers();
         this.applyPageStyles(this.pageStyles());
 
         const imgs = this.readingSectionElemRef.nativeElement.querySelectorAll('img');
-        if (imgs === null || imgs.length === 0) {
+        if (imgs !== null && imgs.length > 0) {
+          Promise.all(Array.from(imgs ?? [])
+            .filter(img => !img.complete)
+            .map(img => new Promise(resolve => { img.onload = img.onerror = resolve; })))
+            .then(() => {
+              this.setupPage(part, scrollTop);
+              this.updateImageSizes();
+              this.injectImageBookmarkIndicators();
+            });
+        } else {
           this.setupPage(part, scrollTop);
-          return;
         }
 
-        Promise.all(Array.from(imgs)
-          .filter(img => !img.complete)
-          .map(img => new Promise(resolve => { img.onload = img.onerror = resolve; })))
-          .then(() => {
-            this.setupPage(part, scrollTop);
-            this.updateImageSizes();
-            this.injectImageBookmarkIndicators();
-            this.setupObservers();
-          });
 
         this.firstLoad = false;
-      }, SCROLL_DELAY);
+      });
     });
   }
 
@@ -1367,7 +1389,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
 
 
     try {
-      this.setupPageScroll(part, scrollTop);
+      this.scrollWithinPage(part, scrollTop);
     } catch (ex) {
       console.error(ex);
     }
@@ -1383,14 +1405,34 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
     });
   }
 
-  private setupPageScroll(part?: string | undefined, scrollTop?: number) {
+  private scroll(lambda: () => void) {
+    afterFrame(() => {
+      setTimeout(lambda, SCROLL_DELAY)
+    });
+  }
+
+  private scrollWithinPage(part?: string | undefined, scrollTop?: number) {
     if (part !== undefined && part !== '') {
-      this.scrollTo(this.readerService.scopeBookReaderXpath(part));
+
+      console.log('Scrolling via part: ', part);
+      this.scroll(() => this.scrollTo(this.readerService.scopeBookReaderXpath(part)));
+
+      // afterFrame(() => {
+      //   setTimeout(() => this.scrollTo(this.readerService.scopeBookReaderXpath(part)), SCROLL_DELAY)
+      // })
+      //
+      // setTimeout(() => {
+      //   afterFrame(() => this.scrollTo(this.readerService.scopeBookReaderXpath(part)));
+      // }, SCROLL_DELAY);
       return;
     }
 
     if (scrollTop !== undefined && scrollTop !== 0) {
-      setTimeout(() => this.scrollService.scrollTo(scrollTop, this.reader.nativeElement));
+      // setTimeout(() => {
+      //   afterFrame(() => this.scrollService.scrollTo(scrollTop, this.reader.nativeElement));
+      // }, SCROLL_DELAY);
+      console.log('Scrolling via scrollTop: ', scrollTop);
+      this.scroll(() => this.scrollService.scrollTo(scrollTop, this.reader.nativeElement));
       return;
     }
 
@@ -1399,31 +1441,57 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
 
     if (layoutMode === BookPageLayoutMode.Default) {
       if (writingStyle === WritingStyle.Vertical) {
-        setTimeout(()=> this.scrollService.scrollToX(this.bookContentElemRef.nativeElement.clientWidth, this.reader.nativeElement), SCROLL_DELAY);
+        console.log('Scrolling via x axis: ', this.bookContentElemRef.nativeElement.clientWidth, ' via ', this.reader.nativeElement);
+        this.scroll(() => this.scrollService.scrollToX(this.bookContentElemRef.nativeElement.clientWidth, this.reader.nativeElement));
+        //
+        // setTimeout(() => {
+        //   afterFrame(()=> this.scrollService.scrollToX(this.bookContentElemRef.nativeElement.clientWidth, this.reader.nativeElement));
+        // }, SCROLL_DELAY);
         return;
       }
 
-      setTimeout(() => this.scrollService.scrollTo(0, this.reader.nativeElement), SCROLL_DELAY);
+      // setTimeout(() => {
+      //   afterFrame(() => this.scrollService.scrollTo(0, this.reader.nativeElement));
+      // }, SCROLL_DELAY);
+      console.log('Scrolling via x axis to 0: ', 0, ' via ', this.reader.nativeElement);
+      this.scroll(() => this.scrollService.scrollToX(0, this.reader.nativeElement));
       return;
     }
 
     if (writingStyle === WritingStyle.Vertical) {
       if (this.pagingDirection === PAGING_DIRECTION.BACKWARDS) {
-        setTimeout(() => this.scrollService.scrollTo(this.bookContentElemRef.nativeElement.scrollHeight, this.bookContentElemRef.nativeElement, 'auto'), SCROLL_DELAY);
+        // setTimeout(() => {
+        //   afterFrame(() => this.scrollService.scrollTo(this.bookContentElemRef.nativeElement.scrollHeight, this.bookContentElemRef.nativeElement, 'auto'));
+        // }, SCROLL_DELAY);
+        console.log('(Vertical) Scrolling via x axis to: ', this.bookContentElemRef.nativeElement.scrollHeight, ' via ', this.bookContentElemRef.nativeElement);
+        this.scroll(() => this.scrollService.scrollTo(this.bookContentElemRef.nativeElement.scrollHeight, this.bookContentElemRef.nativeElement, 'auto'));
         return;
       }
 
-      setTimeout(() => this.scrollService.scrollTo(0, this.bookContentElemRef.nativeElement,'auto' ), SCROLL_DELAY);
+      // setTimeout(() => {
+      //   afterFrame(() => this.scrollService.scrollTo(0, this.bookContentElemRef.nativeElement, 'auto'));
+      // }, SCROLL_DELAY);
+      console.log('(Vertical) Scrolling via x axis to 0: ', 0, ' via ', this.bookContentElemRef.nativeElement);
+      this.scroll(() => this.scrollService.scrollTo(0, this.bookContentElemRef.nativeElement, 'auto'));
       return;
     }
 
     // We need to check if we are paging back, because we need to adjust the scroll
     if (this.pagingDirection === PAGING_DIRECTION.BACKWARDS) {
-      setTimeout(() => this.scrollService.scrollToX(this.bookContentElemRef.nativeElement.scrollWidth, this.bookContentElemRef.nativeElement), SCROLL_DELAY);
+      // setTimeout(() => {
+      //   afterFrame(() => this.scrollService.scrollToX(this.bookContentElemRef.nativeElement.scrollWidth, this.bookContentElemRef.nativeElement));
+      // }, SCROLL_DELAY);
+      console.log('(Page Back) Scrolling via x axis to: ', this.bookContentElemRef.nativeElement.scrollWidth, ' via ', this.bookContentElemRef.nativeElement);
+      this.scroll(() => this.scrollService.scrollToX(this.bookContentElemRef.nativeElement.scrollWidth, this.bookContentElemRef.nativeElement));
       return;
     }
 
-    setTimeout(() => this.scrollService.scrollToX(0, this.bookContentElemRef.nativeElement), SCROLL_DELAY);
+    setTimeout(() => {
+      afterFrame(() => this.scrollService.scrollToX(0, this.bookContentElemRef.nativeElement));
+    }, SCROLL_DELAY);
+
+    console.log('Scrolling via x axis to 0: ', 0, ' via ', this.bookContentElemRef.nativeElement);
+    this.scroll(() => this.scrollService.scrollToX(0, this.bookContentElemRef.nativeElement));
   }
 
   private setupAnnotationElements() {
@@ -1436,11 +1504,11 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
       return;
     }
 
-    const [,, pageWidth] = this.getVirtualPage();
+    const pageSize = this.pageSize();
-    const actualWidth = this.bookContentElemRef.nativeElement.scrollWidth;
+    const [_, totalScroll] = this.getScrollOffsetAndTotalScroll();
-    const lastPageWidth = actualWidth % pageWidth;
+    const lastPageSize = totalScroll % pageSize;
 
-    if (lastPageWidth >= pageWidth / 2 || lastPageWidth === 0) {
+    if (lastPageSize >= pageSize / 2 || lastPageSize === 0) {
       // The last page needs more than one column, no pages will be duplicated
       return;
     }
@@ -1595,7 +1663,12 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
     if (this.readingSectionElemRef == null) return 0;
 
     const margin = (this.convertVwToPx(parseInt(marginLeft, 10)) * 2);
-    return this.readingSectionElemRef.nativeElement.clientWidth - margin + (COLUMN_GAP * columnGapModifier);
+
+    // console.log('page size calc, client width: ', this.readingSectionElemRef.nativeElement.clientWidth)
+    // console.log('page size calc, margin: ', margin)
+    // console.log('page size calc, col gap: ', ((COLUMN_GAP / 2) * columnGapModifier));
+    // console.log("clientWidth", this.readingSectionElemRef.nativeElement.clientWidth, "window", window.innerWidth, "margin", margin, "left", marginLeft)
+    return this.readingSectionElemRef.nativeElement.clientWidth - margin + ((COLUMN_GAP) * columnGapModifier);
   });
 
   pageHeight = computed(() => {
@@ -1663,9 +1736,13 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   pageSize = computed(() => {
-    return this.writingStyle() === WritingStyle.Vertical
+    const height = this.pageHeight();
-      ? this.pageHeight()
+    const width = this.pageWidth();
-      : this.pageWidth();
+    const writingStyle = this.writingStyle();
+
+    return writingStyle === WritingStyle.Vertical
+      ? height
+      : width;
   });
 
 
@@ -1772,10 +1849,20 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
         return;
       }
       if (pageLevelStyles.includes(item[0])) {
-        this.renderer.setStyle(this.bookContentElemRef.nativeElement, item[0], item[1], RendererStyleFlags2.Important);
+
+        let value = item[1];
+        // Convert vw for margin into fixed pixels otherwise when paging, 2 column mode will bleed text between columns
+        if (item[0].startsWith('margin')) {
+          const vw = parseInt(item[1].replace('vw', ''), 10);
+          value = `${this.convertVwToPx(vw)}px`;
+        }
+
+        this.renderer.setStyle(this.bookContentElemRef.nativeElement, item[0], value, RendererStyleFlags2.Important);
       }
     });
 
+
+
     const individualElementStyles = Object.entries(pageStyles).filter(item => elementLevelStyles.includes(item[0]));
     for(let i = 0; i < this.bookContentElemRef.nativeElement.children.length; i++) {
       const elem = this.bookContentElemRef.nativeElement.children.item(i);
@@ -1892,7 +1979,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
     const writingStyle = this.writingStyle();
 
     if (layout !== BookPageLayoutMode.Default) {
-      setTimeout(() => this.scrollService.scrollIntoView(element as HTMLElement, {timeout, scrollIntoViewOptions: {'block': 'start', 'inline': 'start'}}));
+      afterFrame(() => this.scrollService.scrollIntoView(element as HTMLElement, {timeout, scrollIntoViewOptions: {'block': 'start', 'inline': 'start'}}));
       return;
     }
 
@@ -1900,12 +1987,12 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
       case WritingStyle.Vertical:
         const windowWidth = window.innerWidth || document.documentElement.clientWidth;
         const scrollLeft = element.getBoundingClientRect().left + window.scrollX - (windowWidth - element.getBoundingClientRect().width);
-        setTimeout(() => this.scrollService.scrollToX(scrollLeft, this.reader.nativeElement, 'smooth'), SCROLL_DELAY);
+        afterFrame(() => this.scrollService.scrollToX(scrollLeft, this.reader.nativeElement, 'smooth'));
         break;
       case WritingStyle.Horizontal:
         const fromTopOffset = element.getBoundingClientRect().top + window.scrollY + TOP_OFFSET;
         // We need to use a delay as webkit browsers (aka Apple devices) don't always have the document rendered by this point
-        setTimeout(() => this.scrollService.scrollTo(fromTopOffset, this.reader.nativeElement), SCROLL_DELAY);
+        afterFrame(() => this.scrollService.scrollTo(fromTopOffset, this.reader.nativeElement));
     }
   }
 
@@ -1983,7 +2070,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
       this.updateImageSizes()
     }, 200);
 
-    this.updateSingleImagePageStyles()
+    this.updateSingleImagePageStyles();
 
     // Calculate if bottom actionbar is needed. On a timeout to get accurate heights
     // if (this.bookContentElemRef == null) {
@@ -2108,7 +2195,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   handleReaderClick(event: MouseEvent) {
-    if (!this.clickToPaginate()) {
+    if (!this.clickToPaginate() && !this.immersiveMode()) {
       event.preventDefault();
       event.stopPropagation();
       this.toggleMenu(event);
@@ -2176,8 +2263,8 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
     });
   }
 
-  viewAnnotations() {
+  async viewAnnotations() {
-    this.epubMenuService.openViewAnnotationsDrawer((annotation: Annotation) => {
+    await this.epubMenuService.openViewAnnotationsDrawer((annotation: Annotation) => {
       if (this.pageNum() != annotation.pageNumber) {
         this.setPageNum(annotation.pageNumber);
       }
@@ -2197,27 +2284,93 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
     });
   }
 
-  private debugVirtualPaging() {
+  /**
-    if (this.layoutMode() === BookPageLayoutMode.Default) return;
+   * With queries and pure math, determines the actual viewport the user can see.
+   *
+   * NOTE: On Scroll LayoutMode, the height/bottom are not correct
+   */
+  getViewportBoundingRect() {
+    const margin = this.getMargin();
+    const [currentVirtualPage, _, pageSize] = this.getVirtualPage();
+    const visibleBoundingBox = this.bookContentElemRef.nativeElement.getBoundingClientRect();
 
-    const [scrollOffset, totalScroll] = this.getScrollOffsetAndTotalScroll();
+    let bookContentPadding = 20;
-    const pageSize = this.pageSize();
+    let bookPadding = getComputedStyle(this.bookContentElemRef?.nativeElement!).paddingTop;
-    const [currentVirtualPage, totalVirtualPages] = this.getVirtualPage();
+    if (bookPadding) {
+      bookContentPadding = parseInt(bookPadding.toString().replace('px', ''), 10);
+    }
 
-    console.log('Virtual Paging Debug:', {
+    // Adjust the bounding box for what is actually visible
-      scrollOffset,
+    const bottomBarHeight = this.document.querySelector('.bottom-bar')?.getBoundingClientRect().height ?? 38;
-      totalScroll,
+    const topBarHeight = this.document.querySelector('.fixed-top')?.getBoundingClientRect().height ?? 48;
-      pageSize,
+
-      currentVirtualPage,
+//    console.log('bottom: ', visibleBoundingBox.bottom) // TODO: Bottom isn't ideal in scroll mode
-      totalVirtualPages,
+
-      layoutMode: this.layoutMode(),
+    const left = margin;
-      writingStyle: this.writingStyle(),
+    const top = topBarHeight;
-      bookContentWidth: this.bookContentElemRef?.nativeElement?.clientWidth,
+    const bottom = visibleBoundingBox.bottom - bottomBarHeight + bookContentPadding; // bookContent has a 20px padding top/bottom
-      bookContentHeight: this.bookContentElemRef?.nativeElement?.clientHeight,
+    const width = pageSize;
-      scrollWidth: this.bookContentElemRef?.nativeElement?.scrollWidth,
+    const height = bottom - top;
-      scrollHeight: this.bookContentElemRef?.nativeElement?.scrollHeight
+    const right = left + width;
+
+    console.log('Visible Viewport', {
+      left, right, top, bottom, width, height
     });
+
+    return {
+      left, right, top, bottom, width, height
+    }
   }
 
+  debugInsertViewportView() {
+
+    const viewport = this.getViewportBoundingRect();
+
+    // Insert a debug element to help visualize
+    document.querySelector('#test')?.remove();
+
+    // Create and inject the red rectangle div
+    const redRect = document.createElement('div');
+    redRect.id = 'test';
+    redRect.style.position = 'absolute';
+    redRect.style.left = `${viewport.left}px`;
+    redRect.style.top = `${viewport.top}px`;
+    redRect.style.width = `${viewport.width}px`;
+    redRect.style.height = `${viewport.height}px`;
+    redRect.style.border = '5px solid red';
+    redRect.style.pointerEvents = 'none';
+    redRect.style.zIndex = '1000';
+
+    // Inject into the document
+    document.body.appendChild(redRect);
+  }
+
+  /**
+   * Get actual px margin (just one side), falls back to vw -> px mapping calculation
+   */
+  getMargin() {
+    const pageStyles = this.pageStyles();
+    let usedComputed = false;
+    let margin = this.convertVwToPx(parseInt(pageStyles['margin-left'], 10));
+
+
+    const computedMargin = getComputedStyle(this.bookContentElemRef?.nativeElement!).marginLeft;
+    if (computedMargin) {
+      margin = parseInt(computedMargin.toString().replace('px', ''), 10);
+      usedComputed = true;
+    }
+
+    // Sometimes computed will be 0 when first loading which can cause issues (first load)
+    if (usedComputed && margin < this.convertVwToPx(parseInt(pageStyles['margin-left'], 10))) {
+      console.warn('Computed margin was 0px when we expected non-zero. Defaulted back to derived vw->px value');
+      return this.convertVwToPx(parseInt(pageStyles['margin-left'], 10));
+    }
+
+
+    return margin;
+  }
+
+
   protected readonly Breakpoint = Breakpoint;
+  protected readonly environment = environment;
 }

UI/Web/src/app/book-reader/_components/table-of-contents/table-of-contents.component.html

@@ -3,22 +3,28 @@
     @let bookChapters = chapters();
 
     @if (bookChapters.length === 0) {
-      <div>
+
-        <em>{{t('no-data')}}</em>
+      @if (loading()) {
-      </div>
+        <app-loading [loading]="true"></app-loading>
-    } @else if (bookChapters.length === 1) {
+      } @else {
+        <div>
+          <em>{{t('no-data')}}</em>
+        </div>
+      }
+
+    } @else if (isDisplayingChildrenOnly()) {
       <div>
         <ul>
-          @for(chapter of bookChapters[0].children; track chapter.title) {
+          @for(chapter of displayedChapters(); track chapter.title) {
-            <li class="{{chapter.page === pageNum() ? 'active': ''}}">
+            <li [id]="`${$index}`" class="{{isChapterSelected(chapter) ? 'active': ''}}">
               <a href="javascript:void(0);" (click)="loadChapterPage(chapter.page, chapter.part)">{{chapter.title}}</a>
             </li>
           }
         </ul>
       </div>
     } @else {
-      @for (chapterGroup of bookChapters; track chapterGroup.title + chapterGroup.children.length) {
+      @for (chapterGroup of displayedChapters(); track chapterGroup.title + chapterGroup.children.length) {
-        <ul class="chapter-title">
+        <ul [id]="`${$index}`" class="chapter-title">
           <li class="{{isChapterSelected(chapterGroup) ? 'active': ''}}" (click)="loadChapterPage(chapterGroup.page, '')">
             {{chapterGroup.title}}
           </li>

UI/Web/src/app/book-reader/_components/table-of-contents/table-of-contents.component.ts

@@ -2,32 +2,62 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  computed, effect,
   EventEmitter,
   inject,
-  model,
+  model, OnInit,
   Output
 } from '@angular/core';
 import {BookChapterItem} from '../../_models/book-chapter-item';
 import {TranslocoDirective} from "@jsverse/transloco";
+import {LoadingComponent} from "../../../shared/loading/loading.component";
+import {DOCUMENT} from "@angular/common";
 
 @Component({
   selector: 'app-table-of-contents',
   templateUrl: './table-of-contents.component.html',
   styleUrls: ['./table-of-contents.component.scss'],
-  imports: [TranslocoDirective],
+  imports: [TranslocoDirective, LoadingComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TableOfContentsComponent {
 
-  private readonly cdRef = inject(ChangeDetectorRef);
+  private readonly document = inject(DOCUMENT)
 
   chapterId = model.required<number>();
   pageNum = model.required<number>();
   currentPageAnchor = model<string>();
   chapters = model.required<Array<BookChapterItem>>();
+  loading = model.required<boolean>();
+
+  displayedChapters = computed(() => {
+    const chapters = this.chapters();
+    if (chapters.length === 1) {
+      return chapters[0].children;
+    }
+
+    return chapters;
+  });
+  isDisplayingChildrenOnly = computed(() => this.chapters().length === 1);
+
 
   @Output() loadChapter: EventEmitter<{pageNum: number, part: string}> = new EventEmitter();
 
+  constructor() {
+    effect(() => {
+      const selectedChapterIdx = this.displayedChapters()
+        .findIndex(chapter => this.isChapterSelected(chapter));
+
+      if (selectedChapterIdx < 0) return;
+
+      setTimeout(() => {
+        const chapterElement = this.document.getElementById(`${selectedChapterIdx}`);
+        if (chapterElement) {
+          chapterElement.scrollIntoView({behavior: 'smooth'});
+        }
+      }, 10); // Some delay to allow the items to be rendered into the DOM
+    });
+  }
 
   cleanIdSelector(id: string) {
     const tokens = id.split('/');
@@ -46,7 +76,7 @@ export class TableOfContentsComponent {
 
   isChapterSelected(chapterGroup: BookChapterItem) {
     const currentPageNum = this.pageNum();
-    const chapters = this.chapters();
+    const chapters = this.displayedChapters();
 
     if (chapterGroup.page === currentPageNum) {
       return true;

UI/Web/src/app/bookmark/_components/bookmarks/bookmarks.component.html

@@ -1,5 +1,5 @@
 <div class="main-container container-fluid">
-  <ng-container *transloco="let t; read: 'bookmarks'">
+  <ng-container *transloco="let t; prefix: 'bookmarks'">
     <app-side-nav-companion-bar [hasFilter]="true" (filterOpen)="filterOpen.emit($event)" [filterActive]="filterActive">
       <h4 title>
         {{t('title')}}

UI/Web/src/app/browse/browse-genres/browse-genres.component.html

@@ -1,5 +1,5 @@
 <div class="main-container container-fluid">
-  <ng-container *transloco="let t; read:'browse-genres'" >
+  <ng-container *transloco="let t; prefix:'browse-genres'" >
     <app-side-nav-companion-bar [hasFilter]="false">
       <h2 title>
         <span>{{t('title')}}</span>

UI/Web/src/app/browse/browse-people/browse-people.component.html

@@ -1,5 +1,5 @@
 <div class="main-container container-fluid">
-  <ng-container *transloco="let t; read:'browse-people'" >
+  <ng-container *transloco="let t; prefix:'browse-people'" >
     <app-side-nav-companion-bar [hasFilter]="true" (filterOpen)="filterOpen.emit($event)" [filterActive]="filterActive">
       <h2 title>
         <span>{{t('title')}}</span>

UI/Web/src/app/browse/browse-tags/browse-tags.component.html

@@ -1,5 +1,5 @@
 <div class="main-container container-fluid">
-  <ng-container *transloco="let t; read:'browse-tags'" >
+  <ng-container *transloco="let t; prefix:'browse-tags'" >
     <app-side-nav-companion-bar [hasFilter]="false">
       <h2 title>
         <span>{{t('title')}}</span>

UI/Web/src/app/cards/_modals/bulk-add-to-collection/bulk-add-to-collection.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'bulk-add-to-collection'">
+<ng-container *transloco="let t; prefix: 'bulk-add-to-collection'">
 
   <div class="modal-header">
     <h4 class="modal-title" id="modal-basic-title">{{t('title')}}</h4>

UI/Web/src/app/cards/_modals/edit-collection-tags/edit-collection-tags.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'edit-collection-tags'">
+<ng-container *transloco="let t; prefix: 'edit-collection-tags'">
 
   <div class="modal-header">
     <h4 class="modal-title" id="modal-basic-title">{{t('title', {collectionName: tag.title})}}</h4>

UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'edit-series-modal'">
+<ng-container *transloco="let t; prefix: 'edit-series-modal'">
   @if (series) {
     <div class="modal-container">
       <div class="modal-header">

UI/Web/src/app/cards/bulk-operations/bulk-operations.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'bulk-operations'">
+<ng-container *transloco="let t; prefix: 'bulk-operations'">
   @if (bulkSelectionService.selections$ | async; as selectionCount) {
     @if (selectionCount > 0) {
       <div class="bulk-select-container" [ngStyle]="{'margin-left': marginLeft + 'px', 'margin-right': marginRight + 'px'}">

UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'card-detail-layout'">
+<ng-container *transloco="let t; prefix: 'card-detail-layout'">
   <app-loading [loading]="isLoading"></app-loading>
 
   @if (header().length > 0) {

UI/Web/src/app/cards/card-item/card-item.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'card-item'">
+<ng-container *transloco="let t; prefix: 'card-item'">
   <div class="card-item-container card {{selected ? 'selected-highlight' : ''}}">
     <div class="overlay" (click)="handleClick($event)">
       @if (total > 0 || suppressArchiveWarning) {

UI/Web/src/app/cards/chapter-card/chapter-card.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'card-item'">
+<ng-container *transloco="let t; prefix: 'card-item'">
   <div class="card-item-container card position-relative {{selected ? 'selected-highlight' : ''}}" >
     <div class="overlay" (click)="handleClick($event)">
       @if (chapter.pages > 0 || suppressArchiveWarning) {

UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'cover-image-chooser'">
+<ng-container *transloco="let t; prefix: 'cover-image-chooser'">
   <div class="container-fluid" style="padding-left: 0; padding-right: 0">
     <form [formGroup]="form">
       <ngx-file-drop (onFileDrop)="dropped($event)"

UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.ts

@@ -4,7 +4,6 @@ import {
   Component,
   EventEmitter,
   inject,
-  Inject,
   Input,
   OnInit,
   Output
@@ -43,6 +42,7 @@ export class CoverImageChooserComponent implements OnInit {
   public readonly toastr = inject(ToastrService);
   public readonly uploadService = inject(UploadService);
   private readonly colorscapeService = inject(ColorscapeService)
+  private readonly document = inject(DOCUMENT)
 
   /**
    * If buttons show under images to allow immediate selection of cover images.
@@ -87,8 +87,6 @@ export class CoverImageChooserComponent implements OnInit {
   acceptableExtensions = ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.avif'].join(',');
   mode: 'file' | 'url' | 'all' = 'all';
 
-  constructor(@Inject(DOCUMENT) private document: Document) { }
-
   ngOnInit(): void {
     this.form = this.fb.group({
       coverImageUrl: new FormControl('', [])

UI/Web/src/app/cards/download-indicator/download-indicator.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'download-indicator'">
+<ng-container *transloco="let t; prefix: 'download-indicator'">
   @if (download$ | async; as download) {
     <span class="download">
       <app-circular-loader [currentValue]="download.progress"></app-circular-loader>

UI/Web/src/app/cards/edit-chapter-progress/edit-chapter-progress.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'edit-chapter-progress'">
+<ng-container *transloco="let t; prefix: 'edit-chapter-progress'">
 <!--  <ngx-datatable-->
 <!--    class="bootstrap"-->
 <!--    [rows]="items.controls"-->

UI/Web/src/app/cards/edit-series-relation/edit-series-relation.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'edit-series-relation'">
+<ng-container *transloco="let t; prefix: 'edit-series-relation'">
   <div class="container-fluid">
 
     <p>

UI/Web/src/app/cards/entity-title/entity-title.component.html

@@ -1,3 +1,3 @@
-<ng-container *transloco="let t; read: 'entity-title'">
+<ng-container *transloco="let t; prefix: 'entity-title'">
   {{renderText | defaultValue}}
 </ng-container>

UI/Web/src/app/cards/external-series-card/external-series-card.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'external-series-card'">
+<ng-container *transloco="let t; prefix: 'external-series-card'">
   @if (data !== undefined) {
     <div class="card-item-container card clickable position-relative">
       <div class="overlay" (click)="handleClick()">

UI/Web/src/app/cards/next-expected-card/next-expected-card.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'next-expected-card'">
+<ng-container *transloco="let t; prefix: 'next-expected-card'">
   <div class="card-item-container card">
     <div class="overlay">
       <app-image [styles]="{'border-radius': '.25rem .25rem 0 0'}" height="232.91px" width="160px" classes="extreme-blur"

UI/Web/src/app/cards/person-card/person-card.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'card-item'">
+<ng-container *transloco="let t; prefix: 'card-item'">
   <div class="card-item-container card {{selected ? 'selected-highlight' : ''}}">
     <div class="overlay" (click)="handleClick($event)">
       @if(entity.coverImage) {

UI/Web/src/app/cards/series-card/series-card.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'card-item'">
+<ng-container *transloco="let t; prefix: 'card-item'">
   <div class="card-item-container card position-relative {{selected ? 'selected-highlight' : ''}}">
     <div class="overlay" (click)="handleClick()">
       @if (series.pages > 0) {

UI/Web/src/app/cards/volume-card/volume-card.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'card-item'">
+<ng-container *transloco="let t; prefix: 'card-item'">
   <div class="card-item-container card {{selected ? 'selected-highlight' : ''}}" >
     <div class="overlay position-relative" (click)="handleClick($event)">
       @if (volume.pages > 0 || suppressArchiveWarning) {

UI/Web/src/app/carousel/_components/carousel-reel/carousel-reel.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'carousel-reel'">
+<ng-container *transloco="let t; prefix: 'carousel-reel'">
 
   @if (alwaysShow || items && items.length > 0) {
     <div class="carousel-container mb-3">

UI/Web/src/app/carousel/_components/carousel-reel/carousel-reel.component.scss

@@ -47,7 +47,7 @@
 }
 
 .title-icon {
-    color: var(--body-text-color);
+  color: var(--body-text-color);
-    font-size: 0.9rem;
+  font-size: 0.9rem;
-    cursor: pointer;
+  cursor: pointer;
 }

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

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'series-detail'">
+<ng-container *transloco="let t; prefix: 'series-detail'">
 
   <div [ngStyle]="{'height': ScrollingBlockHeight}" class="main-container container-fluid" #scrollingBlock>
 

UI/Web/src/app/collections/_components/all-collections/all-collections.component.html

@@ -1,5 +1,5 @@
 <div class="main-container container-fluid">
-  <ng-container *transloco="let t; read: 'all-collections'">
+  <ng-container *transloco="let t; prefix: 'all-collections'">
     <app-side-nav-companion-bar [hasFilter]="false" (filterOpen)="filterOpen.emit($event)">
       <h4 title>{{t('title')}}</h4>
       <h5 subtitle>{{t('item-count', {num: collections.length | number})}}</h5>

UI/Web/src/app/collections/_components/collection-detail/collection-detail.component.html

@@ -1,5 +1,5 @@
 <div class="main-container container-fluid">
-  <ng-container *transloco="let t; read: 'collection-detail'">
+  <ng-container *transloco="let t; prefix: 'collection-detail'">
     <div #companionBar>
       @if (series) {
         <app-side-nav-companion-bar [hasFilter]="true" (filterOpen)="filterOpen.emit($event)" [filterActive]="filterActive">

UI/Web/src/app/collections/_components/collection-owner/collection-owner.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'collection-owner'">
+<ng-container *transloco="let t; prefix: 'collection-owner'">
   @if (accountService.currentUser$ | async; as user) {
     <div class="fw-light text-accent">
       {{t('collection-created-label', {owner: collection.owner})}}

UI/Web/src/app/collections/_components/import-mal-collection/import-mal-collection.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'import-mal-collection-modal'">
+<ng-container *transloco="let t; prefix: 'import-mal-collection-modal'">
   <p>{{t('description')}}</p>
 
   <ul>

UI/Web/src/app/dashboard/_components/dashboard.component.html

@@ -1,7 +1,7 @@
 <div class="main-container">
 <app-side-nav-companion-bar></app-side-nav-companion-bar>
 
-  <ng-container *transloco="let t; read: 'dashboard'">
+  <ng-container *transloco="let t; prefix: 'dashboard'">
     @if (libraries$ | async; as libraries) {
       @if (libraries.length === 0) {
         @if (accountService.isAdmin$ | async; as isAdmin) {

UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'infinite-scroller'">
+<ng-container *transloco="let t; prefix: 'infinite-scroller'">
 
   @if (showDebugBar()) {
     <div class="fixed-top overlay">

UI/Web/src/app/manga-reader/_components/manga-reader/manga-reader.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'manga-reader'">
+<ng-container *transloco="let t; prefix: 'manga-reader'">
   <div class="reader" #reader [ngStyle]="{overflow: (isFullscreen ? 'auto' : 'visible')}">
     @if(debugMode) {
       <div class="fixed-top overlay">

UI/Web/src/app/metadata-filter/_components/metadata-builder/metadata-builder.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'metadata-builder'">
+<ng-container *transloco="let t; prefix: 'metadata-builder'">
   @if (filter) {
     <form [formGroup]="formGroup">
 

UI/Web/src/app/metadata-filter/_components/metadata-filter-row/metadata-filter-row.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'metadata-filter-row'">
+<ng-container *transloco="let t; prefix: 'metadata-filter-row'">
     <form [formGroup]="formGroup">
         <div class="row g-0">
             <div class="col-md-3 me-2 col-10 mb-2">

UI/Web/src/app/metadata-filter/metadata-filter.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'metadata-filter'">
+<ng-container *transloco="let t; prefix: 'metadata-filter'">
   @if (toggleService.toggleState$ | async; as isOpen) {
     @if (utilityService.getActiveBreakpoint(); as activeBreakpoint) {
       @if (activeBreakpoint >= Breakpoint.Tablet) {

UI/Web/src/app/nav/_components/events-widget/events-widget.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t; read: 'events-widget'">
+<ng-container *transloco="let t; prefix: 'events-widget'">
 
   @if (accountService.isAdmin$ | async) {
     @if (downloadService.activeDownloads$ | async; as activeDownloads) {