Source

// When's entry. "/" keeps the static landing and mounts the poll maker and "Your polls" into it;
// "/p/<id>" hides the landing and shows the poll ("/p/<id>/admin#k=<key>" claims it, "/p/<id>/edit" edits it).
// The poll page and the Bounded SDK load on demand, so the landing stays light.
import { lazy, Suspense } from "react";
import { createRoot } from "react-dom/client";
import { usePath } from "./lib/router";
import { Toaster, PollSkeleton } from "./ui";
import { Editor } from "./Editor";
import { YourPolls } from "./Home";
import "./styles.css";

const PollPage = lazy(() => import("./Poll").then((m) => ({ default: m.PollPage })));

function App() {
  const path = usePath();
  const poll = path.match(/^\/p\/([A-Za-z0-9]{8,32})(?:\/(admin|edit))?\/?$/);
  document.body.classList.toggle("app-mode", Boolean(poll));
  return (
    <>
      {poll ? (
        <Suspense fallback={<PollSkeleton />}>
          <PollPage key={poll[1] + (poll[2] === "edit" ? ":edit" : "")} pollId={poll[1]} view={(poll[2] as "admin" | "edit") || "poll"} />
        </Suspense>
      ) : null}
      <Toaster />
    </>
  );
}

createRoot(document.getElementById("app")!).render(<App />);
const createSlot = document.getElementById("create");
if (createSlot) createRoot(createSlot).render(<Editor mode="create" />);
const pollsSlot = document.getElementById("your-polls");
if (pollsSlot) createRoot(pollsSlot).render(<YourPolls />);