Source

// Subs' entry. "/" keeps the static landing and mounts the quick add into its hero. The app's routes
// (/home, /all, /add, /settings, /s/<id>) hide the landing and show the app.
import { useEffect } from "react";
import { createRoot } from "react-dom/client";
import { useLocation } from "./lib/router";
import { Toaster } from "./ui";
import { Shell, routeOf } from "./Shell";
import { Start } from "./Start";
import "./styles.css";

const LANDING_TITLE = document.title;

function Root() {
  const { path, query } = useLocation();
  const route = routeOf(path, query);
  document.body.classList.toggle("app-mode", Boolean(route));
  useEffect(() => { if (!route) document.title = LANDING_TITLE; }, [route]);
  return (
    <>
      {route && <Shell route={route} />}
      <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();