Add admin interface

web/static/app.js

@@ -28,6 +28,14 @@
   }
   wireCopy(document);
 
+  // Destructive buttons ask first. The attribute carries the question, so the
+  // markup decides what is worth confirming and this stays generic.
+  Array.prototype.forEach.call(document.querySelectorAll('[data-confirm]'), function (button) {
+    button.addEventListener('click', function (e) {
+      if (!window.confirm(button.dataset.confirm)) e.preventDefault();
+    });
+  });
+
   var form = document.getElementById('upload');
   if (!form) return;
 

web/static/style.css

@@ -187,3 +187,28 @@ button.link {
   .copyrow { flex-wrap: wrap; }
   .copyrow input { flex-basis: 100%; }
 }
+
+/* Administration --------------------------------------------------------- */
+
+header nav { float: right; font-size: .875rem; }
+
+dl.stats { grid-template-columns: auto 1fr; }
+dl.stats em { font-style: normal; color: var(--muted); }
+
+/* Tables scroll on their own rather than making the page scroll sideways. */
+.tablewrap { overflow-x: auto; margin: 0 -.25rem; }
+
+table.admin { border-collapse: collapse; width: 100%; font-size: .8125rem; }
+table.admin th, table.admin td { padding: .4rem .5rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
+table.admin th { color: var(--muted); font-weight: 500; white-space: nowrap; }
+table.admin th a { color: inherit; text-decoration: none; }
+table.admin th a:hover { color: var(--accent); text-decoration: underline; }
+table.admin tr:last-child td { border-bottom: 0; }
+table.admin .num { text-align: right; white-space: nowrap; }
+table.admin .small { font-size: .75rem; color: var(--muted); white-space: nowrap; }
+table.admin .wrap { overflow-wrap: anywhere; min-width: 8rem; }
+table.admin form { margin: 0; }
+
+button.small { padding: .2rem .5rem; font-size: .75rem; }
+
+.cli code, .hint code { background: var(--bg); padding: .1rem .3rem; border-radius: 4px; }