New Year Bugs (#2513)

UI/Web/src/app/cards/bulk-operations/bulk-operations.component.html

@@ -1,6 +1,6 @@
 <ng-container *transloco="let t; read: 'bulk-operations'">
   <ng-container *ngIf="bulkSelectionService.selections$ | async as selectionCount">
-    <div *ngIf="selectionCount > 0" class="bulk-select mb-3 {{modalMode ? '' : 'fixed-top}}" [ngStyle]="{'margin-top': topOffset + 'px'}">
+    <div *ngIf="selectionCount > 0" class="bulk-select mb-3 {{modalMode ? '' : 'fixed-top'}}" [ngStyle]="{'margin-top': topOffset + 'px'}">
       <div class="d-flex justify-content-around align-items-center">
 
         <span class="highlight">

UI/Web/src/app/cards/card-item/card-item.component.html

@@ -1,30 +1,35 @@
 <ng-container *transloco="let t; read: 'card-item'">
   <div class="card-item-container card {{selected ? 'selected-highlight' : ''}}">
     <div class="overlay" (click)="handleClick($event)">
-      <ng-container *ngIf="total > 0 || suppressArchiveWarning">
+      @if (total > 0 || suppressArchiveWarning) {
         <app-image borderRadius=".25rem .25rem 0 0" height="230px" width="158px"  [imageUrl]="imageUrl"></app-image>
-      </ng-container>
-      <ng-container *ngIf="total === 0 && !suppressArchiveWarning">
+      } @else if (total === 0 && !suppressArchiveWarning) {
         <app-image borderRadius=".25rem .25rem 0 0" height="230px" width="158px" [imageUrl]="imageService.errorImage"></app-image>
-      </ng-container>
+      }
 
       <div class="progress-banner">
-        <p *ngIf="read > 0 && read < total && total > 0 && read !== total" ngbTooltip="{{((read / total) * 100) | number:'1.0-1'}}% Read">
-          <ngb-progressbar type="primary" height="5px" [value]="read" [max]="total"></ngb-progressbar>
-        </p>
+        @if (read > 0 && read < total && total > 0 && read !== total) {
+          <p ngbTooltip="{{((read / total) * 100) | number:'1.0-1'}}% Read">
+            <ngb-progressbar type="primary" height="5px" [value]="read" [max]="total"></ngb-progressbar>
+          </p>
+        }
+
         <span class="download">
           <app-download-indicator [download$]="download$"></app-download-indicator>
         </span>
       </div>
-      <div class="error-banner" *ngIf="total === 0 && !suppressArchiveWarning">
-        {{t('cannot-read')}}
-      </div>
 
-      <ng-container *ngIf="read === 0 && total > 0">
+      @if(total === 0 && !suppressArchiveWarning) {
+        <div class="error-banner">
+          {{t('cannot-read')}}
+        </div>
+      }
+
+      @if (read === 0 && total > 0) {
         <div class="badge-container">
           <div class="not-read-badge"></div>
         </div>
-      </ng-container>
+      }
 
       <div class="bulk-mode {{bulkSelectionService.hasSelections() ? 'always-show' : ''}}" (click)="handleSelection($event)" *ngIf="allowSelection">
         <input type="checkbox" class="form-check-input" attr.aria-labelledby="{{title}}_{{entity.id}}" [ngModel]="selected" [ngModelOptions]="{standalone: true}">
@@ -34,14 +39,13 @@
         <span class="badge bg-primary">{{count}}</span>
       </div>
       <div class="card-overlay"></div>
-      <ng-container *ngIf="overlayInformation | safeHtml as info">
+      @if (overlayInformation | safeHtml; as info) {
         <div class="overlay-information {{centerOverlay ? 'overlay-information--centered' : ''}}" *ngIf="info !== '' ||  info !== undefined">
           <div class="position-relative">
             <span class="card-title library mx-auto" style="width: auto;" [ngbTooltip]="info" placement="top" [innerHTML]="info"></span>
           </div>
         </div>
-      </ng-container>
-
+      }
     </div>
 
     <div class="card-body" *ngIf="title.length > 0 || actions.length > 0">

UI/Web/src/app/cards/card-item/card-item.component.ts

@@ -38,7 +38,7 @@ import {MangaFormatPipe} from "../../_pipes/manga-format.pipe";
 import {MangaFormatIconPipe} from "../../_pipes/manga-format-icon.pipe";
 import {SentenceCasePipe} from "../../_pipes/sentence-case.pipe";
 import {CommonModule} from "@angular/common";
-import {RouterLink} from "@angular/router";
+import {RouterLink, RouterLinkActive} from "@angular/router";
 import {TranslocoModule} from "@ngneat/transloco";
 import {CardActionablesComponent} from "../../_single-module/card-actionables/card-actionables.component";
 import {NextExpectedChapter} from "../../_models/series-detail/next-expected-chapter";
@@ -61,7 +61,8 @@ import {SafeHtmlPipe} from "../../_pipes/safe-html.pipe";
     SentenceCasePipe,
     RouterLink,
     TranslocoModule,
-    SafeHtmlPipe
+    SafeHtmlPipe,
+    RouterLinkActive
   ],
   templateUrl: './card-item.component.html',
   styleUrls: ['./card-item.component.scss'],

UI/Web/src/app/cards/external-series-card/external-series-card.component.html

@@ -14,19 +14,21 @@
         </ng-container>
 
         <div class="card-overlay"></div>
+
       </div>
 
-      <div class="card-body" *ngIf="data.name.length > 0">
-        <div>
-        <span class="card-title" placement="top" id="{{data.name}}" [ngbTooltip]="data.name" (click)="handleClick()" tabindex="0">
-          {{data.name}}
-        </span>
-          <span class="card-actions float-end">
-          <i class="fa fa-external-link-alt" aria-hidden="true"></i>
-        </span>
+      @if (data.name.length > 0) {
+        <div class="card-body">
+          <div>
+            <span class="card-title" placement="top" id="{{data.name}}" [ngbTooltip]="data.name" (click)="handleClick()" tabindex="0">
+              <img class="me-1" [ngSrc]="data.provider | providerImage" width="20" height="20" alt="">
+              {{data.name}}
+            </span>
+          </div>
+          <a #link class="card-title library" [href]="data.url" target="_blank" rel="noreferrer nofollow">{{t('open-external')}}</a>
         </div>
-        <a #link class="card-title library" [href]="data.url" target="_blank" rel="noreferrer nofollow">{{t('open-external')}}</a>
-      </div>
+      }
+
     </div>
 
   </ng-container>

UI/Web/src/app/cards/external-series-card/external-series-card.component.ts

@@ -5,7 +5,7 @@ import {
   Input,
   ViewChild
 } from '@angular/core';
-import {CommonModule} from '@angular/common';
+import {CommonModule, NgOptimizedImage} from '@angular/common';
 import {ExternalSeries} from "../../_models/series-detail/external-series";
 import {RouterLinkActive} from "@angular/router";
 import {ImageComponent} from "../../shared/image/image.component";
@@ -13,11 +13,13 @@ import {NgbOffcanvas, NgbProgressbar, NgbTooltip} from "@ng-bootstrap/ng-bootstr
 import {ReactiveFormsModule} from "@angular/forms";
 import {TranslocoDirective} from "@ngneat/transloco";
 import {SeriesPreviewDrawerComponent} from "../../_single-module/series-preview-drawer/series-preview-drawer.component";
+import {ProviderImagePipe} from "../../_pipes/provider-image.pipe";
+import {SafeHtmlPipe} from "../../_pipes/safe-html.pipe";
 
 @Component({
   selector: 'app-external-series-card',
   standalone: true,
-  imports: [CommonModule, ImageComponent, NgbProgressbar, NgbTooltip, ReactiveFormsModule, RouterLinkActive, TranslocoDirective],
+  imports: [CommonModule, ImageComponent, NgbProgressbar, NgbTooltip, ReactiveFormsModule, RouterLinkActive, TranslocoDirective, NgOptimizedImage, ProviderImagePipe, SafeHtmlPipe],
   templateUrl: './external-series-card.component.html',
   styleUrls: ['./external-series-card.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
@@ -30,6 +32,7 @@ export class ExternalSeriesCardComponent {
   @Input() previewOnClick: boolean = false;
   @ViewChild('link', {static: false}) link!: ElementRef<HTMLAnchorElement>;
 
+
   private readonly offcanvasService = inject(NgbOffcanvas);
 
   handleClick() {