Refine resource loader status grouping and PDF import handling

assets/scripts/pages/resource-loader.js

@@ -23,6 +23,15 @@
     pdfUrls: new Map(),
     thumbnailUrls: new Map(),
   };
+  let pdfJsPromise;
+
+  const STATUS_GROUPS = [
+    { id: "active", label: "In progress", description: "Resources you are actively reading or watching." },
+    { id: "backlog", label: "Backlog", description: "Resources you intend to start later." },
+    { id: "shelf", label: "On the shelf", description: "Resources kept close at hand, but not currently active." },
+    { id: "completed", label: "Completed", description: "Resources you have finished." },
+    { id: "archived", label: "Archived", description: "Resources retained outside your current library flow." },
+  ];
 
   const els = {
     vaultSelect: $("#rl-vault-select"),
@@ -217,7 +226,7 @@
     const progress = Model.progressFor(resource);
     const initial = (resource.title || "?").trim().charAt(0).toUpperCase();
     const creators = (resource.creators || []).join(", ") || "Unknown creator";
-    return `<article class="rl-resource-card" tabindex="0" role="button" data-resource-id="${escapeHtml(resource.id)}" aria-label="Open ${escapeHtml(resource.title)}">
+    return `<article class="rl-resource-card rl-resource-card--${escapeHtml(resource.status)}" tabindex="0" role="button" data-resource-id="${escapeHtml(resource.id)}" aria-label="Open ${escapeHtml(resource.title)}">
       <span class="rl-resource-cover" data-thumb="${escapeHtml(resource.thumbnailId || "")}">${escapeHtml(initial)}</span>
       <span class="rl-resource-title"><strong>${escapeHtml(resource.title)}</strong><small>${escapeHtml(creators)}</small><small>${escapeHtml((resource.tags || []).slice(0, 3).join(" · "))}</small></span>
       <span class="rl-badges"><span class="rl-badge">${escapeHtml(resource.type)}</span><span class="rl-badge">${escapeHtml(resource.status)}</span><span class="rl-badge">${escapeHtml(resource.format)}</span></span>
@@ -226,6 +235,19 @@
     </article>`;
   }
 
+  function statusGroupMarkup(group, resources) {
+    const headingId = `rl-status-${group.id}`;
+    const countLabel = `${resources.length} ${resources.length === 1 ? "resource" : "resources"}`;
+    return `<section class="rl-status-group rl-status-group--${group.id}" aria-labelledby="${headingId}">
+      <header class="rl-status-group__head">
+        <span class="rl-status-group__marker" aria-hidden="true"></span>
+        <span class="rl-status-group__title"><strong id="${headingId}">${escapeHtml(group.label)}</strong><small>${escapeHtml(group.description)}</small></span>
+        <span class="rl-status-group__count" aria-label="${countLabel}">${resources.length}</span>
+      </header>
+      <div class="rl-status-resources">${resources.map(cardMarkup).join("")}</div>
+    </section>`;
+  }
+
   async function hydrateThumbnails(container) {
     const targets = Array.from(container.querySelectorAll("[data-thumb]")).filter((item) => item.dataset.thumb);
     await Promise.all(targets.map(async (target) => {
@@ -260,7 +282,10 @@
       els.resourceList.querySelector("[data-empty-add]").addEventListener("click", () => openResourceDialog());
       return;
     }
-    els.resourceList.innerHTML = resources.map(cardMarkup).join("");
+    els.resourceList.innerHTML = STATUS_GROUPS.map((group) => {
+      const matching = resources.filter((resource) => resource.status === group.id);
+      return matching.length ? statusGroupMarkup(group, matching) : "";
+    }).join("");
     bindResourceCards();
     hydrateThumbnails(els.resourceList);
   }
@@ -291,6 +316,20 @@
     $("#rl-cover-preview").innerHTML = "<span>Cover</span>";
   }
 
+  function updateResourceFormForType() {
+    const type = $("#rl-field-type").value;
+    const isBook = type === "book";
+    els.resourceDialog.classList.toggle("is-compact", !isBook);
+    els.resourceDialog.querySelectorAll("[data-resource-types]").forEach((element) => {
+      element.hidden = !element.dataset.resourceTypes.split(/\s+/).includes(type);
+    });
+    $("#rl-creators-label").textContent = type === "video" ? "Presenter / creator" : "Author(s)";
+    $("#rl-publisher-label").textContent = type === "video" ? "Channel" : "Publisher";
+    if (!isBook) $("#rl-field-format").value = "web";
+    if (!isBook) $("#rl-field-pages").value = "";
+    if (type !== "video") $("#rl-field-duration").value = "";
+  }
+
   async function showCover(id) {
     resetCover();
     const url = await thumbnailUrl(id);
@@ -341,6 +380,7 @@
     setValue("rl-field-tags", item && (item.tags || []).join(", "));
     setValue("rl-field-description", item && item.description);
     setValue("rl-field-notes", item && item.notes);
+    updateResourceFormForType();
     populateFolderField(item && item.folderId ? item.folderId : (!["all", "unfiled"].includes(state.folderId) ? state.folderId : ""));
     $("#rl-delete-resource").hidden = !resource;
     $("#rl-open-resource").hidden = !(item && (item.url || item.attachmentId));
@@ -597,6 +637,20 @@
     return new Promise((resolve) => canvas.toBlob(resolve, "image/jpeg", .78));
   }
 
+  function loadPdfJs() {
+    if (globalThis.pdfjsLib) return Promise.resolve(globalThis.pdfjsLib);
+    if (pdfJsPromise) return pdfJsPromise;
+    pdfJsPromise = new Promise((resolve, reject) => {
+      const script = document.createElement("script");
+      script.src = "/assets/scripts/vendor/pdf.min.js";
+      script.async = true;
+      script.onload = () => globalThis.pdfjsLib ? resolve(globalThis.pdfjsLib) : reject(new Error("PDF.js loaded without exposing its API."));
+      script.onerror = () => reject(new Error("The local PDF.js library could not be loaded."));
+      document.head.appendChild(script);
+    });
+    return pdfJsPromise;
+  }
+
   async function importPdf(file) {
     if (!file || (file.type && file.type !== "application/pdf") || !file.name.toLowerCase().endsWith(".pdf")) {
       toast("Choose a PDF file.", true); return;
@@ -605,8 +659,8 @@
     let attachmentId;
     let thumbnailId;
     try {
-      const pdfjs = await import("/assets/scripts/vendor/pdf.min.mjs");
-      pdfjs.GlobalWorkerOptions.workerSrc = "/assets/scripts/vendor/pdf.worker.min.mjs";
+      const pdfjs = await loadPdfJs();
+      pdfjs.GlobalWorkerOptions.workerSrc = "/assets/scripts/vendor/pdf.worker.min.js";
       const bytes = new Uint8Array(await file.arrayBuffer());
       const documentTask = pdfjs.getDocument({ data: bytes });
       const pdf = await documentTask.promise;
@@ -638,7 +692,8 @@
       if (attachmentId) await deleteAttachment(attachmentId).catch(() => {});
       if (thumbnailId) await deleteAttachment(thumbnailId).catch(() => {});
       const reason = error && error.name === "PasswordException" ? "The PDF is password protected." : error && error.name === "QuotaExceededError" ? "Browser storage is full." : "The PDF could not be read.";
-      toast(`${reason} No resource was created.`, true);
+      const detail = error && error.message ? ` ${error.message}` : "";
+      toast(`${reason}${detail} No resource was created.`, true);
       console.error(error);
     } finally {
       els.pdfInput.value = "";
@@ -687,6 +742,7 @@
     $("#rl-delete-resource").addEventListener("click", removeResource);
     $("#rl-open-resource").addEventListener("click", openLinkedResource);
     $("#rl-add-session").addEventListener("click", openSessionDialog);
+    $("#rl-field-type").addEventListener("change", updateResourceFormForType);
     $("#rl-session-form").addEventListener("submit", saveSession);
     $("#rl-name-form").addEventListener("submit", submitName);
     $("#rl-name-delete").addEventListener("click", deleteNamedFolder);

assets/styles/pages/resource-loader.css

@@ -236,14 +236,44 @@
 .rl-filters select,
 .rl-vault-picker select { width: 100%; min-height: 2.65rem; padding: .55rem .7rem; }
 
-.rl-resource-list { display: grid; gap: .6rem; }
-.rl-resource-list.is-grid { grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); }
+.rl-resource-list { display: grid; gap: 1.15rem; min-width: 0; }
+.rl-status-group {
+  --rl-status-colour: var(--rl-accent);
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid var(--rl-line);
+  border-radius: 14px;
+  background: color-mix(in oklab, var(--surface) 94%, var(--rl-status-colour) 6%);
+}
+.rl-status-group--active { --rl-status-colour: #3f7f5d; }
+.rl-status-group--backlog { --rl-status-colour: #9b6b43; }
+.rl-status-group--shelf { --rl-status-colour: #52769a; }
+.rl-status-group--completed { --rl-status-colour: #7162a2; }
+.rl-status-group--archived { --rl-status-colour: #77736d; }
+.rl-status-group__head {
+  display: grid;
+  grid-template-columns: .7rem minmax(0, 1fr) auto;
+  align-items: center;
+  gap: .7rem;
+  padding: .75rem .85rem;
+  border-bottom: 1px solid var(--rl-line);
+  background: color-mix(in oklab, var(--surface) 82%, var(--rl-status-colour) 18%);
+}
+.rl-status-group__marker { width: .62rem; height: .62rem; border-radius: 50%; background: var(--rl-status-colour); box-shadow: 0 0 0 4px color-mix(in oklab, var(--rl-status-colour) 18%, transparent); }
+.rl-status-group__title { min-width: 0; }
+.rl-status-group__title strong { display: block; color: var(--heading); font-family: Georgia, serif; font-size: 1rem; }
+.rl-status-group__title small { display: block; margin-top: .12rem; overflow: hidden; color: var(--rl-muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
+.rl-status-group__count { min-width: 1.75rem; padding: .18rem .45rem; border-radius: 999px; color: var(--heading); background: color-mix(in oklab, var(--surface) 76%, transparent); font-size: .72rem; font-weight: 850; text-align: center; }
+.rl-status-resources { display: grid; gap: .6rem; min-width: 0; padding: .65rem; }
+.rl-resource-list.is-grid .rl-status-resources { grid-template-columns: repeat(auto-fit, minmax(min(13.5rem, 100%), 1fr)); }
 
 .rl-resource-card {
+  box-sizing: border-box;
   display: grid;
   grid-template-columns: 3.5rem minmax(0, 1.25fr) minmax(8rem, .8fr) minmax(8rem, .65fr) auto;
   align-items: center;
   gap: .9rem;
+  min-width: 0;
   width: 100%;
   padding: .65rem;
   border: 1px solid var(--rl-line);
@@ -254,6 +284,7 @@
   text-align: left;
   cursor: pointer;
 }
+.rl-resource-card > * { min-width: 0; }
 .rl-resource-card:hover { transform: translateY(-1px); border-color: var(--rl-accent); }
 .rl-resource-cover {
   display: grid;
@@ -281,7 +312,7 @@
 .rl-progress small { display: block; margin-top: .3rem; color: var(--rl-muted); font-size: .7rem; text-align: right; }
 .rl-card-arrow { color: var(--rl-muted); font-size: 1.2rem; }
 
-.rl-resource-list.is-grid .rl-resource-card { grid-template-columns: 3.8rem minmax(0, 1fr); align-items: start; min-height: 9rem; }
+.rl-resource-list.is-grid .rl-resource-card { grid-template-columns: 3.8rem minmax(0, 1fr); align-items: start; min-height: 9rem; height: auto; }
 .rl-resource-list.is-grid .rl-badges,
 .rl-resource-list.is-grid .rl-progress { grid-column: 1 / -1; }
 .rl-resource-list.is-grid .rl-card-arrow { display: none; }
@@ -305,6 +336,9 @@
 .rl-danger { color: #a12d2d !important; border-color: color-mix(in oklab, #a12d2d 45%, var(--rl-line)) !important; }
 
 .rl-resource-dialog .rl-dialog__body { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1.2rem; }
+.rl-resource-dialog.is-compact { width: min(46rem, calc(100% - 2rem)); }
+.rl-resource-dialog.is-compact .rl-dialog__body { grid-template-columns: minmax(0, 1fr); }
+.rl-resource-dialog.is-compact .rl-form-grid { max-width: 42rem; width: 100%; margin-inline: auto; }
 .rl-cover-preview { display: grid; place-items: center; align-self: start; aspect-ratio: 3/4; overflow: hidden; border: 1px solid var(--rl-line); border-radius: 10px; color: var(--rl-muted); background: var(--rl-paper-deep); font-family: Georgia, serif; }
 .rl-cover-preview img { width: 100%; height: 100%; object-fit: cover; }
 .rl-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
@@ -363,7 +397,8 @@
   .rl-library__toolbar { align-items: flex-start; }
   .rl-filters { grid-template-columns: 1fr; }
   .rl-search { grid-column: auto; }
-  .rl-resource-list.is-grid { grid-template-columns: 1fr; }
+  .rl-resource-list.is-grid .rl-status-resources { grid-template-columns: 1fr; }
+  .rl-status-group__title small { white-space: normal; }
   .rl-resource-card { grid-template-columns: 3.5rem minmax(0, 1fr); }
   .rl-resource-card .rl-badges,
   .rl-resource-card .rl-progress { grid-column: 1 / -1; }