Kavita+ Tweaks (#2595)

UI/Web/package.json

@@ -13,17 +13,17 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.0.6",
+    "@angular/animations": "^17.0.8",
     "@angular/cdk": "^17.0.4",
-    "@angular/common": "^17.0.6",
-    "@angular/compiler": "^17.0.6",
-    "@angular/core": "^17.0.6",
-    "@angular/forms": "^17.0.6",
-    "@angular/localize": "^17.0.6",
-    "@angular/platform-browser": "^17.0.6",
-    "@angular/platform-browser-dynamic": "^17.0.6",
-    "@angular/router": "^17.0.6",
-    "@fortawesome/fontawesome-free": "^6.4.2",
+    "@angular/common": "^17.0.8",
+    "@angular/compiler": "^17.0.8",
+    "@angular/core": "^17.0.8",
+    "@angular/forms": "^17.0.8",
+    "@angular/localize": "^17.0.8",
+    "@angular/platform-browser": "^17.0.8",
+    "@angular/platform-browser-dynamic": "^17.0.8",
+    "@angular/router": "^17.0.8",
+    "@fortawesome/fontawesome-free": "^6.5.1",
     "@iharbeck/ngx-virtual-scroller": "^17.0.0",
     "@iplab/ngx-file-upload": "^17.0.0",
     "@microsoft/signalr": "^7.0.12",
@@ -42,7 +42,7 @@
     "luxon": "^3.4.4",
     "ng-circle-progress": "^1.7.1",
     "ng-lazyload-image": "^9.1.3",
-    "ng-select2-component": "^13.0.9",
+    "ng-select2-component": "^14.0.0",
     "ngx-color-picker": "^16.0.0",
     "ngx-extended-pdf-viewer": "^18.1.9",
     "ngx-file-drop": "^16.0.0",
@@ -58,17 +58,17 @@
     "zone.js": "^0.14.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.0.7",
-    "@angular-eslint/builder": "^17.1.1",
-    "@angular-eslint/eslint-plugin": "^17.1.1",
-    "@angular-eslint/eslint-plugin-template": "^17.1.1",
-    "@angular-eslint/schematics": "^17.1.1",
-    "@angular-eslint/template-parser": "^17.1.1",
-    "@angular/cli": "^17.0.7",
-    "@angular/compiler-cli": "^17.0.6",
+    "@angular-devkit/build-angular": "^17.0.9",
+    "@angular-eslint/builder": "^17.2.0",
+    "@angular-eslint/eslint-plugin": "^17.2.0",
+    "@angular-eslint/eslint-plugin-template": "^17.2.0",
+    "@angular-eslint/schematics": "^17.2.0",
+    "@angular-eslint/template-parser": "^17.2.0",
+    "@angular/cli": "^17.0.9",
+    "@angular/compiler-cli": "^17.0.8",
     "@types/d3": "^7.4.3",
     "@types/file-saver": "^2.0.7",
-    "@types/luxon": "^3.3.7",
+    "@types/luxon": "^3.4.0",
     "@types/node": "^20.10.0",
     "@typescript-eslint/eslint-plugin": "^6.13.0",
     "@typescript-eslint/parser": "^6.13.0",

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

@@ -6,6 +6,8 @@ import {environment} from "../../environments/environment";
 import {SideNavStream} from "../_models/sidenav/sidenav-stream";
 import {TextResonse} from "../_types/text-response";
 import {DashboardStream} from "../_models/dashboard/dashboard-stream";
+import {AccountService} from "./account.service";
+import {tap} from "rxjs/operators";
 
 @Injectable({
   providedIn: 'root'
@@ -34,9 +36,16 @@ export class NavService {
   private renderer: Renderer2;
   baseUrl = environment.apiUrl;
 
-  constructor(@Inject(DOCUMENT) private document: Document, rendererFactory: RendererFactory2, private httpClient: HttpClient) {
+  constructor(@Inject(DOCUMENT) private document: Document, rendererFactory: RendererFactory2, private httpClient: HttpClient, private accountService: AccountService) {
     this.renderer = rendererFactory.createRenderer(null, null);
-    this.showNavBar();
+
+    // To avoid flashing, let's check if we are authenticated before we show
+    this.accountService.currentUser$.subscribe(u => {
+      if (u) {
+        this.showNavBar();
+      }
+    });
+
     const sideNavState = (localStorage.getItem(this.localStorageSideNavKey) === 'true') || false;
     this.sideNavCollapseSource.next(sideNavState);
     this.showSideNav();

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

@@ -84,12 +84,19 @@ export class BookLineOverlayComponent implements OnInit {
     const selection = window.getSelection();
     if (!event.target) return;
 
+
+
     if ((selection === null || selection === undefined || selection.toString().trim() === '' || selection.toString().trim() === this.selectedText)) {
       if (this.selectedText !== '') {
         event.preventDefault();
         event.stopPropagation();
       }
-      this.reset();
+
+      const isRightClick = (event instanceof MouseEvent && event.button === 2);
+      if (!isRightClick) {
+        this.reset();
+      }
+
       return;
     }
 

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
 import { Validators, FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
 import { ToastrService } from 'ngx-toastr';
@@ -6,6 +6,7 @@ import { AccountService } from 'src/app/_services/account.service';
 import { NgIf } from '@angular/common';
 import { SplashContainerComponent } from '../splash-container/splash-container.component';
 import {TranslocoDirective} from "@ngneat/transloco";
+import {NavService} from "../../../_services/nav.service";
 
 @Component({
     selector: 'app-reset-password',
@@ -17,12 +18,19 @@ import {TranslocoDirective} from "@ngneat/transloco";
 })
 export class ResetPasswordComponent {
 
+  private readonly router = inject(Router);
+  private readonly accountService = inject(AccountService);
+  private readonly toastr = inject(ToastrService);
+  private readonly navService = inject(NavService);
+
   registerForm: FormGroup = new FormGroup({
     email: new FormControl('', [Validators.required, Validators.email]),
   });
 
-  constructor(private router: Router, private accountService: AccountService,
-    private toastr: ToastrService) {}
+  constructor() {
+    this.navService.hideNavBar();
+    this.navService.hideSideNav();
+  }
 
   submit() {
     const model = this.registerForm.get('email')?.value;

UI/Web/src/app/registration/_components/splash-container/splash-container.component.html

@@ -1,5 +1,5 @@
-<div class="mx-auto login">
-    
+<div class="mx-auto login" [ngStyle]="{'height': (navService.navbarVisible$ | async) ? 'calc(var(--vh, 1vh) * 100 - 57px)' : 'calc(var(--vh, 1vh) * 100)'}">
+
     <div class="row row-cols-4 row-cols-md-4 row-cols-sm-2 row-cols-xs-2">
         <div class="col align-self-center card p-3">
             <span>
@@ -17,4 +17,4 @@
 
     </div>
 
-</div>
+</div>

UI/Web/src/app/registration/_components/splash-container/splash-container.component.ts

@@ -1,10 +1,18 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
+import {AsyncPipe, NgStyle} from "@angular/common";
+import {NavService} from "../../../_services/nav.service";
 
 @Component({
-    selector: 'app-splash-container',
-    templateUrl: './splash-container.component.html',
-    styleUrls: ['./splash-container.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: true
+  selector: 'app-splash-container',
+  templateUrl: './splash-container.component.html',
+  styleUrls: ['./splash-container.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    NgStyle,
+    AsyncPipe
+  ],
+  standalone: true
 })
-export class SplashContainerComponent {}
+export class SplashContainerComponent {
+  protected readonly navService = inject(NavService);
+}

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

@@ -26,6 +26,4 @@ export class UserHoldsComponent {
   private readonly scrobblingService = inject(ScrobblingService);
   private readonly destroyRef = inject(DestroyRef);
   holds$ = this.scrobblingService.getHolds().pipe(takeUntilDestroyed(this.destroyRef), shareReplay());
-
-  constructor() {}
 }