Fixed a bad highlight color and fixed 5 missing localization areas.

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

@@ -469,7 +469,7 @@ export class ActionService implements OnDestroy {
       this.readingListModalRef.componentInstance.seriesId = seriesId;
       this.readingListModalRef.componentInstance.volumeIds = volumes.map(v => v.id);
       this.readingListModalRef.componentInstance.chapterIds = chapters?.map(c => c.id);
-      this.readingListModalRef.componentInstance.title = 'Multiple Selections';
+      this.readingListModalRef.componentInstance.title = translate('action.multiple-selections');
       this.readingListModalRef.componentInstance.type = ADD_FLOW.Multiple;
 
 
@@ -509,7 +509,7 @@ export class ActionService implements OnDestroy {
     if (this.readingListModalRef != null) { return; }
       this.readingListModalRef = this.modalService.open(AddToListModalComponent, { scrollable: true, size: 'md', fullscreen: 'md' });
       this.readingListModalRef.componentInstance.seriesIds = series.map(v => v.id);
-      this.readingListModalRef.componentInstance.title = 'Multiple Selections';
+      this.readingListModalRef.componentInstance.title = translate('action.multiple-selections');
       this.readingListModalRef.componentInstance.type = ADD_FLOW.Multiple_Series;
 
 
@@ -537,7 +537,7 @@ export class ActionService implements OnDestroy {
     if (this.collectionModalRef != null) { return; }
       this.collectionModalRef = this.modalService.open(BulkAddToCollectionComponent, { scrollable: true, size: 'md', windowClass: 'collection', fullscreen: 'md' });
       this.collectionModalRef.componentInstance.seriesIds = series.map(v => v.id);
-      this.collectionModalRef.componentInstance.title = 'New Collection';
+      this.collectionModalRef.componentInstance.title = translate('action.new-collection');
 
       this.collectionModalRef.closed.pipe(take(1)).subscribe(() => {
         this.collectionModalRef = null;

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

@@ -6,7 +6,7 @@ <h4 class="modal-title" id="modal-basic-title">{{t('title')}}</h4>
   </div>
   <form style="width: 100%" [formGroup]="listForm">
     <div class="modal-body">
-      @if (lists.length >= 5) {
+      @if (lists.length >= MaxItems) {
         <div class="mb-3">
           <label for="filter" class="form-label">{{t('filter-label')}}</label>
           <div class="input-group">

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

@@ -1,5 +1,5 @@
 .clickable:hover, .clickable:focus {
-    background-color: lightgreen;
+    background-color: var(--list-group-hover-bg-color, --primary-color);
 }
 
 .collection {

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

@@ -35,6 +35,7 @@ export class BulkAddToCollectionComponent implements OnInit, AfterViewInit {
   private readonly collectionService = inject(CollectionTagService);
   private readonly toastr = inject(ToastrService);
   private readonly cdRef = inject(ChangeDetectorRef);
+  protected readonly MaxItems = 8;
 
   @Input({required: true}) title!: string;
   /**

UI/Web/src/app/statistics/_components/user-stats-info-cards/user-stats-info-cards.component.ts

@@ -8,7 +8,7 @@ import { DecimalPipe } from '@angular/common';
 import { IconAndTitleComponent } from '../../../shared/icon-and-title/icon-and-title.component';
 import {AccountService} from "../../../_services/account.service";
 import {CompactNumberPipe} from "../../../_pipes/compact-number.pipe";
-import {TranslocoDirective} from "@ngneat/transloco";
+import {translate, TranslocoDirective} from "@ngneat/transloco";
 
 @Component({
     selector: 'app-user-stats-info-cards',
@@ -33,17 +33,23 @@ export class UserStatsInfoCardsComponent {
     const numberPipe = new CompactNumberPipe();
     this.statsService.getPagesPerYear().subscribe(yearCounts => {
       const ref = this.modalService.open(GenericListModalComponent, { scrollable: true });
-      ref.componentInstance.items = yearCounts.map(t => `${t.name}: ${numberPipe.transform(t.value)} pages`);
-      ref.componentInstance.title = 'Pages Read By Year';
+      ref.componentInstance.items = yearCounts.map(t => {
+        const countStr = translate('user-stats-info-cards.pages-count', {num: numberPipe.transform(t.value)});
+        return `${t.name}: ${countStr})`;
+      });
+      ref.componentInstance.title = translate('user-stats-info-cards.pages-read-by-year-title');
     });
   }
 
   openWordByYearList() {
     const numberPipe = new CompactNumberPipe();
     this.statsService.getWordsPerYear().subscribe(yearCounts => {
       const ref = this.modalService.open(GenericListModalComponent, { scrollable: true });
-      ref.componentInstance.items = yearCounts.map(t => `${t.name}: ${numberPipe.transform(t.value)} words`);
-      ref.componentInstance.title = 'Words Read By Year';
+      ref.componentInstance.items = yearCounts.map(t => {
+        const countStr = translate('user-stats-info-cards.words-count', {num: numberPipe.transform(t.value)});
+        return `${t.name}: ${countStr})`;
+      });
+      ref.componentInstance.title = translate('user-stats-info-cards.words-read-by-year-title');
     });
   }
 }

UI/Web/src/assets/langs/en.json

@@ -370,8 +370,11 @@
         "chapters-read-tooltip": "{{user-stats-info-cards.chapters-read-label}}: {{value}}",
         "avg-reading-per-week-label": "Average Reading / Week",
         "last-active-label": "Last Active",
-        "chapters": "{{value}} chapters"
-
+        "chapters": "{{value}} chapters",
+        "pages-read-by-year-title": "Pages Read By Year",
+        "words-read-by-year-title": "Words Read By Year",
+        "words-count": "{{num}} words",
+        "pages-count": "{{num}} pages"
     },
 
     "user-stats": {
@@ -2306,7 +2309,9 @@
         "mark-visible": "Mark as Visible",
         "mark-invisible": "Mark as Invisible",
         "unpromote": "Un-Promote",
-        "promote": "Promote"
+        "promote": "Promote",
+        "new-collection": "New Collection",
+        "multiple-selections": "Multiple Selections"
     },
 
     "preferences": {