Settings page: small muted Admin link (#102)

Arrow is absolutely positioned at left:8px in the th, label padding-left
24px; translateY(-50%) keeps it centered regardless of row height, and
being out of flow the label never moves between sorted/unsorted states.

internal/web/static/app.css

@@ -356,10 +356,21 @@ td .id-link:hover { color: var(--accent); }
 th.sortable { cursor: pointer; user-select: none; }
 th.sortable:hover { color: var(--fg); }
 th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
-.sort-ind { display: inline-block; width: 0; height: 0; margin-left: 8px; vertical-align: middle; border-left: 5px solid transparent; border-right: 5px solid transparent; }
+/* #101: arrow sits LEFT of the label, further spaced, vertically centered,
+   and absolutely positioned so it never shifts the label text. */
+th.sortable { position: relative; padding-left: 24px; }
+th.sortable .sort-ind {
+  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
+  display: inline-block; width: 0; height: 0;
+  border-left: 5px solid transparent; border-right: 5px solid transparent;
+}
 th.sorted.asc .sort-ind { border-bottom: 6px solid var(--accent); }
 th.sorted.desc .sort-ind { border-top: 6px solid var(--accent); }
 
+/* #102: small unobtrusive admin link on the settings page */
+a.admin-link { color: var(--muted-fg); font-size: 15px; text-decoration: none; }
+a.admin-link:hover { color: var(--fg); text-decoration: underline; }
+
 /* ============================================================
    Consistency audit (#18) — shared tokens across inputs, buttons,
    headings. Visual-only, no behavior change.

internal/web/templates/admin.html

@@ -44,7 +44,8 @@
 
   function api(path, opts) {
     opts = opts || {};
-    opts.headers = { 'X-Admin-Key': key() };
+    // allow callers to override the key header (e.g. validating a typed key, #99)
+    opts.headers = Object.assign({ 'X-Admin-Key': key() }, opts.headers || {});
     if (opts.body) opts.headers['Content-Type'] = 'application/json';
     return fetch(path, opts);
   }
@@ -72,9 +73,10 @@
 
   document.getElementById('admin-key-form').addEventListener('submit', function (e) {
     e.preventDefault();
-    sessionStorage.setItem(KEY, keyInput.value);
-    api('/admin/api/settings').then(function (r) {
+    // #99: don't persist the key until the server accepts it
+    api('/admin/api/settings', { headers: { 'X-Admin-Key': keyInput.value } }).then(function (r) {
       if (r.status === 200) {
+        sessionStorage.setItem(KEY, keyInput.value);
         status.textContent = '✓';
         keyInput.value = '';
         loadSettings();

internal/web/templates/history.html

@@ -10,13 +10,13 @@
     <table>
       <colgroup><col style="width:260px"><col style="width:140px"><col style="width:120px"><col style="width:96px"><col style="width:140px"><col style="width:190px"><col style="width:100px"></colgroup>
       <thead><tr>
-        <th data-sort="title" class="sortable">Paste<span class="sort-ind"></span></th>
-        <th data-sort="language" class="sortable">Language<span class="sort-ind"></span></th>
-        <th data-sort="size" class="sortable">Size<span class="sort-ind"></span></th>
-        <th data-sort="view_count" class="sortable">Views<span class="sort-ind"></span></th>
-        <th data-sort="created_at" class="sortable">Created<span class="sort-ind"></span></th>
-        <th data-sort="custom_slug" class="sortable">URL<span class="sort-ind"></span></th>
-        <th data-sort="id" class="sortable">ID<span class="sort-ind"></span></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="view_count" class="sortable"><span class="sort-ind"></span>Views</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>

internal/web/templates/mine.html

@@ -10,12 +10,12 @@
     <table>
       <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 data-sort="title" class="sortable">Paste<span class="sort-ind"></span></th>
-        <th data-sort="language" class="sortable">Language<span class="sort-ind"></span></th>
-        <th data-sort="size" class="sortable">Size<span class="sort-ind"></span></th>
-        <th data-sort="created_at" class="sortable">Created<span class="sort-ind"></span></th>
-        <th data-sort="custom_slug" class="sortable">URL<span class="sort-ind"></span></th>
-        <th data-sort="id" class="sortable">ID<span class="sort-ind"></span></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>

internal/web/templates/settings.html

@@ -7,6 +7,7 @@
     </div>
     <div class="settings-body">
       <p>Settings are under construction.</p>
+      <p class="admin-link-row"><a class="admin-link" href="/admin">Admin</a></p>
     </div>
   </div>
 </div>