Saved page: live search + sortable columns via shared table module (#57)

- new web/static/table.js (PaletteTable): shared live search, client-side
  sort with indicators, pagination, row rendering + click-through
- history.html and mine.html both consume it; data endpoint, columns,
  empty-state text and row extras (delete buttons) are page-supplied
- verified in-browser: search, sort, delete on /mine; sort, pager on /history

Closes #57

web/templates/mine.html

@@ -5,34 +5,25 @@
     <h1>Saved pastes</h1>
     <span class="count" id="count"></span>
   </div>
+  <div class="search"><input id="filter" placeholder="Search…"><span class="search-spinner" id="search-spinner"></span></div>
   <div class="float">
     <table>
-      <colgroup><col style="width:260px"><col style="width:140px"><col style="width:120px"><col style="width:140px"><col style="width:190px"><col style="width:100px"></colgroup>
+      <colgroup><col style="width:260px"><col style="width:140px"><col style="width:120px"><col style="width:150px"><col style="width:190px"><col style="width:100px"></colgroup>
       <thead><tr>
-        <th>Paste</th>
-        <th>Language</th>
-        <th>Size</th>
-        <th>Created</th>
-        <th>URL</th>
-        <th>ID</th>
+        <th data-sort="title" class="sortable"><span class="sort-ind"></span>Paste</th>
+        <th data-sort="language" class="sortable"><span class="sort-ind"></span>Language</th>
+        <th data-sort="size" class="sortable"><span class="sort-ind"></span>Size</th>
+        <th data-sort="created_at" class="sortable"><span class="sort-ind"></span>Created</th>
+        <th data-sort="custom_slug" class="sortable"><span class="sort-ind"></span>URL</th>
+        <th data-sort="id" class="sortable"><span class="sort-ind"></span>ID</th>
       </tr></thead>
       <tbody id="rows"></tbody>
     </table>
     <div class="empty" id="empty" style="display:none">No pastes from this browser yet.</div>
   </div>
 </div>
+<script src="/static/table.js"></script>
 <script>
-const $ = id => document.getElementById(id);
-
-function esc(s) { const d = document.createElement('div'); d.textContent = s == null ? '' : s; return d.innerHTML; }
-function fmtSize(n) { if (n == null) return 'none'; if (n < 1024) return n + ' B'; if (n < 1048576) return (n/1024).toFixed(1) + ' KB'; return (n/1048576).toFixed(1) + ' MB'; }
-function ago(ts) {
-  const s = Math.floor(Date.now()/1000) - ts;
-  if (s < 60) return s + 's ago';
-  if (s < 3600) return Math.floor(s/60) + 'm ago';
-  if (s < 86400) return Math.floor(s/3600) + 'h ago';
-  return Math.floor(s/86400) + 'd ago';
-}
 function toast(msg, kind) {
   let t = document.querySelector('.toast');
   if (!t) { t = document.createElement('div'); t.className = 'toast'; document.body.appendChild(t); }
@@ -45,45 +36,38 @@ function toast(msg, kind) {
   t._h = setTimeout(() => t.classList.remove('show'), 2000);
 }
 
-async function load() {
-  const res = await fetch('/api/mine');
-  const data = await res.json();
-  $('count').textContent = data.total.toLocaleString() + ' total';
-  const rows = $('rows');
-  if (!data.items.length) {
-    rows.innerHTML = '';
-    $('empty').style.display = 'block';
-    return;
-  }
-  $('empty').style.display = 'none';
-  rows.innerHTML = data.items.map(it =>
-    `<tr class="row" data-href="/${esc(it.id)}"><td>` +
-    (it.title ? `${esc(it.title)}` : `<a class="slug" href="/${esc(it.id)}">${esc(it.id)}</a>`) + `</td>` +
-    `<td><span class="badge">${esc(it.language || 'text')}</span></td>` +
-    `<td class="dim">${fmtSize(it.size)}</td><td class="dim" data-ts="${it.created_at}">${ago(it.created_at)}</td>` +
-    (it.custom_slug ? `<td><a class="slug url-link" href="/${esc(it.custom_slug)}">/${esc(it.custom_slug)}</a></td>` : `<td class="dim">none</td>`) +
-    `<td class="dim"><a class="id-link" href="/${esc(it.id)}">${esc(it.id)}</a></td>` +
-    `<td><button class="btn btn-icon del" data-id="${esc(it.id)}" title="Delete paste" aria-label="Delete paste">&times;</button></td></tr>`
-  ).join('');
-}
-
-$('rows').addEventListener('click', async e => {
-  const del = e.target.closest('button.del');
-  if (del) {
-    e.stopPropagation();
-    del.disabled = true;
-    try {
-      const res = await fetch('/api/pastes/' + del.dataset.id, { method: 'DELETE' });
-      if (res.ok) { toast('Deleted', 'success'); load(); }
-      else { toast('Delete failed', 'error'); del.disabled = false; }
-    } catch (err) { toast('Delete failed', 'error'); del.disabled = false; }
-    return;
-  }
-  const tr = e.target.closest('tr.row[data-href]');
-  if (!tr || e.target.closest('a')) return;
-  window.location.href = tr.dataset.href;
+const t = PaletteTable.init({
+  endpoint: '/api/mine',
+  perPage: 50,
+  hasPager: false,
+  rowHtml: it =>
+    `<tr class="row" data-href="/${t.esc(it.id)}"><td>` +
+    (it.title
+      ? `${t.esc(it.title)}`
+      : `<a class="slug" href="/${t.esc(it.id)}">${t.esc(it.id)}</a>`) +
+    `</td>` +
+    `<td><span class="badge">${t.esc(it.language || 'text')}</span></td>` +
+    `<td class="dim">${t.fmtSize(it.size)}</td><td class="dim" data-ts="${it.created_at}">${t.ago(it.created_at)}</td>` +
+    (it.custom_slug ? `<td><a class="slug url-link" href="/${t.esc(it.custom_slug)}">/${t.esc(it.custom_slug)}</a></td>` : `<td class="dim">none</td>`) +
+    `<td class="dim"><a class="id-link" href="/${t.esc(it.id)}">${t.esc(it.id)}</a></td>` +
+    `<td><button class="btn btn-icon del" data-id="${t.esc(it.id)}" title="Delete paste" aria-label="Delete paste">&times;</button></td></tr>`,
+  emptyFiltered: 'No pastes from this browser match your search.',
+  emptyAll: 'No pastes from this browser yet.',
 });
 
-load();
+// delete buttons (viewer-scoped, enforced server-side #37)
+document.getElementById('rows').addEventListener('click', async e => {
+  const del = e.target.closest('button.del');
+  if (!del) return;
+  e.stopPropagation();
+  del.disabled = true;
+  try {
+    const res = await fetch('/api/pastes/' + del.dataset.id, { method: 'DELETE' });
+    if (res.ok) { toast('Deleted', 'success'); t.load(); }
+    else { toast('Delete failed', 'error'); del.disabled = false; }
+  } catch (err) { toast('Delete failed', 'error'); del.disabled = false; }
+});
+
+t.load();
 </script>
 {{template "foot" .}}