feat(site): nav, footer, theme toggle, language picker

site/src/components/ThemeToggle.astro

@@ -0,0 +1,32 @@
+---
+// Tiny client island: flips data-theme + persists. Contract: writes "frappe"|"latte".
+---
+<button
+  id="theme-toggle"
+  type="button"
+  aria-label="Toggle theme"
+  class="rounded p-2 text-text hover:bg-mantle"
+>
+  <span data-icon="frappe">☾</span>
+  <span data-icon="latte" hidden>☀</span>
+</button>
+<script is:inline>
+  (() => {
+    const btn = document.getElementById("theme-toggle");
+    const sync = () => {
+      const t = document.documentElement.getAttribute("data-theme");
+      btn.querySelector('[data-icon="frappe"]').hidden = t !== "frappe";
+      btn.querySelector('[data-icon="latte"]').hidden = t !== "latte";
+    };
+    btn.addEventListener("click", () => {
+      const next =
+        document.documentElement.getAttribute("data-theme") === "frappe"
+          ? "latte"
+          : "frappe";
+      document.documentElement.setAttribute("data-theme", next);
+      localStorage.setItem("theme", next);
+      sync();
+    });
+    sync();
+  })();
+</script>