Cans UI + parity: unlock-cookie flow, /can page, listings badge, custom slug, delete, sweeper; #32 perf notes (#4, #32)

2026-09-09 16:34:51 -05:00
parent 91568c0598
commit 19804d47a3
13 changed files with 950 additions and 43 deletions
@@ -0,0 +1,36 @@
+{{template "head" .}}
+{{template "topbar" .}}
+<div class="center">
+  <div class="float can-page" style="max-width:900px; width:100%;">
+    <div class="inner">
+      <h1>{{.Title}} <span class="badge" title="This is a can — a bundle of pastes">can</span></h1>
+      {{if .HasDescription}}<p class="sub">{{.Description}}</p>{{end}}
+      <p class="hint">{{.ItemCount}} item{{if ne .ItemCount 1}}s{{end}} · {{.SizeHuman}} · created <span data-ts="{{.CreatedAtUnix}}">{{.CreatedAgo}}</span>{{if .ExpiresAt}} · expires in {{.ExpiresIn}}{{end}}{{if .HasPassword}} · password protected{{end}}</p>
+
+      <div class="can-items">
+        {{range .Items}}
+        <div class="can-item float">
+          <div class="can-item-head">
+            <strong>{{.Title}}</strong>
+            <span class="dim">{{.Size}}</span>
+            {{if .IsFile}}
+              <a class="btn btn-icon" href="/api/cans/{{$.ID}}/items/{{.ID}}" download="{{.Title}}" title="Download file" aria-label="Download {{.Title}}">↓</a>
+            {{else}}
+              <a class="btn btn-icon" href="/api/cans/{{$.ID}}/items/{{.ID}}" title="Raw item" aria-label="Raw {{.Title}}">⧉</a>
+            {{end}}
+          </div>
+          {{if not .IsFile}}
+          <details class="can-item-body">
+            <summary>Show content</summary>
+            <pre class="code"><code>{{.ContentHTML}}</code></pre>
+          </details>
+          {{else}}
+          <div class="hint">Attached file — use the download button above.</div>
+          {{end}}
+        </div>
+        {{end}}
+      </div>
+    </div>
+  </div>
+</div>
+{{template "foot" .}}
@@ -36,8 +36,8 @@ const t = PaletteTable.init({
  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>`) +
+      ? `${t.esc(it.title)}${it.is_can ? ' <span class="badge" title="Can — bundle of items">can</span>' : ''}`
+      : `<a class="slug" href="/${t.esc(it.id)}">${t.esc(it.id)}</a>${it.is_can ? ' <span class="badge" title="Can — bundle of items">can</span>' : ''}`) +
    `</td>` +
    `<td><span class="badge">${t.esc(it.language || 'text')}</span></td>` +
    `<td class="dim">${t.fmtSize(it.size)}</td><td class="dim">${it.view_count}</td><td class="dim" data-ts="${it.created_at}">${t.ago(it.created_at)}</td>` +
@@ -21,6 +21,10 @@
    </table>
    <div class="empty" id="empty" style="display:none">No pastes from this browser yet.</div>
  </div>
+  <div class="pager float">
+    <span id="showing"></span>
+    <div class="pg" id="pg"></div>
+  </div>
 </div>
 <script src="/static/table.js"></script>
 <script>
@@ -38,13 +42,13 @@ function toast(msg, kind) {

 const t = PaletteTable.init({
  endpoint: '/api/mine',
-  perPage: 50,
-  hasPager: false,
+  perPage: 25,
+  hasPager: true,
  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>`) +
+      ? `${t.esc(it.title)}${it.is_can ? ' <span class="badge" title="Can — bundle of items">can</span>' : ''}`
+      : `<a class="slug" href="/${t.esc(it.id)}">${t.esc(it.id)}</a>${it.is_can ? ' <span class="badge" title="Can — bundle of items">can</span>' : ''}`) +
    `</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>` +
@@ -68,6 +68,15 @@
      <input type="text" id="custom" class="custom-input" placeholder="/my-snippet">
      <div class="hint" style="margin-top:6px; font-size:19px;">Stays reserved while the paste exists</div>
    </div>
+    <div class="float side-section">
+      <h3>Can contents</h3>
+      <label class="toggle"><input type="checkbox" id="iscan"> Bundle as a can (multiple text items)</label>
+      <div class="pw-row" id="canrow" style="display:none">
+        <div id="can-items"></div>
+        <button class="btn btn-icon" id="can-add" type="button" title="Add item" style="margin-top:6px">+ Add item</button>
+        <div class="hint" style="margin-top:6px; font-size:19px;">Each item gets its own card on the can page. File uploads in cans come later.</div>
+      </div>
+    </div>
    <div class="float side-section" id="result-card" style="display:none">
      <h3>Result</h3>
      <div class="hint" id="result" style="word-break:break-all">empty</div>
@@ -145,6 +154,21 @@ $('pwreveal').addEventListener('click', () => {
  $('pwreveal').title = show ? 'Hide password' : 'Show password';
 });

+// #4: can builder — multiple text items bundled into one shareable page.
+// The main editor becomes the first item; extra items are added below.
+$('iscan').addEventListener('change', e => {
+  $('canrow').style.display = e.target.checked ? 'block' : 'none';
+  if (e.target.checked && !$('can-items').children.length) addCanItem();
+});
+function addCanItem() {
+  const row = document.createElement('div');
+  row.className = 'can-item-row';
+  row.innerHTML = '<input class="can-item-title" placeholder="Item title">' +
+    '<textarea class="can-item-content" placeholder="Item content" rows="3" spellcheck="false"></textarea>';
+  $('can-items').appendChild(row);
+}
+$('can-add').addEventListener('click', addCanItem);
+
 let guessed = ''; // last auto-detected language, '' = user override

 function showResult(html, isError) {
@@ -197,6 +221,9 @@ $('reguess').addEventListener('click', guessLang);
 content.addEventListener('paste', () => setTimeout(guessLang, 0));

 async function create() {
+  // #4: can mode — bundle the editor + extra items into a can via multipart
+  if ($('iscan').checked) return createCan();
+
  const body = {
    content: content.value,
    title: $('title').value || null,
@@ -252,6 +279,62 @@ async function create() {
  location.href = dest;
 }
 $('create').addEventListener('click', create);
+
+// #4: can creation — POST multipart to /api/pastes/can. The main editor is
+// the first item; each extra can-item row is another text item.
+async function createCan() {
+  const items = [];
+  if (content.value.trim()) {
+    items.push({title: $('title').value || 'main', content: content.value, language: $('language').value || ''});
+  }
+  document.querySelectorAll('#can-items .can-item-row').forEach(row => {
+    const t = row.querySelector('.can-item-title').value.trim();
+    const c = row.querySelector('.can-item-content').value;
+    if (c.trim()) items.push({title: t || ('item-' + (items.length + 1)), content: c});
+  });
+  if (!items.length) { toast('Nothing to put in the can', 'error'); return; }
+
+  const fd = new FormData();
+  fd.append('title', $('title').value || 'Untitled can');
+  fd.append('json_items', JSON.stringify(items));
+  if ($('haspw').checked) fd.append('password', $('password').value);
+  if ($('unlisted').checked) fd.append('visibility', 'unlisted');
+  const exp = document.querySelector('input[name="exp"]:checked').value;
+  if (exp === 'custom') {
+    const dur = composeCustomExpiry();
+    if (dur === null) { toast('Check the custom expiry', 'error'); return; }
+    if (dur) fd.append('expires_in', dur);
+  } else if (exp) {
+    fd.append('expires_in', exp);
+  }
+  if ($('custom').value.trim()) fd.append('custom_slug', $('custom').value.trim());
+
+  const res = await fetch('/api/pastes/can', {method: 'POST', body: fd});
+  const data = await res.json();
+  if (!res.ok) {
+    showResult('Error: ' + (data.error || res.status), true);
+    toast('Can create failed', 'error');
+    return;
+  }
+  const url = location.origin + data.url;
+  showResult('<a href="' + url + '">' + url + '</a> <button class="btn btn-icon" id="result-copy" title="Copy URL" type="button">⧉</button>', false);
+  const copyBtn = document.getElementById('result-copy');
+  copyBtn.addEventListener('click', () => {
+    try {
+      navigator.clipboard.writeText(url);
+      copyBtn.classList.add('ok');
+      copyBtn.textContent = 'Success!';
+      setTimeout(() => { copyBtn.classList.remove('ok'); copyBtn.textContent = '⧉'; }, 2000);
+    } catch(e) { toast('Copy failed', 'error'); }
+  });
+  // password-protected can: unlock now with the password we already have (#26 parity)
+  if ($('haspw').checked && data.id) {
+    const pd = new FormData();
+    pd.append('password', $('password').value);
+    try { await fetch('/can/' + data.id, {method: 'POST', body: pd}); } catch(e) {}
+  }
+  location.href = data.url;
+}
 // reset stale result state when returning via Back (bfcache) (#28)
 window.addEventListener('pageshow', e => {
  if (!e.persisted) return;