Source

// Monitor's entry. "/" keeps the static landing and mounts the device chooser into its hero;
// the app screens (baby station, parent, watching) hide the landing and use the night look.
import { createRoot } from "react-dom/client";
import { usePath } from "./lib/router";
import { Toaster } from "./ui";
import { Launcher } from "./Launcher";
import { BabyPage, TopBar } from "./Baby";
import { PairLinkPage, ParentPage } from "./Parent";
import { WatchPage } from "./Watch";
import "./styles.css";

function Home() {
  return (
    <div className="night">
      <div className="night-page">
        <TopBar title="Monitor" back="/" />
        <h1 className="night-h1">Free baby monitor</h1>
        <Launcher />
      </div>
    </div>
  );
}

function App() {
  const path = usePath();
  const watch = path.match(/^\/watch\/([A-Za-z0-9]{4,32})\/?$/);
  const screen =
    path === "/app" ? <Home />
      : path === "/baby" ? <BabyPage />
        : path === "/parent" ? <ParentPage />
          : path === "/pair" ? <PairLinkPage />
            : watch ? <WatchPage pairKey={watch[1]} />
              : null;
  document.body.classList.toggle("app-mode", Boolean(screen));
  return <>{screen}<Toaster /></>;
}

createRoot(document.getElementById("app")!).render(<App />);
const start = document.getElementById("start");
if (start) createRoot(start).render(<Launcher />);

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();