Source

// Lists' entry. "/" keeps the static landing and mounts the start card into its hero; the landing
// never loads the Bounded SDK. /lists (your lists) and /l/<id> (a list, its share link and its
// admin link) 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 } from "./ui";
import { Start } from "./Start";
import "./styles.css";

const App = lazy(() => import("./App"));
const APP_ROUTE = /^\/(lists|l\/[A-Za-z0-9]{20}(\/admin)?)\/?$/;
const LANDING_TITLE = document.title;

function Root() {
  const path = usePath();
  const inApp = APP_ROUTE.test(path);
  document.body.classList.toggle("app-mode", inApp);
  if (!inApp) document.title = LANDING_TITLE;
  return (
    <>
      {inApp && (
        <Suspense fallback={<div className="page"><div className="loading"><span className="spinner" /></div></div>}>
          <App path={path.replace(/\/$/, "")} />
        </Suspense>
      )}
      <Toaster />
    </>
  );
}

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

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