Kavita+ Tweaks (#2595)

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() {}
 }