pagnation

static/js/home.js

@@ -107,6 +107,11 @@ const registrationEnabled = document.body.dataset.registrationEnabled === "true"
 const resourcesDialog = document.querySelector("#resources-dialog");
 const resourcesList = document.querySelector("#resources-list");
 const resourcesError = document.querySelector("#resources-error");
+const resourcesSearch = document.querySelector("#resources-search");
+const resourcesPerPage = document.querySelector("#resources-per-page");
+const resourcesPagination = document.querySelector("#resources-pagination");
+let resourcesPage = 1;
+let resourcesSearchTimer;
 const profileDialog = document.querySelector("#profile-dialog");
 
 const profileForm = document.querySelector("#profile-form");
@@ -116,11 +121,16 @@ function authHeaders() { return {}; }
 function escapeHtml(value) { const node = document.createElement("div"); node.textContent = String(value ?? ""); return node.innerHTML; }
 function shareExpiry(hours, forever) { if (forever) return null; const value = Number(hours); if (!Number.isFinite(value) || value <= 0 || value > 87600) throw new Error("Enter a validity between 1 and 87600 hours."); return new Date(Date.now() + value * 3600000).toISOString(); }
 function formatShareExpiry(value) { if (!value) return "Never expires"; const date = new Date(value); return Number.isNaN(date.getTime()) ? value : `Expires ${date.toLocaleString()}`; }
+function renderResourcesPagination(meta) {
+  resourcesPagination.innerHTML = meta.total ? `<button type="button" data-page="${meta.page - 1}" ${meta.page <= 1 ? "disabled" : ""}>Previous</button><span>Page ${meta.page} of ${meta.total_pages} · ${meta.total} items</span><button type="button" data-page="${meta.page + 1}" ${meta.page >= meta.total_pages ? "disabled" : ""}>Next</button>` : "";
+}
 async function loadResources() {
   resourcesError.textContent = ""; resourcesList.innerHTML = "<p>Loading…</p>";
   try {
-    const data = await api("/api/auth/resources", { headers: authHeaders() });
-    const items = [...data.workspaces.map(item => ({ ...item, kind: "workspace", url: `/w/${item.slug}` })), ...data.pads.map(item => ({ ...item, kind: "pad", url: `/p/${item.slug}` }))];
+    const params = new URLSearchParams({ q: resourcesSearch.value.trim(), page: String(resourcesPage), per_page: resourcesPerPage.value });
+    const data = await api(`/api/auth/resources?${params}`, { headers: authHeaders() });
+    resourcesPage = data.pagination.page;
+    const items = data.items.map(item => ({ ...item, url: item.kind === "workspace" ? `/w/${item.slug}` : `/p/${item.slug}` }));
     resourcesList.innerHTML = items.length ? "" : "<p>No assigned items yet.</p>";
     for (const item of items) {
       const row = document.createElement("article");
@@ -256,9 +266,14 @@ async function loadResources() {
       });
       resourcesList.append(row);
     }
-  } catch (e) { resourcesList.innerHTML = ""; resourcesError.textContent = e.message; }
+    renderResourcesPagination(data.pagination);
+  } catch (e) { resourcesList.innerHTML = ""; resourcesPagination.innerHTML = ""; resourcesError.textContent = e.message; }
 }
 
+resourcesSearch?.addEventListener("input", () => { clearTimeout(resourcesSearchTimer); resourcesSearchTimer = setTimeout(() => { resourcesPage = 1; loadResources(); }, 250); });
+resourcesPerPage?.addEventListener("change", () => { resourcesPage = 1; loadResources(); });
+resourcesPagination?.addEventListener("click", event => { const button = event.target.closest("[data-page]"); if (!button || button.disabled) return; resourcesPage = Number(button.dataset.page) || 1; loadResources(); });
+
 
 function renderAccount(session) {
   currentSession = session;