From 6b95994c531862700e74520e5a8b9e6889660c42 Mon Sep 17 00:00:00 2001
From: fen <fen@fen-vm.archfox.org>
Date: Wed, 9 Sep 2026 19:52:32 -0500
Subject: [PATCH] Admin lock on every load, drop settings hint, derive theme
 swatches from CSS vars (#112)

---
 internal/web/templates/admin.html    |  4 +++-
 internal/web/templates/settings.html | 30 ++++++++++++++++++++--------
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/internal/web/templates/admin.html b/internal/web/templates/admin.html
index 86f10ee..6af4d74 100644
--- a/internal/web/templates/admin.html
+++ b/internal/web/templates/admin.html
@@ -103,7 +103,9 @@
     });
   });
 
-  if (key()) loadSettings();
+  // #112: always show the lock on fresh load — do not auto-restore the
+  // panel from a stale sessionStorage key. The key is only written after a
+  // successful unlock (above) so in-page actions still work within this visit.
 })();
 </script>
 {{template "foot" .}}
diff --git a/internal/web/templates/settings.html b/internal/web/templates/settings.html
index 368d08b..91e5585 100644
--- a/internal/web/templates/settings.html
+++ b/internal/web/templates/settings.html
@@ -8,23 +8,37 @@
     <div class="settings-body">
       <h3>Theme</h3>
       <div class="theme-grid" id="theme-grid"></div>
-      <p class="hint" style="margin-top:10px">Applies instantly and is saved in this browser.</p>
       <p class="admin-link-row"><a class="admin-link" href="/admin">Admin</a></p>
     </div>
   </div>
 </div>
 <script>
 (function () {
-  var themes = [
-    { id: 'midnight',        name: 'Midnight',        colors: ['#241B30', '#2D2340', '#3A2D52', '#7A6A9E', '#C4A8F0'] },
-    { id: 'smooth',          name: 'Smooth',          colors: ['#F6F5FA', '#DAD7E6', '#B5B1C9', '#7A7796', '#2A2A36'] },
-    { id: 'pastel-lavender', name: 'Pastel Lavender', colors: ['#e6e0f5', '#cbb8e7', '#b29edb', '#9b85cf', '#806bb8'] },
-    { id: 'pastel-peach',    name: 'Pastel Peach',    colors: ['#ffe0d6', '#ffc4a8', '#ffa78f', '#ff8b76', '#f9826c'] },
-    { id: 'pastel-cloud',    name: 'Pastel Cloud',    colors: ['#cdb4db', '#ffc8dd', '#ffafcc', '#bde0fe', '#a2d2ff'] }
+  // #112: derive each preset's swatches from the real CSS variables in
+  // app.css by temporarily applying data-preset, so they can never drift.
+  var themeNames = [
+    { id: 'midnight',        name: 'Midnight' },
+    { id: 'smooth',          name: 'Smooth' },
+    { id: 'pastel-lavender', name: 'Pastel Lavender' },
+    { id: 'pastel-peach',    name: 'Pastel Peach' },
+    { id: 'pastel-cloud',    name: 'Pastel Cloud' }
   ];
+  var SWATCH_VARS = ['--bg', '--surface', '--surface-2', '--muted', '--accent'];
+
+  function presetColors(id) {
+    var root = document.documentElement;
+    var prev = root.getAttribute('data-preset');
+    root.setAttribute('data-preset', id);
+    var cs = getComputedStyle(root);
+    var colors = SWATCH_VARS.map(function (v) { return cs.getPropertyValue(v).trim(); });
+    if (prev === null) root.removeAttribute('data-preset'); else root.setAttribute('data-preset', prev);
+    return colors;
+  }
+
   var grid = document.getElementById('theme-grid');
   var current = document.documentElement.dataset.preset || 'midnight';
-  themes.forEach(function (t) {
+  themeNames.forEach(function (t) {
+    var colors = presetColors(t.id);
     var btn = document.createElement('button');
     btn.type = 'button';
     btn.className = 'theme-card';
-- 
2.54.0