codey.lol/src/components/Footer.astro

---
import { metaData, ENVIRONMENT, WHITELABELS, MAJOR_VERSION, RELEASE_FLAG } from "../config";
import RandomMsg from "../components/RandomMsg";
import { buildTime, buildNumber } from '../utils/buildTime.js';

const YEAR = new Date().getFullYear();

const hostHeader = Astro.request?.headers?.get('host') || '';
const host = hostHeader.split(':')[0];
import { getSubsiteByHost } from '../utils/subsites.js';
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:list={['footer', whitelabel && 'footer--subsite']}>
  {!whitelabel && <RandomMsg client:only="react" />}
  <div class="footer-version" data-build-time={buildTime} title={`Built: ${buildTime}`}>
    <span class="version-pill">
      {envBadge && <span class="env-dot api-status-dot" title="Development build"></span>}
      {!envBadge && <span class="version-dot api-status-dot"></span>}
      <span class="version-text">{versionDisplay}:{buildNumber}</span>
      <span class="build-time-text" aria-hidden="true"></span>
    </span>
  </div>
</div>

<script>
  function applyApiStatus(reachable) {
    const dot = document.querySelector('.api-status-dot');
    if (!dot) return;
    dot.classList.toggle('api-offline', reachable === false);
  }

  function bindApiStatusListener() {
    const guard = window as any;
    if (guard.__footerApiStatusBound) return;
    guard.__footerApiStatusBound = true;

    // Restore last known state across Astro client navigation
    try {
      const cached = sessionStorage.getItem('api-reachable');
      if (cached === '0') applyApiStatus(false);
      if (cached === '1') applyApiStatus(true);
    } catch {}

    window.addEventListener('api:status', (event) => {
      const customEvent = event as CustomEvent<{ reachable?: boolean }>;
      const reachable = Boolean(customEvent?.detail?.reachable);
      applyApiStatus(reachable);
      try {
        sessionStorage.setItem('api-reachable', reachable ? '1' : '0');
      } catch {}
    });
  }

  function initBuildTooltip() {
    const el = document.querySelector('.footer-version[data-build-time]');
    if (!el) return;
    
    const iso = el.getAttribute('data-build-time');
    if (!iso) return;
    
    const local = new Date(iso).toLocaleString(undefined, {
      dateStyle: 'medium',
      timeStyle: 'short',
    });
    el.setAttribute('title', `Built: ${local}`);
    
    // Set build time text for mobile tap display
    const buildTimeText = el.querySelector('.build-time-text');
    if (buildTimeText) {
      buildTimeText.textContent = local;
    }
    
    // Handle tap on mobile to toggle build time display
    const pill = el.querySelector('.version-pill') as HTMLElement | null;
    if (pill && !pill.dataset.initialized) {
      pill.dataset.initialized = 'true';
      pill.addEventListener('click', (e) => {
        e.stopPropagation();
        pill.classList.toggle('show-build-time');
      });
    }
  }

  bindApiStatusListener();
  
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initBuildTooltip);
  } else {
    initBuildTooltip();
  }
  document.addEventListener('astro:page-load', initBuildTooltip);
</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);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .build-time-text {
    display: none;
    font-size: 0.68rem;
    opacity: 0.7;
    padding-left: 0.4rem;
    border-left: 1px solid rgba(0, 0, 0, 0.15);
  }

  .version-pill.show-build-time .build-time-text {
    display: inline;
  }

  [data-theme="dark"] .build-time-text {
    border-left-color: rgba(255, 255, 255, 0.15);
  }

  .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);
  }

  .api-status-dot.api-offline {
    background: #ef4444 !important;
    box-shadow: 0 0 4px rgba(239, 68, 68, 0.45) !important;
  }

  .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;
      padding-bottom: 4rem;
    }
  }
</style>