add(ui/ux): per-entry progress and status while importing

README.md

@@ -7,7 +7,7 @@ Sonarr/Radarr-Style Request- & Import-Manager für **Ebooks**, **Comics/Mangas**
 1. **Anfragen**: Im Web-UI per Titel/Autor/ISBN suchen (Ebooks: Open Library · Audiobooks: Audible · Manga: AniList) oder manuell anlegen. Beim Request wählst du die **Ziel-Library** (z.B. deine 8 Bookorbit-Libraries oder die 3 Audiobookshelf-Libraries english/adult/kids). Der Titel erscheint als **Missing**.
    Gehört ein Audiobook-Treffer zu einer Serie, legt **„Ganze Serie…"** alle Folgen auf einmal an (Folgennummer + echter Titel von Audible, optional auf einen Folgenbereich eingegrenzt). Audible hat keine Serien-Abfrage — wordarr sammelt die Folgen über mehrere Suchläufe ein; sollte eine fehlen, zeigt der Dialog die Lücke an.
 2. **Download-Ordner**: wordarr überwacht keinen Downloader aktiv — du legst Dateien selbst in den Download-Ordner (`/mnt/downloads`).
-3. **Import missing**: Im Tab *Import* den Ordner scannen. wordarr schlägt per Fuzzy-Matching Datei→Request-Zuordnungen vor (bei Serien zählt die Folgennummer im Ordnernamen plus der Serienname im Pfad, `???` und `Fragezeichen` gelten als dasselbe); du bestätigst oder korrigierst. Über 🔍 lässt sich zu einem Ordner direkt eine Anfrage suchen — eine führende Folgennummer (`017 - Titel`) wird dabei aus der Suchanfrage genommen, weil Audible sonst schlechter trifft, und stattdessen als Band/Folge übernommen. Was Audible gar nicht führt (Live-Hörspiele, Fan-Editionen), legst du im selben Dialog unter *Nicht bei Audible? Manuell anlegen* an — Titel und Folge sind aus dem Ordnernamen vorbelegt, die Serie bleibt für den nächsten Eintrag stehen. Beim Import wird die Datei nach dem Namensschema der Library **umbenannt und verschoben**. Ordner mit mehreren Audio-Dateien werden als ein Audiobook behandelt (`Titel - Part 01.mp3`, …). Enthält ein Ordner dagegen **je Datei ein eigenes Buch** (eine Reihe als Einzeltitel gekauft), teilt ✂️ ihn in einzelne Einträge auf; wordarr markiert solche Ordner mit `n Titel?`, wenn die Dateinamen verschiedene Titel tragen und jede Datei groß genug für ein ganzes Buch ist. Die Checkbox *Ordner als Einzeldateien behandeln* macht dasselbe für den gesamten Scan. Auch Ordner, die in Disc-Unterordner (`CD`, `CD1`, `CD 2`, `Disc 3`, `Teil 1`) aufgeteilt sind, gelten als **ein** Audiobook — der Ordnername darüber liefert den Titel, die Parts werden über alle Discs hinweg durchnummeriert. Unterordner ohne Audio (`Cover`, Scans, Booklets) werden dabei ignoriert. Mehrteiler in Unterordnern (`Teil A`/`Teil B`, `A - Titel`/`B - Titel`) zählen ebenfalls als ein Hörbuch. Liegen die Teile dagegen **nebeneinander** (`100 - Toteninsel Teil 1`, `… Teil 2`, …), markierst du sie und klickst *Ausgewählte zusammenfassen* — sie werden als ein Hörbuch mit durchlaufenden Parts importiert (✂️ löst das wieder auf). Liegen die Dateien einer bereits importierten Anfrage nicht mehr in der Library (zurück in den Download-Ordner verschoben, um sie nach einem neuen Namensschema abzulegen), gilt sie wieder als offen: der Scan schlägt sie ganz normal vor (mit `↺` markiert) und der Import legt sie neu ab. Sind mehrere Einträge derselben Anfrage zugeordnet, fragt wordarr vor dem Import nach und fasst sie zusammen — sonst importiert nur der erste und der Rest scheitert. Fehlt einem bereits importierten Hörbuch später ein Teil, wählst du es im Zuordnungs-Dropdown unter *Bereits importiert — Teile anhängen* (↩︎); die neuen Dateien werden hinten angehängt und alle Tracks neu getaggt.
+3. **Import missing**: Im Tab *Import* den Ordner scannen. wordarr schlägt per Fuzzy-Matching Datei→Request-Zuordnungen vor (bei Serien zählt die Folgennummer im Ordnernamen plus der Serienname im Pfad, `???` und `Fragezeichen` gelten als dasselbe); du bestätigst oder korrigierst. Über 🔍 lässt sich zu einem Ordner direkt eine Anfrage suchen — eine führende Folgennummer (`017 - Titel`) wird dabei aus der Suchanfrage genommen, weil Audible sonst schlechter trifft, und stattdessen als Band/Folge übernommen. Was Audible gar nicht führt (Live-Hörspiele, Fan-Editionen), legst du im selben Dialog unter *Nicht bei Audible? Manuell anlegen* an — Titel und Folge sind aus dem Ordnernamen vorbelegt, die Serie bleibt für den nächsten Eintrag stehen. Beim Import wird die Datei nach dem Namensschema der Library **umbenannt und verschoben**. Die Einträge werden einzeln abgearbeitet: die laufende Zeile ist blau markiert (die Ansicht blättert ihr nach), fertige werden grün, fehlgeschlagene rot mit der Fehlermeldung als Tooltip, und unten läuft ein Balken über alle Einträge. Die Liste bleibt danach stehen, damit das Ergebnis sichtbar bleibt — für den nächsten Durchgang erneut scannen. Ordner mit mehreren Audio-Dateien werden als ein Audiobook behandelt (`Titel - Part 01.mp3`, …). Enthält ein Ordner dagegen **je Datei ein eigenes Buch** (eine Reihe als Einzeltitel gekauft), teilt ✂️ ihn in einzelne Einträge auf; wordarr markiert solche Ordner mit `n Titel?`, wenn die Dateinamen verschiedene Titel tragen und jede Datei groß genug für ein ganzes Buch ist. Die Checkbox *Ordner als Einzeldateien behandeln* macht dasselbe für den gesamten Scan. Auch Ordner, die in Disc-Unterordner (`CD`, `CD1`, `CD 2`, `Disc 3`, `Teil 1`) aufgeteilt sind, gelten als **ein** Audiobook — der Ordnername darüber liefert den Titel, die Parts werden über alle Discs hinweg durchnummeriert. Unterordner ohne Audio (`Cover`, Scans, Booklets) werden dabei ignoriert. Mehrteiler in Unterordnern (`Teil A`/`Teil B`, `A - Titel`/`B - Titel`) zählen ebenfalls als ein Hörbuch. Liegen die Teile dagegen **nebeneinander** (`100 - Toteninsel Teil 1`, `… Teil 2`, …), markierst du sie und klickst *Ausgewählte zusammenfassen* — sie werden als ein Hörbuch mit durchlaufenden Parts importiert (✂️ löst das wieder auf). Liegen die Dateien einer bereits importierten Anfrage nicht mehr in der Library (zurück in den Download-Ordner verschoben, um sie nach einem neuen Namensschema abzulegen), gilt sie wieder als offen: der Scan schlägt sie ganz normal vor (mit `↺` markiert) und der Import legt sie neu ab. Sind mehrere Einträge derselben Anfrage zugeordnet, fragt wordarr vor dem Import nach und fasst sie zusammen — sonst importiert nur der erste und der Rest scheitert. Fehlt einem bereits importierten Hörbuch später ein Teil, wählst du es im Zuordnungs-Dropdown unter *Bereits importiert — Teile anhängen* (↩︎); die neuen Dateien werden hinten angehängt und alle Tracks neu getaggt.
 
 ## Setup (Docker)
 

static/app.js

@@ -745,7 +745,7 @@ function renderImportTable() {
         .filter((r) => r.media_type === item.media_type && r.imported_path)
         .map((r) => option(r, " ↩︎"))
         .join("");
-      return `<tr>
+      return `<tr class="${item.importState ? "row-" + item.importState : ""}">
         <td><input type="checkbox" data-check="${i}" ${item.checked ? "checked" : ""}></td>
         <td class="mono">
           ${esc(item.name)}${item.is_dir ? " 📁" : ""}
@@ -765,12 +765,14 @@ function renderImportTable() {
             ? `<button class="secondary" data-split="${i}" title="${item.parts ? "Zusammenfassung wieder auflösen" : "Ordner in einzelne Titel aufteilen"}">✂️</button>`
             : ""}
         </td>
-        ${scoreCell(item)}
+        ${item.importState ? importStateCell(item) : scoreCell(item)}
       </tr>`;
     })
     .join("");
   table.hidden = false;
   $("#import-btn").hidden = false;
+  const showsState = scanItems.some((it) => it.importState);
+  table.querySelector("thead th:last-child").textContent = showsState ? "Status" : "Score";
 
   tbody.querySelectorAll("[data-quick]").forEach((b) =>
     b.addEventListener("click", () => openQuickDialog(parseInt(b.dataset.quick)))
@@ -801,6 +803,14 @@ function renderImportTable() {
   updateImportPageInfo(pages);
 }
 
+function importStateCell(item) {
+  if (item.importState === "running") {
+    return '<td class="state running"><span class="spinner"></span> läuft…</td>';
+  }
+  if (item.importState === "done") return '<td class="state done">✓ importiert</td>';
+  return `<td class="state failed" title="${esc(item.importError)}">✗ Fehler</td>`;
+}
+
 function updateImportPageInfo(pages) {
   pages = pages ?? Math.max(1, Math.ceil(viewIdx.length / IMPORT_PAGE_SIZE));
   const selected = scanItems.filter((it) => it.checked && it.request_id).length;
@@ -1130,7 +1140,7 @@ const IMPORT_BATCH_SIZE = 20;
 
 // several entries on one request means one audiobook split across folders:
 // importing them one by one only imports the first and fails the rest
-function collapseSharedRequests(chosen) {
+function collapseSharedRequests(chosen, opts = {}) {
   const byRequest = new Map();
   for (const item of chosen) {
     const group = byRequest.get(item.request_id);
@@ -1149,13 +1159,17 @@ function collapseSharedRequests(chosen) {
     );
     if (!ok) return null;
   }
-  return [...byRequest.values()].map((group) => ({
+  const built = [...byRequest.values()].map((group) => ({
-    path: group.length > 1 ? sharedParent(group) : group[0].path,
+    parts: group,
-    is_dir: group.length > 1 ? true : group[0].is_dir,
+    item: {
-    files: group.flatMap((it) => it.files),
+      path: group.length > 1 ? sharedParent(group) : group[0].path,
-    request_id: group[0].request_id,
+      is_dir: group.length > 1 ? true : group[0].is_dir,
-    append: importedReqs.some((r) => r.id === group[0].request_id),  // orphans re-import
+      files: group.flatMap((it) => it.files),
+      request_id: group[0].request_id,
+      append: importedReqs.some((r) => r.id === group[0].request_id),  // orphans re-import
+    },
   }));
+  return opts.keepGroups ? built : built.map((b) => b.item);
 }
 
 // deepest folder that holds all of the group's entries
@@ -1170,19 +1184,47 @@ function sharedParent(group) {
 $("#import-btn").addEventListener("click", async () => {
   const chosen = scanItems.filter((item) => item.checked && item.request_id);
   if (!chosen.length) { toast("Nichts ausgewählt", true); return; }
-  const items = collapseSharedRequests(chosen);
+  const groups = collapseSharedRequests(chosen, { keepGroups: true });
-  if (!items) return;
+  if (!groups) return;
+
   const btn = $("#import-btn");
   btn.disabled = true;
+  scanItems.forEach((it) => { it.importState = null; it.importError = ""; });
+  const total = groups.length;
   const allResults = [];
+  let done = 0;
+  setImportProgress(0, total);
+
   try {
-    for (let done = 0; done < items.length; done += IMPORT_BATCH_SIZE) {
+    // one request per entry: the row can only turn green once its own move came
-      btn.innerHTML =
+    // back, and a batch would only report after all of its items finished
-        `<span class="spinner"></span> Importiere… ${Math.min(done + IMPORT_BATCH_SIZE, items.length)}/${items.length}`;
+    for (const { item, parts } of groups) {
-      const batch = items.slice(done, done + IMPORT_BATCH_SIZE);
+      parts.forEach((p) => (p.importState = "running"));
-      const res = await api("/api/import", { method: "POST", body: JSON.stringify({ items: batch }) });
+      // follow the running entry across pages, otherwise only the bar moves
-      allResults.push(...res.results);
+      applyImportView();
+      const pos = viewIdx.indexOf(scanItems.indexOf(parts[0]));
+      if (pos >= 0) importPage = Math.floor(pos / IMPORT_PAGE_SIZE);
+      renderImportTable();
+      let result;
+      try {
+        const res = await api("/api/import", {
+          method: "POST", body: JSON.stringify({ items: [item] }),
+        });
+        result = res.results[0];
+      } catch (err) {
+        result = { path: item.path, ok: false, error: err.message };
+      }
+      allResults.push(result);
+      parts.forEach((p) => {
+        p.importState = result.ok ? "done" : "failed";
+        p.importError = result.ok ? "" : result.error;
+        p.checked = false;
+      });
+      done += 1;
+      setImportProgress(done, total);
+      renderImportTable();
     }
+
     const failed = allResults.filter((r) => !r.ok);
     $("#import-summary").innerHTML =
       `<p class="${failed.length ? "error" : "ok"}"><strong>` +
@@ -1198,14 +1240,32 @@ $("#import-btn").addEventListener("click", async () => {
       .join("");
     toast(failed.length ? `Import fertig, ${failed.length} Fehler` : "Import fertig", failed.length > 0);
     refreshMissingBadge();
-    $("#scan-btn").click();
+    // the list stays as it is, with its green and red rows - rescanning would
-  } catch (err) { toast(err.message, true); }
+    // wipe exactly the feedback the user just waited for
-  finally {
+  } finally {
     btn.disabled = false;
     btn.textContent = "Ausgewählte importieren";
   }
 });
 
+function setImportProgress(done, total) {
+  const box = $("#import-progress");
+  if (!total || done >= total) {
+    box.hidden = done < total;
+    if (done >= total) {
+      box.querySelector("progress").value = total;
+      box.querySelector("span").textContent = `${total}/${total} · fertig`;
+    }
+    return;
+  }
+  box.hidden = false;
+  const bar = box.querySelector("progress");
+  bar.max = total;
+  bar.value = done;
+  box.querySelector("span").textContent =
+    `${done}/${total} · ${Math.round((done / total) * 100)} %`;
+}
+
 // ---- init ----
 loadLibraries();
 refreshMissingBadge();

static/index.html

@@ -192,6 +192,10 @@
         </div>
         <div class="bar">
           <button id="import-btn" hidden>Ausgewählte importieren</button>
+          <div id="import-progress" hidden>
+            <progress max="1" value="0"></progress>
+            <span class="muted"></span>
+          </div>
         </div>
         <div id="import-summary"></div>
         <div id="import-results"></div>

static/style.css

@@ -55,6 +55,17 @@ button:disabled { opacity: 0.6; cursor: default; }
 .mono { font-family: ui-monospace, monospace; font-size: 0.85rem; word-break: break-all; }
 .subpath { color: var(--muted); font-size: 0.75rem; font-family: ui-monospace, monospace; }
 .tag.warn { background: #8a6d1f; }
+
+/* per-entry import feedback */
+#import-progress { display: flex; align-items: center; gap: 0.6rem; flex: 1; }
+#import-progress progress { flex: 1; max-width: 26rem; height: 0.7rem; }
+tr.row-running { background: rgba(90, 140, 220, 0.12); }
+tr.row-done { background: rgba(80, 170, 110, 0.12); }
+tr.row-failed { background: rgba(200, 90, 90, 0.14); }
+td.state { white-space: nowrap; font-size: 0.85rem; }
+td.state.done { color: var(--ok); }
+td.state.failed { color: #e08585; }
+td.state.running { color: var(--muted); }
 .tag { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.4rem; border-radius: 4px; background: var(--accent); color: #fff; font-size: 0.7rem; font-family: system-ui, sans-serif; vertical-align: 0.1em; }
 
 /* view modes (Missing/Importiert) */