Merge branch 'feature/series-detail-ux-2' of https://github.com/Karea…

…dita/Kavita into feature/series-detail-ux-2

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

@@ -55,14 +55,25 @@
         </div>
       </div>
     </div>
-    <div class="card-body meta-title" [ngbTooltip]="chapter.titleName.length > 34 ? chapter.titleName : null">
-        <div class="card-content d-flex justify-content-center align-items-center text-center" style="width:100%;min-height:58px;" [ngbTooltip]="chapter.titleName">
-          {{chapter.titleName | defaultValue}}
+
+    @if (chapter.isSpecial) {
+      <div class="card-body meta-title" [ngbTooltip]="chapter.title.length > 34 ? chapter.title : null">
+        <div class="card-content d-flex justify-content-center align-items-center text-center" style="width:100%;min-height:58px;">
+          {{chapter.title || chapter.range}}
         </div>
-    </div>
+      </div>
+
+    } @else if (chapter.titleName) {
+      <div class="card-body meta-title" [ngbTooltip]="chapter.titleName.length > 34 ? chapter.titleName : null">
+        <div class="card-content d-flex justify-content-center align-items-center text-center" style="width:100%;min-height:58px;">
+          {{chapter.titleName}}
+        </div>
+      </div>
+    }
+
 
     <div class="card-title-container">
-        <span class="card-title" id="{{chapter.id}}" tabindex="0">
+        <span class="card-title" id="{{chapter.id}}" tabindex="0" [ngbTooltip]="chapter.isSpecial ? (chapter.title || chapter.range) : null">
           <a class="dark-exempt btn-icon" routerLink="/library/{{libraryId}}/series/{{seriesId}}/chapter/{{chapter.id}}">
             @if (chapter.isSpecial) {
              {{chapter.title || chapter.range}}

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

@@ -10,9 +10,7 @@ import {
 } from '@angular/core';
 import {ImageService} from "../../_services/image.service";
 import {BulkSelectionService} from "../bulk-selection.service";
-import {LibraryService} from "../../_services/library.service";
 import {DownloadEvent, DownloadService} from "../../shared/_services/download.service";
-import {UtilityService} from "../../shared/_services/utility.service";
 import {EVENTS, MessageHubService} from "../../_services/message-hub.service";
 import {AccountService} from "../../_services/account.service";
 import {ScrollService} from "../../_services/scroll.service";
@@ -34,6 +32,7 @@ import {DefaultValuePipe} from "../../_pipes/default-value.pipe";
 import {filter, map} from "rxjs/operators";
 import {UserProgressUpdateEvent} from "../../_models/events/user-progress-update-event";
 import {ReaderService} from "../../_services/reader.service";
+import {LibraryType} from "../../_models/library/library";
 
 @Component({
   selector: 'app-chapter-card',
@@ -71,6 +70,7 @@ export class ChapterCardComponent implements OnInit {
   @Input({required: true}) libraryId: number = 0;
   @Input({required: true}) seriesId: number = 0;
   @Input({required: true}) chapter!: Chapter;
+  @Input({required: true}) libraryType!: LibraryType;
   /**
    * Any actions to perform on the card
    */
@@ -203,4 +203,5 @@ export class ChapterCardComponent implements OnInit {
   }
 
 
+  protected readonly LibraryType = LibraryType;
 }

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

@@ -1,10 +1,3 @@
-<!--<app-card-item [title]="data.name" [actions]="actions" [suppressLibraryLink]="suppressLibraryLink" [imageUrl]="imageUrl"-->
-<!--               [entity]="data" [total]="data.pages" [read]="data.pagesRead" (clicked)="handleClick()"-->
-<!--               [allowSelection]="allowSelection" (selection)="selection.emit(selected)" [selected]="selected"-->
-<!--               [overlayInformation]="(relation | relationship)"-->
-<!--&gt;</app-card-item>-->
-
-
 <ng-container *transloco="let t; read: 'card-item'">
   <div class="card-item-container card position-relative {{selected ? 'selected-highlight' : ''}}">
     <div class="overlay" (click)="handleClick()">

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

@@ -22,7 +22,7 @@ import {CommonModule} from "@angular/common";
 import {CardItemComponent} from "../card-item/card-item.component";
 import {RelationshipPipe} from "../../_pipes/relationship.pipe";
 import {Device} from "../../_models/device/device";
-import {translate, TranslocoDirective, TranslocoService} from "@jsverse/transloco";
+import {translate, TranslocoDirective} from "@jsverse/transloco";
 import {SeriesPreviewDrawerComponent} from "../../_single-module/series-preview-drawer/series-preview-drawer.component";
 import {CardActionablesComponent} from "../../_single-module/card-actionables/card-actionables.component";
 import {DefaultValuePipe} from "../../_pipes/default-value.pipe";

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

@@ -50,6 +50,12 @@
       </div>
     </div>
 
+    <div class="card-body meta-title">
+      <div class="card-content d-flex justify-content-center align-items-center text-center" style="width:100%;min-height:58px;">
+        {{volume.name}}
+      </div>
+    </div>
+
     <div class="card-title-container">
       <span class="card-title" id="{{volume.id}}" tabindex="0">
       <a class="dark-exempt btn-icon" routerLink="/library/{{libraryId}}/series/{{seriesId}}/chapter/{{volume.id}}">

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

@@ -34,23 +34,25 @@ import {UserProgressUpdateEvent} from "../../_models/events/user-progress-update
 import {Volume} from "../../_models/volume";
 import {UtilityService} from "../../shared/_services/utility.service";
 import {LibraryType} from "../../_models/library/library";
+import {RelationshipPipe} from "../../_pipes/relationship.pipe";
 
 @Component({
   selector: 'app-volume-card',
   standalone: true,
-    imports: [
-        CardActionablesComponent,
-        DecimalPipe,
-        DefaultValuePipe,
-        DownloadIndicatorComponent,
-        EntityTitleComponent,
-        ImageComponent,
-        NgbProgressbar,
-        NgbTooltip,
-        RouterLink,
-        Select2Module,
-        TranslocoDirective
-    ],
+  imports: [
+    CardActionablesComponent,
+    DecimalPipe,
+    DefaultValuePipe,
+    DownloadIndicatorComponent,
+    EntityTitleComponent,
+    ImageComponent,
+    NgbProgressbar,
+    NgbTooltip,
+    RouterLink,
+    Select2Module,
+    TranslocoDirective,
+    RelationshipPipe
+  ],
   templateUrl: './volume-card.component.html',
   styleUrl: './volume-card.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush

UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html

@@ -517,6 +517,7 @@ <h4 class="title mb-2">
   <app-chapter-card class="col-auto mt-2 mb-2" [chapter]="item" [seriesId]="series.id"
                     [libraryId]="libraryId"
                     [actions]="chapterActions"
+                    [libraryType]="libraryType"
                     (selection)="bulkSelectionService.handleCardSelection('chapter', scroll.viewPortInfo.startIndexWithBuffer + idx, totalLength, $event)"
                     [selected]="bulkSelectionService.isCardSelected('chapter', scroll.viewPortInfo.startIndexWithBuffer + idx)" [allowSelection]="true">
   </app-chapter-card>
@@ -534,44 +535,8 @@ <h4 class="title mb-2">
   <app-chapter-card class="col-auto mt-2 mb-2" [chapter]="item" [seriesId]="series.id"
                     [libraryId]="libraryId"
                     [actions]="chapterActions"
+                    [libraryType]="libraryType"
                     (selection)="bulkSelectionService.handleCardSelection('special', scroll.viewPortInfo.startIndexWithBuffer + idx, totalLength, $event)"
                     [selected]="bulkSelectionService.isCardSelected('special', scroll.viewPortInfo.startIndexWithBuffer + idx)" [allowSelection]="true">
   </app-chapter-card>
-
-</ng-template>
-
-<ng-template #nonSpecialChapterListItem let-item>
-  <app-list-item [imageUrl]="imageService.getChapterCoverImage(item.id)" [libraryId]="libraryId"
-                 [seriesName]="series.name" [entity]="item"
-                 [actions]="chapterActions" [libraryType]="libraryType" imageWidth="130px" imageHeight=""
-                 [pagesRead]="item.pagesRead" [totalPages]="item.pages" (read)="openChapter(item)"
-                 [blur]="user?.preferences?.blurUnreadSummaries || false">
-    <ng-container title>
-      <app-entity-title [libraryType]="libraryType" [entity]="item" [seriesName]="series.name" [prioritizeTitleName]="false"></app-entity-title>
-    </ng-container>
-  </app-list-item>
-</ng-template>
-
-<ng-template #nonSpecialVolumeListItem let-item>
-  <app-list-item [imageUrl]="imageService.getVolumeCoverImage(item.id)" [libraryId]="libraryId"
-                 [seriesName]="series.name" [entity]="item"
-                 [actions]="volumeActions" [libraryType]="libraryType" imageWidth="130px" imageHeight=""
-                 [pagesRead]="item.pagesRead" [totalPages]="item.pages" (read)="openVolume(item)"
-                 [blur]="user?.preferences?.blurUnreadSummaries || false">
-    <ng-container title>
-      <app-entity-title [libraryType]="libraryType" [entity]="item" [seriesName]="series.name" [prioritizeTitleName]="false"></app-entity-title>
-    </ng-container>
-  </app-list-item>
-</ng-template>
-
-<ng-template #specialChapterListItem let-item>
-  <app-list-item [imageUrl]="imageService.getChapterCoverImage(item.id)" [libraryId]="libraryId"
-                 [seriesName]="series.name" [entity]="item"
-                 [actions]="chapterActions" [libraryType]="libraryType" imageWidth="130px" imageHeight=""
-                 [pagesRead]="item.pagesRead" [totalPages]="item.pages" (read)="openChapter(item)"
-                 [blur]="user?.preferences?.blurUnreadSummaries || false">
-    <ng-container title>
-      {{item.title || item.range}}
-    </ng-container>
-  </app-list-item>
 </ng-template>

UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.ts

@@ -3,12 +3,8 @@ import {
   DecimalPipe,
   DOCUMENT, JsonPipe,
   NgClass,
-  NgFor,
-  NgIf,
   NgOptimizedImage,
   NgStyle,
-  NgSwitch,
-  NgSwitchCase,
   NgTemplateOutlet
 } from '@angular/common';
 import {
@@ -87,11 +83,9 @@ import {PageLayoutMode} from 'src/app/_models/page-layout-mode';
 import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
 import {UserReview} from "../../../_single-module/review-card/user-review";
 import {LoadingComponent} from '../../../shared/loading/loading.component';
-import {ExternalListItemComponent} from '../../../cards/external-list-item/external-list-item.component';
 import {ExternalSeriesCardComponent} from '../../../cards/external-series-card/external-series-card.component';
 import {SeriesCardComponent} from '../../../cards/series-card/series-card.component';
 import {EntityTitleComponent} from '../../../cards/entity-title/entity-title.component';
-import {ListItemComponent} from '../../../cards/list-item/list-item.component';
 import {CardItemComponent} from '../../../cards/card-item/card-item.component';
 import {VirtualScrollerModule} from '@iharbeck/ngx-virtual-scroller';
 import {BulkOperationsComponent} from '../../../cards/bulk-operations/bulk-operations.component';
@@ -149,6 +143,7 @@ import {PublicationStatusPipe} from "../../../_pipes/publication-status.pipe";
 import {MetadataDetailRowComponent} from "../metadata-detail-row/metadata-detail-row.component";
 import {DownloadButtonComponent} from "../download-button/download-button.component";
 import {hasAnyCast} from "../../../_models/common/i-has-cast";
+import {EditVolumeModalComponent} from "../../../_single-module/edit-volume-modal/edit-volume-modal.component";
 
 interface RelatedSeriesPair {
   series: Series;
@@ -182,9 +177,9 @@ interface StoryLineItem {
   imports: [SideNavCompanionBarComponent, CardActionablesComponent, ReactiveFormsModule, NgStyle,
     TagBadgeComponent, ImageComponent, NgbTooltip, NgbProgressbar, NgbDropdown, NgbDropdownToggle, NgbDropdownMenu,
     NgbDropdownItem, SeriesMetadataDetailComponent, CarouselReelComponent, ReviewCardComponent, BulkOperationsComponent,
-    NgbNav, NgbNavItem, NgbNavLink, NgbNavContent, VirtualScrollerModule, NgFor, CardItemComponent, ListItemComponent,
-    EntityTitleComponent, SeriesCardComponent, ExternalSeriesCardComponent, ExternalListItemComponent, NgbNavOutlet,
-    LoadingComponent, DecimalPipe, TranslocoDirective, NgTemplateOutlet, NgSwitch, NgSwitchCase, NextExpectedCardComponent,
+    NgbNav, NgbNavItem, NgbNavLink, NgbNavContent, VirtualScrollerModule, CardItemComponent,
+    EntityTitleComponent, SeriesCardComponent, ExternalSeriesCardComponent,  NgbNavOutlet,
+    LoadingComponent, DecimalPipe, TranslocoDirective, NgTemplateOutlet, NextExpectedCardComponent,
     NgClass, NgOptimizedImage, ProviderImagePipe, AsyncPipe, PersonBadgeComponent, DetailsTabComponent, ChapterCardComponent,
     VolumeCardComponent, JsonPipe, AgeRatingPipe, DefaultValuePipe, ExternalRatingComponent, ReadMoreComponent, ReadTimePipe,
     RouterLink, TimeAgoPipe, AgeRatingImageComponent, CompactNumberPipe, IconAndTitleComponent, SafeHtmlPipe, BadgeExpanderComponent,
@@ -1023,7 +1018,7 @@ export class SeriesDetailComponent implements OnInit, AfterContentChecked {
   }
 
   openEditVolume(volume: Volume) {
-    const ref = this.modalService.open(EditChapterModalComponent, { size: 'xl' });
+    const ref = this.modalService.open(EditVolumeModalComponent, { size: 'xl' });
     ref.componentInstance.volume = volume;
     ref.componentInstance.libraryType = this.libraryType;
     ref.componentInstance.seriesId = this.series?.id;

UI/Web/src/app/volume-detail/volume-detail.component.html

@@ -133,7 +133,7 @@ <h4 class="title mb-2">
               <virtual-scroller #scroll [items]="volume.chapters" [bufferAmount]="1" [parentScroll]="scrollingBlock" [childHeight]="1">
                 <div class="card-container row g-0" #container>
                   @for(item of scroll.viewPortItems; let idx = $index; track item.id + '_' + item.pagesRead) {
-                    <app-chapter-card class="col-auto mt-2 mb-2" [chapter]="item" [seriesId]="seriesId" [libraryId]="libraryId"></app-chapter-card>
+                    <app-chapter-card class="col-auto mt-2 mb-2" [chapter]="item" [seriesId]="seriesId" [libraryId]="libraryId" [libraryType]="libraryType"></app-chapter-card>
                   }
                 </div>
               </virtual-scroller>