Angular 14 (#1420)

* Updated to Angular 14

* Fixed all new tslint issues

* Fixed a routing bug for Angular 14

* Updated ngBootstrap and bootstrap. Fixed side nav item not highlighting on route change

* Refactored how default dark styles are done

* Migrated everything to a typed form

* Bump versions by dotnet-bump-version.

* Fixed a regression where click areas need an explicit z-index

* Cleanup some css

* Bumped docnet back to the alpha which has our downstream fixes

* Updated dependencies to later versions. Mainly just NetVips with some archive fixes.

* Fixed broken unit tests (due to some fixes in SharpCompress that changed byte arrays, but not visible quality)

API.Tests/API.Tests.csproj

@@ -10,8 +10,8 @@
         <PackageReference Include="Microsoft.EntityFrameworkCore.InMemory" Version="6.0.7" />
         <PackageReference Include="Microsoft.NET.Test.Sdk" Version="17.2.0" />
         <PackageReference Include="NSubstitute" Version="4.4.0" />
-        <PackageReference Include="System.IO.Abstractions.TestingHelpers" Version="17.0.21" />
+        <PackageReference Include="System.IO.Abstractions.TestingHelpers" Version="17.0.24" />
-        <PackageReference Include="xunit" Version="2.4.1" />
+        <PackageReference Include="xunit" Version="2.4.2" />
         <PackageReference Include="xunit.runner.visualstudio" Version="2.4.5">
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
             <PrivateAssets>all</PrivateAssets>

API/API.csproj

@@ -40,7 +40,7 @@
 
   <ItemGroup>
     <PackageReference Include="AutoMapper.Extensions.Microsoft.DependencyInjection" Version="11.0.0" />
-    <PackageReference Include="Docnet.Core" Version="2.4.0-alpha.2" />
+    <PackageReference Include="Docnet.Core" Version="2.4.0-alpha.4" />
     <PackageReference Include="ExCSS" Version="4.1.0" />
     <PackageReference Include="Flurl" Version="3.0.6" />
     <PackageReference Include="Flurl.Http" Version="3.2.4" />
@@ -58,22 +58,22 @@
       <PrivateAssets>all</PrivateAssets>
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
     </PackageReference>
-    <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="6.0.6" />
+    <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="6.0.7" />
     <PackageReference Include="Microsoft.Extensions.DependencyInjection" Version="6.0.0" />
     <PackageReference Include="Microsoft.IO.RecyclableMemoryStream" Version="2.2.0" />
-    <PackageReference Include="NetVips" Version="2.1.0" />
+    <PackageReference Include="NetVips" Version="2.2.0" />
-    <PackageReference Include="NetVips.Native" Version="8.12.2" />
+    <PackageReference Include="NetVips.Native" Version="8.13.0" />
     <PackageReference Include="NReco.Logging.File" Version="1.1.5" />
-    <PackageReference Include="SharpCompress" Version="0.32.1" />
+    <PackageReference Include="SharpCompress" Version="0.32.2" />
     <PackageReference Include="SixLabors.ImageSharp" Version="2.1.3" />
-    <PackageReference Include="SonarAnalyzer.CSharp" Version="8.41.0.50478">
+    <PackageReference Include="SonarAnalyzer.CSharp" Version="8.43.0.51858">
       <PrivateAssets>all</PrivateAssets>
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
     </PackageReference>
-    <PackageReference Include="Swashbuckle.AspNetCore" Version="6.3.1" />
+    <PackageReference Include="Swashbuckle.AspNetCore" Version="6.4.0" />
     <PackageReference Include="System.Drawing.Common" Version="6.0.0" />
-    <PackageReference Include="System.IdentityModel.Tokens.Jwt" Version="6.21.0" />
+    <PackageReference Include="System.IdentityModel.Tokens.Jwt" Version="6.22.0" />
-    <PackageReference Include="System.IO.Abstractions" Version="17.0.18" />
+    <PackageReference Include="System.IO.Abstractions" Version="17.0.24" />
     <PackageReference Include="VersOne.Epub" Version="3.1.2" />
   </ItemGroup>
 

Kavita.Common/Kavita.Common.csproj

@@ -12,7 +12,7 @@
       <PackageReference Include="Flurl.Http" Version="3.2.4" />
       <PackageReference Include="Microsoft.Extensions.Configuration.Abstractions" Version="6.0.0" />
       <PackageReference Include="Microsoft.Extensions.Hosting" Version="6.0.1" />
-      <PackageReference Include="SonarAnalyzer.CSharp" Version="8.41.0.50478">
+      <PackageReference Include="SonarAnalyzer.CSharp" Version="8.43.0.51858">
         <PrivateAssets>all</PrivateAssets>
         <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
       </PackageReference>

UI/Web/angular.json

@@ -150,6 +150,5 @@
         }
       }
     }
-  },
+  }
-  "defaultProject": "kavita-webui"
 }

UI/Web/package.json

@@ -16,23 +16,23 @@
   "private": true,
   "dependencies": {
     "@angular-slider/ngx-slider": "^2.0.3",
-    "@angular/animations": "~13.2.2",
+    "@angular/animations": "^14.1.1",
     "@angular/cdk": "^13.2.2",
-    "@angular/common": "~13.2.2",
+    "@angular/common": "^14.1.1",
-    "@angular/compiler": "~13.2.2",
+    "@angular/compiler": "^14.1.1",
-    "@angular/core": "~13.2.2",
+    "@angular/core": "^14.1.1",
-    "@angular/forms": "~13.2.2",
+    "@angular/forms": "^14.1.1",
-    "@angular/localize": "~13.2.2",
+    "@angular/localize": "^14.1.1",
-    "@angular/platform-browser": "~13.2.2",
+    "@angular/platform-browser": "^14.1.1",
-    "@angular/platform-browser-dynamic": "~13.2.2",
+    "@angular/platform-browser-dynamic": "^14.1.1",
-    "@angular/router": "~13.2.2",
+    "@angular/router": "^14.1.1",
     "@fortawesome/fontawesome-free": "^6.0.0",
     "@iharbeck/ngx-virtual-scroller": "^13.0.4",
     "@microsoft/signalr": "^6.0.2",
-    "@ng-bootstrap/ng-bootstrap": "^12.1.2",
+    "@ng-bootstrap/ng-bootstrap": "^13.0.0",
     "@popperjs/core": "^2.11.2",
     "@types/file-saver": "^2.0.5",
-    "bootstrap": "^5.1.2",
+    "bootstrap": "^5.2.0",
     "bowser": "^2.11.0",
     "eventsource": "^2.0.2",
     "file-saver": "^2.0.5",
@@ -40,7 +40,7 @@
     "ng-circle-progress": "^1.6.0",
     "ngx-color-picker": "^12.0.0",
     "ngx-extended-pdf-viewer": "^14.5.2",
-    "ngx-file-drop": "^13.0.0",
+    "ngx-file-drop": "^14.0.1",
     "ngx-infinite-scroll": "^13.0.2",
     "ngx-toastr": "^14.2.1",
     "requires": "^1.0.2",
@@ -51,9 +51,9 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.2.3",
+    "@angular-devkit/build-angular": "^14.1.1",
-    "@angular/cli": "^13.2.3",
+    "@angular/cli": "^14.1.1",
-    "@angular/compiler-cli": "~13.2.2",
+    "@angular/compiler-cli": "^14.1.1",
     "@playwright/test": "^1.23.2",
     "@types/jest": "^27.4.0",
     "@types/node": "^17.0.17",
@@ -65,7 +65,7 @@
     "protractor": "~7.0.0",
     "ts-node": "~10.5.0",
     "tslint": "^6.1.3",
-    "typescript": "~4.5.5"
+    "typescript": "~4.7.4"
   },
   "jest": {
     "preset": "jest-preset-angular",

UI/Web/src/app/admin/_modals/library-editor-modal/library-editor-modal.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { ToastrService } from 'ngx-toastr';
 import { ConfirmService } from 'src/app/shared/confirm.service';
@@ -17,9 +17,9 @@ export class LibraryEditorModalComponent implements OnInit {
 
   @Input() library: Library | undefined = undefined;
 
-  libraryForm: FormGroup = new FormGroup({
+  libraryForm: UntypedFormGroup = new UntypedFormGroup({
-    name: new FormControl('', [Validators.required]),
+    name: new UntypedFormControl('', [Validators.required]),
-    type: new FormControl(0, [Validators.required])
+    type: new UntypedFormControl(0, [Validators.required])
   });
 
   selectedFolders: string[] = [];

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

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormControl, Validators } from '@angular/forms';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { Member } from 'src/app/_models/member';
 import { AccountService } from 'src/app/_services/account.service';
@@ -14,8 +14,8 @@ export class ResetPasswordModalComponent implements OnInit {
 
   @Input() member!: Member;
   errorMessage = '';
-  resetPasswordForm: FormGroup = new FormGroup({
+  resetPasswordForm: UntypedFormGroup = new UntypedFormGroup({
-    password: new FormControl('', [Validators.required]),
+    password: new UntypedFormControl('', [Validators.required]),
   });
 
   constructor(public modal: NgbActiveModal, private accountService: AccountService) { }

UI/Web/src/app/admin/admin-routing.module.ts

@@ -6,10 +6,11 @@ import { DashboardComponent } from './dashboard/dashboard.component';
 const routes: Routes = [
   {path: '**', component: DashboardComponent, pathMatch: 'full', canActivate: [AdminGuard]},
   {
+    path: '',
     runGuardsAndResolvers: 'always',
     canActivate: [AdminGuard],
     children: [
-      {path: '/dashboard', component: DashboardComponent},
+      {path: 'dashboard', component: DashboardComponent},
     ]
   }
 ];

UI/Web/src/app/admin/edit-user/edit-user.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormControl, Validators } from '@angular/forms';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { Library } from 'src/app/_models/library';
 import { Member } from 'src/app/_models/member';
@@ -19,7 +19,7 @@ export class EditUserComponent implements OnInit {
   selectedLibraries: Array<number> = [];
   isSaving: boolean = false;
 
-  userForm: FormGroup = new FormGroup({});
+  userForm: UntypedFormGroup = new UntypedFormGroup({});
 
   public get email() { return this.userForm.get('email'); }
   public get username() { return this.userForm.get('username'); }
@@ -28,8 +28,8 @@ export class EditUserComponent implements OnInit {
   constructor(public modal: NgbActiveModal, private accountService: AccountService) { }
 
   ngOnInit(): void {
-    this.userForm.addControl('email', new FormControl(this.member.email, [Validators.required, Validators.email]));
+    this.userForm.addControl('email', new UntypedFormControl(this.member.email, [Validators.required, Validators.email]));
-    this.userForm.addControl('username', new FormControl(this.member.username, [Validators.required]));
+    this.userForm.addControl('username', new UntypedFormControl(this.member.username, [Validators.required]));
 
     this.userForm.get('email')?.disable();
   }

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

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { ToastrService } from 'ngx-toastr';
 import { ConfirmService } from 'src/app/shared/confirm.service';
@@ -19,7 +19,7 @@ export class InviteUserComponent implements OnInit {
    * Maintains if the backend is sending an email
    */
   isSending: boolean = false;
-  inviteForm: FormGroup = new FormGroup({});
+  inviteForm: UntypedFormGroup = new UntypedFormGroup({});
   selectedRoles: Array<string> = [];
   selectedLibraries: Array<number> = [];
   emailLink: string = '';
@@ -32,7 +32,7 @@ export class InviteUserComponent implements OnInit {
     private confirmService: ConfirmService, private toastr: ToastrService) { }
 
   ngOnInit(): void {
-    this.inviteForm.addControl('email', new FormControl('', [Validators.required]));
+    this.inviteForm.addControl('email', new UntypedFormControl('', [Validators.required]));
   }
 
   close() {

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

@@ -1,6 +1,5 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormBuilder } from '@angular/forms';
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { SelectionModel } from 'src/app/typeahead/typeahead.component';
 import { Library } from 'src/app/_models/library';
 import { Member } from 'src/app/_models/member';

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

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { ToastrService } from 'ngx-toastr';
 import { take } from 'rxjs';
 import { SettingsService, EmailTestResult } from '../settings.service';
@@ -13,14 +13,14 @@ import { ServerSettings } from '../_models/server-settings';
 export class ManageEmailSettingsComponent implements OnInit {
 
   serverSettings!: ServerSettings;
-  settingsForm: FormGroup = new FormGroup({});
+  settingsForm: UntypedFormGroup = new UntypedFormGroup({});
   
   constructor(private settingsService: SettingsService, private toastr: ToastrService) { }
 
   ngOnInit(): void {
     this.settingsService.getServerSettings().pipe(take(1)).subscribe((settings: ServerSettings) => {
       this.serverSettings = settings;
-      this.settingsForm.addControl('emailServiceUrl', new FormControl(this.serverSettings.emailServiceUrl, [Validators.required]));
+      this.settingsForm.addControl('emailServiceUrl', new UntypedFormControl(this.serverSettings.emailServiceUrl, [Validators.required]));
     });
   }
 

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

@@ -9,7 +9,7 @@
                 <h4>
                     <span id="library-name--{{idx}}"><a [routerLink]="'/library/' + library.id">{{library.name}}</a></span>&nbsp;
                     <div class="float-end">
-                        <button class="btn btn-secondary me-2 btn-sm" (click)="scanLibrary(library)" placement="top" ngbTooltip="Scan Library" attr.aria-label="Scan Library"><i class="fa fa-sync-alt" title="Scan"></i></button>
+                        <button class="btn btn-secondary me-2 btn-sm" (click)="scanLibrary(library)" placement="top" ngbTooltip="Scan Library" aria-label="Scan Library"><i class="fa fa-sync-alt" title="Scan"></i></button>
                         <button class="btn btn-danger me-2 btn-sm" [disabled]="deletionInProgress" (click)="deleteLibrary(library)"><i class="fa fa-trash" placement="top" ngbTooltip="Delete Library" attr.aria-label="Delete {{library.name | sentenceCase}}"></i></button>
                         <button class="btn btn-primary btn-sm" (click)="editLibrary(library)"><i class="fa fa-pen" placement="top" ngbTooltip="Edit" attr.aria-label="Edit {{library.name | sentenceCase}}"></i></button>
                     </div>

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

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormControl, Validators } from '@angular/forms';
 import { ToastrService } from 'ngx-toastr';
 import { take } from 'rxjs';
 import { SettingsService } from '../settings.service';
@@ -13,14 +13,14 @@ import { ServerSettings } from '../_models/server-settings';
 export class ManageMediaSettingsComponent implements OnInit {
 
   serverSettings!: ServerSettings;
-  settingsForm: FormGroup = new FormGroup({});
+  settingsForm: UntypedFormGroup = new UntypedFormGroup({});
   
   constructor(private settingsService: SettingsService, private toastr: ToastrService) { }
 
   ngOnInit(): void {
     this.settingsService.getServerSettings().pipe(take(1)).subscribe((settings: ServerSettings) => {
       this.serverSettings = settings;
-      this.settingsForm.addControl('convertBookmarkToWebP', new FormControl(this.serverSettings.convertBookmarkToWebP, [Validators.required]));
+      this.settingsForm.addControl('convertBookmarkToWebP', new UntypedFormControl(this.serverSettings.convertBookmarkToWebP, [Validators.required]));
     });
   }
 

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

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormControl, Validators } from '@angular/forms';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { ToastrService } from 'ngx-toastr';
 import { take } from 'rxjs/operators';
@@ -16,7 +16,7 @@ import { ServerSettings } from '../_models/server-settings';
 export class ManageSettingsComponent implements OnInit {
 
   serverSettings!: ServerSettings;
-  settingsForm: FormGroup = new FormGroup({});
+  settingsForm: UntypedFormGroup = new UntypedFormGroup({});
   taskFrequencies: Array<string> = [];
   logLevels: Array<string> = [];
 
@@ -32,18 +32,18 @@ export class ManageSettingsComponent implements OnInit {
     });
     this.settingsService.getServerSettings().pipe(take(1)).subscribe((settings: ServerSettings) => {
       this.serverSettings = settings;
-      this.settingsForm.addControl('cacheDirectory', new FormControl(this.serverSettings.cacheDirectory, [Validators.required]));
+      this.settingsForm.addControl('cacheDirectory', new UntypedFormControl(this.serverSettings.cacheDirectory, [Validators.required]));
-      this.settingsForm.addControl('bookmarksDirectory', new FormControl(this.serverSettings.bookmarksDirectory, [Validators.required]));
+      this.settingsForm.addControl('bookmarksDirectory', new UntypedFormControl(this.serverSettings.bookmarksDirectory, [Validators.required]));
-      this.settingsForm.addControl('taskScan', new FormControl(this.serverSettings.taskScan, [Validators.required]));
+      this.settingsForm.addControl('taskScan', new UntypedFormControl(this.serverSettings.taskScan, [Validators.required]));
-      this.settingsForm.addControl('taskBackup', new FormControl(this.serverSettings.taskBackup, [Validators.required]));
+      this.settingsForm.addControl('taskBackup', new UntypedFormControl(this.serverSettings.taskBackup, [Validators.required]));
-      this.settingsForm.addControl('port', new FormControl(this.serverSettings.port, [Validators.required]));
+      this.settingsForm.addControl('port', new UntypedFormControl(this.serverSettings.port, [Validators.required]));
-      this.settingsForm.addControl('loggingLevel', new FormControl(this.serverSettings.loggingLevel, [Validators.required]));
+      this.settingsForm.addControl('loggingLevel', new UntypedFormControl(this.serverSettings.loggingLevel, [Validators.required]));
-      this.settingsForm.addControl('allowStatCollection', new FormControl(this.serverSettings.allowStatCollection, [Validators.required]));
+      this.settingsForm.addControl('allowStatCollection', new UntypedFormControl(this.serverSettings.allowStatCollection, [Validators.required]));
-      this.settingsForm.addControl('enableOpds', new FormControl(this.serverSettings.enableOpds, [Validators.required]));
+      this.settingsForm.addControl('enableOpds', new UntypedFormControl(this.serverSettings.enableOpds, [Validators.required]));
-      this.settingsForm.addControl('baseUrl', new FormControl(this.serverSettings.baseUrl, [Validators.required]));
+      this.settingsForm.addControl('baseUrl', new UntypedFormControl(this.serverSettings.baseUrl, [Validators.required]));
-      this.settingsForm.addControl('emailServiceUrl', new FormControl(this.serverSettings.emailServiceUrl, [Validators.required]));
+      this.settingsForm.addControl('emailServiceUrl', new UntypedFormControl(this.serverSettings.emailServiceUrl, [Validators.required]));
-      this.settingsForm.addControl('enableSwaggerUi', new FormControl(this.serverSettings.enableSwaggerUi, [Validators.required]));
+      this.settingsForm.addControl('enableSwaggerUi', new UntypedFormControl(this.serverSettings.enableSwaggerUi, [Validators.required]));
-      this.settingsForm.addControl('totalBackups', new FormControl(this.serverSettings.totalBackups, [Validators.required, Validators.min(1), Validators.max(30)]));
+      this.settingsForm.addControl('totalBackups', new UntypedFormControl(this.serverSettings.totalBackups, [Validators.required, Validators.min(1), Validators.max(30)]));
     });
   }
 

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

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { ToastrService } from 'ngx-toastr';
 import { take } from 'rxjs/operators';
 import { ServerService } from 'src/app/_services/server.service';
@@ -14,7 +14,7 @@ import { ServerSettings } from '../_models/server-settings';
 })
 export class ManageSystemComponent implements OnInit {
 
-  settingsForm: FormGroup = new FormGroup({});
+  settingsForm: UntypedFormGroup = new UntypedFormGroup({});
   serverSettings!: ServerSettings;
   serverInfo!: ServerInfo;
 
@@ -30,12 +30,12 @@ export class ManageSystemComponent implements OnInit {
 
     this.settingsService.getServerSettings().pipe(take(1)).subscribe((settings: ServerSettings) => {
       this.serverSettings = settings;
-      this.settingsForm.addControl('cacheDirectory', new FormControl(this.serverSettings.cacheDirectory, [Validators.required]));
+      this.settingsForm.addControl('cacheDirectory', new UntypedFormControl(this.serverSettings.cacheDirectory, [Validators.required]));
-      this.settingsForm.addControl('taskScan', new FormControl(this.serverSettings.taskScan, [Validators.required]));
+      this.settingsForm.addControl('taskScan', new UntypedFormControl(this.serverSettings.taskScan, [Validators.required]));
-      this.settingsForm.addControl('taskBackup', new FormControl(this.serverSettings.taskBackup, [Validators.required]));
+      this.settingsForm.addControl('taskBackup', new UntypedFormControl(this.serverSettings.taskBackup, [Validators.required]));
-      this.settingsForm.addControl('port', new FormControl(this.serverSettings.port, [Validators.required]));
+      this.settingsForm.addControl('port', new UntypedFormControl(this.serverSettings.port, [Validators.required]));
-      this.settingsForm.addControl('loggingLevel', new FormControl(this.serverSettings.loggingLevel, [Validators.required]));
+      this.settingsForm.addControl('loggingLevel', new UntypedFormControl(this.serverSettings.loggingLevel, [Validators.required]));
-      this.settingsForm.addControl('allowStatCollection', new FormControl(this.serverSettings.allowStatCollection, [Validators.required]));
+      this.settingsForm.addControl('allowStatCollection', new UntypedFormControl(this.serverSettings.allowStatCollection, [Validators.required]));
     });
   }
 

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

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormControl, Validators } from '@angular/forms';
 import { ToastrService } from 'ngx-toastr';
 import { ConfirmService } from 'src/app/shared/confirm.service';
 import { SettingsService } from '../settings.service';
@@ -28,7 +28,7 @@ interface AdhocTask {
 export class ManageTasksSettingsComponent implements OnInit {
 
   serverSettings!: ServerSettings;
-  settingsForm: FormGroup = new FormGroup({});
+  settingsForm: UntypedFormGroup = new UntypedFormGroup({});
   taskFrequencies: Array<string> = [];
   logLevels: Array<string> = [];
 
@@ -89,8 +89,8 @@ export class ManageTasksSettingsComponent implements OnInit {
       this.taskFrequencies = result.frequencies;
       this.logLevels = result.levels;
       this.serverSettings = result.settings;
-      this.settingsForm.addControl('taskScan', new FormControl(this.serverSettings.taskScan, [Validators.required]));
+      this.settingsForm.addControl('taskScan', new UntypedFormControl(this.serverSettings.taskScan, [Validators.required]));
-      this.settingsForm.addControl('taskBackup', new FormControl(this.serverSettings.taskBackup, [Validators.required]));
+      this.settingsForm.addControl('taskBackup', new UntypedFormControl(this.serverSettings.taskBackup, [Validators.required]));
     });
 
     this.reoccuringTasks$ = this.serverService.getReoccuringJobs().pipe(shareReplay());

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

@@ -2,7 +2,7 @@
     <h2 title>
         All Series
     </h2>
-    <h6 subtitle>{{pagination?.totalItems}} Series</h6>
+    <h6 subtitle *ngIf="pagination">{{pagination.totalItems}} Series</h6>
 </app-side-nav-companion-bar>
 <app-bulk-operations [actionCallback]="bulkActionCallback"></app-bulk-operations>
 <app-card-detail-layout 

UI/Web/src/app/announcements/announcements-routing.module.ts

@@ -7,10 +7,11 @@ import { AnnouncementsComponent } from "./announcements.component";
 const routes: Routes = [
   {path: '**', component: AnnouncementsComponent, pathMatch: 'full', canActivate: [AuthGuard, AdminGuard]},
   {
+    path: '',
     runGuardsAndResolvers: 'always',
     canActivate: [AuthGuard, AdminGuard],
     children: [
-      {path: '/announcments', component: AnnouncementsComponent},
+      {path: 'announcments', component: AnnouncementsComponent},
     ]
   }
 ];

UI/Web/src/app/app-routing.module.ts

@@ -79,7 +79,6 @@ const routes: Routes = [
     ]
   },
   {path: 'login', loadChildren: () => import('../app/registration/registration.module').then(m => m.RegistrationModule)},
-  //{path: '', pathMatch: 'full', redirectTo: 'login'}, // This shouldn't be needed
   {path: '**', pathMatch: 'full', redirectTo: 'libraries'},
   {path: '**', pathMatch: 'prefix', redirectTo: 'libraries'},
 ];

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

@@ -1,10 +1,10 @@
 <app-nav-header></app-nav-header>
-<div [ngClass]="{'closed' : (navService?.sideNavCollapsed$ | async), 'content-wrapper': navService.sideNavVisibility$ | async}">
+<div [ngClass]="{'closed' : (navService.sideNavCollapsed$ | async), 'content-wrapper': navService.sideNavVisibility$ | async}">
     <a id="content"></a>
     <app-side-nav *ngIf="navService.sideNavVisibility$ | async as sideNavVisibile"></app-side-nav>
     <div class="container-fluid" [ngClass]="{'g-0': !(navService.sideNavVisibility$ | async)}">
         <div style="padding: 20px 0 0;" *ngIf="navService.sideNavVisibility$ | async else noSideNav">
-            <div class="companion-bar" [ngClass]="{'companion-bar-content': !(navService?.sideNavCollapsed$ | async)}">
+            <div class="companion-bar" [ngClass]="{'companion-bar-content': !(navService.sideNavCollapsed$ | async)}">
                 <router-outlet></router-outlet>
             </div>
         </div>

UI/Web/src/app/app.module.ts

@@ -17,33 +17,30 @@ import { NavModule } from './nav/nav.module';
 
 
 @NgModule({
-  declarations: [
+    declarations: [
-    AppComponent,
+        AppComponent,
-  ],
+    ],
-  imports: [
+    imports: [
-    HttpClientModule,
+        HttpClientModule,
-    BrowserModule,
+        BrowserModule,
-    AppRoutingModule,
+        AppRoutingModule,
-    BrowserAnimationsModule,
+        BrowserAnimationsModule,
-
+        SidenavModule,
-    SidenavModule,
+        NavModule,
-    NavModule,
+        ToastrModule.forRoot({
-
+            positionClass: 'toast-bottom-right',
-    ToastrModule.forRoot({
+            preventDuplicates: true,
-      positionClass: 'toast-bottom-right',
+            timeOut: 6000,
-      preventDuplicates: true,
+            countDuplicates: true,
-      timeOut: 6000,
+            autoDismiss: true
-      countDuplicates: true,
+        }),
-      autoDismiss: true
+    ],
-    }),
+    providers: [
-  ],
+        { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
-  providers: [
+        { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
-    {provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true},
+        Title,
-    {provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true},
+        { provide: SAVER, useFactory: getSaver },
-    Title,
+    ],
-    {provide: SAVER, useFactory: getSaver},
+    bootstrap: [AppComponent]
-  ],
-  entryComponents: [],
-  bootstrap: [AppComponent]
 })
 export class AppModule { }

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

@@ -298,7 +298,6 @@ $action-bar-height: 38px;
     border: none !important;
     opacity: 0;
     outline: none;
-    //background-color: aqua;
 
     &.immersive {
         top: 0px;
@@ -318,7 +317,6 @@ $action-bar-height: 38px;
     border: none !important;
     opacity: 0;
     outline: none;
-    //background-color: aqua;
 
     &.immersive {
         top: 0px;
@@ -337,7 +335,6 @@ $action-bar-height: 38px;
     cursor: pointer;
     opacity: 0;
     outline: none;
-    //background-color: aqua;
 
     &.immersive {
         top: 0px;

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

@@ -1,6 +1,6 @@
 import { DOCUMENT } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Inject, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { Subject, take, takeUntil } from 'rxjs';
 import { BookPageLayoutMode } from 'src/app/_models/book-page-layout-mode';
 import { BookTheme } from 'src/app/_models/preferences/book-theme';
@@ -110,7 +110,7 @@ export class ReaderSettingsComponent implements OnInit, OnDestroy {
 
   isFullscreen: boolean = false;
 
-  settingsForm: FormGroup = new FormGroup({});
+  settingsForm: UntypedFormGroup = new UntypedFormGroup({});
 
   /**
    * System provided themes
@@ -163,7 +163,7 @@ export class ReaderSettingsComponent implements OnInit, OnDestroy {
         this.readingDirectionModel = this.user.preferences.bookReaderReadingDirection;
         
         
-        this.settingsForm.addControl('bookReaderFontFamily', new FormControl(this.user.preferences.bookReaderFontFamily, []));
+        this.settingsForm.addControl('bookReaderFontFamily', new UntypedFormControl(this.user.preferences.bookReaderFontFamily, []));
         this.settingsForm.get('bookReaderFontFamily')!.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe(fontName => {
           const familyName = this.fontFamilies.filter(f => f.title === fontName)[0].family;
           if (familyName === 'default') {
@@ -175,36 +175,36 @@ export class ReaderSettingsComponent implements OnInit, OnDestroy {
           this.styleUpdate.emit(this.pageStyles);
         });
         
-        this.settingsForm.addControl('bookReaderFontSize', new FormControl(this.user.preferences.bookReaderFontSize, []));
+        this.settingsForm.addControl('bookReaderFontSize', new UntypedFormControl(this.user.preferences.bookReaderFontSize, []));
         this.settingsForm.get('bookReaderFontSize')?.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe(value => {
           this.pageStyles['font-size'] = value + '%';
           this.styleUpdate.emit(this.pageStyles);
         });
 
-        this.settingsForm.addControl('bookReaderTapToPaginate', new FormControl(this.user.preferences.bookReaderTapToPaginate, []));
+        this.settingsForm.addControl('bookReaderTapToPaginate', new UntypedFormControl(this.user.preferences.bookReaderTapToPaginate, []));
         this.settingsForm.get('bookReaderTapToPaginate')?.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe(value => {
           this.clickToPaginateChanged.emit(value);
         });
 
-        this.settingsForm.addControl('bookReaderLineSpacing', new FormControl(this.user.preferences.bookReaderLineSpacing, []));
+        this.settingsForm.addControl('bookReaderLineSpacing', new UntypedFormControl(this.user.preferences.bookReaderLineSpacing, []));
         this.settingsForm.get('bookReaderLineSpacing')?.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe(value => {
           this.pageStyles['line-height'] = value + '%';
           this.styleUpdate.emit(this.pageStyles);
         });
 
-        this.settingsForm.addControl('bookReaderMargin', new FormControl(this.user.preferences.bookReaderMargin, []));
+        this.settingsForm.addControl('bookReaderMargin', new UntypedFormControl(this.user.preferences.bookReaderMargin, []));
         this.settingsForm.get('bookReaderMargin')?.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe(value => {
           this.pageStyles['margin-left'] = value + '%';
           this.pageStyles['margin-right'] = value + '%';
           this.styleUpdate.emit(this.pageStyles);
         });
 
-        this.settingsForm.addControl('layoutMode', new FormControl(this.user.preferences.bookReaderLayoutMode || BookPageLayoutMode.Default, []));
+        this.settingsForm.addControl('layoutMode', new UntypedFormControl(this.user.preferences.bookReaderLayoutMode || BookPageLayoutMode.Default, []));
         this.settingsForm.get('layoutMode')?.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe((layoutMode: BookPageLayoutMode) => {
           this.layoutModeUpdate.emit(layoutMode);
         });
 
-        this.settingsForm.addControl('bookReaderImmersiveMode', new FormControl(this.user.preferences.bookReaderImmersiveMode, []));
+        this.settingsForm.addControl('bookReaderImmersiveMode', new UntypedFormControl(this.user.preferences.bookReaderImmersiveMode, []));
         this.settingsForm.get('bookReaderImmersiveMode')?.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe((immersiveMode: boolean) => {
           if (immersiveMode) {
             this.settingsForm.get('bookReaderTapToPaginate')?.setValue(true);

UI/Web/src/app/bookmark/bookmark-routing.module.ts

@@ -6,10 +6,11 @@ import { BookmarksComponent } from "./bookmarks/bookmarks.component";
 const routes: Routes = [
   {path: '**', component: BookmarksComponent, pathMatch: 'full', canActivate: [AuthGuard]},
   {
+    path: '',
     runGuardsAndResolvers: 'always',
     canActivate: [AuthGuard],
     children: [
-      {path: '/bookmarks', component: BookmarksComponent},
+      {path: 'bookmarks', component: BookmarksComponent},
     ]
   }
 ];

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

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { FormGroup, FormControl } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormControl } from '@angular/forms';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { ToastrService } from 'ngx-toastr';
 import { CollectionTag } from 'src/app/_models/collection-tag';
@@ -26,7 +26,7 @@ export class BulkAddToCollectionComponent implements OnInit {
    */
   lists: Array<CollectionTag> = [];
   loading: boolean = false;
-  listForm: FormGroup = new FormGroup({});
+  listForm: UntypedFormGroup = new UntypedFormGroup({});
 
   collectionTitleTrackby = (index: number, item: CollectionTag) => `${item.title}`;
 
@@ -38,8 +38,8 @@ export class BulkAddToCollectionComponent implements OnInit {
 
   ngOnInit(): void {
 
-    this.listForm.addControl('title', new FormControl(this.title, []));
+    this.listForm.addControl('title', new UntypedFormControl(this.title, []));
-    this.listForm.addControl('filterQuery', new FormControl('', []));
+    this.listForm.addControl('filterQuery', new UntypedFormControl('', []));
     
     this.loading = true;
     this.cdRef.markForCheck();

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

@@ -1,6 +1,6 @@
 
 <div class="modal-header">
-    <h4 class="modal-title" id="modal-basic-title">Edit {{tag?.title}} Collection</h4>
+    <h4 class="modal-title" id="modal-basic-title">Edit {{tag.title}} Collection</h4>
     <button type="button" class="btn-close" aria-label="Close" (click)="close()"></button>
 </div>
 <div class="modal-body  {{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? '' : 'd-flex'}}">
@@ -9,7 +9,7 @@
             <a ngbNavLink>{{tabs[TabID.General].title}}</a>
             <ng-template ngbNavContent>
                 <p class="alert alert-secondary" role="alert">
-                    This tag is currently {{tag?.promoted ? 'promoted' : 'not promoted'}} (<i class="fa fa-angle-double-up" aria-hidden="true"></i>). 
+                    This tag is currently {{tag.promoted ? 'promoted' : 'not promoted'}} (<i class="fa fa-angle-double-up" aria-hidden="true"></i>). 
                     Promotion means that the tag can be seen server-wide, not just for admin users. All series that have this tag will still have user-access restrictions placed on them.
                 </p>
                 <form [formGroup]="collectionTagForm">
@@ -65,6 +65,6 @@
 </div>
 <div class="modal-footer">
     <button type="button" class="btn btn-secondary" (click)="close()">Cancel</button>
-    <button type="button" class="btn btn-secondary alt" (click)="togglePromotion()">{{tag?.promoted ? 'Demote' : 'Promote'}}</button>
+    <button type="button" class="btn btn-secondary alt" (click)="togglePromotion()">{{tag.promoted ? 'Demote' : 'Promote'}}</button>
     <button type="button" class="btn btn-primary" (click)="save()">Save</button>
 </div>

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

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { ToastrService } from 'ngx-toastr';
 import { forkJoin } from 'rxjs';
@@ -37,7 +37,7 @@ export class EditCollectionTagsComponent implements OnInit {
   pagination!: Pagination;
   selectAll: boolean = true;
   libraryNames!: any;
-  collectionTagForm!: FormGroup;
+  collectionTagForm!: UntypedFormGroup;
   tabs = [{title: 'General', id: TabID.General}, {title: 'Cover Image', id: TabID.CoverImage}];
   active = TabID.General;
   imageUrls: Array<string> = [];
@@ -65,10 +65,10 @@ export class EditCollectionTagsComponent implements OnInit {
     if (this.pagination == undefined) {
       this.pagination = {totalPages: 1, totalItems: 200, itemsPerPage: 200, currentPage: 0};
     }
-    this.collectionTagForm = new FormGroup({
+    this.collectionTagForm = new UntypedFormGroup({
-      summary: new FormControl(this.tag.summary, []),
+      summary: new UntypedFormControl(this.tag.summary, []),
-      coverImageLocked: new FormControl(this.tag.coverImageLocked, []),
+      coverImageLocked: new UntypedFormControl(this.tag.coverImageLocked, []),
-      coverImageIndex: new FormControl(0, []),
+      coverImageIndex: new UntypedFormControl(0, []),
 
     });
     this.imageUrls.push(this.imageService.randomize(this.imageService.getCollectionCoverImage(this.tag.id)));

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

@@ -46,7 +46,7 @@
                     <div class="row g-0" *ngIf="metadata">
                         <div class="mb-3" style="width: 100%">
                             <label for="summary" class="form-label">Summary</label>
-                            <div class="input-group {{metadata?.summaryLocked ? 'lock-active' : ''}}">
+                            <div class="input-group {{metadata.summaryLocked ? 'lock-active' : ''}}">
                                 <ng-container [ngTemplateOutlet]="lock" [ngTemplateOutletContext]="{ item: metadata, field: 'summaryLocked' }"></ng-container>
                                 <textarea id="summary" class="form-control" formControlName="summary" rows="4"></textarea>
                             </div>

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

@@ -61,7 +61,7 @@
             </ng-container>
         </div>
         <div class="image-card col-auto" 
-            *ngIf="showReset" tabindex="0" attr.aria-label="Reset cover image" (click)="reset()"
+            *ngIf="showReset" tabindex="0" aria-label="Reset cover image" (click)="reset()"
             [ngClass]="{'selected': !showApplyButton && selectedIndex === -1}">
             <app-image class="card-img-top" title="Reset Cover Image" height="230px" width="158px" [imageUrl]="imageService.resetCoverImage"></app-image>
             <ng-container *ngIf="showApplyButton">

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

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 import { map, Subject, Observable, of, firstValueFrom, takeUntil, ReplaySubject } from 'rxjs';
 import { UtilityService } from 'src/app/shared/_services/utility.service';
 import { TypeaheadSettings } from 'src/app/typeahead/typeahead-settings';
@@ -13,7 +13,7 @@ import { SeriesService } from 'src/app/_services/series.service';
 interface RelationControl {
   series: {id: number, name: string} | undefined; // Will add type as well
   typeaheadSettings: TypeaheadSettings<SearchResult>;
-  formControl: FormControl;
+  formControl: UntypedFormControl;
 }
 
 @Component({
@@ -81,7 +81,7 @@ export class EditSeriesRelationComponent implements OnInit, OnDestroy {
   setupRelationRows(relations: Array<Series>, kind: RelationKind) {
     relations.map(async item => {
       const settings = await firstValueFrom(this.createSeriesTypeahead(item, kind));
-      const form = new FormControl(kind, []);
+      const form = new UntypedFormControl(kind, []);
       if (kind === RelationKind.Parent) {
         form.disable();
       }
@@ -93,7 +93,7 @@ export class EditSeriesRelationComponent implements OnInit, OnDestroy {
   }
 
   async addNewRelation() {
-    this.relations.push({series: undefined, formControl: new FormControl(RelationKind.Adaptation, []), typeaheadSettings: await firstValueFrom(this.createSeriesTypeahead(undefined, RelationKind.Adaptation))});
+    this.relations.push({series: undefined, formControl: new UntypedFormControl(RelationKind.Adaptation, []), typeaheadSettings: await firstValueFrom(this.createSeriesTypeahead(undefined, RelationKind.Adaptation))});
     this.cdRef.markForCheck();
 
     // Focus on the new typeahead

UI/Web/src/app/manga-reader/manga-reader.component.scss

@@ -277,7 +277,7 @@ img {
 
   .pagination-area {
     cursor: pointer;
-    z-index: 2;
+    z-index: 100;
 
     i {
         color: white;
@@ -290,6 +290,7 @@ img {
       top: 0px;
       width: $side-width;
       background: $pagination-bg;
+      z-index: 100;
     }
     
     .top {
@@ -298,6 +299,7 @@ img {
         top: 0px;
         width: 100%;
         background: $pagination-bg;
+        z-index: 100;
     }
     
     .left {
@@ -306,6 +308,7 @@ img {
         top: 0px;
         width: $side-width;
         background: $pagination-bg;
+        z-index: 100;
     }
     
     .bottom {
@@ -314,6 +317,7 @@ img {
         bottom: 0px;
         width: 100%;
         background: $pagination-bg;
+        z-index: 100;
     }
   }
 

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

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { NgbCollapse } from '@ng-bootstrap/ng-bootstrap';
 import { distinctUntilChanged, forkJoin, map, Observable, of, ReplaySubject, Subject, takeUntil } from 'rxjs';
 import { UtilityService } from '../shared/_services/utility.service';
@@ -66,9 +66,9 @@ export class MetadataFilterComponent implements OnInit, OnDestroy {
   libraries: Array<FilterItem<Library>> = [];
 
 
-  readProgressGroup!: FormGroup;
+  readProgressGroup!: UntypedFormGroup;
-  sortGroup!: FormGroup;
+  sortGroup!: UntypedFormGroup;
-  seriesNameGroup!: FormGroup;
+  seriesNameGroup!: UntypedFormGroup;
   isAscendingSort: boolean = true;
 
   updateApplied: number = 0;
@@ -106,18 +106,18 @@ export class MetadataFilterComponent implements OnInit, OnDestroy {
     }
     
     this.filter = this.seriesService.createSeriesFilter();
-    this.readProgressGroup = new FormGroup({
+    this.readProgressGroup = new UntypedFormGroup({
-      read: new FormControl({value: this.filter.readStatus.read, disabled: this.filterSettings.readProgressDisabled}, []),
+      read: new UntypedFormControl({value: this.filter.readStatus.read, disabled: this.filterSettings.readProgressDisabled}, []),
-      notRead: new FormControl({value: this.filter.readStatus.notRead, disabled: this.filterSettings.readProgressDisabled}, []),
+      notRead: new UntypedFormControl({value: this.filter.readStatus.notRead, disabled: this.filterSettings.readProgressDisabled}, []),
-      inProgress: new FormControl({value: this.filter.readStatus.inProgress, disabled: this.filterSettings.readProgressDisabled}, []),
+      inProgress: new UntypedFormControl({value: this.filter.readStatus.inProgress, disabled: this.filterSettings.readProgressDisabled}, []),
     });
 
-    this.sortGroup = new FormGroup({
+    this.sortGroup = new UntypedFormGroup({
-      sortField: new FormControl({value: this.filter.sortOptions?.sortField || SortField.SortName, disabled: this.filterSettings.sortDisabled}, []),
+      sortField: new UntypedFormControl({value: this.filter.sortOptions?.sortField || SortField.SortName, disabled: this.filterSettings.sortDisabled}, []),
     });
 
-    this.seriesNameGroup = new FormGroup({
+    this.seriesNameGroup = new UntypedFormGroup({
-      seriesNameQuery: new FormControl({value: this.filter.seriesNameQuery || '', disabled: this.filterSettings.searchNameDisabled}, [])
+      seriesNameQuery: new UntypedFormControl({value: this.filter.seriesNameQuery || '', disabled: this.filterSettings.searchNameDisabled}, [])
     });
 
     this.readProgressGroup.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe(changes => {

UI/Web/src/app/nav/grouped-typeahead/grouped-typeahead.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { debounceTime, takeUntil } from 'rxjs/operators';
 import { KEY_CODES } from '../../shared/_services/utility.service';
@@ -66,7 +66,7 @@ export class GroupedTypeaheadComponent implements OnInit, OnDestroy {
 
   hasFocus: boolean = false;
   isLoading: boolean = false;
-  typeaheadForm: FormGroup = new FormGroup({});
+  typeaheadForm: UntypedFormGroup = new UntypedFormGroup({});
 
   prevSearchTerm: string = '';
 
@@ -106,7 +106,7 @@ export class GroupedTypeaheadComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    this.typeaheadForm.addControl('typeahead', new FormControl(this.initialValue, []));
+    this.typeaheadForm.addControl('typeahead', new UntypedFormControl(this.initialValue, []));
     this.cdRef.markForCheck();
 
     this.typeaheadForm.valueChanges.pipe(debounceTime(this.debounceTime), takeUntil(this.onDestroy)).subscribe(change => {

UI/Web/src/app/reading-list/_modals/add-to-list-modal/add-to-list-modal.component.ts

@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { ToastrService } from 'ngx-toastr';
 import { ReadingList } from 'src/app/_models/reading-list';
@@ -56,7 +56,7 @@ export class AddToListModalComponent implements OnInit, AfterViewInit {
    */
   lists: Array<any> = [];
   loading: boolean = false;
-  listForm: FormGroup = new FormGroup({});
+  listForm: UntypedFormGroup = new UntypedFormGroup({});
 
   @ViewChild('title') inputElem!: ElementRef<HTMLInputElement>;
 
@@ -65,8 +65,8 @@ export class AddToListModalComponent implements OnInit, AfterViewInit {
 
   ngOnInit(): void {
 
-    this.listForm.addControl('title', new FormControl(this.title, []));
+    this.listForm.addControl('title', new UntypedFormControl(this.title, []));
-    this.listForm.addControl('filterQuery', new FormControl('', []));
+    this.listForm.addControl('filterQuery', new UntypedFormControl('', []));
     
     this.loading = true;
     this.readingListService.getReadingLists(false).subscribe(lists => {

UI/Web/src/app/reading-list/_modals/edit-reading-list-modal/edit-reading-list-modal.component.html

@@ -9,7 +9,7 @@
             <a ngbNavLink>{{tabs[0].title}}</a>
             <ng-template ngbNavContent>
                 <p>
-                    This list is currently {{readingList?.promoted ? 'promoted' : 'not promoted'}} (<i class="fa fa-angle-double-up" aria-hidden="true"></i>). 
+                    This list is currently {{readingList.promoted ? 'promoted' : 'not promoted'}} (<i class="fa fa-angle-double-up" aria-hidden="true"></i>). 
                     Promotion means that the list can be seen server-wide, not just for admin users. All series that are within this list will still have user-access restrictions placed on them.
                 </p>
                 <form [formGroup]="reviewGroup">

UI/Web/src/app/reading-list/_modals/edit-reading-list-modal/edit-reading-list-modal.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormControl, Validators } from '@angular/forms';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { ToastrService } from 'ngx-toastr';
 import { forkJoin } from 'rxjs';
@@ -18,7 +18,7 @@ import { UploadService } from 'src/app/_services/upload.service';
 export class EditReadingListModalComponent implements OnInit {
 
   @Input() readingList!: ReadingList;
-  reviewGroup!: FormGroup;
+  reviewGroup!: UntypedFormGroup;
 
   coverImageIndex: number = 0;
    /**
@@ -41,9 +41,9 @@ export class EditReadingListModalComponent implements OnInit {
     private imageService: ImageService) { }
 
   ngOnInit(): void {
-    this.reviewGroup = new FormGroup({
+    this.reviewGroup = new UntypedFormGroup({
-      title: new FormControl(this.readingList.title, [Validators.required]),
+      title: new UntypedFormControl(this.readingList.title, [Validators.required]),
-      summary: new FormControl(this.readingList.summary, [])
+      summary: new UntypedFormControl(this.readingList.summary, [])
     });
 
     this.imageUrls.push(this.imageService.randomize(this.imageService.getReadingListCoverImage(this.readingList.id)));

UI/Web/src/app/reading-list/reading-list-detail/reading-list-detail.component.html

@@ -1,7 +1,7 @@
 <app-side-nav-companion-bar>
   <h2 title>
     <span *ngIf="actions.length > 0">
-      <app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [labelBy]="readingList.title"></app-card-actionables>
+      <app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [attr.labelBy]="readingList?.title"></app-card-actionables>
     </span>
     {{readingList?.title}}
     <span *ngIf="readingList?.promoted" class="ms-1">(<i class="fa fa-angle-double-up" aria-hidden="true"></i>)</span>
@@ -26,7 +26,7 @@
           </button>
         </div>
         <div class="col-auto">
-            <button class="btn btn-secondary" (click)="removeRead()" [disabled]="readingList?.promoted && !this.isAdmin">
+            <button class="btn btn-secondary" (click)="removeRead()" [disabled]="readingList.promoted && !this.isAdmin">
                 <span>
                     <i class="fa fa-check"></i>
                 </span>

UI/Web/src/app/reading-list/reading-list-detail/reading-list-detail.component.ts

@@ -26,7 +26,7 @@ import { ReaderService } from 'src/app/_services/reader.service';
 export class ReadingListDetailComponent implements OnInit {
   items: Array<ReadingListItem> = [];
   listId!: number;
-  readingList!: ReadingList;
+  readingList: ReadingList | undefined;
   actions: Array<ActionItem<any>> = [];
   isAdmin: boolean = false;
   isLoading: boolean = false;
@@ -115,6 +115,7 @@ export class ReadingListDetailComponent implements OnInit {
 
   readChapter(item: ReadingListItem) {
     let reader = 'manga';
+    if (!this.readingList) return;
     if (item.seriesFormat === MangaFormat.EPUB) {
       reader = 'book;'
     }
@@ -148,10 +149,12 @@ export class ReadingListDetailComponent implements OnInit {
   }
 
   orderUpdated(event: IndexUpdateEvent) {
+    if (!this.readingList) return;
     this.readingListService.updatePosition(this.readingList.id, event.item.id, event.fromPosition, event.toPosition).subscribe(() => { /* No Operation */ });
   }
 
   itemRemoved(event: ItemRemoveEvent) {
+    if (!this.readingList) return;
     this.readingListService.deleteItem(this.readingList.id, event.item.id).subscribe(() => {
       this.items.splice(event.position, 1);
       this.cdRef.markForCheck();
@@ -160,6 +163,7 @@ export class ReadingListDetailComponent implements OnInit {
   }
 
   removeRead() {
+    if (!this.readingList) return;
     this.isLoading = true;
     this.cdRef.markForCheck();
     this.readingListService.removeRead(this.readingList.id).subscribe((resp) => {
@@ -173,6 +177,7 @@ export class ReadingListDetailComponent implements OnInit {
 
   read() {
     // TODO: Can I do this in the backend?
+    if (!this.readingList) return;
     let currentlyReadingChapter = this.items[0];
     for (let i = 0; i < this.items.length; i++) {
       if (this.items[i].pagesRead >= this.items[i].pagesTotal) {

UI/Web/src/app/reading-list/reading-lists/reading-lists.component.html

@@ -2,7 +2,7 @@
     <h2 title>
         Reading Lists
     </h2>
-    <h6 subtitle>{{pagination?.totalItems}} Items</h6>
+    <h6 subtitle *ngIf="pagination">{{pagination.totalItems}} Items</h6>
 </app-side-nav-companion-bar>
 
 <app-card-detail-layout

UI/Web/src/app/registration/add-email-to-account-migration-modal/add-email-to-account-migration-modal.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { SafeUrl } from '@angular/platform-browser';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { ToastrService } from 'ngx-toastr';
@@ -17,7 +17,7 @@ export class AddEmailToAccountMigrationModalComponent implements OnInit {
   @Input() password!: string;
 
   isSaving: boolean = false;
-  registerForm: FormGroup = new FormGroup({});
+  registerForm: UntypedFormGroup = new UntypedFormGroup({});
   emailLink: string = '';
   emailLinkUrl: SafeUrl | undefined;
   error: string = '';
@@ -27,9 +27,9 @@ export class AddEmailToAccountMigrationModalComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.registerForm.addControl('username', new FormControl(this.username, [Validators.required]));
+    this.registerForm.addControl('username', new UntypedFormControl(this.username, [Validators.required]));
-    this.registerForm.addControl('email', new FormControl('', [Validators.required, Validators.email]));
+    this.registerForm.addControl('email', new UntypedFormControl('', [Validators.required, Validators.email]));
-    this.registerForm.addControl('password', new FormControl(this.password, [Validators.required]));
+    this.registerForm.addControl('password', new UntypedFormControl(this.password, [Validators.required]));
     this.cdRef.markForCheck();
   }
 

UI/Web/src/app/registration/confirm-email/confirm-email.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ToastrService } from 'ngx-toastr';
 import { ThemeService } from 'src/app/_services/theme.service';
@@ -18,10 +18,10 @@ export class ConfirmEmailComponent {
    */
   token: string = '';
 
-  registerForm: FormGroup = new FormGroup({
+  registerForm: UntypedFormGroup = new UntypedFormGroup({
-    email: new FormControl('', [Validators.required, Validators.email]),
+    email: new UntypedFormControl('', [Validators.required, Validators.email]),
-    username: new FormControl('', [Validators.required]),
+    username: new UntypedFormControl('', [Validators.required]),
-    password: new FormControl('', [Validators.required, Validators.maxLength(32), Validators.minLength(6)]),
+    password: new UntypedFormControl('', [Validators.required, Validators.maxLength(32), Validators.minLength(6)]),
   });
 
   /**

UI/Web/src/app/registration/confirm-reset-password/confirm-reset-password.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
-import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormControl, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ToastrService } from 'ngx-toastr';
 import { AccountService } from 'src/app/_services/account.service';
@@ -13,9 +13,9 @@ import { AccountService } from 'src/app/_services/account.service';
 export class ConfirmResetPasswordComponent {
 
   token: string = '';
-  registerForm: FormGroup = new FormGroup({
+  registerForm: UntypedFormGroup = new UntypedFormGroup({
-    email: new FormControl('', [Validators.required, Validators.email]),
+    email: new UntypedFormControl('', [Validators.required, Validators.email]),
-    password: new FormControl('', [Validators.required, Validators.maxLength(32), Validators.minLength(6)]),
+    password: new UntypedFormControl('', [Validators.required, Validators.maxLength(32), Validators.minLength(6)]),
   });
 
   constructor(private route: ActivatedRoute, private router: Router, 

UI/Web/src/app/registration/register/register.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormControl, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { ToastrService } from 'ngx-toastr';
 import { take } from 'rxjs/operators';
@@ -17,10 +17,10 @@ import { MemberService } from 'src/app/_services/member.service';
 })
 export class RegisterComponent implements OnInit {
 
-  registerForm: FormGroup = new FormGroup({
+  registerForm: UntypedFormGroup = new UntypedFormGroup({
-    email: new FormControl('', [Validators.required, Validators.email]),
+    email: new UntypedFormControl('', [Validators.required, Validators.email]),
-    username: new FormControl('', [Validators.required]),
+    username: new UntypedFormControl('', [Validators.required]),
-    password: new FormControl('', [Validators.required, Validators.maxLength(32), Validators.minLength(6)]),
+    password: new UntypedFormControl('', [Validators.required, Validators.maxLength(32), Validators.minLength(6)]),
   });
 
   constructor(private router: Router, private accountService: AccountService, 

UI/Web/src/app/registration/reset-password/reset-password.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormControl, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { ToastrService } from 'ngx-toastr';
 import { AccountService } from 'src/app/_services/account.service';
@@ -12,8 +12,8 @@ import { AccountService } from 'src/app/_services/account.service';
 })
 export class ResetPasswordComponent {
 
-  registerForm: FormGroup = new FormGroup({
+  registerForm: UntypedFormGroup = new UntypedFormGroup({
-    email: new FormControl('', [Validators.required, Validators.email]),
+    email: new UntypedFormControl('', [Validators.required, Validators.email]),
   });
 
   constructor(private router: Router, private accountService: AccountService, 

UI/Web/src/app/registration/user-login/user-login.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
-import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormControl, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { ToastrService } from 'ngx-toastr';
@@ -20,9 +20,9 @@ import { NavService } from '../../_services/nav.service';
 export class UserLoginComponent implements OnInit {
 
   //model: any = {username: '', password: ''};
-  loginForm: FormGroup = new FormGroup({
+  loginForm: UntypedFormGroup = new UntypedFormGroup({
-      username: new FormControl('', [Validators.required]),
+      username: new UntypedFormControl('', [Validators.required]),
-      password: new FormControl('', [Validators.required])
+      password: new UntypedFormControl('', [Validators.required])
   });
 
   /**

UI/Web/src/app/series-detail/review-series-modal/review-series-modal.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { Series } from 'src/app/_models/series';
 import { SeriesService } from 'src/app/_services/series.service';
@@ -13,14 +13,14 @@ import { SeriesService } from 'src/app/_services/series.service';
 export class ReviewSeriesModalComponent implements OnInit {
 
   @Input() series!: Series;
-  reviewGroup!: FormGroup;
+  reviewGroup!: UntypedFormGroup;
 
   constructor(public modal: NgbActiveModal, private seriesService: SeriesService, private readonly cdRef: ChangeDetectorRef) {}
 
   ngOnInit(): void {
-    this.reviewGroup = new FormGroup({
+    this.reviewGroup = new UntypedFormGroup({
-      review: new FormControl(this.series.userReview, []),
+      review: new UntypedFormControl(this.series.userReview, []),
-      rating: new FormControl(this.series.userRating, [])
+      rating: new UntypedFormControl(this.series.userRating, [])
     });
     this.cdRef.markForCheck();
   }

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

@@ -3,11 +3,11 @@
             <ng-container title>
                 <h2 class="title">
                     <app-card-actionables [disabled]="actionInProgress" (actionHandler)="performAction($event)" [actions]="seriesActions" [labelBy]="series.name" iconClass="fa-ellipsis-v"></app-card-actionables>
-                    <span>{{series?.name}}</span>
+                    <span>{{series.name}}</span>
                 </h2>
             </ng-container>
-            <ng-container subtitle *ngIf="series?.localizedName !== series?.name">
+            <ng-container subtitle *ngIf="series.localizedName !== series.name">
-                <h6 class="subtitle-with-actionables" title="Localized Name">{{series?.localizedName}}</h6>
+                <h6 class="subtitle-with-actionables" title="Localized Name">{{series.localizedName}}</h6>
             </ng-container>
 
             <ng-template #extrasDrawer let-offcanvas>
@@ -95,13 +95,13 @@
                     </button>
                 </div>
                 <div class="col-auto ms-2">
-                    <ngb-rating class="rating-star" [(rate)]="series!.userRating" (rateChange)="updateRating($event)" (click)="promptToReview()"></ngb-rating>
+                    <ngb-rating class="rating-star" [(rate)]="series.userRating" (rateChange)="updateRating($event)" (click)="promptToReview()"></ngb-rating>
-                    <button *ngIf="series?.userRating || series.userRating" class="btn btn-sm btn-icon" (click)="openReviewModal(true)" placement="bottom" ngbTooltip="Edit Review" attr.aria-label="Edit Review"><i class="fa fa-pen" aria-hidden="true"></i></button>
+                    <button *ngIf="series.userRating || series.userRating" class="btn btn-sm btn-icon" (click)="openReviewModal(true)" placement="bottom" ngbTooltip="Edit Review" aria-label="Edit Review"><i class="fa fa-pen" aria-hidden="true"></i></button>
                 </div>
             </div>
             <div class="row g-0">
                 <!-- TODO: This will be the first of reviews section. Reviews will show your plus other peoples reviews in media cards like Plex does and this will be below metadata -->
-                <app-read-more class="user-review {{userReview ? 'mt-1' : ''}}" [text]="series?.userReview || ''" [maxLength]="250"></app-read-more>
+                <app-read-more class="user-review {{userReview ? 'mt-1' : ''}}" [text]="series.userReview || ''" [maxLength]="250"></app-read-more>
             </div>
             <div *ngIf="seriesMetadata" class="mt-2">
                 <app-series-metadata-detail [seriesMetadata]="seriesMetadata" [readingLists]="readingLists" [series]="series" [hasReadingProgress]="hasReadingProgress"></app-series-metadata-detail>

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

@@ -35,7 +35,7 @@ import { NavService } from '../_services/nav.service';
 import { RelatedSeries } from '../_models/series-detail/related-series';
 import { RelationKind } from '../_models/series-detail/relation-kind';
 import { CardDetailDrawerComponent } from '../cards/card-detail-drawer/card-detail-drawer.component';
-import { FormControl, FormGroup } from '@angular/forms';
+import { FormGroup, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { PageLayoutMode } from '../_models/page-layout-mode';
 import { DOCUMENT } from '@angular/common';
 import { User } from '../_models/user';
@@ -152,8 +152,8 @@ export class SeriesDetailComponent implements OnInit, OnDestroy, AfterContentChe
   renderMode: PageLayoutMode = PageLayoutMode.Cards;
 
   pageExtrasGroup = new FormGroup({
-    'sortingOption': new FormControl(this.sortingOptions[0].value, []),
+    'sortingOption': new UntypedFormControl(this.sortingOptions[0].value, []),
-    'renderMode': new FormControl(this.renderMode, []),
+    'renderMode': new UntypedFormControl(this.renderMode, []),
   });
 
   isAscendingSort: boolean = false; // TODO: Get this from User preferences

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

@@ -1,11 +1,11 @@
 <ng-container *ngIf="link === undefined || link.length === 0; else useLink">
-    <div class="side-nav-item" [ngClass]="{'closed': (navService?.sideNavCollapsed$ | async), 'active': highlighted}">
+    <div class="side-nav-item" [ngClass]="{'closed': (navService.sideNavCollapsed$ | async), 'active': highlighted}">
         <ng-container [ngTemplateOutlet]="inner"></ng-container>
     </div>
 </ng-container>
 
 <ng-template #useLink>
-    <a class="side-nav-item" href="javascript:void(0);" [ngClass]="{'closed': (navService?.sideNavCollapsed$ | async), 'active': highlighted}" [routerLink]="link">
+    <a class="side-nav-item" href="javascript:void(0);" [ngClass]="{'closed': (navService.sideNavCollapsed$ | async), 'active': highlighted}" [routerLink]="link">
         <ng-container [ngTemplateOutlet]="inner"></ng-container>
     </a>
 </ng-template>

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

@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { filter, map, Subject, takeUntil } from 'rxjs';
 import { NavService } from '../../_services/nav.service';
@@ -6,7 +6,8 @@ import { NavService } from '../../_services/nav.service';
 @Component({
   selector: 'app-side-nav-item',
   templateUrl: './side-nav-item.component.html',
-  styleUrls: ['./side-nav-item.component.scss']
+  styleUrls: ['./side-nav-item.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SideNavItemComponent implements OnInit, OnDestroy {
   /**
@@ -29,7 +30,7 @@ export class SideNavItemComponent implements OnInit, OnDestroy {
   highlighted = false;
   private onDestroy: Subject<void> = new Subject();
    
-  constructor(public navService: NavService, private router: Router) {
+  constructor(public navService: NavService, private router: Router, private readonly cdRef: ChangeDetectorRef) {
     router.events
       .pipe(filter(event => event instanceof NavigationEnd), 
             takeUntil(this.onDestroy),
@@ -54,6 +55,7 @@ export class SideNavItemComponent implements OnInit, OnDestroy {
   updateHightlight(page: string) {
     if (this.link === undefined) {
       this.highlighted = false;
+      this.cdRef.markForCheck();
       return;
     }
 
@@ -63,14 +65,17 @@ export class SideNavItemComponent implements OnInit, OnDestroy {
 
     if (this.comparisonMethod === 'equals' && page === this.link) {
       this.highlighted = true;
+      this.cdRef.markForCheck();
       return;
     }
     if (this.comparisonMethod === 'startsWith' && page.startsWith(this.link)) {
       this.highlighted = true;
+      this.cdRef.markForCheck();
       return;
     }
 
     this.highlighted = false;
+    this.cdRef.markForCheck();
   }
 
 }

UI/Web/src/app/typeahead/typeahead-settings.ts

@@ -1,5 +1,5 @@
 import { Observable } from 'rxjs';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 
 export type SelectionCompareFn<T> = (a: T, b: T) => boolean;
 
@@ -48,7 +48,7 @@ export class TypeaheadSettings<T> {
     /**
      * Optional form Control to tie model to. 
      */
-    formControl?: FormControl;
+    formControl?: UntypedFormControl;
     /**
      * If true, typeahead will remove already selected items from fetchFn results. Only appies when multiple=true
      */

UI/Web/src/app/typeahead/typeahead.component.ts

@@ -1,7 +1,7 @@
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { DOCUMENT } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, HostListener, Inject, Input, OnDestroy, OnInit, Output, Renderer2, RendererStyleFlags2, TemplateRef, ViewChild } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { Observable, of, ReplaySubject, Subject } from 'rxjs';
 import { auditTime, distinctUntilChanged, filter, map, shareReplay, switchMap, take, takeUntil, tap } from 'rxjs/operators';
 import { KEY_CODES } from '../shared/_services/utility.service';
@@ -186,8 +186,8 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
   showAddItem: boolean = false;
   filteredOptions!: Observable<string[]>;
   isLoadingOptions: boolean = false;
-  typeaheadControl!: FormControl;
+  typeaheadControl!: UntypedFormControl;
-  typeaheadForm!: FormGroup;
+  typeaheadForm!: UntypedFormGroup;
 
   private readonly onDestroy = new Subject<void>();
 
@@ -220,9 +220,9 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
     if (this.settings.hasOwnProperty('formControl') && this.settings.formControl) {
       this.typeaheadControl = this.settings.formControl;
     } else {
-      this.typeaheadControl = new FormControl('');
+      this.typeaheadControl = new UntypedFormControl('');
     }
-    this.typeaheadForm = new FormGroup({
+    this.typeaheadForm = new UntypedFormGroup({
       'typeahead': this.typeaheadControl
     });
 

UI/Web/src/app/user-settings/theme-manager/theme-manager.component.html

@@ -20,7 +20,7 @@
                   <h5 class="card-title">{{theme.name | sentenceCase}}</h5>
                   <h6 class="card-subtitle mb-2 text-muted">{{theme.provider | siteThemeProvider}}</h6>
                   <button class="btn btn-secondary me-2" [disabled]="theme.isDefault" *ngIf="isAdmin" (click)="updateDefault(theme)">Set Default</button>
-                  <button class="btn btn-primary" (click)="applyTheme(theme)" [disabled]="currentTheme?.id === theme.id">{{currentTheme?.id === theme.id ? 'Applied' : 'Apply'}}</button>
+                  <button class="btn btn-primary" (click)="applyTheme(theme)" [disabled]="currentTheme.id === theme.id">{{currentTheme.id === theme.id ? 'Applied' : 'Apply'}}</button>
                 </div>
               </div>
         </ng-container>

UI/Web/src/app/user-settings/user-preferences/user-preferences.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { ToastrService } from 'ngx-toastr';
 import { map, shareReplay, take, takeUntil } from 'rxjs/operators';
 import { Title } from '@angular/platform-browser';
@@ -36,8 +36,8 @@ export class UserPreferencesComponent implements OnInit, OnDestroy {
   bookColorThemes = bookColorThemes;
   pageLayoutModes = pageLayoutModes;
 
-  settingsForm: FormGroup = new FormGroup({});
+  settingsForm: UntypedFormGroup = new UntypedFormGroup({});
-  passwordChangeForm: FormGroup = new FormGroup({});
+  passwordChangeForm: UntypedFormGroup = new UntypedFormGroup({});
   user: User | undefined = undefined;
   hasChangePasswordAbility: Observable<boolean> = of(false);
 
@@ -112,32 +112,32 @@ export class UserPreferencesComponent implements OnInit, OnDestroy {
         this.user.preferences.bookReaderFontFamily = 'default';
       }
 
-      this.settingsForm.addControl('readingDirection', new FormControl(this.user.preferences.readingDirection, []));
+      this.settingsForm.addControl('readingDirection', new UntypedFormControl(this.user.preferences.readingDirection, []));
-      this.settingsForm.addControl('scalingOption', new FormControl(this.user.preferences.scalingOption, []));
+      this.settingsForm.addControl('scalingOption', new UntypedFormControl(this.user.preferences.scalingOption, []));
-      this.settingsForm.addControl('pageSplitOption', new FormControl(this.user.preferences.pageSplitOption, []));
+      this.settingsForm.addControl('pageSplitOption', new UntypedFormControl(this.user.preferences.pageSplitOption, []));
-      this.settingsForm.addControl('autoCloseMenu', new FormControl(this.user.preferences.autoCloseMenu, []));
+      this.settingsForm.addControl('autoCloseMenu', new UntypedFormControl(this.user.preferences.autoCloseMenu, []));
-      this.settingsForm.addControl('showScreenHints', new FormControl(this.user.preferences.showScreenHints, []));
+      this.settingsForm.addControl('showScreenHints', new UntypedFormControl(this.user.preferences.showScreenHints, []));
-      this.settingsForm.addControl('readerMode', new FormControl(this.user.preferences.readerMode, []));
+      this.settingsForm.addControl('readerMode', new UntypedFormControl(this.user.preferences.readerMode, []));
-      this.settingsForm.addControl('layoutMode', new FormControl(this.user.preferences.layoutMode, []));
+      this.settingsForm.addControl('layoutMode', new UntypedFormControl(this.user.preferences.layoutMode, []));
-      this.settingsForm.addControl('bookReaderFontFamily', new FormControl(this.user.preferences.bookReaderFontFamily, []));
+      this.settingsForm.addControl('bookReaderFontFamily', new UntypedFormControl(this.user.preferences.bookReaderFontFamily, []));
-      this.settingsForm.addControl('bookReaderFontSize', new FormControl(this.user.preferences.bookReaderFontSize, []));
+      this.settingsForm.addControl('bookReaderFontSize', new UntypedFormControl(this.user.preferences.bookReaderFontSize, []));
-      this.settingsForm.addControl('bookReaderLineSpacing', new FormControl(this.user.preferences.bookReaderLineSpacing, []));
+      this.settingsForm.addControl('bookReaderLineSpacing', new UntypedFormControl(this.user.preferences.bookReaderLineSpacing, []));
-      this.settingsForm.addControl('bookReaderMargin', new FormControl(this.user.preferences.bookReaderMargin, []));
+      this.settingsForm.addControl('bookReaderMargin', new UntypedFormControl(this.user.preferences.bookReaderMargin, []));
-      this.settingsForm.addControl('bookReaderReadingDirection', new FormControl(this.user.preferences.bookReaderReadingDirection, []));
+      this.settingsForm.addControl('bookReaderReadingDirection', new UntypedFormControl(this.user.preferences.bookReaderReadingDirection, []));
-      this.settingsForm.addControl('bookReaderTapToPaginate', new FormControl(!!this.user.preferences.bookReaderTapToPaginate, []));
+      this.settingsForm.addControl('bookReaderTapToPaginate', new UntypedFormControl(!!this.user.preferences.bookReaderTapToPaginate, []));
-      this.settingsForm.addControl('bookReaderLayoutMode', new FormControl(this.user.preferences.bookReaderLayoutMode || BookPageLayoutMode.Default, []));
+      this.settingsForm.addControl('bookReaderLayoutMode', new UntypedFormControl(this.user.preferences.bookReaderLayoutMode || BookPageLayoutMode.Default, []));
-      this.settingsForm.addControl('bookReaderThemeName', new FormControl(this.user?.preferences.bookReaderThemeName || bookColorThemes[0].name, []));
+      this.settingsForm.addControl('bookReaderThemeName', new UntypedFormControl(this.user?.preferences.bookReaderThemeName || bookColorThemes[0].name, []));
-      this.settingsForm.addControl('bookReaderImmersiveMode', new FormControl(this.user?.preferences.bookReaderImmersiveMode, []));
+      this.settingsForm.addControl('bookReaderImmersiveMode', new UntypedFormControl(this.user?.preferences.bookReaderImmersiveMode, []));
 
-      this.settingsForm.addControl('theme', new FormControl(this.user.preferences.theme, []));
+      this.settingsForm.addControl('theme', new UntypedFormControl(this.user.preferences.theme, []));
-      this.settingsForm.addControl('globalPageLayoutMode', new FormControl(this.user.preferences.globalPageLayoutMode, []));
+      this.settingsForm.addControl('globalPageLayoutMode', new UntypedFormControl(this.user.preferences.globalPageLayoutMode, []));
-      this.settingsForm.addControl('blurUnreadSummaries', new FormControl(this.user.preferences.blurUnreadSummaries, []));
+      this.settingsForm.addControl('blurUnreadSummaries', new UntypedFormControl(this.user.preferences.blurUnreadSummaries, []));
-      this.settingsForm.addControl('promptForDownloadSize', new FormControl(this.user.preferences.promptForDownloadSize, []));
+      this.settingsForm.addControl('promptForDownloadSize', new UntypedFormControl(this.user.preferences.promptForDownloadSize, []));
       this.cdRef.markForCheck();
     });
 
-    this.passwordChangeForm.addControl('password', new FormControl('', [Validators.required]));
+    this.passwordChangeForm.addControl('password', new UntypedFormControl('', [Validators.required]));
-    this.passwordChangeForm.addControl('confirmPassword', new FormControl('', [Validators.required]));
+    this.passwordChangeForm.addControl('confirmPassword', new UntypedFormControl('', [Validators.required]));
 
     this.observableHandles.push(this.passwordChangeForm.valueChanges.subscribe(() => {
       const values = this.passwordChangeForm.value;

UI/Web/src/app/user-settings/user-settings-routing.module.ts

@@ -6,6 +6,7 @@ import { UserPreferencesComponent } from './user-preferences/user-preferences.co
 const routes: Routes = [
     {path: '**', component: UserPreferencesComponent, pathMatch: 'full'},
     {
+      path: '',
       runGuardsAndResolvers: 'always',
       canActivate: [AuthGuard],
       children: [

UI/Web/src/app/want-to-read/want-to-read-routing.module.ts

@@ -6,6 +6,7 @@ import { WantToReadComponent } from './want-to-read/want-to-read.component';
 const routes: Routes = [
     {path: '**', component: WantToReadComponent, pathMatch: 'full'},
     {
+      path: '',
       runGuardsAndResolvers: 'always',
       canActivate: [AuthGuard],
       children: [

UI/Web/src/styles.scss

@@ -1,9 +1,7 @@
 @use '../node_modules/swiper/swiper.scss' as swiper;
 
 // Import themes which define the css variables we use to customize the app
-@import './theme/themes/light';
 @import './theme/themes/dark';
-@import './theme/themes/e-ink';
 
 // Import colors for overrides of bootstrap theme
 @import './theme/toastr';

UI/Web/src/theme/_variables.scss

@@ -20,3 +20,7 @@ $grid-breakpoints-xl: 1200px;
 
 $grid-breakpoints: (xs: $grid-breakpoints-xs, sm: $grid-breakpoints-sm, md: $grid-breakpoints-md, lg: $grid-breakpoints-lg, xl: $grid-breakpoints-xl);
 
+// Override any bootstrap styles we don't want
+:root {
+  --hr-color: transparent;
+}

UI/Web/src/theme/components/_buttons.scss

@@ -42,9 +42,11 @@ button:disabled, .form-control:disabled, .form-control[readonly], .disabled, :di
 .btn-icon {
   cursor: pointer;
   color: var(--body-text-color);
+  border: none;
 
   &:hover, &:focus {
     color: var(--body-text-color);
+    border: none;
   }
 }
 

UI/Web/src/theme/themes/dark.scss

@@ -1,4 +1,4 @@
-:root .bg-dark {
+:root, :root .bg-dark {
     --color-scheme: dark;
     --primary-color: #4ac694;
     --primary-color-dark-shade: #3B9E76;
@@ -9,6 +9,7 @@
     --body-text-color: #efefef;
     --btn-icon-filter: invert(1) grayscale(100%) brightness(200%);
     --primary-color-scrollbar: rgba(74,198,148,0.75);
+    
 
     /* Navbar */
     --navbar-bg-color: black;
@@ -42,6 +43,7 @@
     --btn-disabled-bg-color: #343a40;
     --btn-disabled-text-color: white;
     --btn-disabled-border-color: #6c757d;
+    --bs-btn-disabled-border-color: transparent;
 
     /* Nav (Tabs) */
     --nav-tab-border-color: rgba(44, 118, 88, 0.7);

UI/Web/src/theme/themes/light.scss

@@ -1,4 +1,243 @@
 /* Default styles for Kavita */
 :root {
-  @import './dark.scss'; // Just re-import variables from dark since that's all we support
+  //@import './dark.scss'; // Just re-import variables from dark since that's all we support
+  --color-scheme: dark;
+    --primary-color: #4ac694;
+    --primary-color-dark-shade: #3B9E76;
+    --primary-color-darker-shade: #338A67;
+    --primary-color-darkest-shade: #25624A;
+    --error-color: #BD362F;
+    --bs-body-bg: #343a40;
+    --body-text-color: #efefef;
+    --btn-icon-filter: invert(1) grayscale(100%) brightness(200%);
+    --primary-color-scrollbar: rgba(74,198,148,0.75);
+    
+
+    /* Navbar */
+    --navbar-bg-color: black;
+    --navbar-text-color: white;
+    --navbar-fa-icon-color: white;
+    --navbar-btn-hover-outline-color: rgba(255, 255, 255, 1);
+
+    /* Inputs */
+    --input-bg-color: #343a40;
+    --input-bg-readonly-color: #434648;
+    --input-focused-border-color: #ccc;
+    --input-text-color: #fff;
+    --input-placeholder-color: #aeaeae;
+    --input-border-color: #ccc;
+    --input-focus-boxshadow-color: rgb(255 255 255 / 50%);
+
+    /* Buttons */
+    --btn-focus-boxshadow-color: rgb(255 255 255 / 50%);
+    --btn-primary-text-color: white;
+    --btn-primary-bg-color: var(--primary-color);
+    --btn-primary-border-color: var(--primary-color);
+    --btn-primary-hover-text-color: white;
+    --btn-primary-hover-bg-color: var(--primary-color-darker-shade);
+    --btn-primary-hover-border-color: var(--primary-color-darker-shade);
+    --btn-alt-bg-color: #424c72;
+    --btn-alt-border-color: #444f75;
+    --btn-alt-hover-bg-color: #3b4466;
+    --btn-alt-focus-bg-color: #343c59;
+    --btn-alt-focus-boxshadow-color: rgb(255 255 255 / 50%);
+    --btn-fa-icon-color: white;
+    --btn-disabled-bg-color: #343a40;
+    --btn-disabled-text-color: white;
+    --btn-disabled-border-color: #6c757d;
+    --bs-btn-disabled-border-color: transparent;
+
+    /* Nav (Tabs) */
+    --nav-tab-border-color: rgba(44, 118, 88, 0.7);
+    --nav-tab-text-color: var(--body-text-color);
+    --nav-tab-bg-color: var(--primary-color);
+    --nav-tab-hover-border-color: var(--primary-color);
+    --nav-tab-active-text-color: white;
+    --nav-tab-border-hover-color: transparent;
+    --nav-tab-hover-text-color: var(--body-text-color);
+    --nav-tab-hover-bg-color: transparent;
+    --nav-tab-border-top: rgba(44, 118, 88, 0.7);
+    --nav-tab-border-left: rgba(44, 118, 88, 0.7);
+    --nav-tab-border-bottom: rgba(44, 118, 88, 0.7);
+    --nav-tab-border-right: rgba(44, 118, 88, 0.7);
+    --nav-tab-hover-border-top: rgba(44, 118, 88, 0.7);
+    --nav-tab-hover-border-left: rgba(44, 118, 88, 0.7);
+    --nav-tab-hover-border-bottom: var(--bs-body-bg);
+    --nav-tab-hover-border-right: rgba(44, 118, 88, 0.7);
+    --nav-tab-active-hover-bg-color: var(--primary-color);
+    --nav-link-bg-color: var(--primary-color);
+    --nav-link-active-text-color: white;
+    --nav-link-text-color: white;
+
+    /* Header */
+    --nav-header-text-color: white;
+    --nav-header-bg-color: rgb(22, 27, 34);
+
+    /* Toasts */
+    --toast-success-bg-color: rgba(59, 158, 118, 0.9);
+    --toast-error-bg-color: #BD362F;
+    --toast-info-bg-color: #2F96B4;
+    --toast-warning-bg-color: #F89406;
+
+    /* Checkboxes/Switch */
+    --checkbox-checked-bg-color: var(--primary-color);
+    --checkbox-border-color: var(--input-focused-border-color);
+    --checkbox-focus-border-color: var(--primary-color);
+    --checkbox-focus-boxshadow-color: rgb(255 255 255 / 50%);
+
+    /* Tag Badge */
+    --tagbadge-border-color: rgba(239, 239, 239, 0.125);
+    --tagbadge-text-color: var(--body-text-color);
+    --tagbadge-bg-color: var(--nav-tab-hover-bg-color);
+    --tagbadge-filled-border-color: rgba(239, 239, 239, 0.125);
+    --tagbadge-filled-text-color: var(--body-text-color);
+    --tagbadge-filled-bg-color: var(--primary-color);
+
+    /* Side Nav */
+    --side-nav-bg-color: rgba(0,0,0,0.2);
+    --side-nav-mobile-bg-color: rgb(25,26,28);
+    --side-nav-openclose-transition: 0.15s ease-in-out;
+    --side-nav-box-shadow: rgba(0,0,0,0.5);
+    --side-nav-mobile-box-shadow: 3px 0em 5px 10em rgb(0 0 0 / 50%);
+    --side-nav-hover-text-color: white;
+    --side-nav-hover-bg-color: black;
+    --side-nav-color: white;
+    --side-nav-border-radius: 5px;
+    --side-nav-border: none;
+    --side-nav-border-closed: none;
+    --side-nav-border-transition: 0.5s ease-in-out;
+    --side-nav-companion-bar-transistion: 0.15s linear;
+    --side-nav-bg-color-transition: 0.5s ease-in-out;
+    --side-nav-closed-bg-color: transparent;
+    --side-nav-item-active-color: var(--primary-color);
+    --side-nav-item-active-text-color: white;
+    --side-nav-active-bg-color: rgba(0,0,0,0.5);
+    --side-nav-overlay-color: rgba(0,0,0,0.5);
+
+
+    /* List items */
+    --list-group-item-text-color: var(--body-text-color); /*rgba(74, 198, 148, 0.9)*/
+    --list-group-item-bg-color: #343a40;
+    --list-group-item-border-color: rgba(239, 239, 239, 0.125);
+    --list-group-hover-text-color: white;
+    --list-group-hover-bg-color: rgb(22, 27, 34);
+    --list-group-active-border-color: none;
+
+    /* Popover */
+    --popover-body-bg-color: var(--navbar-bg-color);
+    --popover-body-text-color: var(--navbar-text-color);
+    --popover-outerarrow-color: transparent;
+    --popover-arrow-color: transparent;
+    --popover-bg-color: black;
+    --popover-border-color: black;
+
+    /* Pagination */
+    --pagination-active-link-border-color: var(--primary-color);
+    --pagination-active-link-bg-color: var(--primary-color);
+    --pagination-active-link-text-color: white;
+    --pagination-link-border-color: rgba(239, 239, 239, 0.125);
+    --pagination-link-text-color: white;
+    --pagination-link-bg-color: rgba(1, 4, 9, 0.5);
+    --pagination-focus-border-color: var(--primary-color);
+    --pagination-link-hover-color: var(--primary-color);
+
+    /* Progress Bar */
+    --progress-striped-animated-color: linear-gradient(45deg, rgba(74,198,148, 0.75) 25%, rgba(51, 138, 103, 0.75) 25%, rgba(51, 138, 103, 0.75) 50%, rgba(74,198,148, 0.75) 50%, rgba(74,198,148, 0.75) 75%, rgba(51, 138, 103, 0.75) 75%, rgba(51, 138, 103, 0.75));
+    --progress-bg-color: var(--nav-header-bg-color);
+    --progress-bar-color: var(--primary-color-dark-shade);
+
+    /* Dropdown */
+    --dropdown-item-hover-text-color: white;
+    --dropdown-item-hover-bg-color: var(--primary-color-dark-shade);
+    --dropdown-item-text-color: var(--navbar-text-color);
+    --dropdown-item-bg-color: var(--navbar-bg-color);
+    --dropdown-overlay-color: rgba(0,0,0,0.5);
+
+    /* Accordion */
+    --accordion-header-text-color: rgba(74, 198, 148, 0.9);
+    --accordion-header-bg-color: rgba(52, 60, 70, 0.5);
+    --accordion-body-bg-color: #292929;
+    --accordion-body-border-color: rgba(239, 239, 239, 0.125);
+    --accordion-body-text-color: var(--body-text-color);
+    --accordion-header-collapsed-text-color: rgba(74, 198, 148, 0.9);
+    --accordion-header-collapsed-bg-color: #292929;
+    --accordion-button-focus-border-color: unset;
+    --accordion-button-focus-box-shadow: unset;
+    --accordion-active-body-bg-color: #292929;
+
+    /* Breadcrumb */
+    --breadcrumb-bg-color: #292d32;
+    --breadcrumb-item-text-color: var(--body-text-color);
+
+    /* Rating star */
+    --ratingstar-color: white;
+    --ratingstar-star-empty: #b0c4de;
+    --ratingstar-star-filled: var(--primary-color);
+
+    /* Global */
+    --hr-color: rgba(239, 239, 239, 0.125);
+    --accent-bg-color: rgba(1, 4, 9, 0.5);
+    --accent-text-color: lightgrey;
+    --grid-breakpoints-xs: $grid-breakpoint-xs;
+    --grid-breakpoints-sm: $grid-breakpoint-sm;
+    --grid-breakpoints-md: $grid-breakpoint-md;
+    --grid-breakpoints-lg: $grid-breakpoint-lg;
+    --grid-breakpoints-xl: $grid-breakpoint-xl;
+    --body-font-family: "EBGaramond", "Helvetica Neue", sans-serif;
+    --brand-font-family: "Spartan", sans-serif;
+
+    /* Card */
+    --card-bg-color: rgba(22,27,34,0.5);
+    --card-text-color: var(--body-text-color);
+    --card-border-width: 0 1px 1px 1px;
+    --card-border-style: solid;
+    --card-border-color: transparent;
+    --card-progress-bar-color: var(--primary-color);
+    --card-overlay-bg-color: rgba(0, 0, 0, 0);
+    --card-overlay-hover-bg-color: rgba(0, 0, 0, 0.2);
+
+    /* Slider */
+    --slider-text-color: white;
+    --input-range-color: var(--primary-color);
+    --input-range-active-color: var(--primary-color-darker-shade);
+
+    /* Manga Reader */
+    --manga-reader-overlay-filter: blur(10px);
+    --manga-reader-overlay-bg-color: rgba(0,0,0,0.5);
+    --manga-reader-overlay-text-color: white;
+    --manga-reader-bg-color: black;
+    --manga-reader-next-highlight-bg-color: rgba(65, 225, 100, 0.5);
+    --manga-reader-prev-highlight-bg-color: rgba(65, 105, 225, 0.5);
+
+    /* Radios */
+    --radio-accent-color: var(--primary-color);
+    --radio-hover-accent-color: var(--primary-color);
+    --radio-focus-boxshadow-color: rgb(255 255 255 / 50%);
+
+    /* Carousel */
+    --carousel-header-text-color: var(--body-text-color);
+    --carousel-header-text-decoration: none;
+    --carousel-hover-header-text-decoration: none;
+
+    /** Drawer */
+    --drawer-background-color: black; // TODO: Remove this for bg
+    --drawer-bg-color: #292929;
+    --drawer-text-color: white;
+
+    /** Event Widget */
+    --event-widget-bg-color: rgb(1, 4, 9);
+    --event-widget-item-bg-color: rgb(1, 4, 9);
+    --event-widget-text-color: var(--body-text-color);
+    --event-widget-item-border-color: rgba(53, 53, 53, 0.5);
+    --event-widget-border-color: rgba(1, 4, 9, 0.5);
+
+    /* Search */
+    --search-result-text-lite-color: initial;
+
+    /* Bulk Selection */
+    --bulk-selection-text-color: var(--navbar-text-color);
+    --bulk-selection-highlight-text-color: var(--primary-color);
+
+    /* List Card Item */
+    --card-list-item-bg-color: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.15) 1%, rgba(0,0,0,0) 100%);
 }

UI/Web/src/theme/utilities/_global.scss

@@ -13,6 +13,7 @@ body {
 
 hr {
     background-color: var(--hr-color);
+    border-top: 0px;
 }
 
 .accent {

UI/Web/tsconfig.json

@@ -16,7 +16,7 @@
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "ES6",
+    "target": "es2020",
     "module": "es2020",
     "lib": [
       "es2019",
@@ -29,6 +29,10 @@
     "strictInputAccessModifiers": true,
     "strictTemplates": true,
     "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "extendedDiagnostics": {
+      "nullishCoalescingNotNullable": "warning",
+    }
+    
   }
 }