panes: add generic CollectionPane + tighten ctx for recursion

CollectionPane takes {items, layout, empty, onSelect} and renders each
item into its own slot via ctx.resolvePane — so urn:solid:view, user
pins, and registration order all flow through identically to single-
subject rendering. Async per-slot with fallback placeholders.

The adapter now forwards rawData to canHandle (3rd arg) and ctx to
render (5th arg) — both hub extensions over SLIP-48's spec, ignored
by panes that don't need them. ctx now carries findPane, resolvePane,
and authFetch so any pane can recurse without knowing the host.

Migrate Contacts as a proof: ~25 lines of hand-rolled iterate-and-
findFor loop become ~10 lines that hand items to CollectionPane.
Trade-off: lost the placeholder-then-upgrade UX (now one-pass after
profiles resolve in parallel).

Author: melvincarvalho

src/app.js

@@ -18,6 +18,7 @@ import * as Activity from "./apps/activity.js";
 import * as Settings from "./apps/settings.js";
 
 import { register as registerApp, list as listApps, find as findApp, loadAllExternal } from "./apps.js";
+import { findFor as findPane, resolveFor as resolvePane } from "./panes.js";
 
 // Register built-in panes. External panes can register themselves via
 // import('./panes.js').then(m => m.register(myPane)).
@@ -29,6 +30,7 @@ import * as EventPane        from "./panes/event.js";
 import * as PhotoPane        from "./panes/photo.js";
 import * as PersonPane       from "./panes/person.js";
 import * as FilePane         from "./panes/file.js";
+import * as CollectionPane   from "./panes/collection.js";
 import { register as registerPane, adapt } from "./panes.js";
 
 // Tracker pane priority:
@@ -46,6 +48,7 @@ registerPane(adapt(EventPane,   "hub-pod/event"));
 registerPane(adapt(PhotoPane,   "hub-pod/photo"));
 registerPane(adapt(PersonPane,  "hub-pod/person"));
 registerPane(adapt(FilePane,    "hub-pod/file"));
+registerPane(adapt(CollectionPane, "hub-pod/collection"));
 
 // Built-in apps. Order here = rail order. External apps load via
 // loadAllExternal() at boot and append to the registry.
@@ -60,6 +63,15 @@ const state = {
 const ctx = {
   get auth() { return getAuth(); },
   switchApp,
+  // Pane recursion: collection-shaped panes delegate per-item rendering
+  // back through the host so the same urn:solid:view → user-pin → registry
+  // cascade is honoured for children.
+  findPane,
+  resolvePane,
+  // Authenticated fetch — DPoP-signed for Solid sessions, same as
+  // pod.js uses internally. Panes that need their own GET/PUT calls
+  // should prefer pod.js helpers, but this is the escape hatch.
+  fetch: (...args) => (window.xlogin?.authFetch || fetch)(...args),
 };
 
 // ---- Rail ----------------------------------------------------------------

src/apps/contacts.js

@@ -69,29 +69,25 @@ export async function render(container, ctx) {
     return;
   }
 
-  page.innerHTML = `<div class="contacts-grid" id="contacts-grid"></div>`;
+  page.innerHTML = `<div id="contacts-grid" style="padding:22px 24px"></div>`;
   const grid = $("#contacts-grid");
 
-  // Render placeholder cards immediately; resolve profiles in parallel
-  webIds.forEach(async (wid, i) => {
-    const slot = document.createElement("div");
-    grid.appendChild(slot);
-    // Initial placeholder via the pane (no profile yet)
-    const placeholder = { url: wid, doc: { mode: "card" }, forClass: FOAF_PERSON };
-    const pane = findFor(placeholder);
-    if (!pane) {
-      slot.outerHTML = `<div class="contact-card"><div class="ava">?</div><div class="name">No PersonPane</div><div class="webid">${escape(wid)}</div></div>`;
-      return;
-    }
-    pane.render(placeholder, slot, ctx);
-    // Then upgrade with the real profile
-    try {
-      const profile = await fetchWebIdProfile(wid);
-      pane.render({ url: wid, doc: { profile, mode: "card" }, forClass: FOAF_PERSON }, slot, ctx);
-    } catch {
-      // leave placeholder
-    }
-  });
+  // Resolve every WebID's profile in parallel; failed ones render with
+  // null profile (PersonPane card-mode shows "Loading…" placeholder).
+  const profiles = await Promise.all(
+    webIds.map(wid => fetchWebIdProfile(wid).catch(() => null))
+  );
+  const items = webIds.map((wid, i) => ({
+    url: wid,
+    doc: { profile: profiles[i], mode: "card" },
+    forClass: FOAF_PERSON,
+  }));
+
+  // Hand the items to the generic CollectionPane — it iterates and
+  // delegates each card back through ctx.resolvePane to PersonPane.
+  const collInput = { doc: { items, layout: "grid" } };
+  const coll = findFor(collInput);
+  if (coll) await coll.render(collInput, grid, ctx);
 }
 
 function loginPrompt() {

src/panes.js

@@ -160,9 +160,12 @@ export function adapt(obj, idOrUrl) {
     canHandle(input) {
       const subject = makeSubject(input);
       const store = makeStore(input);
-      try { return obj.canHandle(subject, store); } catch { return false; }
+      // 3rd arg (rawData) is a hub extension over SLIP-48's 2-arg canHandle —
+      // collection-shape panes need it to match on `items` etc. Other panes
+      // ignore the extra arg.
+      try { return obj.canHandle(subject, store, input?.doc || null); } catch { return false; }
     },
-    async render(input, container, _ctx) {
+    async render(input, container, ctx) {
       // Bridge SLIP-48 CustomEvents → hub's input.onChange / input.onDelete /
       // input.onOpen callbacks. Panes that emit pane:change / pane:delete /
       // pane:open on their container get their callbacks wired up automatically.
@@ -174,7 +177,10 @@ export function adapt(obj, idOrUrl) {
       container.addEventListener("pane:open",   onOpen);
       const subject = makeSubject(input);
       const store = makeStore(input);
-      return obj.render(subject, store, container, input?.doc || null);
+      // ctx is a hub extension over SLIP-48's 4-arg render — collection-shape
+      // panes use ctx.resolvePane to recurse into child panes. Other panes
+      // ignore the extra arg.
+      return obj.render(subject, store, container, input?.doc || null, ctx);
     },
   };
 }

src/panes/collection.js

@@ -0,0 +1,107 @@
+/**
+ * collection.js — generic list-of-subjects pane.
+ *
+ * Takes an array of items (each `{url, doc?, forClass?, view?}`) and
+ * renders each into its own slot using whichever per-item pane the
+ * host's registry returns. The collection pane itself draws no leaf
+ * data — it's pure orchestration over child panes.
+ *
+ * Input (rawData):
+ *   {
+ *     items:    Array<{url, doc?, forClass?, view?}>,
+ *     layout?:  "grid" | "list"          // default "grid"
+ *     empty?:   { title?, body? }        // shown when items.length === 0
+ *     onSelect?: (item) => void          // optional click forwarding
+ *   }
+ *
+ * Hosts invoke explicitly: `pane.render({items}, container, ctx)`.
+ * Per-slot rendering uses `ctx.resolvePane(input)` so urn:solid:view,
+ * user pins, and registration order all flow through identically to
+ * single-subject rendering. If any slot's pane lookup fails, that
+ * slot gets a placeholder with the URL — the rest still render.
+ */
+
+import { ICON, escape } from "../ui.js";
+
+export const label = "Collection";
+export const icon  = "🗂";
+export const meta = {
+  id: "hub-pod/collection",
+  name: "Generic collection (grid/list)",
+};
+
+export function canHandle(_subject, _store, rawData) {
+  return Array.isArray(rawData?.items);
+}
+
+export async function render(_subject, _store, container, rawData, ctx) {
+  const items   = rawData?.items || [];
+  const layout  = rawData?.layout || "grid";
+  const empty   = rawData?.empty;
+  const onSelect = rawData?.onSelect;
+
+  injectStyles();
+
+  if (!items.length) {
+    container.innerHTML = `<div class="coll-empty">
+      <div class="coll-empty-title">${escape(empty?.title || "Nothing here yet")}</div>
+      ${empty?.body ? `<div class="coll-empty-body">${escape(empty.body)}</div>` : ""}
+    </div>`;
+    return;
+  }
+
+  const grid = document.createElement("div");
+  grid.className = `coll coll-${layout}`;
+  container.appendChild(grid);
+
+  // Resolve panes in parallel — most slots come from the same class so
+  // they hit the registry cache. Failures fall back to a placeholder.
+  await Promise.all(items.map(async (item) => {
+    const slot = document.createElement("div");
+    slot.className = "coll-slot";
+    if (onSelect) {
+      slot.style.cursor = "pointer";
+      slot.addEventListener("click", () => onSelect(item));
+    }
+    grid.appendChild(slot);
+    try {
+      const pane = ctx?.resolvePane
+        ? await ctx.resolvePane(item)
+        : (ctx?.findPane ? ctx.findPane(item) : null);
+      if (pane) {
+        await pane.render(item, slot, ctx);
+      } else {
+        slot.innerHTML = `<div class="coll-fallback">
+          <div class="coll-fallback-url">${escape(item.url || "(no url)")}</div>
+          <div class="coll-fallback-hint">No pane registered${item.forClass ? ` for ${escape(item.forClass)}` : ""}.</div>
+        </div>`;
+      }
+    } catch (e) {
+      slot.innerHTML = `<div class="coll-fallback err">
+        <div class="coll-fallback-url">${escape(item.url || "(no url)")}</div>
+        <div class="coll-fallback-hint">Pane failed: ${escape(e.message)}</div>
+      </div>`;
+    }
+  }));
+}
+
+function injectStyles() {
+  if (document.getElementById("coll-pane-css")) return;
+  const s = document.createElement("style");
+  s.id = "coll-pane-css";
+  s.textContent = `
+.coll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
+.coll-list { display: flex; flex-direction: column; gap: 6px; }
+.coll-slot { min-width: 0; }
+.coll-fallback { padding: 12px 14px; border: 1px dashed var(--line); border-radius: 8px; color: var(--text-dim); }
+.coll-fallback.err { border-color: var(--danger); color: var(--danger); }
+.coll-fallback-url { font-family: var(--mono); font-size: 12px; word-break: break-all; }
+.coll-fallback-hint { font-size: 12px; color: var(--text-faint); margin-top: 4px; }
+.coll-empty { padding: 32px 24px; text-align: center; color: var(--text-faint); }
+.coll-empty-title { font-size: 15px; color: var(--text); margin-bottom: 4px; }
+.coll-empty-body { font-size: 13px; }
+`;
+  document.head.appendChild(s);
+}
+
+export default { label, icon, canHandle, render };