Smart Collection UI Changes (#3332)

UI/Web/src/app/_single-module/edit-chapter-modal/edit-chapter-modal.component.html

@@ -123,7 +123,7 @@
                     <div class="mb-3">
                       <app-setting-item [title]="t('release-date-label')" [toggleOnViewClick]="false" [showEdit]="false">
                         <ng-template #view>
-                          <div class="input-group"  [ngClass]="{'lock-active': chapter.releaseDateLocked}">
+                          <div class="input-group" [ngClass]="{'lock-active': chapter.releaseDateLocked}">
                             <ng-container [ngTemplateOutlet]="lock" [ngTemplateOutletContext]="{ item: chapter, field: 'releaseDateLocked' }"></ng-container>
                             <input
                               class="form-control"

UI/Web/src/app/_single-module/smart-collection-drawer/smart-collection-drawer.component.html

@@ -0,0 +1,40 @@
+<ng-container *transloco="let t">
+  <div class="offcanvas-header">
+    <h5 class="offcanvas-title">
+      {{collection.title}}
+    </h5>
+    <button type="button" class="btn-close text-reset" [attr.aria-label]="t('common.close')" (click)="close()"></button>
+  </div>
+
+  <div class="offcanvas-body">
+
+    <div class="mb-3">
+      <app-setting-item [title]="t('edit-collection-tags.last-sync-title')" [showEdit]="false" [canEdit]="false"
+                        [subtitle]="t('edit-collection-tags.last-sync-tooltip')">
+        <ng-template #view>
+          {{collection.lastSyncUtc | utcToLocalTime | date:'shortDate' | defaultDate}}
+        </ng-template>
+      </app-setting-item>
+    </div>
+
+
+    <div class="mb-3">
+      <app-setting-item [title]="t('edit-collection-tags.series-tab')" [showEdit]="false" [canEdit]="false">
+        <ng-template #titleExtra>
+          <span class="badge rounded-pill text-bg-primary ms-1" style="font-size: 11px">{{collection.totalSourceCount - series.length}} / {{collection.totalSourceCount | number}}</span>
+        </ng-template>
+
+        <ng-template #view>
+          @if(collection.missingSeriesFromSource) {
+            <p [innerHTML]="collection.missingSeriesFromSource | safeHtml"></p>
+          }
+          @for(s of series; track s.name) {
+            <div class="row g-0">
+              <del><a [routerLink]="['library', s.libraryId, 'series', s.id]" target="_blank" class="strike">{{s.name}}</a></del>
+            </div>
+          }
+        </ng-template>
+      </app-setting-item>
+    </div>
+  </div>
+</ng-container>

UI/Web/src/app/_single-module/smart-collection-drawer/smart-collection-drawer.component.scss

@@ -0,0 +1,5 @@
+:host {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}

UI/Web/src/app/_single-module/smart-collection-drawer/smart-collection-drawer.component.ts

@@ -0,0 +1,58 @@
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnInit} from '@angular/core';
+import {NgbActiveOffcanvas, NgbTooltip} from "@ng-bootstrap/ng-bootstrap";
+import {UserCollection} from "../../_models/collection-tag";
+import {ImageComponent} from "../../shared/image/image.component";
+import {LoadingComponent} from "../../shared/loading/loading.component";
+import {MetadataDetailComponent} from "../../series-detail/_components/metadata-detail/metadata-detail.component";
+import {DatePipe, DecimalPipe, NgOptimizedImage} from "@angular/common";
+import {ProviderImagePipe} from "../../_pipes/provider-image.pipe";
+import {PublicationStatusPipe} from "../../_pipes/publication-status.pipe";
+import {ReadMoreComponent} from "../../shared/read-more/read-more.component";
+import {TranslocoDirective} from "@jsverse/transloco";
+import {Series} from "../../_models/series";
+import {SafeHtmlPipe} from "../../_pipes/safe-html.pipe";
+import {RouterLink} from "@angular/router";
+import {DefaultDatePipe} from "../../_pipes/default-date.pipe";
+import {UtcToLocalTimePipe} from "../../_pipes/utc-to-local-time.pipe";
+import {SettingItemComponent} from "../../settings/_components/setting-item/setting-item.component";
+
+@Component({
+  selector: 'app-smart-collection-drawer',
+  standalone: true,
+  imports: [
+    ImageComponent,
+    LoadingComponent,
+    MetadataDetailComponent,
+    NgOptimizedImage,
+    NgbTooltip,
+    ProviderImagePipe,
+    PublicationStatusPipe,
+    ReadMoreComponent,
+    TranslocoDirective,
+    SafeHtmlPipe,
+    RouterLink,
+    DatePipe,
+    DefaultDatePipe,
+    UtcToLocalTimePipe,
+    SettingItemComponent,
+    DecimalPipe
+  ],
+  templateUrl: './smart-collection-drawer.component.html',
+  styleUrl: './smart-collection-drawer.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SmartCollectionDrawerComponent implements OnInit {
+  private readonly activeOffcanvas = inject(NgbActiveOffcanvas);
+  private readonly cdRef = inject(ChangeDetectorRef);
+
+  @Input({required: true}) collection!: UserCollection;
+  @Input({required: true}) series: Series[] = [];
+
+  ngOnInit() {
+
+  }
+
+  close() {
+    this.activeOffcanvas.close();
+  }
+}