Real web UI: /new editor, /history with live pagination, paste view with gutter and deletion banner, /unlock page; size in public API

web/templates/foot.html

@@ -0,0 +1 @@
+{{define "foot"}}{{end}}

web/templates/history.html

@@ -0,0 +1,89 @@
+{{template "head" .}}
+{{template "topbar" .}}
+<div class="page">
+  <div class="head-row">
+    <h1>Public pastes</h1>
+    <span class="count" id="count"></span>
+    <div class="spacer"></div>
+    <div class="search"><input id="filter" placeholder="filter…"></div>
+  </div>
+  <div class="float">
+    <table>
+      <thead><tr><th>Paste</th><th>Description</th><th>Language</th><th>Size</th><th>Views</th><th>Created</th></tr></thead>
+      <tbody id="rows"></tbody>
+    </table>
+    <div class="empty" id="empty" style="display:none">No pastes yet. Create the first one.</div>
+    <div class="pager">
+      <span id="showing"></span>
+      <div class="pg" id="pg"></div>
+    </div>
+  </div>
+</div>
+<script>
+const PER = 25;
+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 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';
+}
+
+async function load() {
+  const off = (page - 1) * PER;
+  const res = await fetch('/api/public?limit=' + PER + '&offset=' + off);
+  const data = await res.json();
+  total = data.total;
+
+  $('count').textContent = total.toLocaleString() + ' total';
+  const rows = $('rows');
+  if (data.items.length === 0) {
+    rows.innerHTML = '';
+    $('empty').style.display = 'block';
+  } else {
+    $('empty').style.display = 'none';
+    rows.innerHTML = data.items.map(it =>
+      `<tr class="row"><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><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}`;
+
+  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('');
+}
+
+$('pg').addEventListener('click', e => {
+  const b = e.target.closest('button[data-p]');
+  if (!b || b.disabled) return;
+  page = parseInt(b.dataset.p);
+  load();
+  window.scrollTo(0, 0);
+});
+$('filter').addEventListener('input', () => { page = 1; load(); });
+load();
+setInterval(load, 30000); // auto-refresh history every 30s
+</script>
+{{template "foot" .}}

web/templates/layout.html

@@ -0,0 +1,17 @@
+{{define "head"}}
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="/static/app.css">
+{{end}}
+
+{{define "topbar"}}
+  <div class="topbar">
+    <a class="logo" href="/history">Palette <em>/ beta</em></a>
+    <nav>
+      <a href="/new" {{if eq .Page "new"}}class="on"{{end}}>new</a>
+      <a href="/history" {{if eq .Page "history"}}class="on"{{end}}>history</a>
+      <a href="https://git.archfox.org/poslop/palette">git</a>
+    </nav>
+    <div class="spacer"></div>
+  </div>
+{{end}}

web/templates/new.html

@@ -0,0 +1,104 @@
+{{template "head" .}}
+{{template "topbar" .}}
+<div class="deck">
+  <div class="float pane-l">
+    <div class="editor-head">
+      <input id="title" placeholder="title (optional)">
+      <select id="language">
+        <option value="">auto</option>
+        <option>go</option><option>python</option><option>javascript</option>
+        <option>rust</option><option>c</option><option>cpp</option><option>java</option>
+        <option>bash</option><option>sql</option><option>yaml</option><option>json</option>
+        <option>markdown</option><option>text</option>
+      </select>
+    </div>
+    <div class="editor-wrap">
+      <div class="gutter" id="gutter">1</div>
+      <textarea class="editor" id="content" placeholder="paste your code, text, or notes here…" spellcheck="false"></textarea>
+    </div>
+    <div class="created-banner" id="created"></div>
+    <div class="actionbar">
+      <span class="hint">Ctrl+Enter to create</span>
+      <div class="spacer" style="flex:1"></div>
+      <button class="btn" id="create">Create ⇧</button>
+    </div>
+  </div>
+
+  <div class="pane-r">
+    <div class="float side-section">
+      <h3>Expiry</h3>
+      <div class="seg">
+        <label><input type="radio" name="exp" value=""> Never</label>
+        <label><input type="radio" name="exp" value="1h"> 1 hour</label>
+        <label><input type="radio" name="exp" value="24h"> 1 day</label>
+        <label><input type="radio" name="exp" value="168h" checked> 1 week</label>
+        <label><input type="radio" name="exp" value="720h"> 30 days</label>
+      </div>
+    </div>
+    <div class="float side-section">
+      <h3>Protection</h3>
+      <label class="toggle"><input type="checkbox" id="haspw"> Password lock</label>
+      <input type="password" id="password" class="pwinput" placeholder="password" style="display:none; margin: 6px 8px 0; width: auto;">
+      <label class="toggle"><input type="checkbox" id="burn"> Burn after read</label>
+      <label class="toggle"><input type="checkbox" id="unlisted"> Unlisted</label>
+    </div>
+    <div class="float side-section">
+      <h3>Custom URL</h3>
+      <div class="row"><span>/</span><input type="text" id="custom" placeholder="my-snippet"></div>
+    </div>
+    <div class="float side-section">
+      <h3>Result</h3>
+      <div class="hint" id="result" style="word-break:break-all">—</div>
+    </div>
+  </div>
+</div>
+<script>
+const $ = id => document.getElementById(id);
+const content = $('content'), gutter = $('gutter');
+
+function updateGutter() {
+  const lines = content.value.split('\n').length;
+  let s = '';
+  for (let i = 1; i <= Math.max(lines, 1); i++) s += i + '\n';
+  gutter.textContent = s;
+}
+content.addEventListener('input', updateGutter);
+updateGutter();
+
+$('haspw').addEventListener('change', e => { $('password').style.display = e.target.checked ? 'block' : 'none'; });
+
+async function create() {
+  const body = {
+    content: content.value,
+    title: $('title').value || null,
+    language: $('language').value || null,
+    custom_slug: $('custom').value || null,
+    burn_after_read: $('burn').checked,
+  };
+  if ($('haspw').checked) body.password = $('password').value;
+  const exp = document.querySelector('input[name="exp"]:checked').value;
+  if (exp) body.expires_in = exp;
+
+  const res = await fetch('/api/pastes', {
+    method: 'POST',
+    headers: {'Content-Type': 'application/json'},
+    body: JSON.stringify(body),
+  });
+  const data = await res.json();
+  if (!res.ok) {
+    $('result').textContent = 'Error: ' + (data.error || res.status);
+    return;
+  }
+  const url = location.origin + '/' + (data.custom_slug || data.id);
+  $('result').innerHTML = '<a href="' + url + '">' + url + '</a>';
+  $('result').dataset.token = data.deletion_token || '';
+  try { navigator.clipboard.writeText(url); } catch(e) {}
+  // show the paste
+  location.href = '/' + data.id + '?created=1&token=' + encodeURIComponent(data.deletion_token || '');
+}
+$('create').addEventListener('click', create);
+document.addEventListener('keydown', e => {
+  if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); create(); }
+});
+</script>
+{{template "foot" .}}

web/templates/paste.html

@@ -0,0 +1,45 @@
+{{template "head" .}}
+{{template "topbar" .}}
+<div class="page">
+  <div class="float">
+    <div class="meta-bar">
+      <h1>{{if .Title}}{{.Title}}{{else}}Untitled paste{{end}}</h1>
+      <span class="slug">/{{.ID}}</span>
+      {{if .Language}}<span class="tag">{{.Language}}</span>{{end}}
+      {{if .ExpiresAt}}<span class="tag">expires in {{.ExpiresIn}}</span>{{end}}
+      <div class="spacer"></div>
+      <a class="iconbtn" href="/raw/{{.ID}}">raw</a>
+      <a class="iconbtn" href="#" onclick="copyContent(); return false;">copy</a>
+      {{if .DeletionToken}}<a class="iconbtn danger" href="#" onclick="redeem('{{.DeletionToken}}'); return false;">delete</a>{{end}}
+    </div>
+  </div>
+  {{if .JustCreated}}
+  <div class="float">
+    <div class="created-banner" style="display:block">
+      Paste created. Link copied to clipboard: <a href="/{{.ID}}">{{.Host}}/{{.ID}}</a>
+      {{if .DeletionToken}} · deletion token: <code>{{.DeletionToken}}</code>{{end}}
+    </div>
+  </div>
+  {{end}}
+  <div class="float">
+    <div class="code-head"><span class="dot"></span> {{.LineCount}} lines · {{.SizeBytes}} bytes</div>
+    <div class="code"><div class="gutter">{{.Gutter}}</div><div class="codebody" id="codebody">{{.ContentHTML}}</div></div>
+    <div class="footnote">
+      <span>Created {{.CreatedAgo}}</span>
+      <span>{{.ViewCount}} views</span>
+      <span>{{.Visibility}}</span>
+    </div>
+  </div>
+</div>
+<input type="hidden" id="raw-content" value="{{.ContentAttr}}">
+<script>
+function copyContent() {
+  navigator.clipboard.writeText(document.getElementById('raw-content').value);
+}
+function redeem(token) {
+  if (!confirm('Hard delete this paste immediately?')) return;
+  fetch('/api/pastes/{{.ID}}/redeem?token=' + encodeURIComponent(token), {method: 'DELETE'})
+    .then(r => { if (r.ok) location.href = '/history'; else alert('delete failed'); });
+}
+</script>
+{{template "foot" .}}

web/templates/unlock.html

@@ -0,0 +1,18 @@
+{{template "head" .}}
+{{template "topbar" .}}
+<div class="center">
+  <div class="float">
+    <div class="inner">
+      <div class="lockring">🔒</div>
+      <h1>This paste is locked</h1>
+      <p class="sub">Enter the password to view <span class="slug">/{{.ID}}</span></p>
+      <form method="post" action="/unlock/{{.ID}}">
+        <input type="password" name="password" class="pwinput" placeholder="••••••••" autofocus>
+        {{if .Wrong}}<p class="err" style="display:block">Wrong password. Try again.</p>{{end}}
+        <button class="btn" type="submit">Unlock</button>
+      </form>
+    </div>
+    <div class="foot">Created {{.CreatedAgo}}</div>
+  </div>
+</div>
+{{template "foot" .}}