Source

// Baby's entry. "/" keeps the static landing and mounts the start card into its hero.
// /app (Today, Timeline, Charts, Family, the report) and /join hide the landing and load the app.
import { lazy, Suspense } from "react";
import { createRoot } from "react-dom/client";
import { usePath } from "./lib/router";
import { Toaster, AppSkeleton } from "./ui";
import { StartCard } from "./Start";
import "./styles.css";

const App = lazy(() => import("./App"));
const APP_ROUTE = /^\/(app(\/|$)|join\/?$)/;

function Root() {
  const path = usePath();
  const inApp = APP_ROUTE.test(path);
  document.body.classList.toggle("app-mode", inApp);
  document.body.classList.toggle("report-mode", path === "/app/report");
  return (
    <>
      {inApp && (
        <Suspense fallback={<AppSkeleton />}>
          <App path={path.replace(/\/$/, "") || "/"} />
        </Suspense>
      )}
      <Toaster />
    </>
  );
}

// The night look before the app loads, so a dark room never gets a bright flash.
const look = (() => { try { return JSON.parse(localStorage.getItem("baby:look") || '"auto"'); } catch { return "auto"; } })();
const hour = new Date().getHours();
if (APP_ROUTE.test(location.pathname) && location.pathname !== "/app/report" && (look === "night" || (look === "auto" && (hour >= 19 || hour < 7 || matchMedia("(prefers-color-scheme: dark)").matches)))) {
  document.body.classList.add("night");
}

createRoot(document.getElementById("app")!).render(<Root />);
const startSlot = document.getElementById("start");
if (startSlot) createRoot(startSlot).render(<StartCard />);

if (import.meta.env.PROD && "serviceWorker" in navigator) {
  window.addEventListener("load", () => void navigator.serviceWorker.register("/sw.js").catch(() => null));
}

const head = document.querySelector(".site-head");
const onScroll = () => head?.classList.toggle("scrolled", window.scrollY > 4);
window.addEventListener("scroll", onScroll, { passive: true });
onScroll();