feat: add Prowlarr integration for manual release search

Add Prowlarr indexer integration (step 1: config + manual search).
Allows searching for comics/ebooks releases on Prowlarr indexers
directly from the series detail page, with download links and
per-volume search for missing books.

- Backend: new prowlarr module with search and test endpoints
- Migration: add prowlarr settings (url, api_key, categories)
- Settings UI: Prowlarr config card with test connection button
- ProwlarrSearchModal: auto-search on open, missing volumes shortcuts
- Fix series.readCount i18n plural parameter on series pages

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

apps/backoffice/app/components/ProwlarrSearchModal.tsx

@@ -0,0 +1,266 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { createPortal } from "react-dom";
+import { Icon } from "./ui";
+import type { ProwlarrRelease, ProwlarrSearchResponse } from "../../lib/api";
+import { useTranslation } from "../../lib/i18n/context";
+
+interface MissingBookItem {
+  title: string | null;
+  volume_number: number | null;
+  external_book_id: string | null;
+}
+
+interface ProwlarrSearchModalProps {
+  seriesName: string;
+  missingBooks: MissingBookItem[] | null;
+}
+
+function formatSize(bytes: number): string {
+  if (bytes >= 1073741824) return (bytes / 1073741824).toFixed(1) + " GB";
+  if (bytes >= 1048576) return (bytes / 1048576).toFixed(1) + " MB";
+  if (bytes >= 1024) return (bytes / 1024).toFixed(0) + " KB";
+  return bytes + " B";
+}
+
+export function ProwlarrSearchModal({ seriesName, missingBooks }: ProwlarrSearchModalProps) {
+  const { t } = useTranslation();
+  const [isOpen, setIsOpen] = useState(false);
+  const [isConfigured, setIsConfigured] = useState<boolean | null>(null);
+  const [isSearching, setIsSearching] = useState(false);
+  const [results, setResults] = useState<ProwlarrRelease[]>([]);
+  const [query, setQuery] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  // Check if Prowlarr is configured on mount
+  useEffect(() => {
+    fetch("/api/settings/prowlarr")
+      .then((r) => (r.ok ? r.json() : null))
+      .then((data) => {
+        setIsConfigured(!!(data && data.api_key && data.api_key.trim()));
+      })
+      .catch(() => setIsConfigured(false));
+  }, []);
+
+  const doSearch = useCallback(async (searchSeriesName: string, volumeNumber?: number) => {
+    setIsSearching(true);
+    setError(null);
+    setResults([]);
+    try {
+      const body: { series_name: string; volume_number?: number } = { series_name: searchSeriesName };
+      if (volumeNumber !== undefined) body.volume_number = volumeNumber;
+      const resp = await fetch("/api/prowlarr/search", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+      });
+      const data = await resp.json();
+      if (data.error) {
+        setError(data.error);
+      } else {
+        const searchResp = data as ProwlarrSearchResponse;
+        setResults(searchResp.results);
+        setQuery(searchResp.query);
+      }
+    } catch {
+      setError(t("prowlarr.searchError"));
+    } finally {
+      setIsSearching(false);
+    }
+  }, [t]);
+
+  function handleOpen() {
+    setIsOpen(true);
+    setResults([]);
+    setError(null);
+    setQuery("");
+    // Auto-search the series on open
+    doSearch(seriesName);
+  }
+
+  function handleClose() {
+    setIsOpen(false);
+  }
+
+  // Don't render button if not configured
+  if (isConfigured === false) return null;
+  if (isConfigured === null) return null;
+
+  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-5xl 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">{t("prowlarr.modalTitle")}</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">
+              {/* Missing volumes + re-search */}
+              <div className="flex flex-wrap items-center gap-2">
+                <button
+                  type="button"
+                  onClick={() => doSearch(seriesName)}
+                  disabled={isSearching}
+                  className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium border border-primary/50 bg-primary/10 text-primary hover:bg-primary/20 disabled:opacity-50 transition-colors"
+                >
+                  <Icon name="search" size="sm" />
+                  {seriesName}
+                </button>
+              {missingBooks && missingBooks.length > 0 && missingBooks.map((book, i) => (
+                  <button
+                    key={i}
+                    type="button"
+                    onClick={() => doSearch(seriesName, book.volume_number ?? undefined)}
+                    disabled={isSearching}
+                    className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium border border-border bg-muted/30 hover:bg-muted/50 disabled:opacity-50 transition-colors"
+                  >
+                    <Icon name="search" size="sm" />
+                    {book.title || `Vol. ${book.volume_number}`}
+                  </button>
+                ))}
+              </div>
+
+              {/* Error */}
+              {error && (
+                <div className="p-3 rounded-lg bg-destructive/10 text-destructive text-sm">
+                  {error}
+                </div>
+              )}
+
+              {/* Searching indicator */}
+              {isSearching && (
+                <div className="flex items-center gap-2 text-muted-foreground text-sm">
+                  <Icon name="spinner" size="sm" className="animate-spin" />
+                  {t("prowlarr.searching")}
+                </div>
+              )}
+
+              {/* Results */}
+              {!isSearching && results.length > 0 && (
+                <div>
+                  <p className="text-sm text-muted-foreground mb-3">
+                    {t("prowlarr.resultCount", { count: results.length, plural: results.length !== 1 ? "s" : "" })}
+                    {query && <span className="ml-1 text-xs opacity-70">({query})</span>}
+                  </p>
+                  <div className="overflow-x-auto rounded-lg border border-border">
+                    <table className="w-full text-sm">
+                      <thead>
+                        <tr className="bg-muted/50 text-left">
+                          <th className="px-3 py-2 font-medium text-muted-foreground">{t("prowlarr.columnTitle")}</th>
+                          <th className="px-3 py-2 font-medium text-muted-foreground">{t("prowlarr.columnIndexer")}</th>
+                          <th className="px-3 py-2 font-medium text-muted-foreground text-right">{t("prowlarr.columnSize")}</th>
+                          <th className="px-3 py-2 font-medium text-muted-foreground text-center">{t("prowlarr.columnSeeders")}</th>
+                          <th className="px-3 py-2 font-medium text-muted-foreground text-center">{t("prowlarr.columnLeechers")}</th>
+                          <th className="px-3 py-2 font-medium text-muted-foreground">{t("prowlarr.columnProtocol")}</th>
+                          <th className="px-3 py-2 font-medium text-muted-foreground text-right"></th>
+                        </tr>
+                      </thead>
+                      <tbody className="divide-y divide-border">
+                        {results.map((release, i) => (
+                          <tr key={release.guid || i} className="hover:bg-muted/20 transition-colors">
+                            <td className="px-3 py-2 max-w-[400px]">
+                              <span className="truncate block" title={release.title}>
+                                {release.title}
+                              </span>
+                            </td>
+                            <td className="px-3 py-2 text-muted-foreground whitespace-nowrap">
+                              {release.indexer || "—"}
+                            </td>
+                            <td className="px-3 py-2 text-right text-muted-foreground whitespace-nowrap">
+                              {release.size > 0 ? formatSize(release.size) : "—"}
+                            </td>
+                            <td className="px-3 py-2 text-center">
+                              {release.seeders != null ? (
+                                <span className={release.seeders > 0 ? "text-green-500 font-medium" : "text-muted-foreground"}>
+                                  {release.seeders}
+                                </span>
+                              ) : "—"}
+                            </td>
+                            <td className="px-3 py-2 text-center text-muted-foreground">
+                              {release.leechers != null ? release.leechers : "—"}
+                            </td>
+                            <td className="px-3 py-2">
+                              {release.protocol && (
+                                <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
+                                  release.protocol === "torrent"
+                                    ? "bg-blue-500/15 text-blue-600"
+                                    : "bg-amber-500/15 text-amber-600"
+                                }`}>
+                                  {release.protocol}
+                                </span>
+                              )}
+                            </td>
+                            <td className="px-3 py-2">
+                              <div className="flex items-center justify-end gap-1.5">
+                                {release.downloadUrl && (
+                                  <a
+                                    href={release.downloadUrl}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="inline-flex items-center justify-center w-7 h-7 rounded-md text-primary hover:bg-primary/10 transition-colors"
+                                    title={t("prowlarr.download")}
+                                  >
+                                    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                                      <path d="M8 2v8M4 7l4 4 4-4M2 13h12" />
+                                    </svg>
+                                  </a>
+                                )}
+                                {release.infoUrl && (
+                                  <a
+                                    href={release.infoUrl}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="inline-flex items-center justify-center w-7 h-7 rounded-md text-muted-foreground hover:bg-muted/50 transition-colors"
+                                    title={t("prowlarr.info")}
+                                  >
+                                    <Icon name="externalLink" size="sm" />
+                                  </a>
+                                )}
+                              </div>
+                            </td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              )}
+
+              {/* No results */}
+              {!isSearching && !error && query && results.length === 0 && (
+                <p className="text-sm text-muted-foreground">{t("prowlarr.noResults")}</p>
+              )}
+              </div>
+            </div>
+          </div>
+        </>,
+        document.body,
+      )
+    : null;
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={handleOpen}
+        className="inline-flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border border-border bg-card text-muted-foreground hover:text-foreground hover:border-primary/50 transition-colors"
+      >
+        <Icon name="search" size="sm" />
+        {t("prowlarr.searchButton")}
+      </button>
+      {modal}
+    </>
+  );
+}