UI polish: radius tokens, layered shadows, pill selections, default filenames, live search, hidden result card, em dash removal

Fixes #6 #7 #8 #9 #10 #11 #13 #14 #15

web/templates/history.html

@@ -25,7 +25,7 @@ let page = 1, total = 0;
 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 '—'; if (n < 1024) return n + ' B'; if (n < 1048576) return (n/1024).toFixed(1) + ' KB'; return (n/1048576).toFixed(1) + ' MB'; }
+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';
@@ -34,45 +34,67 @@ function ago(ts) {
   return Math.floor(s/86400) + 'd ago';
 }
 
+let filter = '';
+
+function matchesFilter(it) {
+  if (!filter) return true;
+  const f = filter.toLowerCase();
+  return (it.title || '').toLowerCase().includes(f) || (it.id || '').toLowerCase().includes(f);
+}
+
 async function load() {
+  const filtered = filter.length > 0;
   const off = (page - 1) * PER;
-  const res = await fetch('/api/public?limit=' + PER + '&offset=' + off);
+  const url = filtered
+    ? '/api/public?limit=200&offset=0'
+    : '/api/public?limit=' + PER + '&offset=' + off;
+  const res = await fetch(url);
   const data = await res.json();
   total = data.total;
 
-  $('count').textContent = total.toLocaleString() + ' total';
+  const items = filtered ? data.items.filter(matchesFilter) : data.items;
+
+  $('count').textContent = filtered
+    ? items.length.toLocaleString() + ' matches (of ' + total.toLocaleString() + ' total)'
+    : total.toLocaleString() + ' total';
   const rows = $('rows');
-  if (data.items.length === 0) {
+  if (items.length === 0) {
     rows.innerHTML = '';
     $('empty').style.display = 'block';
+    $('empty').textContent = filtered ? 'No pastes match your search.' : 'No pastes yet. Create the first one.';
   } else {
     $('empty').style.display = 'none';
-    rows.innerHTML = data.items.map(it =>
+    rows.innerHTML = items.map(it =>
       `<tr class="row" data-href="/${esc(it.id)}"><td><a class="slug" href="/${esc(it.id)}">${esc(it.id)}</a></td>` +
-      `<td class="title-cell">${it.title ? esc(it.title) : '<span class=dim>—</span>'}</td>` +
+      `<td class="title-cell">${it.title ? esc(it.title) : '<span class=dim>none</span>'}</td>` +
       `<td><span class="badge">${esc(it.language || 'text')}</span></td>` +
       `<td class="dim">${fmtSize(it.size)}</td><td class="dim">${it.view_count}</td><td class="dim">${ago(it.created_at)}</td></tr>`
     ).join('');
   }
 
   const pages = Math.max(1, Math.ceil(total / PER));
-  $('showing').textContent = total === 0 ? 'Nothing here yet' :
-    `Showing ${off+1}–${Math.min(off+PER, total)} of ${total.toLocaleString()} · page ${page} of ${pages}`;
+  if (filtered) {
+    $('showing').textContent = 'Showing ' + items.length.toLocaleString() + ' matches for "' + filter + '"';
+    $('pg').innerHTML = '';
+  } else {
+    $('showing').textContent = total === 0 ? 'Nothing here yet' :
+      `Showing ${off+1}–${Math.min(off+PER, total)} of ${total.toLocaleString()} · page ${page} of ${pages}`;
 
-  const btns = [];
-  const add = (label, target, opts={}) => btns.push(`<button ${opts.on?'class="on"':''} ${opts.dis?'disabled':''} data-p="${target}">${label}</button>`);
-  add('‹', page-1, {dis: page===1});
-  const win = new Set([1, 2, page-1, page, page+1, pages]);
-  let last = 0;
-  for (let i = 1; i <= pages; i++) {
-    if (win.has(i)) {
-      if (last && i - last > 1) btns.push('<span class="dim">…</span>');
-      add(String(i), i, {on: i===page});
-      last = i;
+    const btns = [];
+    const add = (label, target, opts={}) => btns.push(`<button ${opts.on?'class="on"':''} ${opts.dis?'disabled':''} data-p="${target}">${label}</button>`);
+    add('‹', page-1, {dis: page===1});
+    const win = new Set([1, 2, page-1, page, page+1, pages]);
+    let last = 0;
+    for (let i = 1; i <= pages; i++) {
+      if (win.has(i)) {
+        if (last && i - last > 1) btns.push('<span class="dim">…</span>');
+        add(String(i), i, {on: i===page});
+        last = i;
+      }
     }
+    add('›', page+1, {dis: page===pages});
+    $('pg').innerHTML = btns.join('');
   }
-  add('›', page+1, {dis: page===pages});
-  $('pg').innerHTML = btns.join('');
 }
 
 $('pg').addEventListener('click', e => {
@@ -87,7 +109,15 @@ $('rows').addEventListener('click', e => {
   if (!tr || e.target.closest('a')) return; // let real links (e.g. middle-click) work
   window.location.href = tr.dataset.href;
 });
-$('filter').addEventListener('input', () => { page = 1; load(); });
+let filterTimer = null;
+$('filter').addEventListener('input', e => {
+  clearTimeout(filterTimer);
+  filterTimer = setTimeout(() => {
+    filter = e.target.value.trim();
+    page = 1;
+    load();
+  }, 200);
+});
 load();
 setInterval(load, 30000); // auto-refresh history every 30s
 </script>