misc

src/components/Footer.astro

@@ -1,5 +1,5 @@
 ---
-import { metaData, ENVIRONMENT, WHITELABELS } from "../config";
+import { metaData, ENVIRONMENT, WHITELABELS, MAJOR_VERSION, RELEASE_FLAG } from "../config";
 import RandomMsg from "../components/RandomMsg";
 import { buildTime, buildNumber } from '../utils/buildTime.js';
 
@@ -12,17 +12,106 @@ import { getSubsiteByPath } from '../utils/subsites.js';
 const detected = getSubsiteByHost(host) ?? getSubsiteByPath(Astro.url.pathname) ?? null;
 const isReq = detected?.short === 'req';
 const whitelabel = WHITELABELS[host] ?? (isReq ? WHITELABELS[detected.host] : null);
+
+const versionDisplay = `v${MAJOR_VERSION}${RELEASE_FLAG ? `-${RELEASE_FLAG}` : ''}`;
+const envBadge = ENVIRONMENT === 'Dev' ? 'DEV' : null;
 ---
 
-<div class="footer">
+<div class:list={['footer', whitelabel && 'footer--subsite']}>
   {!whitelabel && <RandomMsg client:only="react" />}
-  <div style="margin-top: 15px; bottom: 0%">
-    <small>Build# {buildNumber}
-      <br>
-      Built: {buildTime} UTC</small>
+  <div class="footer-version" data-build-time={buildTime} title={`Built: ${buildTime}`}>
+    <span class="version-pill">
+      {envBadge && <span class="env-dot" title="Development build"></span>}
+      {!envBadge && <span class="version-dot"></span>}
+      {versionDisplay}:{buildNumber}
+    </span>
   </div>
-  </div>
-<style>
+</div>
+
+<script>
+  function updateBuildTooltip() {
+    const el = document.querySelector('.footer-version[data-build-time]');
+    if (el) {
+      const iso = el.getAttribute('data-build-time');
+      if (iso) {
+        const local = new Date(iso).toLocaleString(undefined, {
+          dateStyle: 'medium',
+          timeStyle: 'short',
+        });
+        el.setAttribute('title', `Built: ${local}`);
+      }
+    }
+  }
+  updateBuildTooltip();
+  document.addEventListener('astro:page-load', updateBuildTooltip);
+</script>
+
+<style is:global>
+  .footer-version {
+    margin-top: 1.25rem;
+    display: flex;
+    justify-content: center;
+  }
+
+  .footer--subsite .footer-version {
+    margin-top: 0;
+  }
+
+  .version-pill {
+    font-family: 'SF Mono', 'Fira Code', 'Geist Mono', ui-monospace, monospace;
+    font-size: 0.72rem;
+    font-weight: 500;
+    color: #3f3f46;
+    background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(244,244,245,0.8));
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    padding: 0.4rem 0.85rem;
+    border-radius: 999px;
+    cursor: help;
+    letter-spacing: 0.04em;
+    transition: all 0.2s ease;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.8);
+  }
+
+  .version-pill:hover {
+    background: linear-gradient(135deg, rgba(255,255,255,1), rgba(250,250,250,0.95));
+    color: #18181b;
+    border-color: rgba(0, 0, 0, 0.12);
+    box-shadow: 0 2px 6px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.9);
+  }
+
+  [data-theme="dark"] .version-pill {
+    color: #71717a;
+    background: #1a1a1c;
+    border-color: #2a2a2e;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
+  }
+
+  [data-theme="dark"] .version-pill:hover {
+    background: #252528;
+    color: #a1a1aa;
+    border-color: #3a3a3e;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.6);
+  }
+
+  .version-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #22c55e;
+    box-shadow: 0 0 4px rgba(34, 197, 94, 0.4);
+  }
+
+  .env-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #f59e0b;
+    box-shadow: 0 0 4px rgba(245, 158, 11, 0.5);
+  }
+
   @media screen and (max-width: 480px) {
     article {
       padding-top: 2rem;