Source

// Tasks' entry. "/" keeps the static landing and mounts the board maker and "Your boards" into it.
// "/b/<id>" is a board, "/b/<id>/c/<cardId>" a card on it, "/b/<id>/admin#k=<key>" the admin link.
import { useEffect } from "react";
import { createRoot } from "react-dom/client";
import { usePath } from "./lib/router";
import { Toaster, Announcer } from "./ui";
import { CreateBoard, YourBoards } from "./Home";
import { BoardPage } from "./BoardPage";
import "./styles.css";

const LANDING_TITLE = document.title;

function App() {
  const path = usePath();
  const m = path.match(/^\/b\/([A-Za-z0-9]{8,32})(?:\/c\/([A-Za-z0-9]{8,32})|\/(admin))?\/?$/);
  document.body.classList.toggle("app-mode", Boolean(m));
  useEffect(() => { if (!m) document.title = LANDING_TITLE; }, [Boolean(m)]); // eslint-disable-line react-hooks/exhaustive-deps
  return (
    <>
      {m && <BoardPage key={m[1]} boardId={m[1]} cardId={m[2] ?? null} admin={Boolean(m[3])} />}
      <Toaster />
      <Announcer />
    </>
  );
}

createRoot(document.getElementById("app")!).render(<App />);
const createSlot = document.getElementById("start");
if (createSlot) createRoot(createSlot).render(<CreateBoard />);
const yoursSlot = document.getElementById("your-boards");
if (yoursSlot) createRoot(yoursSlot).render(<YourBoards />);

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