From d7d9b98c5191b90ebfe5b248c117401270ae4594 Mon Sep 17 00:00:00 2001
From: Melvin Carvalho <melvincarvalho@gmail.com>
Date: Fri, 5 Jun 2026 11:59:49 +0200
Subject: [PATCH] feat(panes): searchable bookmark collection pane +
 container-pane support
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Browser (data-browser-panes.js): panes are now offered containers as well as
single resources. render() may be async and may return null to decline, in
which case the browser falls through to the folder table / JSON (no regression
for ordinary folders). h gains isContainer, path, children, and an async
fetchResource(url) helper so a pane can render a collection.

Collection pane (examples/panes/bookmark-collection.js): canHandles the
/public/bookmark/ container and renders its bookmark:Bookmark members as a
searchable feed — compact cards (favicon, title, host, summary snippet, tags),
a live search box (inline oninput, no script tag), card body -> the bookmark's
.jsonld detail page, corner arrow -> the original link. Returns null when the
folder holds no bookmarks.

No version bump: the browser change lands on gh-pages but won't reach the cdn
until a future publish; pods can use it via a --mashlib-module override.

Refs #73
---
 data-browser-panes.js                 | 57 +++++++++++-----
 examples/panes/bookmark-collection.js | 96 +++++++++++++++++++++++++++
 2 files changed, 138 insertions(+), 15 deletions(-)
 create mode 100644 examples/panes/bookmark-collection.js

diff --git a/data-browser-panes.js b/data-browser-panes.js
index e0a654e..0072d0f 100644
--- a/data-browser-panes.js
+++ b/data-browser-panes.js
@@ -10,9 +10,18 @@
 //   3. No matching pane → pretty-printed JSON-LD (same as data-browser.js).
 //
 // Single file, no build, no framework. Local pane contract (ES module):
-//   export default { canHandle(node, h) -> boolean, render(node, h) -> htmlString }
-// where h = { escape, prop, propAll, first, idOf, types, host, fmtDate, localName }.
-// (prop may return an array for multi-valued JSON-LD; use h.first for single values.)
+//   export default {
+//     canHandle(node, h) -> boolean,
+//     render(node, h)    -> htmlString | Promise<htmlString>   // null/'' declines
+//   }
+// Panes are offered BOTH single resources and containers (h.isContainer marks
+// which). A pane that returns null is skipped, so a container pane can decline a
+// folder it doesn't recognise and fall through to the folder table.
+// h = { escape, prop, propAll, first, idOf, types, host, fmtDate, localName,
+//       isContainer, path, children, fetchResource(url) }
+//   - prop may return an array for multi-valued JSON-LD; use h.first for one value.
+//   - children: parsed [{ url, type, ... }] of a container's members.
+//   - fetchResource(url): async, returns a child's primary node (for collections).
 
 document.head.insertAdjacentHTML('beforeend', `<style>
 body{font:14px/1.55 system-ui,-apple-system,sans-serif;margin:0;color:#222;background:#f3eee5}
@@ -65,18 +74,33 @@ body{font:14px/1.55 system-ui,-apple-system,sans-serif;margin:0;color:#222;backg
     const items = doc ? parseContainer(doc, window.location.href) : null;
     const isContainer = Array.isArray(items);
 
-    const target = document.getElementById('mashlib');
-    if (isContainer) {
-      target.innerHTML = `<div class="db">${navHTML}<div class="db-card">${renderFolder(items, here)}</div></div>`;
-      return;
-    }
-
-    // Single resource: try a pod-local pane, else fall back to the JSON dump.
     const node = primaryNode(doc);
-    const paneHTML = node ? await renderLocalPane(node) : null;
+    const h = {
+      escape, prop, propAll, first: firstVal, idOf, types: typesOf, host: hostOf,
+      fmtDate: fmtDay, localName: localType,
+      isContainer, path: window.location.pathname, children: items || [],
+      // Fetch a child resource and return its primary node (for collection panes).
+      fetchResource: async (u) => {
+        try {
+          const r = await fetch(u, { headers: { Accept: 'application/ld+json' } });
+          if (!r.ok) return null;
+          return primaryNode(await r.json());
+        } catch (e) { return null; }
+      }
+    };
+
+    const target = document.getElementById('mashlib');
+    // Panes get first refusal for BOTH single resources and containers. A pane
+    // may return null/empty to decline (e.g. a collection pane on a folder it
+    // doesn't recognise), in which case we fall through to folder table / JSON.
+    const paneHTML = node ? await resolvePaneHTML(node, h) : null;
     if (paneHTML) {
       target.innerHTML = `<div class="db">${navHTML}<div class="db-pane-wrap">${paneHTML}</div>` +
         `<details class="db-src"><summary>Source</summary>${renderJson(doc)}</details></div>`;
+      return;
+    }
+    if (isContainer) {
+      target.innerHTML = `<div class="db">${navHTML}<div class="db-card">${renderFolder(items, here)}</div></div>`;
     } else {
       target.innerHTML = `<div class="db">${navHTML}${renderJson(doc)}</div>`;
     }
@@ -84,12 +108,15 @@ body{font:14px/1.55 system-ui,-apple-system,sans-serif;margin:0;color:#222;backg
 
   // ---- local panes: discovered from /public/panes/, augmentable per-pod ----
 
-  async function renderLocalPane(node) {
+  async function resolvePaneHTML(node, h) {
     const panes = await loadLocalPanes();
-    if (!panes.length) return null;
-    const h = { escape, prop, propAll, first: firstVal, idOf, types: typesOf, host: hostOf, fmtDate: fmtDay, localName: localType };
     for (const p of panes) {
-      try { if (p.canHandle(node, h)) return p.render(node, h); } catch (e) { /* skip */ }
+      try {
+        if (p.canHandle(node, h)) {
+          const out = await p.render(node, h);
+          if (out) return out;
+        }
+      } catch (e) { /* skip */ }
     }
     return null;
   }
diff --git a/examples/panes/bookmark-collection.js b/examples/panes/bookmark-collection.js
new file mode 100644
index 0000000..a7e95c1
--- /dev/null
+++ b/examples/panes/bookmark-collection.js
@@ -0,0 +1,96 @@
+// Pod-local collection pane for the /public/bookmark/ container.
+// Renders every bookmark:Bookmark member as a searchable feed of compact cards.
+// Loaded by the `--browser panes` data browser from /public/panes/.
+//
+// canHandle matches the conventional bookmark container path; render fetches the
+// members and returns null if none are bookmarks (so the browser falls back to
+// the folder table). Search is a self-contained inline oninput handler — no
+// script tag (which wouldn't execute via innerHTML anyway).
+
+export default {
+  canHandle(node, h) {
+    return h.isContainer && /\/bookmark\/?$/.test(h.path || '');
+  },
+
+  async render(node, h) {
+    const kids = (h.children || []).filter(it => it.type !== 'container' && it.url.endsWith('.jsonld'));
+    const fetched = await Promise.all(kids.map(k =>
+      h.fetchResource(k.url).then(n => ({ url: k.url, n })).catch(() => null)));
+
+    const items = [];
+    for (const x of fetched) {
+      if (!x || !x.n || !h.types(x.n).includes('Bookmark')) continue;
+      const recalls = h.idOf(h.prop(x.n, 'recalls'));
+      const title = h.first(h.prop(x.n, 'title')) || recalls || 'Untitled bookmark';
+      const lead = String(h.first(h.prop(x.n, 'description')) || '').split(/\n\s*\n/)[0].trim();
+      const snippet = lead.length > 190 ? lead.slice(0, 187) + '…' : lead;
+      const tags = h.propAll(x.n, 'keywords').map(t => h.first(t)).filter(Boolean);
+      const host = h.host(recalls);
+      const created = h.first(h.prop(x.n, 'created')) || '';
+      const q = [title, lead, tags.join(' '), host].join(' ').toLowerCase();
+      items.push({ recalls, podUrl: x.url, title, snippet, tags, host, created, q });
+    }
+    if (!items.length) return null; // not a bookmark collection → fall back to folder
+    items.sort((a, b) => (b.created || '').localeCompare(a.created || ''));
+
+    const card = it => {
+      const fav = it.recalls ? h.escape(new URL('/favicon.ico', it.recalls).href) : '';
+      const chips = it.tags.slice(0, 5).map(t => `<span class="bmc-tag">${h.escape(t)}</span>`).join('');
+      // Card body → the bookmark's .jsonld detail page (full summary card).
+      // Corner ↗ → the original external link.
+      return `<div class="bmc-item" data-q="${h.escape(it.q)}">
+        <a class="bmc-main" href="${h.escape(it.podUrl)}">
+          <img class="bmc-fav" src="${fav}" alt="" onerror="this.replaceWith(Object.assign(document.createElement('div'),{textContent:'🔖',style:'font-size:22px;line-height:34px;width:34px;text-align:center'}))">
+          <div class="bmc-body">
+            <div class="bmc-title">${h.escape(it.title)}</div>
+            <div class="bmc-host">${h.escape(it.host)}</div>
+            ${it.snippet ? `<div class="bmc-snippet">${h.escape(it.snippet)}</div>` : ''}
+            ${chips ? `<div class="bmc-tags">${chips}</div>` : ''}
+          </div>
+        </a>
+        <a class="bmc-ext" href="${h.escape(it.recalls)}" target="_blank" rel="noopener" title="Open original ↗" aria-label="Open original">↗</a>
+      </div>`;
+    };
+
+    const filter = "var r=this.closest('.bmc'),q=this.value.toLowerCase().trim(),n=0;" +
+      "r.querySelectorAll('.bmc-item').forEach(function(el){var m=el.getAttribute('data-q').indexOf(q)>-1;el.style.display=m?'':'none';if(m)n++;});" +
+      "r.querySelector('.bmc-count').textContent=n;" +
+      "r.querySelector('.bmc-empty').style.display=n?'none':'block';";
+
+    return `<style>
+      .bmc{max-width:720px;margin:0 auto;padding:8px 0 28px;font-family:Inter,-apple-system,system-ui,sans-serif;}
+      .bmc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;}
+      .bmc-eyebrow{font-family:Georgia,serif;font-style:italic;font-size:13px;color:#a1a1aa;}
+      .bmc-title-main{font-size:24px;font-weight:650;color:#18181b;margin-top:5px;}
+      .bmc-count{font-size:15px;color:#a1a1aa;font-weight:500;margin-left:5px;}
+      .bmc-search{border:1px solid rgba(24,24,27,.12);border-radius:10px;padding:9px 13px;font-size:14px;outline:none;width:210px;max-width:45vw;background:#fff;font-family:inherit;transition:border-color .15s,box-shadow .15s;}
+      .bmc-search:focus{border-color:#7c3aed;box-shadow:0 0 0 3px rgba(124,58,237,.12);}
+      .bmc-list{display:flex;flex-direction:column;gap:12px;}
+      .bmc-item{position:relative;background:#fff;border:1px solid rgba(24,24,27,.07);border-radius:14px;box-shadow:0 1px 2px rgba(24,24,27,.04);transition:box-shadow .15s,border-color .15s;}
+      .bmc-item:hover{box-shadow:0 4px 18px rgba(24,24,27,.09);border-color:rgba(124,58,237,.25);}
+      .bmc-main{display:flex;gap:14px;align-items:flex-start;text-decoration:none;color:inherit;padding:18px 52px 18px 20px;}
+      .bmc-main:active{transform:translateY(1px);}
+      .bmc-ext{position:absolute;top:13px;right:13px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:8px;color:#b4b4bb;text-decoration:none;font-size:16px;line-height:1;transition:background .15s,color .15s;}
+      .bmc-ext:hover{background:rgba(124,58,237,.1);color:#7c3aed;}
+      .bmc-fav{width:34px;height:34px;border-radius:8px;flex:0 0 auto;background:rgba(127,127,127,.06);object-fit:contain;margin-top:2px;}
+      .bmc-body{min-width:0;flex:1;}
+      .bmc-title{font-size:16px;font-weight:600;color:#18181b;line-height:1.35;overflow-wrap:anywhere;}
+      .bmc-host{font-size:12px;color:#7c3aed;font-family:ui-monospace,SFMono-Regular,monospace;margin-top:4px;}
+      .bmc-snippet{font-size:13.5px;line-height:1.6;color:#52525b;margin-top:9px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
+      .bmc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px;}
+      .bmc-tag{font-size:11px;color:#6d28d9;background:rgba(124,58,237,.07);border:1px solid rgba(124,58,237,.12);padding:2px 9px;border-radius:999px;}
+      .bmc-empty{text-align:center;color:#a1a1aa;padding:28px;font-size:14px;}
+    </style>
+    <div class="bmc">
+      <div class="bmc-head">
+        <div>
+          <div class="bmc-eyebrow">Collection</div>
+          <div class="bmc-title-main">Bookmarks <span class="bmc-count">${items.length}</span></div>
+        </div>
+        <input class="bmc-search" type="search" placeholder="Search title, summary, tags…" oninput="${filter}">
+      </div>
+      <div class="bmc-list">${items.map(card).join('')}</div>
+      <div class="bmc-empty" style="display:none">No matches.</div>
+    </div>`;
+  }
+};