-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+ @if (formGroup.get('query')?.value) {
+
+ }
+
+
+
+
+
+
+ {{ t('try') }}
+ anilist:159441
+ mal:20593
+ mangabaka:1331
+ hardcover:flatland
+
+
+
+
+
+
+
+
+
+ @if (bodyState() === 'results') {
+
+ {{ t('match-count', { count: matches().length }) }}
+
+ }
+
+
+
+ @switch (bodyState()) {
+ @case ('loading') {
+
+
+ {{ t('loading-alt') }}
-
-
-
-
-
-
-
-
- @if (!formGroup.get('dontMatch')?.value) {
-
- @for(item of matches(); track item.series.name) {
-
- } @empty {
- @if (!isLoading()) {
-
{{t('no-results')}}
+ }
+ @case ('empty') {
+
+
+
+ }
+ @case ('dont-match') {
+
+
+
+ }
+ @case ('no-results') {
+
+
+
+ }
+ @case ('results') {
+ @for (item of matches(); track item.series.name + '_' + item.series.provider) {
+
}
}
}
+
-
-
+
+
+
-
diff --git a/UI/Web/src/app/_single-module/match-series-modal/match-series-modal.component.scss b/UI/Web/src/app/_single-module/match-series-modal/match-series-modal.component.scss
index d3a1cb9a9..2929cf576 100644
--- a/UI/Web/src/app/_single-module/match-series-modal/match-series-modal.component.scss
+++ b/UI/Web/src/app/_single-module/match-series-modal/match-series-modal.component.scss
@@ -1,3 +1,87 @@
-.setting-section-break {
- margin: 0 !important;
-}
\ No newline at end of file
+.match-title-prefix {
+ opacity: 0.55;
+ font-weight: 500;
+}
+
+.match-subheader {
+ padding: 0.875rem 0 0.75rem;
+ border-bottom: 1px solid var(--hr-color);
+}
+
+.match-description {
+ color: var(--text-muted-color);
+ line-height: 1.5;
+}
+
+.in-kavita-chip {
+ padding: 0.375rem 0.625rem 0.375rem 0.375rem;
+ background: rgba(255, 255, 255, 0.04);
+ border: 1px solid var(--hr-color);
+ border-radius: 0.375rem;
+}
+
+.in-kavita-label {
+ font-size: 0.65625rem;
+ color: var(--text-muted-color);
+ letter-spacing: 0.06em;
+ line-height: 1.2;
+}
+
+.in-kavita-name {
+ font-size: 0.875rem;
+ color: var(--body-text-color);
+ line-height: 1.2;
+}
+
+.query-icon {
+ position: absolute;
+ left: 0.75rem;
+ color: var(--text-muted-color);
+ font-size: 0.8125rem;
+ pointer-events: none;
+}
+
+.query-input {
+ padding-left: 2.25rem;
+ padding-right: 2.25rem;
+}
+
+.query-clear {
+ position: absolute;
+ right: 0.5rem;
+ bottom: 0.6rem;
+ opacity: 0.5;
+
+ &:hover {
+ opacity: 1;
+ }
+}
+
+.provider-hints {
+ font-size: 0.75rem;
+ color: var(--text-muted-color);
+}
+
+.provider-hint {
+ padding: 0.125rem 0.4375rem;
+ border-radius: 0.25rem;
+ background: rgba(255, 255, 255, 0.06);
+ border: 1px solid rgba(255, 255, 255, 0.08);
+ color: var(--text-muted-color);
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+ font-size: 0.6875rem;
+}
+
+.match-count-bar {
+ font-size: 0.71875rem;
+ color: var(--text-muted-color);
+ text-transform: uppercase;
+ letter-spacing: 0.07em;
+ font-weight: 600;
+ padding: 0.5rem 0 0.25rem;
+}
+
+.match-body {
+ flex: 1;
+ padding-bottom: 0.5rem;
+}
diff --git a/UI/Web/src/app/_single-module/match-series-modal/match-series-modal.component.ts b/UI/Web/src/app/_single-module/match-series-modal/match-series-modal.component.ts
index c6c9cf395..c03f45667 100644
--- a/UI/Web/src/app/_single-module/match-series-modal/match-series-modal.component.ts
+++ b/UI/Web/src/app/_single-module/match-series-modal/match-series-modal.component.ts
@@ -1,106 +1,142 @@
-import {ChangeDetectionStrategy, Component, inject, input, OnInit, signal} from '@angular/core';
+import {ChangeDetectionStrategy, Component, computed, effect, inject, input, OnInit, signal} from '@angular/core';
import {Series} from "../../_models/series";
import {SeriesService} from "../../_services/series.service";
import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms";
-import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap";
+import {NgbActiveModal, NgbTooltip} from "@ng-bootstrap/ng-bootstrap";
import {translate, TranslocoDirective} from "@jsverse/transloco";
-import {MatchSeriesResultItemComponent} from "../match-series-result-item/match-series-result-item.component";
-import {LoadingComponent} from "../../shared/loading/loading.component";
import {ExternalSeriesMatch} from "../../_models/series-detail/external-series-match";
import {ToastrService} from "ngx-toastr";
-import {SettingItemComponent} from "../../settings/_components/setting-item/setting-item.component";
-import {SettingSwitchComponent} from "../../settings/_components/setting-switch/setting-switch.component";
-import {ThemeService} from 'src/app/_services/theme.service';
-import {AsyncPipe} from '@angular/common';
-import {catchError, of, tap} from "rxjs";
+import {catchError, filter, of, startWith, tap} from "rxjs";
+import {takeUntilDestroyed, toSignal} from "@angular/core/rxjs-interop";
+import {EmptyStateComponent} from "../../shared/_components/empty-state/empty-state.component";
+import {
+ MatchSeriesResultItemComponent
+} from "../../shared/_components/match-series-result-item/match-series-result-item.component";
+import {ImageComponent} from "../../shared/image/image.component";
+import {ImageService} from "../../_services/image.service";
@Component({
- selector: 'app-match-series-modal',
- imports: [
- AsyncPipe,
- TranslocoDirective,
- MatchSeriesResultItemComponent,
- LoadingComponent,
- ReactiveFormsModule,
- SettingItemComponent,
- SettingSwitchComponent
- ],
- templateUrl: './match-series-modal.component.html',
- styleUrl: './match-series-modal.component.scss',
- changeDetection: ChangeDetectionStrategy.OnPush
+ selector: 'app-match-series-modal',
+ imports: [
+ ReactiveFormsModule,
+ TranslocoDirective,
+ NgbTooltip,
+ EmptyStateComponent,
+ MatchSeriesResultItemComponent,
+ ImageComponent,
+ ],
+ templateUrl: './match-series-modal.component.html',
+ styleUrl: './match-series-modal.component.scss',
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MatchSeriesModalComponent implements OnInit {
private readonly seriesService = inject(SeriesService);
private readonly modalService = inject(NgbActiveModal);
private readonly toastr = inject(ToastrService);
- protected readonly themeService = inject(ThemeService);
+ private readonly imageService = inject(ImageService);
series = input.required
();
- formGroup = new FormGroup({});
+ formGroup = new FormGroup({
+ query: new FormControl('', []),
+ dontMatch: new FormControl(false, []),
+ });
+
+ protected readonly isDontMatch = toSignal(
+ this.formGroup.controls.dontMatch.valueChanges.pipe(
+ startWith(this.formGroup.controls.dontMatch.value)
+ ),
+ { initialValue: false }
+ );
+
+ private readonly _queryDisableEffect = effect(() => {
+ if (this.isDontMatch()) {
+ this.formGroup.controls.query.disable();
+ } else {
+ this.formGroup.controls.query.enable();
+ }
+ });
+
+ private readonly _autoSearchOnEnable = this.formGroup.controls.dontMatch.valueChanges.pipe(
+ filter(v => v === false),
+ takeUntilDestroyed()
+ ).subscribe(() => this.search());
+
+ protected readonly canSaveDontMatch = computed(() =>
+ this.isDontMatch() === true && !this.series().dontMatch
+ );
+
matches = signal([]);
- isLoading = signal(true);
+ isLoading = signal(false);
+ hasSearched = signal(false);
+ selectedItem = signal(null);
+ lastQuery = signal('');
+
+ protected bodyState = computed<'empty' | 'dont-match' | 'loading' | 'results' | 'no-results'>(() => {
+ if (this.isDontMatch()) return 'dont-match';
+ if (this.isLoading()) return 'loading';
+ if (!this.hasSearched()) return 'empty';
+ return this.matches().length > 0 ? 'results' : 'no-results';
+ });
+
+ protected coverImageUrl = computed(() => this.imageService.getSeriesCoverImage(this.series().id));
ngOnInit() {
- this.formGroup.addControl('query', new FormControl('', []));
- this.formGroup.addControl('dontMatch', new FormControl(this.series().dontMatch || false, []));
-
+ this.formGroup.patchValue({ dontMatch: this.series().dontMatch || false });
this.search();
}
search() {
+ if (this.isDontMatch()) return;
+
this.isLoading.set(true);
+ this.lastQuery.set(this.formGroup.value.query ?? '');
- const model: any = this.formGroup.value;
- model.seriesId = this.series().id;
-
- if (model.dontMatch) {
- this.isLoading.set(false);
- return;
- }
+ const model: any = { ...this.formGroup.value, seriesId: this.series().id };
this.seriesService.matchSeries(model).pipe(
tap(results => {
this.isLoading.set(false);
+ this.hasSearched.set(true);
this.matches.set(results);
}),
catchError(() => {
this.isLoading.set(false);
+ this.hasSearched.set(true);
return of([]);
})
).subscribe();
}
+ clearQuery() {
+ this.formGroup.get('query')?.setValue('');
+ }
+
+ selectItem(item: ExternalSeriesMatch) {
+ this.selectedItem.set(item);
+ }
+
close() {
this.modalService.dismiss();
}
- save() {
+ applyMatch() {
+ const item = this.selectedItem();
+ if (!item) return;
- const model: any = this.formGroup.value;
- model.seriesId = this.series().id;
-
- const dontMatchChanged = this.series().dontMatch !== model.dontMatch;
-
- // We need to update the dontMatch status
- if (dontMatchChanged) {
- this.seriesService.updateDontMatch(this.series().id, model.dontMatch).subscribe(_ => {
- this.modalService.close(true);
- });
- } else {
- this.toastr.success(translate('toasts.match-success'));
- this.modalService.close(true);
- }
- }
-
- selectMatch(item: ExternalSeriesMatch) {
const data = item.series;
data.tags = data.tags || [];
data.genres = data.genres || [];
- this.seriesService.updateMatch(this.series().id, item.series).subscribe(_ => {
- this.save();
+ this.seriesService.updateMatch(this.series().id, data).subscribe(() => {
+ this.toastr.success(translate('toasts.match-success'));
+ this.modalService.close(true);
});
}
+ saveDontMatch() {
+ this.seriesService.updateDontMatch(this.series().id, true).subscribe(() => {
+ this.modalService.close(true);
+ });
+ }
}
diff --git a/UI/Web/src/app/_single-module/match-series-result-item/match-series-result-item.component.html b/UI/Web/src/app/_single-module/match-series-result-item/match-series-result-item.component.html
deleted file mode 100644
index 336bf448c..000000000
--- a/UI/Web/src/app/_single-module/match-series-result-item/match-series-result-item.component.html
+++ /dev/null
@@ -1,52 +0,0 @@
-
-
-
-
- @let coverUrl = item().series.coverUrl;
- @if (coverUrl) {
-
- }
-
-
-
{{item().series.name}} ({{item().matchRating | translocoPercent}})
-
- @for(synm of item().series.synonyms; track synm; let last = $last) {
- {{synm}}
- @if (!last) {
- ,
- }
- }
-
- @if (item().series.summary) {
-
- }
-
-
-
- @if (isSelected()) {
-
-
-
{{t('updating-metadata-status')}}
-
- } @else {
-
- @if ((item().series.volumes || 0) > 0 || (item().series.chapters || 0) > 0) {
- @if (item().series.plusMediaFormat === PlusMediaFormat.Comic) {
- {{t('issue-count', {num: item().series.chapters})}}
- } @else {
- {{t('volume-count', {num: item().series.volumes})}}
- {{t('chapter-count', {num: item().series.chapters})}}
- }
- } @else {
- {{t('releasing')}}
- }
-
- {{item().series.plusMediaFormat | plusMediaFormat}}
-
- }
-
-
+ {{ pct() }}%
+ {{ t(labelKey()) }}
+
diff --git a/UI/Web/src/app/shared/_components/confidence-chip/confidence-chip.component.scss b/UI/Web/src/app/shared/_components/confidence-chip/confidence-chip.component.scss
new file mode 100644
index 000000000..843fe31b2
--- /dev/null
+++ b/UI/Web/src/app/shared/_components/confidence-chip/confidence-chip.component.scss
@@ -0,0 +1,25 @@
+.confidence-chip {
+ padding: 0.375rem 0.625rem;
+ min-width: 4rem;
+ border-radius: 0.375rem;
+ background: color-mix(in srgb, var(--chip-color) 8%, transparent);
+ border: 1px solid color-mix(in srgb, var(--chip-color) 20%, transparent);
+}
+
+.chip-pct {
+ font-size: 1.125rem;
+ color: var(--chip-color);
+}
+
+.chip-unit {
+ font-size: 0.6875rem;
+ opacity: 0.6;
+ font-weight: 500;
+}
+
+.chip-label {
+ font-size: 0.59375rem;
+ color: var(--chip-color);
+ opacity: 0.85;
+ letter-spacing: 0.06em;
+}
diff --git a/UI/Web/src/app/shared/_components/confidence-chip/confidence-chip.component.ts b/UI/Web/src/app/shared/_components/confidence-chip/confidence-chip.component.ts
new file mode 100644
index 000000000..195ca505f
--- /dev/null
+++ b/UI/Web/src/app/shared/_components/confidence-chip/confidence-chip.component.ts
@@ -0,0 +1,29 @@
+import {ChangeDetectionStrategy, Component, computed, input} from '@angular/core';
+import {TranslocoDirective} from "@jsverse/transloco";
+
+@Component({
+ selector: 'app-confidence-chip',
+ imports: [TranslocoDirective],
+ templateUrl: './confidence-chip.component.html',
+ styleUrl: './confidence-chip.component.scss',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ConfidenceChipComponent {
+ pct = input.required();
+
+ protected colorVar = computed(() => {
+ const p = this.pct();
+ if (p >= 90) return 'var(--match-confidence-chip-strong-color)';
+ if (p >= 70) return 'var(--match-confidence-chip-likely-color)';
+ if (p >= 55) return 'var(--match-confidence-chip-weak-color)';
+ return 'var(--match-confidence-chip-doubt-color)';
+ });
+
+ protected labelKey = computed(() => {
+ const p = this.pct();
+ if (p >= 90) return 'strong';
+ if (p >= 70) return 'likely';
+ if (p >= 55) return 'weak';
+ return 'doubt';
+ });
+}
diff --git a/UI/Web/src/app/shared/_components/empty-state/empty-state.component.html b/UI/Web/src/app/shared/_components/empty-state/empty-state.component.html
new file mode 100644
index 000000000..7aca96f1b
--- /dev/null
+++ b/UI/Web/src/app/shared/_components/empty-state/empty-state.component.html
@@ -0,0 +1,9 @@
+
+
+
+
+
{{ t(titleKey()) }}
+ @if (descriptionKey()) {
+
{{ t(descriptionKey(), descriptionParams()) }}
+ }
+
+
+ @if (isSelected()) {
+
+
+
+
{{ t('selected-alt') }}
+ }
+
+
+
+
+
+
+
{{ item().series.name }}
+
+
+
+
+
+
+
+ @if (item().series.mangaBakaId) {
+
+ }
+ @if (item().series.aniListId) {
+
+ }
+ @if (item().series.malId) {
+
+ }
+ @if (item().series.hardcoverId) {
+
+ }
+
+
+ @if (showSynonyms() && matchedSynonyms().length > 0) {
+
+
+
{{ t('matched-alt') }}
+
"{{ matchedSynonyms()[0] }}"
+ @if (matchedSynonyms().length > 1) {
+
+ +{{ matchedSynonyms().length - 1 }} {{ t('more') }}
+
+
+ {{ matchedSynonyms().length }} {{ t('matched-alt-count') }}
+
+ @for (s of matchedSynonyms(); track s) {
+ - "{{ s }}"
+ }
+
+
+ }
+
+ }
+
+
{{ item().series.summary }}
+
+
+
+
+
+