feat: add external metadata sync system with multiple providers
Add a complete metadata synchronization system allowing users to search and sync series/book metadata from external providers (Google Books, Open Library, ComicVine, AniList, Bédéthèque). Each library can use a different provider. Matching requires manual approval with detailed sync reports showing what was updated or skipped (locked fields protection). Key changes: - DB migrations: external_metadata_links, external_book_metadata tables, library metadata_provider column, locked_fields, total_volumes, book metadata fields (summary, isbn, publish_date) - Rust API: MetadataProvider trait + 5 provider implementations, 7 metadata endpoints (search, match, approve, reject, links, missing, delete), sync report system, provider language preference support - Backoffice: MetadataSearchModal, ProviderIcon, SafeHtml components, settings UI for provider/language config, enriched book detail page, edit forms with locked fields support, API proxy routes - OpenAPI/Swagger documentation for all new endpoints and schemas Closes #3 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
671
apps/backoffice/app/components/MetadataSearchModal.tsx
Normal file
671
apps/backoffice/app/components/MetadataSearchModal.tsx
Normal file
@@ -0,0 +1,671 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Icon } from "./ui";
|
||||
import { ProviderIcon, PROVIDERS, providerLabel } from "./ProviderIcon";
|
||||
import type { ExternalMetadataLinkDto, SeriesCandidateDto, MissingBooksDto, SyncReport } from "../../lib/api";
|
||||
|
||||
const FIELD_LABELS: Record<string, string> = {
|
||||
description: "Description",
|
||||
authors: "Auteurs",
|
||||
publishers: "Éditeurs",
|
||||
start_year: "Année",
|
||||
total_volumes: "Nb volumes",
|
||||
summary: "Résumé",
|
||||
isbn: "ISBN",
|
||||
publish_date: "Date de publication",
|
||||
language: "Langue",
|
||||
};
|
||||
|
||||
function fieldLabel(field: string): string {
|
||||
return FIELD_LABELS[field] ?? field;
|
||||
}
|
||||
|
||||
function formatValue(value: unknown): string {
|
||||
if (value == null) return "—";
|
||||
if (Array.isArray(value)) return value.join(", ");
|
||||
if (typeof value === "string") {
|
||||
return value.length > 80 ? value.slice(0, 80) + "…" : value;
|
||||
}
|
||||
return String(value);
|
||||
}
|
||||
|
||||
interface MetadataSearchModalProps {
|
||||
libraryId: string;
|
||||
seriesName: string;
|
||||
existingLink: ExternalMetadataLinkDto | null;
|
||||
initialMissing: MissingBooksDto | null;
|
||||
}
|
||||
|
||||
type ModalStep = "idle" | "searching" | "results" | "confirm" | "syncing" | "done" | "linked";
|
||||
|
||||
export function MetadataSearchModal({
|
||||
libraryId,
|
||||
seriesName,
|
||||
existingLink,
|
||||
initialMissing,
|
||||
}: MetadataSearchModalProps) {
|
||||
const router = useRouter();
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [step, setStep] = useState<ModalStep>("idle");
|
||||
const [candidates, setCandidates] = useState<SeriesCandidateDto[]>([]);
|
||||
const [selectedCandidate, setSelectedCandidate] = useState<SeriesCandidateDto | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [linkId, setLinkId] = useState<string | null>(existingLink?.id ?? null);
|
||||
const [missing, setMissing] = useState<MissingBooksDto | null>(initialMissing);
|
||||
const [showMissingList, setShowMissingList] = useState(false);
|
||||
const [syncReport, setSyncReport] = useState<SyncReport | null>(null);
|
||||
|
||||
// Provider selector: empty string = library default
|
||||
const [searchProvider, setSearchProvider] = useState("");
|
||||
const [activeProvider, setActiveProvider] = useState("");
|
||||
|
||||
const handleOpen = useCallback(() => {
|
||||
setIsOpen(true);
|
||||
if (existingLink && existingLink.status === "approved") {
|
||||
setStep("linked");
|
||||
} else {
|
||||
doSearch("");
|
||||
}
|
||||
}, [existingLink]);
|
||||
|
||||
const handleClose = useCallback(() => {
|
||||
setIsOpen(false);
|
||||
setStep("idle");
|
||||
setError(null);
|
||||
setCandidates([]);
|
||||
setSelectedCandidate(null);
|
||||
setShowMissingList(false);
|
||||
setSyncReport(null);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") handleClose();
|
||||
};
|
||||
document.addEventListener("keydown", handleKeyDown);
|
||||
return () => document.removeEventListener("keydown", handleKeyDown);
|
||||
}, [isOpen, handleClose]);
|
||||
|
||||
async function doSearch(provider: string) {
|
||||
setStep("searching");
|
||||
setError(null);
|
||||
setActiveProvider(provider);
|
||||
try {
|
||||
const body: Record<string, string> = {
|
||||
library_id: libraryId,
|
||||
series_name: seriesName,
|
||||
};
|
||||
if (provider) body.provider = provider;
|
||||
|
||||
const resp = await fetch("/api/metadata/search", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
const data = await resp.json();
|
||||
if (!resp.ok) {
|
||||
setError(data.error || "Search failed");
|
||||
setStep("results");
|
||||
return;
|
||||
}
|
||||
setCandidates(data);
|
||||
// Update activeProvider from first result (the API returns the actual provider used)
|
||||
if (data.length > 0 && data[0].provider) {
|
||||
setActiveProvider(data[0].provider);
|
||||
if (!provider) setSearchProvider(data[0].provider);
|
||||
}
|
||||
setStep("results");
|
||||
} catch {
|
||||
setError("Network error");
|
||||
setStep("results");
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSelectCandidate(candidate: SeriesCandidateDto) {
|
||||
setSelectedCandidate(candidate);
|
||||
setStep("confirm");
|
||||
}
|
||||
|
||||
async function handleApprove(syncSeries: boolean, syncBooks: boolean) {
|
||||
if (!selectedCandidate) return;
|
||||
setStep("syncing");
|
||||
setError(null);
|
||||
try {
|
||||
// Create match — use the provider from the candidate
|
||||
const matchResp = await fetch("/api/metadata/match", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
library_id: libraryId,
|
||||
series_name: seriesName,
|
||||
provider: selectedCandidate.provider,
|
||||
external_id: selectedCandidate.external_id,
|
||||
external_url: selectedCandidate.external_url,
|
||||
confidence: selectedCandidate.confidence,
|
||||
title: selectedCandidate.title,
|
||||
metadata_json: {
|
||||
...selectedCandidate.metadata_json,
|
||||
description: selectedCandidate.description,
|
||||
authors: selectedCandidate.authors,
|
||||
publishers: selectedCandidate.publishers,
|
||||
start_year: selectedCandidate.start_year,
|
||||
},
|
||||
total_volumes: selectedCandidate.total_volumes,
|
||||
}),
|
||||
});
|
||||
const matchData = await matchResp.json();
|
||||
if (!matchResp.ok) {
|
||||
setError(matchData.error || "Failed to create match");
|
||||
setStep("results");
|
||||
return;
|
||||
}
|
||||
const newLinkId = matchData.id;
|
||||
setLinkId(newLinkId);
|
||||
|
||||
// Approve
|
||||
const approveResp = await fetch("/api/metadata/approve", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
id: newLinkId,
|
||||
sync_series: syncSeries,
|
||||
sync_books: syncBooks,
|
||||
}),
|
||||
});
|
||||
const approveData = await approveResp.json();
|
||||
if (!approveResp.ok) {
|
||||
setError(approveData.error || "Failed to approve");
|
||||
setStep("results");
|
||||
return;
|
||||
}
|
||||
|
||||
// Store sync report
|
||||
if (approveData.report) {
|
||||
setSyncReport(approveData.report);
|
||||
}
|
||||
|
||||
// Fetch missing books info
|
||||
if (syncBooks) {
|
||||
try {
|
||||
const missingResp = await fetch(`/api/metadata/missing?id=${newLinkId}`);
|
||||
if (missingResp.ok) {
|
||||
setMissing(await missingResp.json());
|
||||
}
|
||||
} catch { /* ignore */ }
|
||||
}
|
||||
|
||||
setStep("done");
|
||||
} catch {
|
||||
setError("Network error");
|
||||
setStep("results");
|
||||
}
|
||||
}
|
||||
|
||||
async function handleUnlink() {
|
||||
if (!linkId) return;
|
||||
try {
|
||||
const resp = await fetch(`/api/metadata/links?id=${linkId}`, { method: "DELETE" });
|
||||
if (resp.ok) {
|
||||
setLinkId(null);
|
||||
setMissing(null);
|
||||
handleClose();
|
||||
router.refresh();
|
||||
}
|
||||
} catch { /* ignore */ }
|
||||
}
|
||||
|
||||
function confidenceBadge(confidence: number) {
|
||||
const color =
|
||||
confidence >= 0.8
|
||||
? "bg-green-500/10 text-green-600 border-green-500/30"
|
||||
: confidence >= 0.5
|
||||
? "bg-yellow-500/10 text-yellow-600 border-yellow-500/30"
|
||||
: "bg-red-500/10 text-red-600 border-red-500/30";
|
||||
return (
|
||||
<span className={`text-xs px-2 py-0.5 rounded-full border ${color}`}>
|
||||
{Math.round(confidence * 100)}%
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
const modal = isOpen
|
||||
? createPortal(
|
||||
<>
|
||||
<div
|
||||
className="fixed inset-0 bg-black/30 backdrop-blur-sm z-50"
|
||||
onClick={handleClose}
|
||||
/>
|
||||
<div className="fixed inset-0 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-card border border-border/50 rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto animate-in fade-in zoom-in-95 duration-200">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-5 py-4 border-b border-border/50 bg-muted/30 sticky top-0 z-10">
|
||||
<h3 className="font-semibold text-foreground">
|
||||
{step === "linked" ? "Metadata Link" : "Search External Metadata"}
|
||||
</h3>
|
||||
<button type="button" onClick={handleClose}>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" className="text-muted-foreground hover:text-foreground">
|
||||
<path d="M4 4L12 12M12 4L4 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-5 space-y-4">
|
||||
{/* Provider selector — visible during searching & results */}
|
||||
{(step === "searching" || step === "results") && (
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-sm text-muted-foreground whitespace-nowrap">Provider :</label>
|
||||
<div className="flex gap-1 flex-wrap">
|
||||
{PROVIDERS.map((p) => (
|
||||
<button
|
||||
key={p.value}
|
||||
type="button"
|
||||
disabled={step === "searching"}
|
||||
onClick={() => {
|
||||
setSearchProvider(p.value);
|
||||
doSearch(p.value);
|
||||
}}
|
||||
className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium border transition-colors ${
|
||||
(activeProvider || searchProvider) === p.value
|
||||
? "border-primary bg-primary/10 text-primary"
|
||||
: "border-border bg-card text-muted-foreground hover:text-foreground hover:border-primary/50"
|
||||
}`}
|
||||
>
|
||||
<ProviderIcon provider={p.value} size={14} />
|
||||
{p.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* SEARCHING */}
|
||||
{step === "searching" && (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Icon name="spinner" size="lg" className="animate-spin text-primary" />
|
||||
<span className="ml-3 text-muted-foreground">Searching for "{seriesName}"...</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ERROR */}
|
||||
{error && (
|
||||
<div className="p-3 rounded-lg bg-destructive/10 text-destructive text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* RESULTS */}
|
||||
{step === "results" && (
|
||||
<>
|
||||
{candidates.length === 0 && !error ? (
|
||||
<p className="text-muted-foreground text-center py-8">No results found.</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm text-muted-foreground mb-2">
|
||||
{candidates.length} result{candidates.length !== 1 ? "s" : ""} found
|
||||
{activeProvider && (
|
||||
<span className="ml-1 text-xs inline-flex items-center gap-1">via <ProviderIcon provider={activeProvider} size={12} /> <span className="font-medium">{providerLabel(activeProvider)}</span></span>
|
||||
)}
|
||||
</p>
|
||||
{candidates.map((c, i) => (
|
||||
<button
|
||||
key={i}
|
||||
type="button"
|
||||
onClick={() => handleSelectCandidate(c)}
|
||||
className="w-full text-left px-3 py-2.5 rounded-lg border border-border/60 bg-muted/20 hover:bg-muted/40 hover:border-primary/50 transition-colors"
|
||||
>
|
||||
<div className="flex gap-3 items-start">
|
||||
<div className="w-10 h-14 flex-shrink-0 rounded bg-muted/50 overflow-hidden">
|
||||
{c.cover_url ? (
|
||||
<img src={c.cover_url} alt={c.title} className="w-full h-full object-cover" />
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center text-muted-foreground/40">
|
||||
<Icon name="image" size="sm" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-sm text-foreground truncate">{c.title}</span>
|
||||
{confidenceBadge(c.confidence)}
|
||||
</div>
|
||||
{c.authors.length > 0 && (
|
||||
<p className="text-xs text-muted-foreground truncate">{c.authors.join(", ")}</p>
|
||||
)}
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
{c.publishers.length > 0 && <span>{c.publishers[0]}</span>}
|
||||
{c.start_year != null && <span>{c.start_year}</span>}
|
||||
{c.total_volumes != null && <span>{c.total_volumes} vol.</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* CONFIRM */}
|
||||
{step === "confirm" && selectedCandidate && (
|
||||
<div className="space-y-4">
|
||||
<div className="p-4 rounded-lg bg-muted/30 border border-border/50">
|
||||
<div className="flex gap-3">
|
||||
{selectedCandidate.cover_url && (
|
||||
<img
|
||||
src={selectedCandidate.cover_url}
|
||||
alt={selectedCandidate.title}
|
||||
className="w-16 h-22 object-cover rounded"
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
<h4 className="font-medium text-foreground">{selectedCandidate.title}</h4>
|
||||
{selectedCandidate.authors.length > 0 && (
|
||||
<p className="text-sm text-muted-foreground">{selectedCandidate.authors.join(", ")}</p>
|
||||
)}
|
||||
{selectedCandidate.total_volumes && (
|
||||
<p className="text-sm text-muted-foreground">{selectedCandidate.total_volumes} volumes</p>
|
||||
)}
|
||||
<p className="text-xs text-muted-foreground mt-1 inline-flex items-center gap-1">
|
||||
via <ProviderIcon provider={selectedCandidate.provider} size={12} /> <span className="font-medium">{providerLabel(selectedCandidate.provider)}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-foreground font-medium">How would you like to sync?</p>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleApprove(true, false)}
|
||||
className="w-full p-3 rounded-lg border border-border bg-card text-left hover:bg-muted/40 hover:border-primary/50 transition-colors"
|
||||
>
|
||||
<p className="font-medium text-sm text-foreground">Sync series metadata only</p>
|
||||
<p className="text-xs text-muted-foreground">Update description, authors, publishers, and year</p>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleApprove(true, true)}
|
||||
className="w-full p-3 rounded-lg border border-primary/50 bg-primary/5 text-left hover:bg-primary/10 transition-colors"
|
||||
>
|
||||
<p className="font-medium text-sm text-foreground">Sync series + books</p>
|
||||
<p className="text-xs text-muted-foreground">Also fetch book list and show missing volumes</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setSelectedCandidate(null); setStep("results"); }}
|
||||
className="text-sm text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Back to results
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* SYNCING */}
|
||||
{step === "syncing" && (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Icon name="spinner" size="lg" className="animate-spin text-primary" />
|
||||
<span className="ml-3 text-muted-foreground">Syncing metadata...</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* DONE */}
|
||||
{step === "done" && (
|
||||
<div className="space-y-4">
|
||||
<div className="p-4 rounded-lg bg-green-500/10 border border-green-500/30">
|
||||
<p className="font-medium text-green-600">Metadata synced successfully!</p>
|
||||
</div>
|
||||
|
||||
{/* Sync Report */}
|
||||
{syncReport && (
|
||||
<div className="space-y-3">
|
||||
{/* Series report */}
|
||||
{syncReport.series && (syncReport.series.fields_updated.length > 0 || syncReport.series.fields_skipped.length > 0) && (
|
||||
<div className="p-3 rounded-lg bg-muted/30 border border-border/50">
|
||||
<p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2">Série</p>
|
||||
{syncReport.series.fields_updated.length > 0 && (
|
||||
<div className="space-y-1">
|
||||
{syncReport.series.fields_updated.map((f, i) => (
|
||||
<div key={i} className="flex items-center gap-2 text-xs">
|
||||
<span className="inline-flex items-center gap-1 text-green-600">
|
||||
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg>
|
||||
</span>
|
||||
<span className="font-medium text-foreground">{fieldLabel(f.field)}</span>
|
||||
<span className="text-muted-foreground truncate max-w-[200px]">{formatValue(f.new_value)}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{syncReport.series.fields_skipped.length > 0 && (
|
||||
<div className="space-y-1 mt-1">
|
||||
{syncReport.series.fields_skipped.map((f, i) => (
|
||||
<div key={i} className="flex items-center gap-2 text-xs text-amber-500">
|
||||
<svg className="w-3 h-3 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||||
</svg>
|
||||
<span className="font-medium">{fieldLabel(f.field)}</span>
|
||||
<span className="text-muted-foreground">locked</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Books report */}
|
||||
{(syncReport.books.length > 0 || syncReport.books_unmatched > 0) && (
|
||||
<div className="p-3 rounded-lg bg-muted/30 border border-border/50">
|
||||
<p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2">
|
||||
Livres — {syncReport.books_matched} matched{syncReport.books_unmatched > 0 && `, ${syncReport.books_unmatched} unmatched`}
|
||||
</p>
|
||||
{syncReport.books.length > 0 && (
|
||||
<div className="space-y-2 max-h-48 overflow-y-auto">
|
||||
{syncReport.books.map((b, i) => (
|
||||
<div key={i} className="text-xs">
|
||||
<p className="font-medium text-foreground">
|
||||
{b.volume != null && <span className="font-mono text-muted-foreground mr-1.5">#{b.volume}</span>}
|
||||
{b.title}
|
||||
</p>
|
||||
<div className="ml-4 space-y-0.5 mt-0.5">
|
||||
{b.fields_updated.map((f, j) => (
|
||||
<p key={j} className="flex items-center gap-1.5 text-green-600">
|
||||
<svg className="w-2.5 h-2.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg>
|
||||
<span className="font-medium">{fieldLabel(f.field)}</span>
|
||||
</p>
|
||||
))}
|
||||
{b.fields_skipped.map((f, j) => (
|
||||
<p key={`s${j}`} className="flex items-center gap-1.5 text-amber-500">
|
||||
<svg className="w-2.5 h-2.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||||
</svg>
|
||||
<span className="font-medium">{fieldLabel(f.field)}</span>
|
||||
<span className="text-muted-foreground">locked</span>
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Missing books */}
|
||||
{missing && (
|
||||
<div className="space-y-3">
|
||||
<div className="grid grid-cols-3 gap-4 p-4 bg-muted/30 rounded-lg">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">External</p>
|
||||
<p className="text-2xl font-semibold">{missing.total_external}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Local</p>
|
||||
<p className="text-2xl font-semibold">{missing.total_local}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Missing</p>
|
||||
<p className="text-2xl font-semibold text-warning">{missing.missing_count}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{missing.missing_books.length > 0 && (
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowMissingList(!showMissingList)}
|
||||
className="text-sm text-muted-foreground hover:text-foreground flex items-center gap-1"
|
||||
>
|
||||
<Icon name={showMissingList ? "chevronDown" : "chevronRight"} size="sm" />
|
||||
{missing.missing_count} missing book{missing.missing_count !== 1 ? "s" : ""}
|
||||
</button>
|
||||
{showMissingList && (
|
||||
<div className="mt-2 max-h-40 overflow-y-auto p-3 bg-muted/20 rounded-lg text-sm space-y-1">
|
||||
{missing.missing_books.map((b, i) => (
|
||||
<p key={i} className="text-muted-foreground truncate">
|
||||
{b.volume_number != null && <span className="font-mono mr-2">#{b.volume_number}</span>}
|
||||
{b.title || "Unknown"}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { handleClose(); router.refresh(); }}
|
||||
className="w-full p-2.5 rounded-lg bg-primary text-primary-foreground font-medium text-sm hover:bg-primary/90 transition-colors"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* LINKED (already approved) */}
|
||||
{step === "linked" && existingLink && (
|
||||
<div className="space-y-4">
|
||||
<div className="p-4 rounded-lg bg-primary/5 border border-primary/30">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="font-medium text-foreground inline-flex items-center gap-1.5">
|
||||
Linked to <ProviderIcon provider={existingLink.provider} size={16} /> {providerLabel(existingLink.provider)}
|
||||
</p>
|
||||
{existingLink.external_url && (
|
||||
<a
|
||||
href={existingLink.external_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block mt-1 text-xs text-primary hover:underline"
|
||||
>
|
||||
View on external source
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
{existingLink.confidence != null && confidenceBadge(existingLink.confidence)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{initialMissing && (
|
||||
<div className="grid grid-cols-3 gap-4 p-4 bg-muted/30 rounded-lg">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">External</p>
|
||||
<p className="text-2xl font-semibold">{initialMissing.total_external}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Local</p>
|
||||
<p className="text-2xl font-semibold">{initialMissing.total_local}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Missing</p>
|
||||
<p className="text-2xl font-semibold text-warning">{initialMissing.missing_count}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{initialMissing && initialMissing.missing_books.length > 0 && (
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowMissingList(!showMissingList)}
|
||||
className="text-sm text-muted-foreground hover:text-foreground flex items-center gap-1"
|
||||
>
|
||||
<Icon name={showMissingList ? "chevronDown" : "chevronRight"} size="sm" />
|
||||
{initialMissing.missing_count} missing book{initialMissing.missing_count !== 1 ? "s" : ""}
|
||||
</button>
|
||||
{showMissingList && (
|
||||
<div className="mt-2 max-h-40 overflow-y-auto p-3 bg-muted/20 rounded-lg text-sm space-y-1">
|
||||
{initialMissing.missing_books.map((b, i) => (
|
||||
<p key={i} className="text-muted-foreground truncate">
|
||||
{b.volume_number != null && <span className="font-mono mr-2">#{b.volume_number}</span>}
|
||||
{b.title || "Unknown"}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { doSearch(""); }}
|
||||
className="flex-1 p-2.5 rounded-lg border border-border bg-card text-sm font-medium text-muted-foreground hover:text-foreground hover:border-primary transition-colors"
|
||||
>
|
||||
Search again
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleUnlink}
|
||||
className="p-2.5 rounded-lg border border-destructive/30 bg-destructive/5 text-sm font-medium text-destructive hover:bg-destructive/10 transition-colors"
|
||||
>
|
||||
Unlink
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>,
|
||||
document.body,
|
||||
)
|
||||
: null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
onClick={handleOpen}
|
||||
className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-border bg-card text-sm font-medium text-muted-foreground hover:text-foreground hover:border-primary transition-colors"
|
||||
>
|
||||
<Icon name="search" size="sm" />
|
||||
{existingLink && existingLink.status === "approved" ? "Metadata" : "Search metadata"}
|
||||
</button>
|
||||
|
||||
{/* Inline badge when linked */}
|
||||
{existingLink && existingLink.status === "approved" && initialMissing && initialMissing.missing_count > 0 && (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-yellow-500/10 text-yellow-600 text-xs border border-yellow-500/30">
|
||||
{initialMissing.missing_count} missing
|
||||
</span>
|
||||
)}
|
||||
|
||||
{existingLink && existingLink.status === "approved" && (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-primary/10 text-primary text-xs border border-primary/30">
|
||||
<ProviderIcon provider={existingLink.provider} size={12} />
|
||||
<span>{providerLabel(existingLink.provider)}</span>
|
||||
</span>
|
||||
)}
|
||||
|
||||
{modal}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user