Source

// Time's entry. "/" keeps the static landing and mounts the start box into its hero; every other path
// (/timer, /timesheet, /reports, /projects, /settings, /join/<id>) hides the landing and shows the app.
import { createRoot } from "react-dom/client";
import { usePath } from "./lib/router";
import { Toaster } from "./ui";
import { Start } from "./Start";
import { Shell, routeOf } from "./Shell";
import "./styles.css";

function App() {
  const path = usePath();
  const route = routeOf(path);
  document.body.classList.toggle("app-mode", Boolean(route));
  return (
    <>
      {route ? <Shell route={route} /> : null}
      <Toaster />
    </>
  );
}

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

// In-page links (the landing's start box and nav) move without a reload.
document.addEventListener("click", (e) => {
  const a = (e.target as HTMLElement).closest?.("a[data-app]") as HTMLAnchorElement | null;
  if (!a || e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;
  e.preventDefault();
  history.pushState(null, "", a.getAttribute("href")!);
  window.dispatchEvent(new PopStateEvent("popstate"));
  window.scrollTo(0, 0);
});

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