New UX Part 1.5 (#3105)

UI/Web/src/app/_pipes/age-rating.pipe.ts

@@ -2,7 +2,7 @@ import {inject, Pipe, PipeTransform} from '@angular/core';
 import { Observable, of } from 'rxjs';
 import { AgeRating } from '../_models/metadata/age-rating';
 import { AgeRatingDto } from '../_models/metadata/age-rating-dto';
-import {TranslocoService} from "@ngneat/transloco";
+import {TranslocoService} from "@jsverse/transloco";
 
 @Pipe({
   name: 'ageRating',

UI/Web/src/app/_pipes/book-page-layout-mode.pipe.ts

@@ -1,5 +1,5 @@
 import { Pipe, PipeTransform } from '@angular/core';
-import {translate} from "@ngneat/transloco";
+import {translate} from "@jsverse/transloco";
 import {BookPageLayoutMode} from "../_models/readers/book-page-layout-mode";
 
 @Pipe({

UI/Web/src/app/_pipes/cbl-conflict-reason.pipe.ts

@@ -1,7 +1,7 @@
 import {inject, Pipe, PipeTransform} from '@angular/core';
 import { CblBookResult } from 'src/app/_models/reading-list/cbl/cbl-book-result';
 import { CblImportReason } from 'src/app/_models/reading-list/cbl/cbl-import-reason.enum';
-import {TranslocoService} from "@ngneat/transloco";
+import {TranslocoService} from "@jsverse/transloco";
 
 const failIcon = '<i aria-hidden="true" class="reading-list-fail--item fa-solid fa-circle-xmark me-1"></i>';
 const successIcon = '<i aria-hidden="true" class="reading-list-success--item fa-solid fa-circle-check me-1"></i>';

UI/Web/src/app/_pipes/cbl-import-result.pipe.ts

@@ -1,6 +1,6 @@
 import {inject, Pipe, PipeTransform} from '@angular/core';
 import { CblImportResult } from 'src/app/_models/reading-list/cbl/cbl-import-result.enum';
-import {TranslocoService} from "@ngneat/transloco";
+import {TranslocoService} from "@jsverse/transloco";
 
 @Pipe({
   name: 'cblImportResult',

UI/Web/src/app/_pipes/cover-image-size.pipe.ts

@@ -1,6 +1,6 @@
 import {Pipe, PipeTransform} from '@angular/core';
 import {CoverImageSize} from "../admin/_models/cover-image-size";
-import {translate} from "@ngneat/transloco";
+import {translate} from "@jsverse/transloco";
 
 @Pipe({
   name: 'coverImageSize',

UI/Web/src/app/_pipes/day-of-week.pipe.ts

@@ -1,6 +1,6 @@
 import {Pipe, PipeTransform} from '@angular/core';
 import { DayOfWeek } from 'src/app/_services/statistics.service';
-import {translate} from "@ngneat/transloco";
+import {translate} from "@jsverse/transloco";
 
 @Pipe({
   name: 'dayOfWeek',

UI/Web/src/app/_pipes/default-date.pipe.ts

@@ -1,5 +1,5 @@
 import { Pipe, PipeTransform } from '@angular/core';
-import {TranslocoService} from "@ngneat/transloco";
+import {TranslocoService} from "@jsverse/transloco";
 
 @Pipe({
   name: 'defaultDate',

UI/Web/src/app/_pipes/device-platform.pipe.ts

@@ -1,6 +1,6 @@
 import {inject, Pipe, PipeTransform} from '@angular/core';
 import { DevicePlatform } from 'src/app/_models/device/device-platform';
-import {TranslocoService} from "@ngneat/transloco";
+import {TranslocoService} from "@jsverse/transloco";
 
 @Pipe({
     name: 'devicePlatform',

UI/Web/src/app/_pipes/file-type-group.pipe.ts

@@ -1,6 +1,6 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import {FileTypeGroup} from "../_models/library/file-type-group.enum";
-import {translate} from "@ngneat/transloco";
+import {translate} from "@jsverse/transloco";
 
 @Pipe({
   name: 'fileTypeGroup',

UI/Web/src/app/_pipes/filter-comparison.pipe.ts

@@ -1,6 +1,6 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import { FilterComparison } from 'src/app/_models/metadata/v2/filter-comparison';
-import {translate} from "@ngneat/transloco";
+import {translate} from "@jsverse/transloco";
 
 @Pipe({
   name: 'filterComparison',

UI/Web/src/app/_pipes/filter-field.pipe.ts

@@ -1,6 +1,6 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import { FilterField } from 'src/app/_models/metadata/v2/filter-field';
-import {translate} from "@ngneat/transloco";
+import {translate} from "@jsverse/transloco";
 
 @Pipe({
   name: 'filterField',

UI/Web/src/app/_pipes/layout-mode.pipe.ts

@@ -1,5 +1,5 @@
 import { Pipe, PipeTransform } from '@angular/core';
-import {translate} from "@ngneat/transloco";
+import {translate} from "@jsverse/transloco";
 import {LayoutMode} from "../manga-reader/_models/layout-mode";
 
 @Pipe({

UI/Web/src/app/_pipes/library-type.pipe.ts

@@ -1,6 +1,6 @@
 import {inject, Pipe, PipeTransform} from '@angular/core';
 import { LibraryType } from '../_models/library/library';
-import {TranslocoService} from "@ngneat/transloco";
+import {TranslocoService} from "@jsverse/transloco";
 
 /**
  * Returns the name of the LibraryType

UI/Web/src/app/_pipes/manga-format.pipe.ts

@@ -1,6 +1,6 @@
 import {Pipe, PipeTransform} from '@angular/core';
 import { MangaFormat } from '../_models/manga-format';
-import {TranslocoService} from "@ngneat/transloco";
+import {TranslocoService} from "@jsverse/transloco";
 
 /**
  * Returns the string name for the format

UI/Web/src/app/_pipes/page-layout-mode.pipe.ts

@@ -1,6 +1,6 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import {PageLayoutMode} from "../_models/page-layout-mode";
-import {translate} from "@ngneat/transloco";
+import {translate} from "@jsverse/transloco";
 
 @Pipe({
   name: 'pageLayoutMode',

UI/Web/src/app/_pipes/page-split-option.pipe.ts

@@ -1,5 +1,5 @@
 import { Pipe, PipeTransform } from '@angular/core';
-import {translate} from "@ngneat/transloco";
+import {translate} from "@jsverse/transloco";
 import {PageSplitOption} from "../_models/preferences/page-split-option";
 
 @Pipe({

UI/Web/src/app/_pipes/pdf-scroll-mode.pipe.ts

@@ -1,5 +1,5 @@
 import { Pipe, PipeTransform } from '@angular/core';
-import {translate} from "@ngneat/transloco";
+import {translate} from "@jsverse/transloco";
 import {PdfScrollMode} from "../_models/preferences/pdf-scroll-mode";
 
 @Pipe({

UI/Web/src/app/_pipes/pdf-spread-mode.pipe.ts

@@ -1,6 +1,6 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import {PdfSpreadMode} from "../_models/preferences/pdf-spread-mode";
-import {translate} from "@ngneat/transloco";
+import {translate} from "@jsverse/transloco";
 
 @Pipe({
   name: 'pdfSpreadMode',

UI/Web/src/app/_pipes/pdf-theme.pipe.ts

@@ -1,6 +1,6 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import {PdfTheme} from "../_models/preferences/pdf-theme";
-import {translate} from "@ngneat/transloco";
+import {translate} from "@jsverse/transloco";
 
 @Pipe({
   name: 'pdfTheme',

UI/Web/src/app/_pipes/person-role.pipe.ts

@@ -1,6 +1,6 @@
 import {inject, Pipe, PipeTransform} from '@angular/core';
 import { PersonRole } from '../_models/metadata/person';
-import {TranslocoService} from "@ngneat/transloco";
+import {TranslocoService} from "@jsverse/transloco";
 
 @Pipe({
   name: 'personRole',

UI/Web/src/app/_pipes/publication-status.pipe.ts

@@ -1,6 +1,6 @@
 import {Pipe, PipeTransform} from '@angular/core';
 import { PublicationStatus } from '../_models/metadata/publication-status';
-import {TranslocoService} from "@ngneat/transloco";
+import {TranslocoService} from "@jsverse/transloco";
 
 @Pipe({
   name: 'publicationStatus',

UI/Web/src/app/_pipes/reading-direction.pipe.ts

@@ -1,6 +1,6 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import {ReadingDirection} from "../_models/preferences/reading-direction";
-import {translate} from "@ngneat/transloco";
+import {translate} from "@jsverse/transloco";
 
 @Pipe({
   name: 'readingDirection',
@@ -11,7 +11,7 @@ export class ReadingDirectionPipe implements PipeTransform {
   transform(value: ReadingDirection): string {
     switch (value) {
       case ReadingDirection.LeftToRight: return translate('preferences.left-to-right');
-      case ReadingDirection.RightToLeft: return translate('preferences.right-to-right');
+      case ReadingDirection.RightToLeft: return translate('preferences.right-to-left');
     }
   }
 

UI/Web/src/app/_pipes/reading-mode.pipe.ts

@@ -1,6 +1,6 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import {ReaderMode} from "../_models/preferences/reader-mode";
-import {translate} from "@ngneat/transloco";
+import {translate} from "@jsverse/transloco";
 
 @Pipe({
   name: 'readerMode',
@@ -10,7 +10,7 @@ export class ReaderModePipe implements PipeTransform {
 
   transform(value: ReaderMode): string {
     switch (value) {
-      case ReaderMode.UpDown: return translate('preferences.up-down');
+      case ReaderMode.UpDown: return translate('preferences.up-to-down');
       case ReaderMode.Webtoon: return translate('preferences.webtoon');
       case ReaderMode.LeftRight: return translate('preferences.left-to-right');
     }

UI/Web/src/app/_pipes/relationship.pipe.ts

@@ -1,6 +1,6 @@
 import {inject, Pipe, PipeTransform} from '@angular/core';
 import { RelationKind } from '../_models/series-detail/relation-kind';
-import {TranslocoService} from "@ngneat/transloco";
+import {TranslocoService} from "@jsverse/transloco";
 
 @Pipe({
   name: 'relationship',

UI/Web/src/app/_pipes/scaling-option.pipe.ts

@@ -1,5 +1,5 @@
 import { Pipe, PipeTransform } from '@angular/core';
-import {translate} from "@ngneat/transloco";
+import {translate} from "@jsverse/transloco";
 import {ScalingOption} from "../_models/preferences/scaling-option";
 
 @Pipe({

UI/Web/src/app/_pipes/scrobble-event-type.pipe.ts

@@ -1,6 +1,6 @@
 import {inject, Pipe, PipeTransform} from '@angular/core';
 import {ScrobbleEventType} from "../_models/scrobbling/scrobble-event";
-import {TranslocoService} from "@ngneat/transloco";
+import {TranslocoService} from "@jsverse/transloco";
 
 @Pipe({
   name: 'scrobbleEventType',

UI/Web/src/app/_pipes/setting-fragment.pipe.ts

@@ -1,6 +1,6 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import {SettingsTabId} from "../sidenav/preference-nav/preference-nav.component";
-import {translate} from "@ngneat/transloco";
+import {translate} from "@jsverse/transloco";
 
 /**
  * Translates the fragment for Settings to a User title

UI/Web/src/app/_pipes/site-theme-provider.pipe.ts

@@ -1,6 +1,6 @@
 import {inject, Pipe, PipeTransform} from '@angular/core';
 import { ThemeProvider } from 'src/app/_models/preferences/site-theme';
-import {TranslocoService} from "@ngneat/transloco";
+import {TranslocoService} from "@jsverse/transloco";
 
 
 @Pipe({

UI/Web/src/app/_pipes/sort-field.pipe.ts

@@ -1,6 +1,6 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import {SortField} from "../_models/metadata/series-filter";
-import {TranslocoService} from "@ngneat/transloco";
+import {TranslocoService} from "@jsverse/transloco";
 
 @Pipe({
   name: 'sortField',

UI/Web/src/app/_pipes/stream-name.pipe.ts

@@ -1,5 +1,5 @@
 import { Pipe, PipeTransform } from '@angular/core';
-import {translate} from "@ngneat/transloco";
+import {translate} from "@jsverse/transloco";
 
 @Pipe({
   name: 'streamName',

UI/Web/src/app/_pipes/time-ago.pipe.ts

@@ -1,5 +1,5 @@
 import {ChangeDetectorRef, NgZone, OnDestroy, Pipe, PipeTransform} from '@angular/core';
-import {TranslocoService} from "@ngneat/transloco";
+import {TranslocoService} from "@jsverse/transloco";
 
 /**
  * MIT License

UI/Web/src/app/_pipes/time-duration.pipe.ts

@@ -1,5 +1,5 @@
 import {inject, Pipe, PipeTransform} from '@angular/core';
-import {TranslocoService} from "@ngneat/transloco";
+import {TranslocoService} from "@jsverse/transloco";
 
 /**
  * Converts hours -> days, months, years, etc

UI/Web/src/app/_pipes/writing-style.pipe.ts

@@ -1,5 +1,5 @@
 import { Pipe, PipeTransform } from '@angular/core';
-import {translate} from "@ngneat/transloco";
+import {translate} from "@jsverse/transloco";
 import {WritingStyle} from "../_models/preferences/writing-style";
 
 @Pipe({