Turn cached-version disclosure into an 'i' info bubble

- cached-version.js: small circular 'i' button (bottom-right) expands on
  click/hover to the cached-version notice, incl. Ctrl/Cmd+Shift+R force-refresh
  shortcuts and a live-reload link
- bump cached-version.js?v=1 -> v=2 on all SW-enabled pages so clients fetch it

Author: Natalie Cole-Clift Spiva

cached-version.js

@@ -1,41 +1,64 @@
 // cached-version.js — Discloses when AcreetionOS is being viewed from the
-// service-worker cache (offline or fallback). Honest transparency: a fixed
-// bottom-right bubble in site branding links to the live site. No bubble is
-// shown when the page is served live from the network.
+// service-worker cache (offline or fallback). An honest little "i" info bubble
+// sits bottom-right; clicking it expands the cached-version notice with the
+// force-refresh shortcuts. No bubble is shown when the page is served live.
 // Maintainers: AcreetionOS
 
 (function () {
   "use strict";
   if (!("serviceWorker" in navigator)) return;
 
-  var shown = false;
+  var created = false;
 
   function showBubble() {
-    if (shown) return;
-    shown = true;
-
-    var b = document.createElement("div");
-    b.style.cssText =
-      "all:initial;position:fixed;right:16px;bottom:16px;z-index:2147483647;" +
-      "font:13px/1.45,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;" +
-      "color:#e5e5e5;background:#1a1a1a;border:1px solid #2ecc71;border-left:4px solid #2ecc71;" +
-      "border-radius:10px;padding:12px 14px;max-width:300px;" +
-      "box-shadow:0 6px 18px rgba(0,0,0,0.55);";
-
-    b.innerHTML =
-      '<div style="font-weight:700;color:#2ecc71;margin-bottom:4px;">Cached version</div>' +
-      '<div style="color:#b2b2b2;">You are looking at a locally cached copy' +
-      ' of this page because the network version could not be loaded right now.' +
-      ' To force-load the live page, press <b style="color:#e5e5e5;">Ctrl + Shift + R</b>' +
-      ' (Windows/Linux) or <b style="color:#e5e5e5;">Cmd + Shift + R</b> (macOS).' +
-      ' <a href="' + location.pathname + '" style="color:#2ecc71;font-weight:600;text-decoration:none;">Reload live →</a></div>';
-
-    // Clicking anywhere except the link dismisses the notice.
-    b.addEventListener("click", function (e) {
-      if (e.target.tagName !== "A") b.style.display = "none";
+    if (created) return;
+    created = true;
+
+    var wrap = document.createElement("div");
+    // Outer "i" button — small circular info icon, site green-on-dark.
+    wrap.innerHTML =
+      '<button aria-label="Cached version info" title="This page is a cached copy" style="' +
+        'all:initial;cursor:pointer;position:fixed;right:16px;bottom:16px;z-index:2147483647;' +
+        'width:36px;height:36px;border-radius:50%;border:2px solid #2ecc71;' +
+        'background:#1a1a1a;color:#2ecc71;font:700 20px/1 -apple-system,BlinkMacSystemFont,\'Segoe UI\',Roboto,sans-serif;' +
+        'font-style:italic;display:flex;align-items:center;justify-content:center;' +
+        'box-shadow:0 4px 14px rgba(0,0,0,0.55);user-select:none;' +
+      '">i</button>' +
+      '<div class="acc-cached-note" style="' +
+        'position:fixed;right:16px;bottom:64px;z-index:2147483647;display:none;max-width:310px;' +
+        'font:13px/1.5 -apple-system,BlinkMacSystemFont,\'Segoe UI\',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;' +
+        'color:#e5e5e5;background:#1a1a1a;border:1px solid #2ecc71;border-left:4px solid #2ecc71;' +
+        'border-radius:10px;padding:12px 14px;box-shadow:0 6px 18px rgba(0,0,0,0.55);' +
+      '">' +
+        '<div style="font-weight:700;color:#2ecc71;margin-bottom:4px;">Cached version</div>' +
+        '<div style="color:#b2b2b2;">You are looking at a locally cached copy of this page ' +
+          'because the network version could not be loaded right now. To force-load the live page, ' +
+          'press <b style="color:#e5e5e5;">Ctrl + Shift + R</b> (Windows/Linux) ' +
+          'or <b style="color:#e5e5e5;">Cmd + Shift + R</b> (macOS). ' +
+          '<a href="' + location.pathname + '" style="color:#2ecc71;font-weight:600;text-decoration:none;">Reload live →</a>' +
+        '</div>' +
+      '</div>';
+
+    var btn = wrap.firstElementChild;
+    var note = wrap.lastElementChild;
+
+    function toggle(force) {
+      note.style.display = typeof force === "boolean" ? (force ? "block" : "none") : (note.style.display === "block" ? "none" : "block");
+    }
+
+    btn.addEventListener("click", function (e) {
+      e.stopPropagation();
+      toggle();
+    });
+    // Hover also reveals it (discoverable), click finishes interaction.
+    btn.addEventListener("mouseenter", function () { toggle(true); });
+    btn.addEventListener("mouseleave", function () { toggle(false); });
+    // Dismiss when clicking outside.
+    document.addEventListener("click", function (e) {
+      if (!wrap.contains(e.target)) toggle(false);
     });
 
-    (document.body || document.documentElement).appendChild(b);
+    (document.body || document.documentElement).appendChild(wrap);
   }
 
   navigator.serviceWorker.addEventListener("message", function (e) {

compare.html

@@ -458,7 +458,7 @@ <h2>
 </div>
 </div>
 <script src="sw-register.js?v=20260825" defer>
-<script src="cached-version.js?v=1" defer>
+<script src="cached-version.js?v=2" defer>
 </script>
 <script src="footer.js?v=20260825" defer>
 </script>

docs.html

@@ -351,7 +351,7 @@ <h1 id="doc-title">
 
 </script>
 <script src="sw-register.js?v=20260825" defer>
-<script src="cached-version.js?v=1" defer>
+<script src="cached-version.js?v=2" defer>
 </script>
 <script src="footer.js?v=20260825" defer>
 </script>

faq.html

@@ -748,7 +748,7 @@ <h2>
 </div>
 </div>
 <script src="sw-register.js?v=20260825" defer>
-<script src="cached-version.js?v=1" defer>
+<script src="cached-version.js?v=2" defer>
 </script>
 <script src="faq-issue.js?v=20260824" defer>
 </script>

index.html

@@ -460,7 +460,7 @@ <h2 class="section-title section-title--block section-title--mt-lg">Community &a
 </div>
 <script src="sw-register.js?v=20260825" defer>
 </script>
-<script src="cached-version.js?v=1" defer>
+<script src="cached-version.js?v=2" defer>
 </script>
 <script src="index-providers.js?v=20260825" defer>
 </script>

requirements.html

@@ -306,7 +306,7 @@ <h3>
 </div>
 </div>
 <script src="sw-register.js?v=20260825" defer>
-<script src="cached-version.js?v=1" defer>
+<script src="cached-version.js?v=2" defer>
 </script>
 <script src="footer.js?v=20260825" defer>
 </script>

status.html

@@ -178,7 +178,7 @@ <h2><i class="bi bi-clock-history"></i> Incident History</h2>
   </div>
 </div>
 <script src="sw-register.js?v=20260825" defer>
-<script src="cached-version.js?v=1" defer>
+<script src="cached-version.js?v=2" defer>
 </script>
 <script src="footer.js?v=20260825" defer>
 </script>

unofficial.html

@@ -538,7 +538,7 @@ <h2>
 </div>
 </div>
 <script src="sw-register.js?v=20260825" defer>
-<script src="cached-version.js?v=1" defer>
+<script src="cached-version.js?v=2" defer>
 </script>
 <script src="footer.js?v=20260825" defer>
 </script>