From bdabf3ebff20c1605c12c5d8824f8f13d9b4e0b5 Mon Sep 17 00:00:00 2001
From: aamoghS <aamoghsawantt@gmail.com>
Date: Fri, 6 Nov 2026 12:39:27 -0500
Subject: [PATCH 1/9] perf(mainweb): prefetch the hackathons list on the server

The list drew only after hydration plus a tRPC batch. A server page now reads
the list, the visitor's registrations and projects and hands them to the
unchanged client page; its dates print on the venue calendar so the server
(UTC) and the browser agree. Cold load to the first card, 5 runs, 1440px,
median: 436 to 334 ms (warm 190 to 158).
---
 .../(portal)/hackathons/HackathonsPage.tsx    | 376 +++++++++++++++++
 .../mainweb/app/(portal)/hackathons/page.tsx  | 388 +-----------------
 2 files changed, 388 insertions(+), 376 deletions(-)
 create mode 100644 sites/mainweb/app/(portal)/hackathons/HackathonsPage.tsx

diff --git a/sites/mainweb/app/(portal)/hackathons/HackathonsPage.tsx b/sites/mainweb/app/(portal)/hackathons/HackathonsPage.tsx
new file mode 100644
index 00000000..4768dc68
--- /dev/null
+++ b/sites/mainweb/app/(portal)/hackathons/HackathonsPage.tsx
@@ -0,0 +1,376 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { loginHref } from "@/lib/safe-callback";
+import { useSession } from "next-auth/react";
+import { trpc } from "@/lib/trpc";
+import { hackathonSlug } from "@/lib/hackathon-slug";
+import { useRouter } from "next/navigation";
+import { LoadingScreen } from "@/components/portal/LoadingScreen";
+import Link from "next/link";
+import { StatusBadge } from "@/components/hackathon/StatusBadge";
+import { hackathonStatus } from "@/lib/hackathon-status";
+import { venueFormat, venueParts } from "@/lib/venue-time";
+import {
+  body,
+  btnSecondary,
+  chip,
+  itemTitle,
+  kicker,
+  meta,
+  object,
+  page,
+  pageDek,
+  pageTitle,
+  sectionTitle,
+  status,
+  tab,
+  tabList,
+  textLink,
+} from "@/components/portal/ui";
+
+type Tab = "browse" | "registrations" | "projects";
+
+function formatDate(d: Date | string) {
+  return venueFormat(d, { month: "short", day: "numeric", year: "numeric" });
+}
+
+function formatDateRange(start: Date | string, end: Date | string) {
+  const s = venueParts(start);
+  const e = venueParts(end);
+  const short = { month: "short", day: "numeric" } as const;
+  if (s.month === e.month && s.year === e.year) {
+    return `${venueFormat(start, short)} – ${e.day}, ${e.year}`;
+  }
+  if (s.year === e.year) {
+    return `${venueFormat(start, short)} – ${venueFormat(end, short)}, ${e.year}`;
+  }
+  return `${formatDate(start)} – ${formatDate(end)}`;
+}
+
+export default function HackathonsPage() {
+  const { data: session, status: authStatus } = useSession();
+  const router = useRouter();
+
+  const [activeTab, setActiveTab] = useState<Tab>("browse");
+  const [statusFilter, setStatusFilter] = useState<
+    "all" | "open" | "live" | "completed"
+  >("all");
+
+  const { data: hackathons, isLoading } = trpc.hackathon.list.useQuery({});
+  const { data: myRegs } = trpc.hackathon.myRegistrations.useQuery(undefined, {
+    enabled: !!session,
+  });
+
+  // Covers solo submissions too, which have no team to read them off.
+  const { data: myProjects } = trpc.team.myProjects.useQuery(undefined, {
+    enabled: !!session,
+  });
+  const projects = myProjects ?? [];
+
+  useEffect(() => {
+    const handleHashChange = () => {
+      const hash = window.location.hash.replace("#", "") as Tab;
+      if (["browse", "registrations", "projects"].includes(hash)) {
+        setActiveTab(hash);
+      }
+    };
+    handleHashChange();
+    window.addEventListener("hashchange", handleHashChange);
+    return () => window.removeEventListener("hashchange", handleHashChange);
+  }, []);
+
+  useEffect(() => {
+    if (authStatus === "unauthenticated") router.push(loginHref());
+  }, [authStatus, router]);
+
+  if (authStatus === "loading" || isLoading)
+    return <LoadingScreen message="Loading hackathons…" />;
+  if (!session) return null;
+
+  const regStatusById = new Map(
+    myRegs?.map((r) => [r.hackathonId, r.registrationStatus]) ?? [],
+  );
+
+  const tabs = [
+    { id: "browse", label: "Browse" },
+    { id: "registrations", label: "My registrations" },
+    { id: "projects", label: "My projects" },
+  ];
+
+  const filters = [
+    { key: "all", label: "All" },
+    { key: "open", label: "Open" },
+    { key: "live", label: "Live" },
+    { key: "completed", label: "Past" },
+  ] as const;
+
+  const filtered = (hackathons ?? []).filter((h) => {
+    if (statusFilter === "all") return true;
+    if (statusFilter === "open") return h.status === "open";
+    if (statusFilter === "live") return h.status === "in_progress";
+    return h.status === "completed";
+  });
+  const filterLabel =
+    filters.find((f) => f.key === statusFilter)?.label.toLowerCase() ?? "";
+
+  return (
+    <div className={page}>
+      <Link
+        href="/dashboard"
+        className="text-[13px] text-[var(--text-subtle)] hover:text-[var(--text-primary)] transition-colors"
+      >
+        ← Dashboard
+      </Link>
+
+      <header className="mt-6">
+        <h1 className={pageTitle}>Hackathons</h1>
+        <p className={pageDek}>
+          Events you can register for, your registrations, and projects
+          you&apos;ve submitted.
+        </p>
+      </header>
+
+      <nav aria-label="Hackathon views" className={`mt-8 ${tabList}`}>
+        {tabs.map((t) => (
+          <Link
+            key={t.id}
+            href={`#${t.id}`}
+            onClick={() => setActiveTab(t.id as Tab)}
+            aria-current={activeTab === t.id ? "page" : undefined}
+            className={tab(activeTab === t.id)}
+          >
+            {t.label}
+          </Link>
+        ))}
+      </nav>
+
+      {/* Browse */}
+      {activeTab === "browse" && (
+        <div className="mt-6">
+          <div className="flex flex-wrap gap-2">
+            {filters.map(({ key, label }) => (
+              <button
+                key={key}
+                type="button"
+                onClick={() => setStatusFilter(key)}
+                aria-pressed={statusFilter === key}
+                className={chip(statusFilter === key)}
+              >
+                {label}
+              </button>
+            ))}
+          </div>
+
+          {!hackathons || hackathons.length === 0 ? (
+            <p className={`mt-8 ${body}`}>
+              No hackathons are listed yet. New events show up here when
+              they&apos;re announced.
+            </p>
+          ) : filtered.length === 0 ? (
+            <div className="mt-8 space-y-3">
+              <p className={body}>No {filterLabel} hackathons right now.</p>
+              <button
+                type="button"
+                onClick={() => setStatusFilter("all")}
+                className={textLink}
+              >
+                Show all hackathons
+              </button>
+            </div>
+          ) : (
+            <div className="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {filtered.map((h) => {
+                const conf = hackathonStatus(h.status);
+                const regStatus = regStatusById.get(h.id);
+                return (
+                  <Link
+                    href={`/hackathons/${hackathonSlug(h.name)}`}
+                    key={h.id}
+                    className={`flex h-full flex-col gap-3 p-5 transition-colors hover:border-[var(--border-hover)] ${object}`}
+                  >
+                    <div className="flex flex-wrap items-center gap-x-4 gap-y-1">
+                      <span className={status(conf.tone)}>{conf.label}</span>
+                      {regStatus && <StatusBadge status={regStatus} />}
+                    </div>
+
+                    <div className="flex-1">
+                      {h.theme && <p className={kicker}>{h.theme}</p>}
+                      <h2 className={`mt-1 ${itemTitle}`}>{h.name}</h2>
+                      {h.description && (
+                        <p className={`mt-2 line-clamp-3 ${body}`}>
+                          {h.description}
+                        </p>
+                      )}
+                    </div>
+
+                    <div className={`space-y-0.5 ${meta}`}>
+                      <p>{formatDateRange(h.startDate, h.endDate)}</p>
+                      {h.location && <p>{h.location}</p>}
+                      {h.maxParticipants && (
+                        <p>
+                          {h.currentParticipants} of {h.maxParticipants} spots
+                          taken
+                        </p>
+                      )}
+                    </div>
+
+                    <span className={`mt-1 self-start ${textLink}`}>View</span>
+                  </Link>
+                );
+              })}
+            </div>
+          )}
+
+          <section className="mt-12 border-t border-[var(--border-subtle)] pt-6 flex flex-col md:flex-row md:items-end justify-between gap-4">
+            <div>
+              <h2 className={sectionTitle}>Judge a hackathon</h2>
+              <p className={`mt-2 max-w-xl ${body}`}>
+                Industry professionals and experienced students score projects
+                at the expo. You apply per event, and an organiser reviews each
+                application.
+              </p>
+            </div>
+            <Link
+              href="/judge/register"
+              className={`shrink-0 self-start md:self-auto ${btnSecondary}`}
+            >
+              Apply to judge
+            </Link>
+          </section>
+        </div>
+      )}
+
+      {/* My registrations */}
+      {activeTab === "registrations" && (
+        <div className="mt-6">
+          {myRegs && myRegs.length > 0 ? (
+            <ul className="border-b border-[var(--border-subtle)]">
+              {myRegs.map((reg) => (
+                <li
+                  key={reg.id}
+                  className="border-t border-[var(--border-subtle)] first:border-t-0"
+                >
+                  <Link
+                    href={`/hackathons/${hackathonSlug(reg.hackathon.name)}?tab=INFO`}
+                    className="flex flex-col gap-3 py-5 sm:flex-row sm:items-start sm:justify-between sm:gap-8"
+                  >
+                    <div className="min-w-0">
+                      <StatusBadge status={reg.registrationStatus} />
+                      <h3 className={`mt-1 ${itemTitle}`}>
+                        {reg.hackathon.name}
+                      </h3>
+                      {reg.hackathon.theme && (
+                        <p className={`mt-0.5 ${meta}`}>
+                          Theme: {reg.hackathon.theme}
+                        </p>
+                      )}
+                      <p className={`mt-2 line-clamp-3 max-w-2xl ${body}`}>
+                        {reg.hackathon.description}
+                      </p>
+                    </div>
+                    <div className="flex shrink-0 items-center gap-6 sm:flex-col sm:items-end sm:gap-2">
+                      <span className={meta}>
+                        {reg.hackathon.startDate
+                          ? venueFormat(reg.hackathon.startDate)
+                          : "TBA"}
+                      </span>
+                      <span className={textLink}>View</span>
+                    </div>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <div className="mt-8 space-y-3">
+              <p className={body}>
+                You haven&apos;t registered for any hackathons yet.
+              </p>
+              <button
+                type="button"
+                onClick={() => setActiveTab("browse")}
+                className={textLink}
+              >
+                Browse hackathons
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* My projects */}
+      {activeTab === "projects" && (
+        <div className="mt-6">
+          {projects.length === 0 ? (
+            <div className="mt-8 space-y-3">
+              <p className={body}>
+                Projects you submit to a hackathon show up here.
+              </p>
+              <button
+                type="button"
+                onClick={() => setActiveTab("browse")}
+                className={textLink}
+              >
+                Browse hackathons
+              </button>
+            </div>
+          ) : (
+            <ul className="border-b border-[var(--border-subtle)]">
+              {projects.map((project) => (
+                <li
+                  key={project.id}
+                  className="border-t border-[var(--border-subtle)] first:border-t-0 py-5"
+                >
+                  <span
+                    className={status(
+                      project.status === "winner"
+                        ? "success"
+                        : project.status === "judging"
+                          ? "accent"
+                          : "neutral",
+                    )}
+                  >
+                    {project.status === "winner"
+                      ? "Winner"
+                      : project.status === "judging"
+                        ? "In judging"
+                        : "Submitted"}
+                  </span>
+                  <h3 className={`mt-1 ${itemTitle}`}>{project.name}</h3>
+                  <p className={`mt-2 line-clamp-3 max-w-2xl ${body}`}>
+                    {project.description}
+                  </p>
+
+                  {(project.githubUrl || project.demoUrl) && (
+                    <div className="mt-3 flex flex-wrap gap-6">
+                      {project.githubUrl && (
+                        <Link
+                          href={project.githubUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className={textLink}
+                        >
+                          Code
+                        </Link>
+                      )}
+                      {project.demoUrl && (
+                        <Link
+                          href={project.demoUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className={textLink}
+                        >
+                          Demo
+                        </Link>
+                      )}
+                    </div>
+                  )}
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/hackathons/page.tsx b/sites/mainweb/app/(portal)/hackathons/page.tsx
index 5ba2dc4e..575ddb0f 100644
--- a/sites/mainweb/app/(portal)/hackathons/page.tsx
+++ b/sites/mainweb/app/(portal)/hackathons/page.tsx
@@ -1,380 +1,16 @@
-"use client";
-
-import React, { useEffect, useState } from "react";
-import { loginHref } from "@/lib/safe-callback";
-import { useSession } from "next-auth/react";
-import { trpc } from "@/lib/trpc";
-import { hackathonSlug } from "@/lib/hackathon-slug";
-import { useRouter } from "next/navigation";
-import { LoadingScreen } from "@/components/portal/LoadingScreen";
-import Link from "next/link";
-import { StatusBadge } from "@/components/hackathon/StatusBadge";
-import { hackathonStatus } from "@/lib/hackathon-status";
-import {
-  body,
-  btnSecondary,
-  chip,
-  itemTitle,
-  kicker,
-  meta,
-  object,
-  page,
-  pageDek,
-  pageTitle,
-  sectionTitle,
-  status,
-  tab,
-  tabList,
-  textLink,
-} from "@/components/portal/ui";
-
-type Tab = "browse" | "registrations" | "projects";
-
-function formatDate(d: Date | string) {
-  return new Date(d).toLocaleDateString("en-US", {
-    month: "short",
-    day: "numeric",
-    year: "numeric",
-  });
-}
-
-function formatDateRange(start: Date | string, end: Date | string) {
-  const s = new Date(start);
-  const e = new Date(end);
-  if (s.getMonth() === e.getMonth() && s.getFullYear() === e.getFullYear()) {
-    return `${s.toLocaleDateString("en-US", { month: "short", day: "numeric" })} – ${e.getDate()}, ${e.getFullYear()}`;
-  }
-  if (s.getFullYear() === e.getFullYear()) {
-    return `${s.toLocaleDateString("en-US", { month: "short", day: "numeric" })} – ${e.toLocaleDateString("en-US", { month: "short", day: "numeric" })}, ${e.getFullYear()}`;
-  }
-  return `${formatDate(s)} – ${formatDate(e)}`;
-}
-
-export default function HackathonsPage() {
-  const { data: session, status: authStatus } = useSession();
-  const router = useRouter();
-
-  const [activeTab, setActiveTab] = useState<Tab>("browse");
-  const [statusFilter, setStatusFilter] = useState<
-    "all" | "open" | "live" | "completed"
-  >("all");
-
-  const { data: hackathons, isLoading } = trpc.hackathon.list.useQuery({});
-  const { data: myRegs } = trpc.hackathon.myRegistrations.useQuery(undefined, {
-    enabled: !!session,
-  });
-
-  // Covers solo submissions too, which have no team to read them off.
-  const { data: myProjects } = trpc.team.myProjects.useQuery(undefined, {
-    enabled: !!session,
-  });
-  const projects = myProjects ?? [];
-
-  useEffect(() => {
-    const handleHashChange = () => {
-      const hash = window.location.hash.replace("#", "") as Tab;
-      if (["browse", "registrations", "projects"].includes(hash)) {
-        setActiveTab(hash);
-      }
-    };
-    handleHashChange();
-    window.addEventListener("hashchange", handleHashChange);
-    return () => window.removeEventListener("hashchange", handleHashChange);
-  }, []);
-
-  useEffect(() => {
-    if (authStatus === "unauthenticated") router.push(loginHref());
-  }, [authStatus, router]);
-
-  if (authStatus === "loading" || isLoading)
-    return <LoadingScreen message="Loading hackathons…" />;
-  if (!session) return null;
-
-  const regStatusById = new Map(
-    myRegs?.map((r) => [r.hackathonId, r.registrationStatus]) ?? [],
-  );
-
-  const tabs = [
-    { id: "browse", label: "Browse" },
-    { id: "registrations", label: "My registrations" },
-    { id: "projects", label: "My projects" },
-  ];
-
-  const filters = [
-    { key: "all", label: "All" },
-    { key: "open", label: "Open" },
-    { key: "live", label: "Live" },
-    { key: "completed", label: "Past" },
-  ] as const;
-
-  const filtered = (hackathons ?? []).filter((h) => {
-    if (statusFilter === "all") return true;
-    if (statusFilter === "open") return h.status === "open";
-    if (statusFilter === "live") return h.status === "in_progress";
-    return h.status === "completed";
-  });
-  const filterLabel =
-    filters.find((f) => f.key === statusFilter)?.label.toLowerCase() ?? "";
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import HackathonsPage from "./HackathonsPage";
 
+export default function Page() {
   return (
-    <div className={page}>
-      <Link
-        href="/dashboard"
-        className="text-[13px] text-[var(--text-subtle)] hover:text-[var(--text-primary)] transition-colors"
-      >
-        ← Dashboard
-      </Link>
-
-      <header className="mt-6">
-        <h1 className={pageTitle}>Hackathons</h1>
-        <p className={pageDek}>
-          Events you can register for, your registrations, and projects
-          you&apos;ve submitted.
-        </p>
-      </header>
-
-      <nav aria-label="Hackathon views" className={`mt-8 ${tabList}`}>
-        {tabs.map((t) => (
-          <Link
-            key={t.id}
-            href={`#${t.id}`}
-            onClick={() => setActiveTab(t.id as Tab)}
-            aria-current={activeTab === t.id ? "page" : undefined}
-            className={tab(activeTab === t.id)}
-          >
-            {t.label}
-          </Link>
-        ))}
-      </nav>
-
-      {/* Browse */}
-      {activeTab === "browse" && (
-        <div className="mt-6">
-          <div className="flex flex-wrap gap-2">
-            {filters.map(({ key, label }) => (
-              <button
-                key={key}
-                type="button"
-                onClick={() => setStatusFilter(key)}
-                aria-pressed={statusFilter === key}
-                className={chip(statusFilter === key)}
-              >
-                {label}
-              </button>
-            ))}
-          </div>
-
-          {!hackathons || hackathons.length === 0 ? (
-            <p className={`mt-8 ${body}`}>
-              No hackathons are listed yet. New events show up here when
-              they&apos;re announced.
-            </p>
-          ) : filtered.length === 0 ? (
-            <div className="mt-8 space-y-3">
-              <p className={body}>No {filterLabel} hackathons right now.</p>
-              <button
-                type="button"
-                onClick={() => setStatusFilter("all")}
-                className={textLink}
-              >
-                Show all hackathons
-              </button>
-            </div>
-          ) : (
-            <div className="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-              {filtered.map((h) => {
-                const conf = hackathonStatus(h.status);
-                const regStatus = regStatusById.get(h.id);
-                return (
-                  <Link
-                    href={`/hackathons/${hackathonSlug(h.name)}`}
-                    key={h.id}
-                    className={`flex h-full flex-col gap-3 p-5 transition-colors hover:border-[var(--border-hover)] ${object}`}
-                  >
-                    <div className="flex flex-wrap items-center gap-x-4 gap-y-1">
-                      <span className={status(conf.tone)}>{conf.label}</span>
-                      {regStatus && <StatusBadge status={regStatus} />}
-                    </div>
-
-                    <div className="flex-1">
-                      {h.theme && <p className={kicker}>{h.theme}</p>}
-                      <h2 className={`mt-1 ${itemTitle}`}>{h.name}</h2>
-                      {h.description && (
-                        <p className={`mt-2 line-clamp-3 ${body}`}>
-                          {h.description}
-                        </p>
-                      )}
-                    </div>
-
-                    <div className={`space-y-0.5 ${meta}`}>
-                      <p>{formatDateRange(h.startDate, h.endDate)}</p>
-                      {h.location && <p>{h.location}</p>}
-                      {h.maxParticipants && (
-                        <p>
-                          {h.currentParticipants} of {h.maxParticipants} spots
-                          taken
-                        </p>
-                      )}
-                    </div>
-
-                    <span className={`mt-1 self-start ${textLink}`}>View</span>
-                  </Link>
-                );
-              })}
-            </div>
-          )}
-
-          <section className="mt-12 border-t border-[var(--border-subtle)] pt-6 flex flex-col md:flex-row md:items-end justify-between gap-4">
-            <div>
-              <h2 className={sectionTitle}>Judge a hackathon</h2>
-              <p className={`mt-2 max-w-xl ${body}`}>
-                Industry professionals and experienced students score projects
-                at the expo. You apply per event, and an organiser reviews each
-                application.
-              </p>
-            </div>
-            <Link
-              href="/judge/register"
-              className={`shrink-0 self-start md:self-auto ${btnSecondary}`}
-            >
-              Apply to judge
-            </Link>
-          </section>
-        </div>
-      )}
-
-      {/* My registrations */}
-      {activeTab === "registrations" && (
-        <div className="mt-6">
-          {myRegs && myRegs.length > 0 ? (
-            <ul className="border-b border-[var(--border-subtle)]">
-              {myRegs.map((reg) => (
-                <li
-                  key={reg.id}
-                  className="border-t border-[var(--border-subtle)] first:border-t-0"
-                >
-                  <Link
-                    href={`/hackathons/${hackathonSlug(reg.hackathon.name)}?tab=INFO`}
-                    className="flex flex-col gap-3 py-5 sm:flex-row sm:items-start sm:justify-between sm:gap-8"
-                  >
-                    <div className="min-w-0">
-                      <StatusBadge status={reg.registrationStatus} />
-                      <h3 className={`mt-1 ${itemTitle}`}>
-                        {reg.hackathon.name}
-                      </h3>
-                      {reg.hackathon.theme && (
-                        <p className={`mt-0.5 ${meta}`}>
-                          Theme: {reg.hackathon.theme}
-                        </p>
-                      )}
-                      <p className={`mt-2 line-clamp-3 max-w-2xl ${body}`}>
-                        {reg.hackathon.description}
-                      </p>
-                    </div>
-                    <div className="flex shrink-0 items-center gap-6 sm:flex-col sm:items-end sm:gap-2">
-                      <span className={meta}>
-                        {reg.hackathon.startDate
-                          ? new Date(
-                              reg.hackathon.startDate,
-                            ).toLocaleDateString()
-                          : "TBA"}
-                      </span>
-                      <span className={textLink}>View</span>
-                    </div>
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          ) : (
-            <div className="mt-8 space-y-3">
-              <p className={body}>
-                You haven&apos;t registered for any hackathons yet.
-              </p>
-              <button
-                type="button"
-                onClick={() => setActiveTab("browse")}
-                className={textLink}
-              >
-                Browse hackathons
-              </button>
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* My projects */}
-      {activeTab === "projects" && (
-        <div className="mt-6">
-          {projects.length === 0 ? (
-            <div className="mt-8 space-y-3">
-              <p className={body}>
-                Projects you submit to a hackathon show up here.
-              </p>
-              <button
-                type="button"
-                onClick={() => setActiveTab("browse")}
-                className={textLink}
-              >
-                Browse hackathons
-              </button>
-            </div>
-          ) : (
-            <ul className="border-b border-[var(--border-subtle)]">
-              {projects.map((project) => (
-                <li
-                  key={project.id}
-                  className="border-t border-[var(--border-subtle)] first:border-t-0 py-5"
-                >
-                  <span
-                    className={status(
-                      project.status === "winner"
-                        ? "success"
-                        : project.status === "judging"
-                          ? "accent"
-                          : "neutral",
-                    )}
-                  >
-                    {project.status === "winner"
-                      ? "Winner"
-                      : project.status === "judging"
-                        ? "In judging"
-                        : "Submitted"}
-                  </span>
-                  <h3 className={`mt-1 ${itemTitle}`}>{project.name}</h3>
-                  <p className={`mt-2 line-clamp-3 max-w-2xl ${body}`}>
-                    {project.description}
-                  </p>
-
-                  {(project.githubUrl || project.demoUrl) && (
-                    <div className="mt-3 flex flex-wrap gap-6">
-                      {project.githubUrl && (
-                        <Link
-                          href={project.githubUrl}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className={textLink}
-                        >
-                          Code
-                        </Link>
-                      )}
-                      {project.demoUrl && (
-                        <Link
-                          href={project.demoUrl}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className={textLink}
-                        >
-                          Demo
-                        </Link>
-                      )}
-                    </div>
-                  )}
-                </li>
-              ))}
-            </ul>
-          )}
-        </div>
-      )}
-    </div>
+    <PrefetchedPage
+      reads={(c) => [
+        ["hackathon.list", {}, c.hackathon.list({})],
+        ["hackathon.myRegistrations", undefined, c.hackathon.myRegistrations()],
+        ["team.myProjects", undefined, c.team.myProjects()],
+      ]}
+    >
+      <HackathonsPage />
+    </PrefetchedPage>
   );
 }

From 788d44475e6eabb9c2938bac4a817d7680ab389d Mon Sep 17 00:00:00 2001
From: aamoghS <aamoghsawantt@gmail.com>
Date: Fri, 6 Nov 2026 12:39:27 -0500
Subject: [PATCH 2/9] perf(mainweb): prefetch the submit page and the event it
 opens on

The page waited on the registrations, then on the submission, the event and
the submission window for the event it picked. The server page reads the
registrations, picks the same event (the URL's, else the first still open),
and reads the other three with it. PrefetchedPage accepts an async reads
function for this. Cold load to the submission notice, median of 5:
878 to 488 ms (warm 412 to 232).
---
 .../app/(portal)/submit/SubmitPage.tsx        | 764 +++++++++++++++++
 sites/mainweb/app/(portal)/submit/page.tsx    | 811 ++----------------
 .../components/portal/PrefetchedPage.tsx      |  13 +-
 3 files changed, 824 insertions(+), 764 deletions(-)
 create mode 100644 sites/mainweb/app/(portal)/submit/SubmitPage.tsx

diff --git a/sites/mainweb/app/(portal)/submit/SubmitPage.tsx b/sites/mainweb/app/(portal)/submit/SubmitPage.tsx
new file mode 100644
index 00000000..c73a669b
--- /dev/null
+++ b/sites/mainweb/app/(portal)/submit/SubmitPage.tsx
@@ -0,0 +1,764 @@
+"use client";
+
+import { useSession } from "next-auth/react";
+import { loginHref } from "@/lib/safe-callback";
+import { trpc } from "@/lib/trpc";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Suspense, useState } from "react";
+import { LoadingScreen } from "@/components/portal/LoadingScreen";
+import Link from "next/link";
+import {
+  body,
+  btnDanger,
+  btnPrimary,
+  btnSecondary,
+  chip,
+  fieldLabel,
+  input,
+  itemTitle,
+  kicker,
+  page,
+  pageTitle,
+  textLink,
+} from "@/components/portal/ui";
+
+/**
+ * Deadlines are rendered in the event's own time zone, not the viewer's. Half
+ * the field is remote, and a submission deadline shown in the wrong zone is the
+ * one rendering mistake that costs someone their entry.
+ */
+const formatMoment = (moment: Date) =>
+  moment.toLocaleString("en-US", {
+    weekday: "short",
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    timeZoneName: "short",
+    timeZone: "America/New_York",
+  });
+
+/** A deadline that never breaks across lines: "EST." alone on a line is unreadable. */
+const Moment = ({ at }: { at: Date }) => (
+  <span className="whitespace-nowrap font-semibold">{formatMoment(at)}</span>
+);
+
+/** A teammate's view of the form: filed values read as values, not empty fields. */
+const readOnlyField =
+  "read-only:bg-transparent read-only:border-[var(--border-subtle)]";
+
+function SubmitPortalContent() {
+  const { data: session, status } = useSession();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const urlHackathonId = searchParams.get("id");
+
+  const utils = trpc.useUtils();
+
+  // Context & State
+  const [selectedHackathonId, setSelectedHackathonId] = useState<string>(
+    urlHackathonId || "",
+  );
+  // The id can come straight from the URL or the picker, so it is encoded
+  // wherever it becomes part of a link path.
+  const hackathonPath = `/hackathons/${encodeURIComponent(selectedHackathonId)}`;
+  const [confirmWithdraw, setConfirmWithdraw] = useState(false);
+
+  const [projectName, setProjectName] = useState("");
+  const [projectDesc, setProjectDesc] = useState("");
+  const [githubUrl, setGithubUrl] = useState("");
+  const [videoUrl, setVideoUrl] = useState("");
+  const [demoUrl, setDemoUrl] = useState("");
+  // Judge routing filters on exactly these three. A submission without them
+  // reaches no track judge and no sponsor judge at all.
+  const [tracks, setTracks] = useState<string[]>([]);
+  const [challenges, setChallenges] = useState<string[]>([]);
+  const [isCreateX, setIsCreateX] = useState(false);
+
+  const [error, setError] = useState("");
+  const [successMessage, setSuccessMessage] = useState("");
+  const [projectSubmitted, setProjectSubmitted] = useState(false);
+  // Which hackathon the form below has already been filled from, so a
+  // background refetch cannot overwrite what someone is part-way through
+  // typing.
+  const [prefilledFor, setPrefilledFor] = useState("");
+
+  // Queries
+  const { data: myRegs, isLoading: loadingRegs } =
+    trpc.hackathon.myRegistrations.useQuery(undefined, {
+      enabled: !!session,
+      // An accepted attendee gets checked in at the venue, which is what
+      // unlocks the form. Poll for it only on the event's days, so the page
+      // updates without a reload and idle tabs stay quiet. Day granularity on
+      // the viewer's clock, as the event page does: a badge scanned before
+      // doors open still counts.
+      refetchInterval: (query) => {
+        const reg = query.state.data?.find(
+          (r) => r.hackathonId === selectedHackathonId,
+        );
+        if (reg?.registrationStatus !== "approved") return false;
+        const startOfDay = (d: Date | string) =>
+          new Date(d).setHours(0, 0, 0, 0);
+        const today = startOfDay(new Date());
+        const started = startOfDay(reg.hackathon.startDate) <= today;
+        const ended =
+          !!reg.hackathon.endDate && today > startOfDay(reg.hackathon.endDate);
+        return started && !ended ? 30_000 : false;
+      },
+    });
+
+  // The project a submit would overwrite — the team's entry, or the solo one
+  // this participant filed. Reading it from the team alone leaves every solo
+  // hacker staring at a blank form over a live submission.
+  const mySubmission = trpc.team.mySubmission.useQuery(
+    { hackathonId: selectedHackathonId },
+    { enabled: !!session && !!selectedHackathonId },
+  );
+
+  // The event's own track and challenge lists. Offering free text instead
+  // would be worse than offering nothing: judge assignment matches these
+  // strings exactly, so a typo silently removes a project from a judge's pool.
+  const { data: hackathonDetail } = trpc.hackathon.getById.useQuery(
+    { id: selectedHackathonId },
+    { enabled: !!session && !!selectedHackathonId },
+  );
+
+  // The window the submit mutation gates on. The page never queried it, so the
+  // refusal only ever arrived after the form was filled in.
+  const submissionWindow = trpc.team.submissionWindow.useQuery(
+    { hackathonId: selectedHackathonId },
+    { enabled: !!session && !!selectedHackathonId },
+  );
+
+  const availableTracks = hackathonDetail?.tracks ?? [];
+  const availableChallenges = hackathonDetail?.challenges ?? [];
+
+  const toggle = (
+    value: string,
+    current: string[],
+    set: (next: string[]) => void,
+  ) =>
+    set(
+      current.includes(value)
+        ? current.filter((v) => v !== value)
+        : [...current, value],
+    );
+
+  // We get the specific registration / team context based on selected hackathon
+  const currentReg = myRegs?.find((r) => r.hackathonId === selectedHackathonId);
+  // Same gate as TeamsTab: forming a team needs acceptance, and the server
+  // refuses anyone else, so the controls are not offered until then.
+  const admitted =
+    currentReg?.registrationStatus === "approved" ||
+    currentReg?.registrationStatus === "checked_in";
+  // A withdrawn project stays as a draft row, so the row alone is not a
+  // submission.
+  const hasSubmitted =
+    (!!mySubmission.data && mySubmission.data.status !== "draft") ||
+    currentReg?.hasSubmittedProject ||
+    projectSubmitted;
+  // submitProject and withdrawProject refuse everyone but the captain, so
+  // teammates see the entry but cannot change it.
+  const readOnly =
+    !!currentReg?.team && currentReg.team.captainId !== session?.user?.id;
+  // The team list already carries the captain; it is read only to name them.
+  const teamRoster = trpc.team.list.useQuery(
+    { hackathonId: selectedHackathonId },
+    { enabled: readOnly && !!selectedHackathonId },
+  );
+  const captainName = teamRoster.data?.find(
+    (t) => t.id === currentReg?.team?.id,
+  )?.captain?.name;
+
+  // Mutations
+  const submitProject = trpc.team.submitProject.useMutation({
+    onSuccess: () => {
+      utils.hackathon.myRegistrations.invalidate();
+      utils.team.mySubmission.invalidate();
+      setError("");
+      setSuccessMessage(
+        "Project submitted. Judging is in person: your team presents to judges for each challenge, and the event's Judging tab shows where and when.",
+      );
+      setProjectSubmitted(true);
+    },
+    onError: (err) => setError(err.message),
+  });
+
+  // Leaving or disbanding a team refuses while a submission stands and tells
+  // the user to withdraw it first, so there has to be a way to do that.
+  const withdrawProject = trpc.team.withdrawProject.useMutation({
+    onSuccess: () => {
+      utils.hackathon.myRegistrations.invalidate();
+      utils.team.mySubmission.invalidate();
+      setError("");
+      setProjectSubmitted(false);
+      setConfirmWithdraw(false);
+      setSuccessMessage(
+        "Submission withdrawn. It is back to draft and no longer entered for judging.",
+      );
+    },
+    onError: (err) => {
+      setConfirmWithdraw(false);
+      setError(err.message);
+    },
+  });
+
+  // Still submittable: until 12 hours after the event ends. The default pick
+  // and the dropdown use the same rule; defaulting to myRegs[0] could select
+  // a past edition the dropdown did not even list.
+  const isActiveReg = (reg: NonNullable<typeof myRegs>[number]) =>
+    reg.hackathon.endDate
+      ? new Date(
+          new Date(reg.hackathon.endDate).getTime() + 12 * 60 * 60 * 1000,
+        // oxlint-disable-next-line react/purity
+        ) >= new Date()
+      : true;
+
+  if (!selectedHackathonId && myRegs && myRegs.length > 0) {
+    const firstReg = myRegs.find(isActiveReg);
+    if (firstReg) {
+      setSelectedHackathonId(firstReg.hackathonId);
+    }
+  }
+
+  // Fill the form from the existing submission, once per selected event.
+  // Clearing when there is none matters as much as filling: the form used to
+  // keep the previous event's answers after switching, so a submit could file
+  // one hackathon's project against another.
+  if (
+    selectedHackathonId &&
+    !mySubmission.isPending &&
+    prefilledFor !== selectedHackathonId
+  ) {
+    const p = mySubmission.data;
+    setProjectName(p?.name ?? "");
+    setProjectDesc(p?.description ?? "");
+    setGithubUrl(p?.githubUrl ?? "");
+    setVideoUrl(p?.videoUrl ?? "");
+    setDemoUrl(p?.demoUrl ?? "");
+    setTracks(p?.tracks ?? []);
+    setChallenges(p?.challenges ?? []);
+    setIsCreateX(p?.isCreateX ?? false);
+    setPrefilledFor(selectedHackathonId);
+  }
+
+  if (status === "loading" || loadingRegs) {
+    return <LoadingScreen message="Loading…" />;
+  }
+
+  if (!session) {
+    router.push(loginHref());
+    return null;
+  }
+
+  const activeRegs = myRegs?.filter(isActiveReg) || [];
+  // One live event is already named by the kicker; the picker earns its place
+  // only when there is something to choose.
+  const showEventPicker =
+    activeRegs.length > 1 ||
+    !activeRegs.some((r) => r.hackathonId === selectedHackathonId);
+
+  // A teammate reads what was filed; a row of dimmed buttons says it badly.
+  const filedChips = (picked: string[]) =>
+    picked.length > 0 ? (
+      picked.map((v) => (
+        <span key={v} className={chip(true)}>
+          {v}
+        </span>
+      ))
+    ) : (
+      <p className="text-[13px] text-[var(--text-muted)]">None picked</p>
+    );
+
+  return (
+    <main className={page}>
+      <Link
+        href="/dashboard"
+        className="inline-flex min-h-11 items-center text-[13px] text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors"
+      >
+        ← Dashboard
+      </Link>
+
+      <header className="mt-2">
+        {currentReg && <p className={kicker}>{currentReg.hackathon.name}</p>}
+        <h1 className={`mt-1 ${pageTitle}`}>Submit your project</h1>
+      </header>
+
+      {!myRegs || myRegs.length === 0 ? (
+        <section className="mt-10 border-t border-[var(--border-subtle)] pt-6">
+          <p className={body}>
+            Once you register for a hackathon, you can submit your project
+            here.
+          </p>
+          <Link href="/hackathons" className={`mt-4 ${btnPrimary}`}>
+            Browse hackathons
+          </Link>
+        </section>
+      ) : (
+        <div className="mt-10 grid grid-cols-1 gap-10 border-t border-[var(--border-subtle)] pt-8 lg:grid-cols-12">
+          {/* Context and team */}
+          <aside className="space-y-8 lg:col-span-4">
+            {showEventPicker && (
+              <div>
+                <label htmlFor="event-context" className={fieldLabel}>
+                  Hackathon
+                </label>
+                <select
+                  id="event-context"
+                  className={`${input} min-h-11`}
+                  value={selectedHackathonId}
+                  onChange={(e) => {
+                    setSelectedHackathonId(e.target.value);
+                    setError("");
+                    setSuccessMessage("");
+                    setProjectSubmitted(false);
+                    setConfirmWithdraw(false);
+                  }}
+                >
+                  <option value="" disabled>
+                    Select a hackathon…
+                  </option>
+                  {activeRegs.map((r) => (
+                    <option key={r.hackathonId} value={r.hackathonId}>
+                      {r.hackathon.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            )}
+
+            <div
+              className={
+                showEventPicker
+                  ? "border-t border-[var(--border-subtle)] pt-6"
+                  : undefined
+              }
+            >
+              <h2 className="text-[13px] font-medium text-[var(--text-muted)]">
+                {currentReg?.team ? "Your team" : "Team"}
+              </h2>
+              {currentReg?.team ? (
+                <>
+                  <p className={`mt-1 ${itemTitle}`}>{currentReg.team.name}</p>
+                  <p className="mt-1 text-[13px] text-[var(--text-muted)]">
+                    {currentReg.team.currentMembers} of{" "}
+                    {currentReg.team.maxMembers} members ·{" "}
+                    {readOnly
+                      ? `${captainName ?? "your captain"} submits for the team`
+                      : "you're the captain"}
+                  </p>
+                </>
+              ) : (
+                <p className={`mt-1 ${body}`}>
+                  {admitted
+                    ? "You're submitting solo. Create a team or join one from the event's Teams tab."
+                    : "You can create or join a team once you have been accepted."}
+                </p>
+              )}
+              {currentReg && (currentReg.team || admitted) && (
+                <Link
+                  href={`${hackathonPath}?tab=TEAMS`}
+                  className={`mt-3 ${textLink}`}
+                >
+                  {currentReg.team ? "Manage team" : "Create or join a team"}
+                </Link>
+              )}
+            </div>
+          </aside>
+
+          {/* Project submission */}
+          <section className="border-t border-[var(--border-subtle)] pt-8 lg:col-span-8 lg:border-t-0 lg:pt-0">
+            <div className="mb-8 space-y-4 empty:hidden">
+              {/* Once the project is in judging, the team's times and rooms
+                  live on the hackathon's Judging tab. */}
+              {mySubmission.data?.inJudging && (
+                <p className="border-l-2 border-accent pl-3 text-[15px] text-[var(--text-primary)]">
+                  Your project is in judging. Your team presents to judges for
+                  each challenge it entered, and the{" "}
+                  <Link
+                    href={`${hackathonPath}?tab=JUDGING`}
+                    className="font-semibold underline decoration-accent decoration-2 underline-offset-[5px]"
+                  >
+                    Judging tab
+                  </Link>{" "}
+                  shows where and when once organisers publish the schedule.
+                </p>
+              )}
+
+              {/* Admission, said before the form is filled in. Acceptance
+                  lets you form a team; submitting needs the badge scan,
+                  because judging happens in person. */}
+              {currentReg && currentReg.registrationStatus !== "checked_in" && (
+                <p className="border-l-2 border-[var(--warning)] pl-3 text-[15px] text-[var(--text-primary)]">
+                  {currentReg.registrationStatus === "approved"
+                    ? "You're accepted. Check in at the event before submitting: find a volunteer and have your badge scanned."
+                    : currentReg.registrationStatus === "pending"
+                      ? "Your registration is still being reviewed. You can form a team once you have been accepted."
+                      : currentReg.registrationStatus === "waitlisted"
+                        ? "You're on the waitlist. If a seat opens, you'll be accepted and can submit."
+                        : "Your registration wasn't accepted, so you can't submit to this hackathon."}
+                </p>
+              )}
+
+              {/* The window this form is gated on, said before it is filled
+                  in. Without it an attendee wrote a full description and
+                  learned it was refused only on submit. */}
+              {submissionWindow.data && (
+                <p
+                  className={`border-l-2 pl-3 text-[15px] text-[var(--text-primary)] ${
+                    submissionWindow.data.isOpen
+                      ? "border-accent"
+                      : "border-[var(--warning)]"
+                  }`}
+                >
+                  {submissionWindow.data.cancelled ? (
+                    "This hackathon has been cancelled, so nothing can be submitted."
+                  ) : submissionWindow.data.notYetOpen ? (
+                    <>
+                      Submission opens{" "}
+                      <Moment at={submissionWindow.data.opensAt} />. The form is
+                      here early so you can see what it asks for.
+                    </>
+                  ) : !submissionWindow.data.isOpen ? (
+                    <>
+                      Submission closed{" "}
+                      <Moment at={submissionWindow.data.closesAt} />.
+                    </>
+                  ) : !hasSubmitted ? (
+                    <>
+                      Submissions close{" "}
+                      <Moment at={submissionWindow.data.closesAt} />.
+                    </>
+                  ) : submissionWindow.data.canEditExisting ? (
+                    <>
+                      {readOnly
+                        ? "Your team can edit its entry"
+                        : "You can edit your entry"}{" "}
+                      until <Moment at={submissionWindow.data.editsCloseAt} />.
+                    </>
+                  ) : (
+                    <>
+                      Edits closed{" "}
+                      <Moment at={submissionWindow.data.editsCloseAt} />, so
+                      your entry stands as filed.
+                    </>
+                  )}
+                </p>
+              )}
+            </div>
+
+            <form
+              onSubmit={(e) => {
+                e.preventDefault();
+                if (readOnly) return;
+                submitProject.mutate({
+                  hackathonId: selectedHackathonId,
+                  teamId: currentReg?.team?.id,
+                  name: projectName,
+                  description: projectDesc,
+                  githubUrl,
+                  demoUrl,
+                  videoUrl,
+                  tracks,
+                  challenges,
+                  isCreateX,
+                });
+              }}
+              className="space-y-10"
+            >
+              {/* Name & Desc */}
+              <div className="space-y-5">
+                <div>
+                  <label htmlFor="project-name" className={fieldLabel}>
+                    Project name{" "}
+                    <span className="font-normal text-[var(--text-muted)]">
+                      (required)
+                    </span>
+                  </label>
+                  <input
+                    id="project-name"
+                    type="text"
+                    required
+                    readOnly={readOnly}
+                    value={projectName}
+                    onChange={(e) => setProjectName(e.target.value)}
+                    placeholder="e.g. Transit delay predictor"
+                    className={`${input} ${readOnlyField}`}
+                  />
+                </div>
+                <div>
+                  <label htmlFor="project-description" className={fieldLabel}>
+                    Description{" "}
+                    <span className="font-normal text-[var(--text-muted)]">
+                      (required)
+                    </span>
+                  </label>
+                  <textarea
+                    id="project-description"
+                    required
+                    readOnly={readOnly}
+                    value={projectDesc}
+                    onChange={(e) => setProjectDesc(e.target.value)}
+                    placeholder="Explain the problem you solved and how you built it…"
+                    rows={5}
+                    className={`resize-none ${input} ${readOnlyField} [field-sizing:content] min-h-[8.5rem]`}
+                  />
+                </div>
+              </div>
+
+              {/* Tracks, challenges and CreateX — what judge assignment
+                  routes on. Rendered only when the organisers configured
+                  them, so an event without tracks shows nothing rather
+                  than an empty box. */}
+              {(availableTracks.length > 0 ||
+                availableChallenges.length > 0) && (
+                <div className="border-t border-[var(--border-subtle)] pt-6">
+                  <h3 className={itemTitle}>Tracks and challenges</h3>
+                  {!readOnly && (
+                    <p className={`mt-1 ${body}`}>
+                      Your project presents to judges for each challenge you
+                      pick, so pick everything you are competing for.
+                    </p>
+                  )}
+
+                  {availableTracks.length > 0 && (
+                    <div className="mt-5">
+                      <p className={fieldLabel}>Tracks</p>
+                      <div className="flex flex-wrap gap-2">
+                        {readOnly
+                          ? filedChips(tracks)
+                          : availableTracks.map((track) => (
+                              <button
+                                key={track}
+                                type="button"
+                                onClick={() => toggle(track, tracks, setTracks)}
+                                aria-pressed={tracks.includes(track)}
+                                className={chip(tracks.includes(track))}
+                              >
+                                {track}
+                              </button>
+                            ))}
+                      </div>
+                    </div>
+                  )}
+
+                  {availableChallenges.length > 0 && (
+                    <div className="mt-5">
+                      <p className={fieldLabel}>Sponsor challenges</p>
+                      <div className="flex flex-wrap gap-2">
+                        {readOnly
+                          ? filedChips(challenges)
+                          : availableChallenges.map((challenge) => (
+                              <button
+                                key={challenge}
+                                type="button"
+                                onClick={() =>
+                                  toggle(challenge, challenges, setChallenges)
+                                }
+                                aria-pressed={challenges.includes(challenge)}
+                                className={chip(challenges.includes(challenge))}
+                              >
+                                {challenge}
+                              </button>
+                            ))}
+                      </div>
+                    </div>
+                  )}
+
+                  {readOnly ? (
+                    isCreateX && (
+                      <p className={`mt-6 ${body}`}>
+                        Entered for the CreateX entrepreneurship prize.
+                      </p>
+                    )
+                  ) : (
+                    <label
+                      htmlFor="is-createx"
+                      className="mt-6 flex min-h-11 cursor-pointer items-start gap-3 py-2.5 text-[15px] text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors"
+                    >
+                      <input
+                        id="is-createx"
+                        type="checkbox"
+                        checked={isCreateX}
+                        onChange={(e) => setIsCreateX(e.target.checked)}
+                        className="mt-0.5 h-5 w-5 min-h-0! min-w-0! shrink-0 cursor-pointer accent-[var(--accent)]"
+                      />
+                      We are competing for the CreateX entrepreneurship prize
+                    </label>
+                  )}
+                </div>
+              )}
+
+              {/* Links */}
+              <div className="border-t border-[var(--border-subtle)] pt-6">
+                <h3 className={itemTitle}>Links</h3>
+
+                <div className="mt-4 space-y-5">
+                  <div>
+                    <label htmlFor="github-url" className={fieldLabel}>
+                      GitHub repository
+                    </label>
+                    <input
+                      id="github-url"
+                      type="url"
+                      readOnly={readOnly}
+                      value={githubUrl}
+                      onChange={(e) => setGithubUrl(e.target.value)}
+                      placeholder="https://github.com/…"
+                      className={`${input} ${readOnlyField}`}
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="video-url" className={fieldLabel}>
+                      Demo video
+                    </label>
+                    <input
+                      id="video-url"
+                      type="url"
+                      readOnly={readOnly}
+                      value={videoUrl}
+                      onChange={(e) => setVideoUrl(e.target.value)}
+                      placeholder="https://youtube.com/…"
+                      className={`${input} ${readOnlyField}`}
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="demo-url" className={fieldLabel}>
+                      Live demo URL
+                    </label>
+                    <input
+                      id="demo-url"
+                      type="url"
+                      readOnly={readOnly}
+                      value={demoUrl}
+                      onChange={(e) => setDemoUrl(e.target.value)}
+                      placeholder="https://…"
+                      className={`${input} ${readOnlyField}`}
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <div className="space-y-4 border-t border-[var(--border-subtle)] pt-6 empty:hidden">
+                {/* Feedback lands beside the button that was tapped, not in
+                    the notices above the form. */}
+                {error && (
+                  <p
+                    role="alert"
+                    className="border-l-2 border-[var(--danger)] pl-3 text-[15px] text-[var(--danger)]"
+                  >
+                    {error}
+                  </p>
+                )}
+
+                {successMessage && (
+                  <div
+                    role="status"
+                    className="space-y-2 border-l-2 border-[var(--success)] pl-3"
+                  >
+                    <p className="text-[15px] font-semibold text-[var(--text-primary)]">
+                      {successMessage}
+                    </p>
+                    {/* A withdrawn project is out of judging, so only a
+                        submit points there. */}
+                    {projectSubmitted ? (
+                      <Link
+                        href={`${hackathonPath}?tab=JUDGING`}
+                        className={textLink}
+                      >
+                        Go to Judging
+                      </Link>
+                    ) : (
+                      <Link href="/dashboard" className={textLink}>
+                        Back to dashboard
+                      </Link>
+                    )}
+                  </div>
+                )}
+
+                {hasSubmitted && !successMessage && (
+                  <p className="text-[13px] text-[var(--text-muted)]">
+                    {readOnly
+                      ? "Your team has submitted."
+                      : "You've already submitted. Saving replaces your current entry."}
+                  </p>
+                )}
+
+                {!readOnly && (
+                  <button
+                    type="submit"
+                    disabled={submitProject.isPending}
+                    className={`${btnPrimary} w-full sm:w-auto`}
+                  >
+                    {submitProject.isPending
+                      ? "Submitting…"
+                      : hasSubmitted
+                        ? "Save changes"
+                        : "Submit project"}
+                  </button>
+                )}
+
+                {hasSubmitted && !readOnly && !confirmWithdraw && (
+                  <div className="border-t border-[var(--border-subtle)] pt-4">
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setError("");
+                        setSuccessMessage("");
+                        setConfirmWithdraw(true);
+                      }}
+                      className={btnDanger}
+                    >
+                      Withdraw submission
+                    </button>
+                  </div>
+                )}
+
+                {confirmWithdraw && (
+                  <div className="flex w-full flex-col gap-3 border-t border-[var(--border-subtle)] pt-4">
+                    <p className={body}>
+                      Withdraw your submission? It goes back to draft and is no
+                      longer entered for judging.
+                    </p>
+                    <div className="flex flex-wrap gap-3">
+                      <button
+                        type="button"
+                        onClick={() =>
+                          withdrawProject.mutate({
+                            hackathonId: selectedHackathonId,
+                          })
+                        }
+                        disabled={withdrawProject.isPending}
+                        className={btnDanger}
+                      >
+                        {withdrawProject.isPending
+                          ? "Withdrawing…"
+                          : "Withdraw"}
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => setConfirmWithdraw(false)}
+                        disabled={withdrawProject.isPending}
+                        className={btnSecondary}
+                      >
+                        Cancel
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </form>
+          </section>
+        </div>
+      )}
+    </main>
+  );
+}
+
+export default function SubmitPortalPage() {
+  return (
+    <Suspense fallback={<LoadingScreen message="Loading…" />}>
+      <SubmitPortalContent />
+    </Suspense>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/submit/page.tsx b/sites/mainweb/app/(portal)/submit/page.tsx
index c73a669b..8f14d3b1 100644
--- a/sites/mainweb/app/(portal)/submit/page.tsx
+++ b/sites/mainweb/app/(portal)/submit/page.tsx
@@ -1,764 +1,53 @@
-"use client";
-
-import { useSession } from "next-auth/react";
-import { loginHref } from "@/lib/safe-callback";
-import { trpc } from "@/lib/trpc";
-import { useRouter, useSearchParams } from "next/navigation";
-import { Suspense, useState } from "react";
-import { LoadingScreen } from "@/components/portal/LoadingScreen";
-import Link from "next/link";
-import {
-  body,
-  btnDanger,
-  btnPrimary,
-  btnSecondary,
-  chip,
-  fieldLabel,
-  input,
-  itemTitle,
-  kicker,
-  page,
-  pageTitle,
-  textLink,
-} from "@/components/portal/ui";
-
-/**
- * Deadlines are rendered in the event's own time zone, not the viewer's. Half
- * the field is remote, and a submission deadline shown in the wrong zone is the
- * one rendering mistake that costs someone their entry.
- */
-const formatMoment = (moment: Date) =>
-  moment.toLocaleString("en-US", {
-    weekday: "short",
-    month: "short",
-    day: "numeric",
-    hour: "numeric",
-    minute: "2-digit",
-    timeZoneName: "short",
-    timeZone: "America/New_York",
-  });
-
-/** A deadline that never breaks across lines: "EST." alone on a line is unreadable. */
-const Moment = ({ at }: { at: Date }) => (
-  <span className="whitespace-nowrap font-semibold">{formatMoment(at)}</span>
-);
-
-/** A teammate's view of the form: filed values read as values, not empty fields. */
-const readOnlyField =
-  "read-only:bg-transparent read-only:border-[var(--border-subtle)]";
-
-function SubmitPortalContent() {
-  const { data: session, status } = useSession();
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const urlHackathonId = searchParams.get("id");
-
-  const utils = trpc.useUtils();
-
-  // Context & State
-  const [selectedHackathonId, setSelectedHackathonId] = useState<string>(
-    urlHackathonId || "",
-  );
-  // The id can come straight from the URL or the picker, so it is encoded
-  // wherever it becomes part of a link path.
-  const hackathonPath = `/hackathons/${encodeURIComponent(selectedHackathonId)}`;
-  const [confirmWithdraw, setConfirmWithdraw] = useState(false);
-
-  const [projectName, setProjectName] = useState("");
-  const [projectDesc, setProjectDesc] = useState("");
-  const [githubUrl, setGithubUrl] = useState("");
-  const [videoUrl, setVideoUrl] = useState("");
-  const [demoUrl, setDemoUrl] = useState("");
-  // Judge routing filters on exactly these three. A submission without them
-  // reaches no track judge and no sponsor judge at all.
-  const [tracks, setTracks] = useState<string[]>([]);
-  const [challenges, setChallenges] = useState<string[]>([]);
-  const [isCreateX, setIsCreateX] = useState(false);
-
-  const [error, setError] = useState("");
-  const [successMessage, setSuccessMessage] = useState("");
-  const [projectSubmitted, setProjectSubmitted] = useState(false);
-  // Which hackathon the form below has already been filled from, so a
-  // background refetch cannot overwrite what someone is part-way through
-  // typing.
-  const [prefilledFor, setPrefilledFor] = useState("");
-
-  // Queries
-  const { data: myRegs, isLoading: loadingRegs } =
-    trpc.hackathon.myRegistrations.useQuery(undefined, {
-      enabled: !!session,
-      // An accepted attendee gets checked in at the venue, which is what
-      // unlocks the form. Poll for it only on the event's days, so the page
-      // updates without a reload and idle tabs stay quiet. Day granularity on
-      // the viewer's clock, as the event page does: a badge scanned before
-      // doors open still counts.
-      refetchInterval: (query) => {
-        const reg = query.state.data?.find(
-          (r) => r.hackathonId === selectedHackathonId,
-        );
-        if (reg?.registrationStatus !== "approved") return false;
-        const startOfDay = (d: Date | string) =>
-          new Date(d).setHours(0, 0, 0, 0);
-        const today = startOfDay(new Date());
-        const started = startOfDay(reg.hackathon.startDate) <= today;
-        const ended =
-          !!reg.hackathon.endDate && today > startOfDay(reg.hackathon.endDate);
-        return started && !ended ? 30_000 : false;
-      },
-    });
-
-  // The project a submit would overwrite — the team's entry, or the solo one
-  // this participant filed. Reading it from the team alone leaves every solo
-  // hacker staring at a blank form over a live submission.
-  const mySubmission = trpc.team.mySubmission.useQuery(
-    { hackathonId: selectedHackathonId },
-    { enabled: !!session && !!selectedHackathonId },
-  );
-
-  // The event's own track and challenge lists. Offering free text instead
-  // would be worse than offering nothing: judge assignment matches these
-  // strings exactly, so a typo silently removes a project from a judge's pool.
-  const { data: hackathonDetail } = trpc.hackathon.getById.useQuery(
-    { id: selectedHackathonId },
-    { enabled: !!session && !!selectedHackathonId },
-  );
-
-  // The window the submit mutation gates on. The page never queried it, so the
-  // refusal only ever arrived after the form was filled in.
-  const submissionWindow = trpc.team.submissionWindow.useQuery(
-    { hackathonId: selectedHackathonId },
-    { enabled: !!session && !!selectedHackathonId },
-  );
-
-  const availableTracks = hackathonDetail?.tracks ?? [];
-  const availableChallenges = hackathonDetail?.challenges ?? [];
-
-  const toggle = (
-    value: string,
-    current: string[],
-    set: (next: string[]) => void,
-  ) =>
-    set(
-      current.includes(value)
-        ? current.filter((v) => v !== value)
-        : [...current, value],
-    );
-
-  // We get the specific registration / team context based on selected hackathon
-  const currentReg = myRegs?.find((r) => r.hackathonId === selectedHackathonId);
-  // Same gate as TeamsTab: forming a team needs acceptance, and the server
-  // refuses anyone else, so the controls are not offered until then.
-  const admitted =
-    currentReg?.registrationStatus === "approved" ||
-    currentReg?.registrationStatus === "checked_in";
-  // A withdrawn project stays as a draft row, so the row alone is not a
-  // submission.
-  const hasSubmitted =
-    (!!mySubmission.data && mySubmission.data.status !== "draft") ||
-    currentReg?.hasSubmittedProject ||
-    projectSubmitted;
-  // submitProject and withdrawProject refuse everyone but the captain, so
-  // teammates see the entry but cannot change it.
-  const readOnly =
-    !!currentReg?.team && currentReg.team.captainId !== session?.user?.id;
-  // The team list already carries the captain; it is read only to name them.
-  const teamRoster = trpc.team.list.useQuery(
-    { hackathonId: selectedHackathonId },
-    { enabled: readOnly && !!selectedHackathonId },
-  );
-  const captainName = teamRoster.data?.find(
-    (t) => t.id === currentReg?.team?.id,
-  )?.captain?.name;
-
-  // Mutations
-  const submitProject = trpc.team.submitProject.useMutation({
-    onSuccess: () => {
-      utils.hackathon.myRegistrations.invalidate();
-      utils.team.mySubmission.invalidate();
-      setError("");
-      setSuccessMessage(
-        "Project submitted. Judging is in person: your team presents to judges for each challenge, and the event's Judging tab shows where and when.",
-      );
-      setProjectSubmitted(true);
-    },
-    onError: (err) => setError(err.message),
-  });
-
-  // Leaving or disbanding a team refuses while a submission stands and tells
-  // the user to withdraw it first, so there has to be a way to do that.
-  const withdrawProject = trpc.team.withdrawProject.useMutation({
-    onSuccess: () => {
-      utils.hackathon.myRegistrations.invalidate();
-      utils.team.mySubmission.invalidate();
-      setError("");
-      setProjectSubmitted(false);
-      setConfirmWithdraw(false);
-      setSuccessMessage(
-        "Submission withdrawn. It is back to draft and no longer entered for judging.",
-      );
-    },
-    onError: (err) => {
-      setConfirmWithdraw(false);
-      setError(err.message);
-    },
-  });
-
-  // Still submittable: until 12 hours after the event ends. The default pick
-  // and the dropdown use the same rule; defaulting to myRegs[0] could select
-  // a past edition the dropdown did not even list.
-  const isActiveReg = (reg: NonNullable<typeof myRegs>[number]) =>
-    reg.hackathon.endDate
-      ? new Date(
-          new Date(reg.hackathon.endDate).getTime() + 12 * 60 * 60 * 1000,
-        // oxlint-disable-next-line react/purity
-        ) >= new Date()
-      : true;
-
-  if (!selectedHackathonId && myRegs && myRegs.length > 0) {
-    const firstReg = myRegs.find(isActiveReg);
-    if (firstReg) {
-      setSelectedHackathonId(firstReg.hackathonId);
-    }
-  }
-
-  // Fill the form from the existing submission, once per selected event.
-  // Clearing when there is none matters as much as filling: the form used to
-  // keep the previous event's answers after switching, so a submit could file
-  // one hackathon's project against another.
-  if (
-    selectedHackathonId &&
-    !mySubmission.isPending &&
-    prefilledFor !== selectedHackathonId
-  ) {
-    const p = mySubmission.data;
-    setProjectName(p?.name ?? "");
-    setProjectDesc(p?.description ?? "");
-    setGithubUrl(p?.githubUrl ?? "");
-    setVideoUrl(p?.videoUrl ?? "");
-    setDemoUrl(p?.demoUrl ?? "");
-    setTracks(p?.tracks ?? []);
-    setChallenges(p?.challenges ?? []);
-    setIsCreateX(p?.isCreateX ?? false);
-    setPrefilledFor(selectedHackathonId);
-  }
-
-  if (status === "loading" || loadingRegs) {
-    return <LoadingScreen message="Loading…" />;
-  }
-
-  if (!session) {
-    router.push(loginHref());
-    return null;
-  }
-
-  const activeRegs = myRegs?.filter(isActiveReg) || [];
-  // One live event is already named by the kicker; the picker earns its place
-  // only when there is something to choose.
-  const showEventPicker =
-    activeRegs.length > 1 ||
-    !activeRegs.some((r) => r.hackathonId === selectedHackathonId);
-
-  // A teammate reads what was filed; a row of dimmed buttons says it badly.
-  const filedChips = (picked: string[]) =>
-    picked.length > 0 ? (
-      picked.map((v) => (
-        <span key={v} className={chip(true)}>
-          {v}
-        </span>
-      ))
-    ) : (
-      <p className="text-[13px] text-[var(--text-muted)]">None picked</p>
-    );
-
-  return (
-    <main className={page}>
-      <Link
-        href="/dashboard"
-        className="inline-flex min-h-11 items-center text-[13px] text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors"
-      >
-        ← Dashboard
-      </Link>
-
-      <header className="mt-2">
-        {currentReg && <p className={kicker}>{currentReg.hackathon.name}</p>}
-        <h1 className={`mt-1 ${pageTitle}`}>Submit your project</h1>
-      </header>
-
-      {!myRegs || myRegs.length === 0 ? (
-        <section className="mt-10 border-t border-[var(--border-subtle)] pt-6">
-          <p className={body}>
-            Once you register for a hackathon, you can submit your project
-            here.
-          </p>
-          <Link href="/hackathons" className={`mt-4 ${btnPrimary}`}>
-            Browse hackathons
-          </Link>
-        </section>
-      ) : (
-        <div className="mt-10 grid grid-cols-1 gap-10 border-t border-[var(--border-subtle)] pt-8 lg:grid-cols-12">
-          {/* Context and team */}
-          <aside className="space-y-8 lg:col-span-4">
-            {showEventPicker && (
-              <div>
-                <label htmlFor="event-context" className={fieldLabel}>
-                  Hackathon
-                </label>
-                <select
-                  id="event-context"
-                  className={`${input} min-h-11`}
-                  value={selectedHackathonId}
-                  onChange={(e) => {
-                    setSelectedHackathonId(e.target.value);
-                    setError("");
-                    setSuccessMessage("");
-                    setProjectSubmitted(false);
-                    setConfirmWithdraw(false);
-                  }}
-                >
-                  <option value="" disabled>
-                    Select a hackathon…
-                  </option>
-                  {activeRegs.map((r) => (
-                    <option key={r.hackathonId} value={r.hackathonId}>
-                      {r.hackathon.name}
-                    </option>
-                  ))}
-                </select>
-              </div>
-            )}
-
-            <div
-              className={
-                showEventPicker
-                  ? "border-t border-[var(--border-subtle)] pt-6"
-                  : undefined
-              }
-            >
-              <h2 className="text-[13px] font-medium text-[var(--text-muted)]">
-                {currentReg?.team ? "Your team" : "Team"}
-              </h2>
-              {currentReg?.team ? (
-                <>
-                  <p className={`mt-1 ${itemTitle}`}>{currentReg.team.name}</p>
-                  <p className="mt-1 text-[13px] text-[var(--text-muted)]">
-                    {currentReg.team.currentMembers} of{" "}
-                    {currentReg.team.maxMembers} members ·{" "}
-                    {readOnly
-                      ? `${captainName ?? "your captain"} submits for the team`
-                      : "you're the captain"}
-                  </p>
-                </>
-              ) : (
-                <p className={`mt-1 ${body}`}>
-                  {admitted
-                    ? "You're submitting solo. Create a team or join one from the event's Teams tab."
-                    : "You can create or join a team once you have been accepted."}
-                </p>
-              )}
-              {currentReg && (currentReg.team || admitted) && (
-                <Link
-                  href={`${hackathonPath}?tab=TEAMS`}
-                  className={`mt-3 ${textLink}`}
-                >
-                  {currentReg.team ? "Manage team" : "Create or join a team"}
-                </Link>
-              )}
-            </div>
-          </aside>
-
-          {/* Project submission */}
-          <section className="border-t border-[var(--border-subtle)] pt-8 lg:col-span-8 lg:border-t-0 lg:pt-0">
-            <div className="mb-8 space-y-4 empty:hidden">
-              {/* Once the project is in judging, the team's times and rooms
-                  live on the hackathon's Judging tab. */}
-              {mySubmission.data?.inJudging && (
-                <p className="border-l-2 border-accent pl-3 text-[15px] text-[var(--text-primary)]">
-                  Your project is in judging. Your team presents to judges for
-                  each challenge it entered, and the{" "}
-                  <Link
-                    href={`${hackathonPath}?tab=JUDGING`}
-                    className="font-semibold underline decoration-accent decoration-2 underline-offset-[5px]"
-                  >
-                    Judging tab
-                  </Link>{" "}
-                  shows where and when once organisers publish the schedule.
-                </p>
-              )}
-
-              {/* Admission, said before the form is filled in. Acceptance
-                  lets you form a team; submitting needs the badge scan,
-                  because judging happens in person. */}
-              {currentReg && currentReg.registrationStatus !== "checked_in" && (
-                <p className="border-l-2 border-[var(--warning)] pl-3 text-[15px] text-[var(--text-primary)]">
-                  {currentReg.registrationStatus === "approved"
-                    ? "You're accepted. Check in at the event before submitting: find a volunteer and have your badge scanned."
-                    : currentReg.registrationStatus === "pending"
-                      ? "Your registration is still being reviewed. You can form a team once you have been accepted."
-                      : currentReg.registrationStatus === "waitlisted"
-                        ? "You're on the waitlist. If a seat opens, you'll be accepted and can submit."
-                        : "Your registration wasn't accepted, so you can't submit to this hackathon."}
-                </p>
-              )}
-
-              {/* The window this form is gated on, said before it is filled
-                  in. Without it an attendee wrote a full description and
-                  learned it was refused only on submit. */}
-              {submissionWindow.data && (
-                <p
-                  className={`border-l-2 pl-3 text-[15px] text-[var(--text-primary)] ${
-                    submissionWindow.data.isOpen
-                      ? "border-accent"
-                      : "border-[var(--warning)]"
-                  }`}
-                >
-                  {submissionWindow.data.cancelled ? (
-                    "This hackathon has been cancelled, so nothing can be submitted."
-                  ) : submissionWindow.data.notYetOpen ? (
-                    <>
-                      Submission opens{" "}
-                      <Moment at={submissionWindow.data.opensAt} />. The form is
-                      here early so you can see what it asks for.
-                    </>
-                  ) : !submissionWindow.data.isOpen ? (
-                    <>
-                      Submission closed{" "}
-                      <Moment at={submissionWindow.data.closesAt} />.
-                    </>
-                  ) : !hasSubmitted ? (
-                    <>
-                      Submissions close{" "}
-                      <Moment at={submissionWindow.data.closesAt} />.
-                    </>
-                  ) : submissionWindow.data.canEditExisting ? (
-                    <>
-                      {readOnly
-                        ? "Your team can edit its entry"
-                        : "You can edit your entry"}{" "}
-                      until <Moment at={submissionWindow.data.editsCloseAt} />.
-                    </>
-                  ) : (
-                    <>
-                      Edits closed{" "}
-                      <Moment at={submissionWindow.data.editsCloseAt} />, so
-                      your entry stands as filed.
-                    </>
-                  )}
-                </p>
-              )}
-            </div>
-
-            <form
-              onSubmit={(e) => {
-                e.preventDefault();
-                if (readOnly) return;
-                submitProject.mutate({
-                  hackathonId: selectedHackathonId,
-                  teamId: currentReg?.team?.id,
-                  name: projectName,
-                  description: projectDesc,
-                  githubUrl,
-                  demoUrl,
-                  videoUrl,
-                  tracks,
-                  challenges,
-                  isCreateX,
-                });
-              }}
-              className="space-y-10"
-            >
-              {/* Name & Desc */}
-              <div className="space-y-5">
-                <div>
-                  <label htmlFor="project-name" className={fieldLabel}>
-                    Project name{" "}
-                    <span className="font-normal text-[var(--text-muted)]">
-                      (required)
-                    </span>
-                  </label>
-                  <input
-                    id="project-name"
-                    type="text"
-                    required
-                    readOnly={readOnly}
-                    value={projectName}
-                    onChange={(e) => setProjectName(e.target.value)}
-                    placeholder="e.g. Transit delay predictor"
-                    className={`${input} ${readOnlyField}`}
-                  />
-                </div>
-                <div>
-                  <label htmlFor="project-description" className={fieldLabel}>
-                    Description{" "}
-                    <span className="font-normal text-[var(--text-muted)]">
-                      (required)
-                    </span>
-                  </label>
-                  <textarea
-                    id="project-description"
-                    required
-                    readOnly={readOnly}
-                    value={projectDesc}
-                    onChange={(e) => setProjectDesc(e.target.value)}
-                    placeholder="Explain the problem you solved and how you built it…"
-                    rows={5}
-                    className={`resize-none ${input} ${readOnlyField} [field-sizing:content] min-h-[8.5rem]`}
-                  />
-                </div>
-              </div>
-
-              {/* Tracks, challenges and CreateX — what judge assignment
-                  routes on. Rendered only when the organisers configured
-                  them, so an event without tracks shows nothing rather
-                  than an empty box. */}
-              {(availableTracks.length > 0 ||
-                availableChallenges.length > 0) && (
-                <div className="border-t border-[var(--border-subtle)] pt-6">
-                  <h3 className={itemTitle}>Tracks and challenges</h3>
-                  {!readOnly && (
-                    <p className={`mt-1 ${body}`}>
-                      Your project presents to judges for each challenge you
-                      pick, so pick everything you are competing for.
-                    </p>
-                  )}
-
-                  {availableTracks.length > 0 && (
-                    <div className="mt-5">
-                      <p className={fieldLabel}>Tracks</p>
-                      <div className="flex flex-wrap gap-2">
-                        {readOnly
-                          ? filedChips(tracks)
-                          : availableTracks.map((track) => (
-                              <button
-                                key={track}
-                                type="button"
-                                onClick={() => toggle(track, tracks, setTracks)}
-                                aria-pressed={tracks.includes(track)}
-                                className={chip(tracks.includes(track))}
-                              >
-                                {track}
-                              </button>
-                            ))}
-                      </div>
-                    </div>
-                  )}
-
-                  {availableChallenges.length > 0 && (
-                    <div className="mt-5">
-                      <p className={fieldLabel}>Sponsor challenges</p>
-                      <div className="flex flex-wrap gap-2">
-                        {readOnly
-                          ? filedChips(challenges)
-                          : availableChallenges.map((challenge) => (
-                              <button
-                                key={challenge}
-                                type="button"
-                                onClick={() =>
-                                  toggle(challenge, challenges, setChallenges)
-                                }
-                                aria-pressed={challenges.includes(challenge)}
-                                className={chip(challenges.includes(challenge))}
-                              >
-                                {challenge}
-                              </button>
-                            ))}
-                      </div>
-                    </div>
-                  )}
-
-                  {readOnly ? (
-                    isCreateX && (
-                      <p className={`mt-6 ${body}`}>
-                        Entered for the CreateX entrepreneurship prize.
-                      </p>
-                    )
-                  ) : (
-                    <label
-                      htmlFor="is-createx"
-                      className="mt-6 flex min-h-11 cursor-pointer items-start gap-3 py-2.5 text-[15px] text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors"
-                    >
-                      <input
-                        id="is-createx"
-                        type="checkbox"
-                        checked={isCreateX}
-                        onChange={(e) => setIsCreateX(e.target.checked)}
-                        className="mt-0.5 h-5 w-5 min-h-0! min-w-0! shrink-0 cursor-pointer accent-[var(--accent)]"
-                      />
-                      We are competing for the CreateX entrepreneurship prize
-                    </label>
-                  )}
-                </div>
-              )}
-
-              {/* Links */}
-              <div className="border-t border-[var(--border-subtle)] pt-6">
-                <h3 className={itemTitle}>Links</h3>
-
-                <div className="mt-4 space-y-5">
-                  <div>
-                    <label htmlFor="github-url" className={fieldLabel}>
-                      GitHub repository
-                    </label>
-                    <input
-                      id="github-url"
-                      type="url"
-                      readOnly={readOnly}
-                      value={githubUrl}
-                      onChange={(e) => setGithubUrl(e.target.value)}
-                      placeholder="https://github.com/…"
-                      className={`${input} ${readOnlyField}`}
-                    />
-                  </div>
-                  <div>
-                    <label htmlFor="video-url" className={fieldLabel}>
-                      Demo video
-                    </label>
-                    <input
-                      id="video-url"
-                      type="url"
-                      readOnly={readOnly}
-                      value={videoUrl}
-                      onChange={(e) => setVideoUrl(e.target.value)}
-                      placeholder="https://youtube.com/…"
-                      className={`${input} ${readOnlyField}`}
-                    />
-                  </div>
-                  <div>
-                    <label htmlFor="demo-url" className={fieldLabel}>
-                      Live demo URL
-                    </label>
-                    <input
-                      id="demo-url"
-                      type="url"
-                      readOnly={readOnly}
-                      value={demoUrl}
-                      onChange={(e) => setDemoUrl(e.target.value)}
-                      placeholder="https://…"
-                      className={`${input} ${readOnlyField}`}
-                    />
-                  </div>
-                </div>
-              </div>
-
-              <div className="space-y-4 border-t border-[var(--border-subtle)] pt-6 empty:hidden">
-                {/* Feedback lands beside the button that was tapped, not in
-                    the notices above the form. */}
-                {error && (
-                  <p
-                    role="alert"
-                    className="border-l-2 border-[var(--danger)] pl-3 text-[15px] text-[var(--danger)]"
-                  >
-                    {error}
-                  </p>
-                )}
-
-                {successMessage && (
-                  <div
-                    role="status"
-                    className="space-y-2 border-l-2 border-[var(--success)] pl-3"
-                  >
-                    <p className="text-[15px] font-semibold text-[var(--text-primary)]">
-                      {successMessage}
-                    </p>
-                    {/* A withdrawn project is out of judging, so only a
-                        submit points there. */}
-                    {projectSubmitted ? (
-                      <Link
-                        href={`${hackathonPath}?tab=JUDGING`}
-                        className={textLink}
-                      >
-                        Go to Judging
-                      </Link>
-                    ) : (
-                      <Link href="/dashboard" className={textLink}>
-                        Back to dashboard
-                      </Link>
-                    )}
-                  </div>
-                )}
-
-                {hasSubmitted && !successMessage && (
-                  <p className="text-[13px] text-[var(--text-muted)]">
-                    {readOnly
-                      ? "Your team has submitted."
-                      : "You've already submitted. Saving replaces your current entry."}
-                  </p>
-                )}
-
-                {!readOnly && (
-                  <button
-                    type="submit"
-                    disabled={submitProject.isPending}
-                    className={`${btnPrimary} w-full sm:w-auto`}
-                  >
-                    {submitProject.isPending
-                      ? "Submitting…"
-                      : hasSubmitted
-                        ? "Save changes"
-                        : "Submit project"}
-                  </button>
-                )}
-
-                {hasSubmitted && !readOnly && !confirmWithdraw && (
-                  <div className="border-t border-[var(--border-subtle)] pt-4">
-                    <button
-                      type="button"
-                      onClick={() => {
-                        setError("");
-                        setSuccessMessage("");
-                        setConfirmWithdraw(true);
-                      }}
-                      className={btnDanger}
-                    >
-                      Withdraw submission
-                    </button>
-                  </div>
-                )}
-
-                {confirmWithdraw && (
-                  <div className="flex w-full flex-col gap-3 border-t border-[var(--border-subtle)] pt-4">
-                    <p className={body}>
-                      Withdraw your submission? It goes back to draft and is no
-                      longer entered for judging.
-                    </p>
-                    <div className="flex flex-wrap gap-3">
-                      <button
-                        type="button"
-                        onClick={() =>
-                          withdrawProject.mutate({
-                            hackathonId: selectedHackathonId,
-                          })
-                        }
-                        disabled={withdrawProject.isPending}
-                        className={btnDanger}
-                      >
-                        {withdrawProject.isPending
-                          ? "Withdrawing…"
-                          : "Withdraw"}
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => setConfirmWithdraw(false)}
-                        disabled={withdrawProject.isPending}
-                        className={btnSecondary}
-                      >
-                        Cancel
-                      </button>
-                    </div>
-                  </div>
-                )}
-              </div>
-            </form>
-          </section>
-        </div>
-      )}
-    </main>
-  );
-}
-
-export default function SubmitPortalPage() {
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import SubmitPage from "./SubmitPage";
+
+const GRACE_MS = 12 * 60 * 60 * 1000;
+
+export default async function Page({
+  searchParams,
+}: {
+  searchParams: Promise<{ id?: string | string[] }>;
+}) {
+  const { id: rawId } = await searchParams;
+  const urlId = typeof rawId === "string" ? rawId : "";
   return (
-    <Suspense fallback={<LoadingScreen message="Loading…" />}>
-      <SubmitPortalContent />
-    </Suspense>
+    <PrefetchedPage
+      reads={async (c) => {
+        const myRegs = c.hackathon.myRegistrations();
+        // The client picks the event named in the URL, else the first one
+        // still open to submissions; read the same event it will ask about.
+        let hackathonId = urlId;
+        if (!hackathonId) {
+          const regs = await myRegs.catch(() => []);
+          const now = Date.now();
+          hackathonId =
+            regs.find(
+              (r) =>
+                !r.hackathon.endDate ||
+                new Date(r.hackathon.endDate).getTime() + GRACE_MS >= now,
+            )?.hackathonId ?? "";
+        }
+        return [
+          ["hackathon.myRegistrations", undefined, myRegs],
+          ...(hackathonId
+            ? ([
+                [
+                  "team.mySubmission",
+                  { hackathonId },
+                  c.team.mySubmission({ hackathonId }),
+                ],
+                ["hackathon.getById", { id: hackathonId }, c.hackathon.getById({ id: hackathonId })],
+                [
+                  "team.submissionWindow",
+                  { hackathonId },
+                  c.team.submissionWindow({ hackathonId }),
+                ],
+              ] as const)
+            : []),
+        ];
+      }}
+    >
+      <SubmitPage />
+    </PrefetchedPage>
   );
 }
diff --git a/sites/mainweb/components/portal/PrefetchedPage.tsx b/sites/mainweb/components/portal/PrefetchedPage.tsx
index 5a4c131d..65f62e6f 100644
--- a/sites/mainweb/components/portal/PrefetchedPage.tsx
+++ b/sites/mainweb/components/portal/PrefetchedPage.tsx
@@ -10,20 +10,27 @@ import type { PortalCaller, Prefetch } from "@/lib/portal-bootstrap.server";
  * client page's react-query cache, so its content ships with the HTML instead
  * of after hydration plus a fetch. The client page is unchanged: its useQuery
  * calls find the data already in the cache. With no session it renders the
- * page as-is and the page redirects or signs in as it always did.
+ * page as-is and the page redirects or signs in as it always did. A page whose
+ * later reads depend on its first can return its reads from an async function.
  */
 export async function PrefetchedPage({
   reads,
   children,
 }: {
-  reads: (caller: PortalCaller) => readonly Prefetch[];
+  reads: (
+    caller: PortalCaller,
+  ) => readonly Prefetch[] | Promise<readonly Prefetch[]>;
   children: React.ReactNode;
 }) {
   // A failed session lookup renders the page as before; it fetches for itself.
   const signedIn = await getPortalCaller().catch(() => null);
   if (!signedIn) return children;
+  // A reads function that throws costs the prefetch, not the page.
+  const entries = await Promise.resolve()
+    .then(() => reads(signedIn.caller))
+    .catch(() => []);
   return (
-    <HydrationBoundary state={await dehydratePrefetched(reads(signedIn.caller))}>
+    <HydrationBoundary state={await dehydratePrefetched(entries)}>
       {children}
     </HydrationBoundary>
   );

From 0fc56fd2eab3dd01c0e761fecad68b2b4220c632 Mon Sep 17 00:00:00 2001
From: aamoghS <aamoghsawantt@gmail.com>
Date: Fri, 6 Nov 2026 12:39:28 -0500
Subject: [PATCH 3/9] perf(mainweb): prefetch the dashboard next-step reads and
 the club member pass

The dashboard's next step waited on the registrations and then up to four more
queries; the server page works out which the client will ask for (the same
checks as the page) and reads them. The club page also read member.myPass
after load; it is prefetched now. Cold load median of 5: dashboard checked-in
hacker 1247 to 530 ms (warm 420 to 279), club pass QR 514 to 290 (warm 203 to
150).
---
 sites/mainweb/app/(portal)/club/page.tsx      |  1 +
 sites/mainweb/app/(portal)/dashboard/page.tsx | 76 ++++++++++++++++++-
 2 files changed, 74 insertions(+), 3 deletions(-)

diff --git a/sites/mainweb/app/(portal)/club/page.tsx b/sites/mainweb/app/(portal)/club/page.tsx
index 5b8f4889..2e129ae5 100644
--- a/sites/mainweb/app/(portal)/club/page.tsx
+++ b/sites/mainweb/app/(portal)/club/page.tsx
@@ -10,6 +10,7 @@ export default function Page() {
         ["events.myStats", undefined, c.events.myStats()],
         ["events.myEvents", undefined, c.events.myEvents()],
         ["events.list", undefined, c.events.list()],
+        ["member.myPass", undefined, c.member.myPass()],
       ]}
     >
       <ClubPage />
diff --git a/sites/mainweb/app/(portal)/dashboard/page.tsx b/sites/mainweb/app/(portal)/dashboard/page.tsx
index 313d96c2..9b9e7e02 100644
--- a/sites/mainweb/app/(portal)/dashboard/page.tsx
+++ b/sites/mainweb/app/(portal)/dashboard/page.tsx
@@ -1,12 +1,82 @@
 import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import {
+  isWithinEditionDates,
+  nextStepQueries,
+} from "@/lib/hackathon-next-step";
+import type { Prefetch } from "@/lib/portal-bootstrap.server";
 import DashboardPage from "./DashboardPage";
 
 export default function Page() {
   return (
     <PrefetchedPage
-      reads={(c) => [
-        ["user.me", undefined, c.user.me()],
-      ]}
+      reads={async (c) => {
+        const me = c.user.me();
+        const myRegs = c.hackathon.myRegistrations();
+        const portal = c.user.getPortalContext();
+        const entries: Prefetch[] = [["user.me", undefined, me]];
+
+        // The page reads up to four more queries for the registration whose
+        // next step it shows. Work out which, the way the page does, and read
+        // them now. A guess that misses costs only the prefetch.
+        const [regs, context] = await Promise.all([
+          myRegs.catch(() => null),
+          portal.catch(() => null),
+        ]);
+        if (!regs) return entries;
+        entries.push(["hackathon.myRegistrations", undefined, myRegs]);
+
+        const now = new Date();
+        const eventReg = regs.find(
+          (r) =>
+            (r.registrationStatus === "approved" ||
+              r.registrationStatus === "checked_in") &&
+            r.hackathon.status !== "cancelled" &&
+            isWithinEditionDates(r.hackathon, now),
+        );
+        const clubView = !eventReg && !!context?.member?.isMember;
+        const latestReg =
+          eventReg ??
+          regs.find((r) =>
+            r.hackathon.endDate ? new Date(r.hackathon.endDate) >= now : true,
+          );
+        if (clubView || !latestReg) return entries;
+
+        const needs = nextStepQueries({
+          now,
+          hackathon: latestReg.hackathon,
+          registrationStatus: latestReg.registrationStatus,
+        });
+        const { hackathonId } = latestReg;
+        if (needs.submission) {
+          entries.push(
+            [
+              "team.submissionWindow",
+              { hackathonId },
+              c.team.submissionWindow({ hackathonId }),
+            ],
+            [
+              "team.mySubmission",
+              { hackathonId },
+              c.team.mySubmission({ hackathonId }),
+            ],
+          );
+        }
+        if (needs.judging) {
+          entries.push([
+            "judging.hacker.itinerary",
+            { hackathonId },
+            c.judging.hacker.itinerary({ hackathonId }),
+          ]);
+        }
+        if (needs.results) {
+          entries.push([
+            "hackathon.getResults",
+            { hackathonId },
+            c.hackathon.getResults({ hackathonId }),
+          ]);
+        }
+        return entries;
+      }}
     >
       <DashboardPage />
     </PrefetchedPage>

From 6616f4560f200049d0d2176abf8493b13700ca6c Mon Sep 17 00:00:00 2001
From: aamoghS <aamoghsawantt@gmail.com>
Date: Fri, 6 Nov 2026 12:39:28 -0500
Subject: [PATCH 4/9] perf(mainweb): prefetch the admin home, club attendees
 and hackathons list

Each drew its list only after hydration plus a tRPC batch. Server pages read
events.listAll, hackathon.listAll and the bans list for the unchanged client
pages, and the dates they print move to the venue calendar. Cold load median
of 5: /admin 493 to 308 ms, /admin/attendees 452 to 393, /admin/hackathons
1113 to 359.
---
 .../mainweb/app/(portal)/admin/AdminPage.tsx  | 382 +++++++++++++++++
 .../admin/attendees/AttendeesPage.tsx         | 203 +++++++++
 .../app/(portal)/admin/attendees/page.tsx     | 209 +---------
 .../admin/hackathons/AdminHackathonsPage.tsx  | 160 ++++++++
 .../app/(portal)/admin/hackathons/page.tsx    | 167 +-------
 sites/mainweb/app/(portal)/admin/page.tsx     | 387 +-----------------
 .../admin/hackathons/HackathonBans.tsx        |   3 +-
 .../admin/hackathons/HackathonCard.tsx        |   4 +-
 8 files changed, 780 insertions(+), 735 deletions(-)
 create mode 100644 sites/mainweb/app/(portal)/admin/AdminPage.tsx
 create mode 100644 sites/mainweb/app/(portal)/admin/attendees/AttendeesPage.tsx
 create mode 100644 sites/mainweb/app/(portal)/admin/hackathons/AdminHackathonsPage.tsx

diff --git a/sites/mainweb/app/(portal)/admin/AdminPage.tsx b/sites/mainweb/app/(portal)/admin/AdminPage.tsx
new file mode 100644
index 00000000..ab294ff0
--- /dev/null
+++ b/sites/mainweb/app/(portal)/admin/AdminPage.tsx
@@ -0,0 +1,382 @@
+"use client";
+
+import { venueFormat } from "@/lib/venue-time";
+import { useSession } from "next-auth/react";
+import { trpc } from "@/lib/trpc";
+import {
+  canViewAdmin,
+  READ_ONLY_TITLE,
+  usePortalContext,
+  useReadOnly,
+} from "@/lib/use-portal-context";
+import { useState } from "react";
+import Link from "next/link";
+import { useEventQR } from "@/components/portal/EventQR";
+import { EventFormModal } from "@/components/portal/EventFormModal";
+import { EventAttendanceModal } from "@/components/portal/EventAttendanceModal";
+import {
+  body,
+  btnDanger,
+  btnPrimary,
+  btnSecondary,
+  chip,
+  itemTitle,
+  meta,
+  object,
+  page,
+  pageDek,
+  sectionRule,
+  status,
+  textLink,
+} from "@/components/portal/ui";
+
+const adminTitle =
+  "font-[family-name:var(--font-display)] text-[32px] md:text-[40px] font-semibold leading-[1.05] tracking-[-0.02em] text-[var(--text-primary)] text-balance";
+
+const inlineLink =
+  "font-semibold text-[var(--text-primary)] underline decoration-accent underline-offset-4 hover:decoration-[var(--text-primary)]";
+
+type Event = {
+  id: string;
+  title: string;
+  description: string | null;
+  location: string | null;
+  eventDate: Date;
+  qrCode: string;
+  checkInEnabled: boolean;
+  currentCheckIns: number;
+  maxCheckIns: number | null;
+};
+
+export default function AdminPage() {
+  const { data: session } = useSession();
+  const utils = trpc.useUtils();
+
+  const [showCreateEvent, setShowCreateEvent] = useState(false);
+  const qr = useEventQR();
+  const [editingEvent, setEditingEvent] = useState<Event | null>(null);
+  const [attendanceEvent, setAttendanceEvent] = useState<Event | null>(null);
+  const [editError, setEditError] = useState<string | null>(null);
+
+  const { data: portalContext } = usePortalContext();
+  const readOnly = useReadOnly();
+  const { data: allEvents, isLoading: eventsLoading } =
+    trpc.events.listAll.useQuery(undefined, {
+      enabled: !!session && canViewAdmin(portalContext),
+    });
+  // Bootcamp sessions have their own check-in controls on /admin/bootcamp.
+  const events = allEvents?.filter((e) => e.kind === "club");
+
+  type StatusFilter = "all" | "open" | "closed";
+  const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
+
+  const createEventMutation = trpc.events.create.useMutation({
+    onSuccess: (newEvent) => {
+      if (newEvent) {
+        utils.events.listAll.invalidate();
+        setShowCreateEvent(false);
+        void qr.show(newEvent);
+      }
+    },
+  });
+
+  const toggleCheckInMutation = trpc.events.toggleCheckIn.useMutation({
+    onSuccess: () => utils.events.listAll.invalidate(),
+  });
+
+  const deleteEventMutation = trpc.events.delete.useMutation({
+    onSuccess: () => {
+      utils.events.listAll.invalidate();
+      qr.hide();
+    },
+  });
+
+  // Editing rather than delete-and-recreate: deleting takes every check-in
+  // already collected with it, and mints a QR nobody's printed sign matches.
+  const updateEventMutation = trpc.events.update.useMutation({
+    onSuccess: () => {
+      utils.events.listAll.invalidate();
+      setEditingEvent(null);
+      setEditError(null);
+    },
+    onError: (error) => setEditError(error.message),
+  });
+
+  type EventForm = {
+    title: string;
+    description: string;
+    location: string;
+    eventDate: string;
+    maxCheckIns: string;
+  };
+
+  // Empty means no cap — the column is nullable and the door gate only runs
+  // when a number is set. The form used to hardcode undefined, so capacity was
+  // unreachable from anywhere in the product.
+  const parseCapacity = (value: string) => {
+    const parsed = Number(value);
+    return value.trim() && Number.isFinite(parsed) && parsed > 0
+      ? Math.floor(parsed)
+      : undefined;
+  };
+
+  const handleCreateEvent = (formData: EventForm) => {
+    createEventMutation.mutate({
+      title: formData.title,
+      description: formData.description || undefined,
+      location: formData.location || undefined,
+      eventDate: new Date(formData.eventDate),
+      maxCheckIns: parseCapacity(formData.maxCheckIns),
+    });
+  };
+
+  const handleEditEvent = (formData: EventForm) => {
+    if (!editingEvent) return;
+    setEditError(null);
+    updateEventMutation.mutate({
+      eventId: editingEvent.id,
+      title: formData.title,
+      description: formData.description || null,
+      location: formData.location || null,
+      eventDate: new Date(formData.eventDate),
+      maxCheckIns: parseCapacity(formData.maxCheckIns) ?? null,
+    });
+  };
+
+  /** `datetime-local` wants local wall-clock, not the UTC ISO string. */
+  const toLocalInput = (date: Date) => {
+    const local = new Date(
+      date.getTime() - new Date(date).getTimezoneOffset() * 60 * 1000,
+    );
+    return local.toISOString().slice(0, 16);
+  };
+
+  return (
+    <>
+      {showCreateEvent && (
+        <EventFormModal
+          onClose={() => setShowCreateEvent(false)}
+          onSubmit={handleCreateEvent}
+          isSubmitting={createEventMutation.isPending}
+        />
+      )}
+
+      {editingEvent && (
+        <EventFormModal
+          mode="edit"
+          initial={{
+            title: editingEvent.title,
+            description: editingEvent.description ?? "",
+            location: editingEvent.location ?? "",
+            eventDate: toLocalInput(new Date(editingEvent.eventDate)),
+            maxCheckIns: editingEvent.maxCheckIns
+              ? String(editingEvent.maxCheckIns)
+              : "",
+          }}
+          onClose={() => {
+            setEditingEvent(null);
+            setEditError(null);
+          }}
+          onSubmit={handleEditEvent}
+          isSubmitting={updateEventMutation.isPending}
+          error={editError}
+        />
+      )}
+
+      {attendanceEvent && (
+        <EventAttendanceModal
+          eventId={attendanceEvent.id}
+          eventTitle={attendanceEvent.title}
+          onClose={() => setAttendanceEvent(null)}
+        />
+      )}
+
+      {qr.modal}
+
+      <div className={page}>
+        <header>
+          <h1 className={adminTitle}>Club check-ins</h1>
+          <p className={pageDek}>
+            Club meetings and workshops. Bootcamp sessions are managed on the{" "}
+            <Link href="/admin/bootcamp" className={inlineLink}>
+              bootcamp page
+            </Link>
+            , and Hacklytics weekend events live on the hackathon dashboard.
+          </p>
+        </header>
+
+        <section className="mt-10 space-y-6">
+          <div className="flex flex-wrap items-center justify-between gap-4">
+            <div
+              role="group"
+              aria-label="Filter events by check-in"
+              className="flex flex-wrap gap-2"
+            >
+              {(["all", "open", "closed"] as const).map((f) => (
+                <button
+                  key={f}
+                  type="button"
+                  onClick={() => setStatusFilter(f)}
+                  aria-pressed={statusFilter === f}
+                  className={`${chip(statusFilter === f)} tabular-nums`}
+                >
+                  {f === "all"
+                    ? `All (${events?.length ?? 0})`
+                    : f === "open"
+                      ? `Open (${events?.filter((e) => e.checkInEnabled).length ?? 0})`
+                      : `Closed (${events?.filter((e) => !e.checkInEnabled).length ?? 0})`}
+                </button>
+              ))}
+            </div>
+            <div className="flex flex-wrap gap-2">
+              <Link href="/scan/club" className={btnSecondary}>
+                Scan passes
+              </Link>
+              <button
+                type="button"
+                onClick={() => setShowCreateEvent(true)}
+                disabled={readOnly}
+                title={readOnly ? READ_ONLY_TITLE : undefined}
+                className={btnPrimary}
+              >
+                New event
+              </button>
+            </div>
+          </div>
+
+          {eventsLoading ? (
+            <div className="space-y-4" aria-hidden="true">
+              {[1, 2, 3].map((n) => (
+                <div
+                  key={n}
+                  className="h-28 animate-pulse rounded-[var(--radius-md)] bg-[var(--bg-secondary)]"
+                />
+              ))}
+            </div>
+          ) : !events || events.length === 0 ? (
+            <div className={sectionRule}>
+              <p className={body}>
+                Club events you create show up here, each with its own check-in
+                QR code.
+              </p>
+              <button
+                type="button"
+                onClick={() => setShowCreateEvent(true)}
+                disabled={readOnly}
+                title={readOnly ? READ_ONLY_TITLE : undefined}
+                className={`${textLink} mt-4 disabled:cursor-not-allowed disabled:opacity-50`}
+              >
+                Create the first event
+              </button>
+            </div>
+          ) : (
+            <ul className="space-y-4">
+              {events
+                .filter((e) =>
+                  statusFilter === "all"
+                    ? true
+                    : statusFilter === "open"
+                      ? e.checkInEnabled
+                      : !e.checkInEnabled,
+                )
+                .map((event) => (
+                  <li key={event.id} className={`${object} p-5 sm:p-6`}>
+                    <div className="flex flex-col justify-between gap-5 lg:flex-row lg:items-start">
+                      <div className="min-w-0 flex-1">
+                        <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
+                          <h2 className={itemTitle}>{event.title}</h2>
+                          <span
+                            className={status(
+                              event.checkInEnabled ? "accent" : "neutral",
+                            )}
+                          >
+                            {event.checkInEnabled
+                              ? "Check-in open"
+                              : "Check-in closed"}
+                          </span>
+                        </div>
+                        {event.description && (
+                          <p className={`${body} mt-2`}>{event.description}</p>
+                        )}
+                        <p className={`${meta} mt-2 tabular-nums`}>
+                          {event.location || "No location"} ·{" "}
+                          {venueFormat(event.eventDate)} ·{" "}
+                          <span className="font-semibold text-[var(--text-primary)]">
+                            {event.currentCheckIns} check-ins
+                          </span>
+                        </p>
+                      </div>
+
+                      <div className="flex flex-wrap items-center gap-x-4 gap-y-3">
+                        <button
+                          type="button"
+                          onClick={() => void qr.show(event)}
+                          disabled={qr.generatingFor === event.qrCode}
+                          className={btnSecondary}
+                        >
+                          {qr.generatingFor === event.qrCode
+                            ? "Generating…"
+                            : "QR code"}
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() =>
+                            toggleCheckInMutation.mutate({
+                              eventId: event.id,
+                              enabled: !event.checkInEnabled,
+                            })
+                          }
+                          disabled={readOnly}
+                          title={readOnly ? READ_ONLY_TITLE : undefined}
+                          className={btnSecondary}
+                        >
+                          {event.checkInEnabled
+                            ? "Close check-in"
+                            : "Open check-in"}
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => setAttendanceEvent(event)}
+                          className={textLink}
+                        >
+                          Attendance
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => setEditingEvent(event)}
+                          disabled={readOnly}
+                          title={readOnly ? READ_ONLY_TITLE : undefined}
+                          className={`${textLink} disabled:cursor-not-allowed disabled:opacity-50`}
+                        >
+                          Edit
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => {
+                            if (
+                              confirm(
+                                event.currentCheckIns > 0
+                                  ? `Delete this event? Its ${event.currentCheckIns} check-in(s) are deleted with it and cannot be recovered.`
+                                  : "Delete this event?",
+                              )
+                            ) {
+                              deleteEventMutation.mutate({ eventId: event.id });
+                            }
+                          }}
+                          disabled={readOnly}
+                          title={readOnly ? READ_ONLY_TITLE : undefined}
+                          className={btnDanger}
+                        >
+                          Delete
+                        </button>
+                      </div>
+                    </div>
+                  </li>
+                ))}
+            </ul>
+          )}
+        </section>
+      </div>
+    </>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/admin/attendees/AttendeesPage.tsx b/sites/mainweb/app/(portal)/admin/attendees/AttendeesPage.tsx
new file mode 100644
index 00000000..ad5ae4ec
--- /dev/null
+++ b/sites/mainweb/app/(portal)/admin/attendees/AttendeesPage.tsx
@@ -0,0 +1,203 @@
+"use client";
+
+import { useSession } from "next-auth/react";
+import { loginHref } from "@/lib/safe-callback";
+import { trpc } from "@/lib/trpc";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { skipToken } from "@tanstack/react-query";
+import { Download } from "lucide-react";
+import {
+  body,
+  btnSecondary,
+  fieldLabel,
+  input,
+  meta,
+  page,
+  pageDek,
+  sectionRule,
+  status as statusText,
+} from "@/components/portal/ui";
+import { EventOptions } from "@/components/portal/EventOptions";
+
+const adminTitle =
+  "font-[family-name:var(--font-display)] text-[32px] md:text-[40px] font-semibold leading-[1.05] tracking-[-0.02em] text-[var(--text-primary)] text-balance";
+
+const th = "px-4 py-3 text-[13px] font-medium text-[var(--text-subtle)]";
+const td = "px-4 py-3";
+
+export default function AttendeesPage() {
+  const { data: session, status } = useSession();
+  const router = useRouter();
+
+  const [selectedEvent, setSelectedEvent] = useState<string | null>(null);
+
+  const { data: eventList } = trpc.events.listAll.useQuery(undefined, {
+    enabled: !!session,
+  });
+
+  const { data: eventData, isLoading } = trpc.events.getById.useQuery(
+    selectedEvent ? { id: selectedEvent } : skipToken,
+  );
+
+  const attendees = eventData?.checkIns;
+
+  if (status === "unauthenticated") {
+    router.push(loginHref());
+    return null;
+  }
+
+  const handleDownloadCSV = () => {
+    if (!attendees || attendees.length === 0) return;
+
+    const cell = (value: unknown) =>
+      `"${String(value ?? "").replace(/"/g, '""')}"`;
+
+    const rows = attendees.map((a: NonNullable<typeof attendees>[number]) =>
+      [
+        a.member ? `${a.member.firstName} ${a.member.lastName}` : a.user?.name,
+        a.user?.email,
+        a.checkInMethod,
+        a.checkedInAt ? new Date(a.checkedInAt).toISOString() : "",
+      ].map(cell),
+    );
+
+    const csv = [
+      // No "Points" column: every row carried the same schema default, so the
+      // export presented a constant as though it were tracked data.
+      ["Name", "Email", "Method", "Checked In At"].map(cell),
+      ...rows,
+    ]
+      .map((r) => r.join(","))
+      .join("\n");
+
+    const url = URL.createObjectURL(
+      new Blob([csv], { type: "text/csv;charset=utf-8;" }),
+    );
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `${(eventData?.title ?? "event")
+      .replace(/[^a-z0-9]/gi, "_")
+      .toLowerCase()}_attendees.csv`;
+    link.style.visibility = "hidden";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    // Without this the blob is retained for the lifetime of the page.
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <div className={page}>
+      <header>
+        <h1 className={adminTitle}>Club event attendees</h1>
+        <p className={pageDek}>
+          Who checked in to each club meeting. Hackathon applications live on
+          each edition&apos;s dashboard.
+        </p>
+      </header>
+
+      <section className="mt-10 space-y-6">
+        <div className="flex flex-wrap items-end justify-between gap-4">
+          <div className="w-full sm:max-w-sm">
+            <label htmlFor="attendees-event" className={fieldLabel}>
+              Club event
+            </label>
+            <select
+              id="attendees-event"
+              aria-label="Filter attendees by club event"
+              value={selectedEvent || ""}
+              onChange={(e) => setSelectedEvent(e.target.value || null)}
+              className={`${input} min-h-11 cursor-pointer`}
+            >
+              <option value="">Select an event…</option>
+              <EventOptions events={eventList} />
+            </select>
+          </div>
+          {selectedEvent && (
+            <button
+              type="button"
+              onClick={handleDownloadCSV}
+              className={btnSecondary}
+            >
+              <Download
+                aria-hidden="true"
+                strokeWidth={1.75}
+                className="h-4 w-4"
+              />
+              Export CSV
+            </button>
+          )}
+        </div>
+
+        {isLoading ? (
+          <p className={`${meta} ${sectionRule}`}>Loading check-ins…</p>
+        ) : !attendees || attendees.length === 0 ? (
+          <p className={`${body} ${sectionRule}`}>
+            {selectedEvent
+              ? "Nobody has checked in to this event yet. Check-ins appear here as people arrive."
+              : "Pick a club event to see who checked in."}
+          </p>
+        ) : (
+          <div className="overflow-x-auto border-y border-[var(--border-subtle)]">
+            <table className="w-full min-w-[640px] text-left text-[15px]">
+              <thead className="border-b border-[var(--border-subtle)]">
+                <tr>
+                  <th scope="col" className={th}>
+                    Name
+                  </th>
+                  <th scope="col" className={th}>
+                    Email
+                  </th>
+                  <th scope="col" className={th}>
+                    Status
+                  </th>
+                  <th scope="col" className={th}>
+                    Checked in at
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {attendees.map((attendee) => (
+                  <tr
+                    key={attendee.id}
+                    className="border-b border-[var(--border-subtle)] last:border-b-0 transition-colors hover:bg-[var(--bg-secondary)]"
+                  >
+                    <td className={td}>
+                      <div className="flex items-center gap-3">
+                        {}
+                        <img
+                          src={attendee.user?.image || "/avatars/default.svg"}
+                          alt={attendee.user?.name || "Attendee"}
+                          className="h-8 w-8 shrink-0 rounded-full object-cover"
+                        />
+                        <span className="font-semibold text-[var(--text-primary)]">
+                          {attendee.user?.name ||
+                            `${attendee.member?.firstName ?? ""} ${attendee.member?.lastName ?? ""}`.trim() ||
+                            "Unknown"}
+                        </span>
+                      </div>
+                    </td>
+                    <td className={`${td} text-[var(--text-muted)]`}>
+                      {attendee.user?.email}
+                    </td>
+                    <td className={td}>
+                      <span className={statusText("success")}>Checked in</span>
+                    </td>
+                    <td
+                      className={`${td} whitespace-nowrap tabular-nums text-[var(--text-muted)]`}
+                    >
+                      {attendee.checkedInAt
+                        ? new Date(attendee.checkedInAt).toLocaleString()
+                        : "—"}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/admin/attendees/page.tsx b/sites/mainweb/app/(portal)/admin/attendees/page.tsx
index ad5ae4ec..787031ae 100644
--- a/sites/mainweb/app/(portal)/admin/attendees/page.tsx
+++ b/sites/mainweb/app/(portal)/admin/attendees/page.tsx
@@ -1,203 +1,14 @@
-"use client";
-
-import { useSession } from "next-auth/react";
-import { loginHref } from "@/lib/safe-callback";
-import { trpc } from "@/lib/trpc";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import { skipToken } from "@tanstack/react-query";
-import { Download } from "lucide-react";
-import {
-  body,
-  btnSecondary,
-  fieldLabel,
-  input,
-  meta,
-  page,
-  pageDek,
-  sectionRule,
-  status as statusText,
-} from "@/components/portal/ui";
-import { EventOptions } from "@/components/portal/EventOptions";
-
-const adminTitle =
-  "font-[family-name:var(--font-display)] text-[32px] md:text-[40px] font-semibold leading-[1.05] tracking-[-0.02em] text-[var(--text-primary)] text-balance";
-
-const th = "px-4 py-3 text-[13px] font-medium text-[var(--text-subtle)]";
-const td = "px-4 py-3";
-
-export default function AttendeesPage() {
-  const { data: session, status } = useSession();
-  const router = useRouter();
-
-  const [selectedEvent, setSelectedEvent] = useState<string | null>(null);
-
-  const { data: eventList } = trpc.events.listAll.useQuery(undefined, {
-    enabled: !!session,
-  });
-
-  const { data: eventData, isLoading } = trpc.events.getById.useQuery(
-    selectedEvent ? { id: selectedEvent } : skipToken,
-  );
-
-  const attendees = eventData?.checkIns;
-
-  if (status === "unauthenticated") {
-    router.push(loginHref());
-    return null;
-  }
-
-  const handleDownloadCSV = () => {
-    if (!attendees || attendees.length === 0) return;
-
-    const cell = (value: unknown) =>
-      `"${String(value ?? "").replace(/"/g, '""')}"`;
-
-    const rows = attendees.map((a: NonNullable<typeof attendees>[number]) =>
-      [
-        a.member ? `${a.member.firstName} ${a.member.lastName}` : a.user?.name,
-        a.user?.email,
-        a.checkInMethod,
-        a.checkedInAt ? new Date(a.checkedInAt).toISOString() : "",
-      ].map(cell),
-    );
-
-    const csv = [
-      // No "Points" column: every row carried the same schema default, so the
-      // export presented a constant as though it were tracked data.
-      ["Name", "Email", "Method", "Checked In At"].map(cell),
-      ...rows,
-    ]
-      .map((r) => r.join(","))
-      .join("\n");
-
-    const url = URL.createObjectURL(
-      new Blob([csv], { type: "text/csv;charset=utf-8;" }),
-    );
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = `${(eventData?.title ?? "event")
-      .replace(/[^a-z0-9]/gi, "_")
-      .toLowerCase()}_attendees.csv`;
-    link.style.visibility = "hidden";
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    // Without this the blob is retained for the lifetime of the page.
-    URL.revokeObjectURL(url);
-  };
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import AttendeesPage from "./AttendeesPage";
 
+export default function Page() {
   return (
-    <div className={page}>
-      <header>
-        <h1 className={adminTitle}>Club event attendees</h1>
-        <p className={pageDek}>
-          Who checked in to each club meeting. Hackathon applications live on
-          each edition&apos;s dashboard.
-        </p>
-      </header>
-
-      <section className="mt-10 space-y-6">
-        <div className="flex flex-wrap items-end justify-between gap-4">
-          <div className="w-full sm:max-w-sm">
-            <label htmlFor="attendees-event" className={fieldLabel}>
-              Club event
-            </label>
-            <select
-              id="attendees-event"
-              aria-label="Filter attendees by club event"
-              value={selectedEvent || ""}
-              onChange={(e) => setSelectedEvent(e.target.value || null)}
-              className={`${input} min-h-11 cursor-pointer`}
-            >
-              <option value="">Select an event…</option>
-              <EventOptions events={eventList} />
-            </select>
-          </div>
-          {selectedEvent && (
-            <button
-              type="button"
-              onClick={handleDownloadCSV}
-              className={btnSecondary}
-            >
-              <Download
-                aria-hidden="true"
-                strokeWidth={1.75}
-                className="h-4 w-4"
-              />
-              Export CSV
-            </button>
-          )}
-        </div>
-
-        {isLoading ? (
-          <p className={`${meta} ${sectionRule}`}>Loading check-ins…</p>
-        ) : !attendees || attendees.length === 0 ? (
-          <p className={`${body} ${sectionRule}`}>
-            {selectedEvent
-              ? "Nobody has checked in to this event yet. Check-ins appear here as people arrive."
-              : "Pick a club event to see who checked in."}
-          </p>
-        ) : (
-          <div className="overflow-x-auto border-y border-[var(--border-subtle)]">
-            <table className="w-full min-w-[640px] text-left text-[15px]">
-              <thead className="border-b border-[var(--border-subtle)]">
-                <tr>
-                  <th scope="col" className={th}>
-                    Name
-                  </th>
-                  <th scope="col" className={th}>
-                    Email
-                  </th>
-                  <th scope="col" className={th}>
-                    Status
-                  </th>
-                  <th scope="col" className={th}>
-                    Checked in at
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                {attendees.map((attendee) => (
-                  <tr
-                    key={attendee.id}
-                    className="border-b border-[var(--border-subtle)] last:border-b-0 transition-colors hover:bg-[var(--bg-secondary)]"
-                  >
-                    <td className={td}>
-                      <div className="flex items-center gap-3">
-                        {}
-                        <img
-                          src={attendee.user?.image || "/avatars/default.svg"}
-                          alt={attendee.user?.name || "Attendee"}
-                          className="h-8 w-8 shrink-0 rounded-full object-cover"
-                        />
-                        <span className="font-semibold text-[var(--text-primary)]">
-                          {attendee.user?.name ||
-                            `${attendee.member?.firstName ?? ""} ${attendee.member?.lastName ?? ""}`.trim() ||
-                            "Unknown"}
-                        </span>
-                      </div>
-                    </td>
-                    <td className={`${td} text-[var(--text-muted)]`}>
-                      {attendee.user?.email}
-                    </td>
-                    <td className={td}>
-                      <span className={statusText("success")}>Checked in</span>
-                    </td>
-                    <td
-                      className={`${td} whitespace-nowrap tabular-nums text-[var(--text-muted)]`}
-                    >
-                      {attendee.checkedInAt
-                        ? new Date(attendee.checkedInAt).toLocaleString()
-                        : "—"}
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        )}
-      </section>
-    </div>
+    <PrefetchedPage
+      reads={(c) => [
+        ["events.listAll", undefined, c.events.listAll()],
+      ]}
+    >
+      <AttendeesPage />
+    </PrefetchedPage>
   );
 }
diff --git a/sites/mainweb/app/(portal)/admin/hackathons/AdminHackathonsPage.tsx b/sites/mainweb/app/(portal)/admin/hackathons/AdminHackathonsPage.tsx
new file mode 100644
index 00000000..c184fdb1
--- /dev/null
+++ b/sites/mainweb/app/(portal)/admin/hackathons/AdminHackathonsPage.tsx
@@ -0,0 +1,160 @@
+"use client";
+
+import { useSession } from "next-auth/react";
+import { loginHref } from "@/lib/safe-callback";
+import { trpc } from "@/lib/trpc";
+import { READ_ONLY_TITLE, useReadOnly } from "@/lib/use-portal-context";
+import { LoadingScreen } from "@/components/portal/LoadingScreen";
+import { adminHackathonPath } from "@/lib/hackathon-slug";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { body, btnPrimary, btnSecondary, pageDek } from "@/components/portal/ui";
+
+// Extracted Components
+
+import { HackathonCard } from "@/components/admin/hackathons/HackathonCard";
+import { CreateHackathonForm } from "@/components/admin/hackathons/CreateHackathonForm";
+import { EditHackathonForm } from "@/components/admin/hackathons/EditHackathonForm";
+import { HackathonBans } from "@/components/admin/hackathons/HackathonBans";
+
+const adminTitle =
+  "font-[family-name:var(--font-display)] text-[32px] md:text-[40px] font-semibold leading-tight tracking-[-0.02em] text-[var(--text-primary)]";
+
+export default function AdminHackathonsPage() {
+  const { data: session, status } = useSession();
+  const router = useRouter();
+  const utils = trpc.useUtils();
+  const readOnly = useReadOnly();
+
+  const [showCreate, setShowCreate] = useState(false);
+  const [editingId, setEditingId] = useState<string | null>(null);
+
+  const {
+    data: hackathons,
+    isLoading,
+    isError,
+    error,
+    refetch,
+  } = trpc.hackathon.listAll.useQuery(
+    undefined,
+    { enabled: !!session },
+  );
+
+  if (status === "loading") return <LoadingScreen message="Loading hackathons…" />;
+  if (status === "unauthenticated") {
+    router.push(loginHref());
+    return null;
+  }
+
+  return (
+    <>
+      <div className="mx-auto w-full max-w-5xl py-4 md:py-8">
+        <header className="flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between">
+          <div>
+            <h1 className={adminTitle}>Hackathons</h1>
+            <p className={pageDek}>
+              Every edition, its schedule and who has signed up. Open one to
+              review applications, check people in and run judging.
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={() => setShowCreate(true)}
+            disabled={readOnly}
+            title={readOnly ? READ_ONLY_TITLE : undefined}
+            className={`shrink-0 self-start sm:self-auto ${btnPrimary}`}
+          >
+            New hackathon
+          </button>
+        </header>
+
+        {showCreate && (
+          <CreateHackathonForm
+            onClose={() => setShowCreate(false)}
+            onCreated={(row) => {
+              setShowCreate(false);
+              utils.hackathon.listAll.invalidate();
+              // Straight into the new edition's dashboard, where its
+              // schedule, applications and judging are set up.
+              router.push(adminHackathonPath(row.name, row.id));
+            }}
+          />
+        )}
+
+        {editingId && (
+          <EditHackathonForm
+            hackathonId={editingId}
+            onClose={() => setEditingId(null)}
+            onSaved={() => {
+              // The form seeds itself from getById; left cached, reopening it
+              // shows the old values and a second save writes them back.
+              utils.hackathon.getById.invalidate({ id: editingId });
+              setEditingId(null);
+              utils.hackathon.listAll.invalidate();
+            }}
+          />
+        )}
+
+        <div className="mt-10">
+          {/* Checked before the skeleton: a failed query leaves data
+              undefined, which used to hold the skeleton up forever. */}
+          {isError ? (
+            <div className="flex flex-col items-start gap-4 border-t border-[var(--border-subtle)] pt-6">
+              <p role="alert" className="text-[15px] text-[var(--danger)]">
+                Couldn&apos;t load hackathons. {error.message}
+              </p>
+              <button
+                type="button"
+                onClick={() => refetch()}
+                className={btnSecondary}
+              >
+                Try again
+              </button>
+            </div>
+          ) : isLoading || hackathons === undefined ? (
+            <div className="space-y-6">
+              {[1, 2, 3].map((n) => (
+                <div
+                  key={n}
+                  className="h-36 animate-pulse rounded-[var(--radius-md)] bg-[var(--bg-secondary)]"
+                />
+              ))}
+            </div>
+          ) : hackathons.length === 0 ? (
+            <div className="flex flex-col items-start gap-4 border-t border-[var(--border-subtle)] pt-6">
+              <p className={body}>
+                No hackathons yet. Each edition you create will be listed here.
+              </p>
+              <button
+                type="button"
+                onClick={() => setShowCreate(true)}
+                disabled={readOnly}
+                title={readOnly ? READ_ONLY_TITLE : undefined}
+                className={btnSecondary}
+              >
+                Create the first one
+              </button>
+            </div>
+          ) : (
+            <div className="space-y-8">
+              {hackathons.map((h: NonNullable<typeof hackathons>[number]) => {
+                return (
+                  <HackathonCard
+                    key={h.id}
+                    hackathon={h}
+                    onEdit={() => setEditingId(h.id)}
+                    onStatusChange={(_newStatus) => {
+                      utils.hackathon.listAll.invalidate();
+                    }}
+                  />
+                );
+              })}
+            </div>
+          )}
+
+          <HackathonBans />
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/admin/hackathons/page.tsx b/sites/mainweb/app/(portal)/admin/hackathons/page.tsx
index c184fdb1..7c654d88 100644
--- a/sites/mainweb/app/(portal)/admin/hackathons/page.tsx
+++ b/sites/mainweb/app/(portal)/admin/hackathons/page.tsx
@@ -1,160 +1,15 @@
-"use client";
-
-import { useSession } from "next-auth/react";
-import { loginHref } from "@/lib/safe-callback";
-import { trpc } from "@/lib/trpc";
-import { READ_ONLY_TITLE, useReadOnly } from "@/lib/use-portal-context";
-import { LoadingScreen } from "@/components/portal/LoadingScreen";
-import { adminHackathonPath } from "@/lib/hackathon-slug";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import { body, btnPrimary, btnSecondary, pageDek } from "@/components/portal/ui";
-
-// Extracted Components
-
-import { HackathonCard } from "@/components/admin/hackathons/HackathonCard";
-import { CreateHackathonForm } from "@/components/admin/hackathons/CreateHackathonForm";
-import { EditHackathonForm } from "@/components/admin/hackathons/EditHackathonForm";
-import { HackathonBans } from "@/components/admin/hackathons/HackathonBans";
-
-const adminTitle =
-  "font-[family-name:var(--font-display)] text-[32px] md:text-[40px] font-semibold leading-tight tracking-[-0.02em] text-[var(--text-primary)]";
-
-export default function AdminHackathonsPage() {
-  const { data: session, status } = useSession();
-  const router = useRouter();
-  const utils = trpc.useUtils();
-  const readOnly = useReadOnly();
-
-  const [showCreate, setShowCreate] = useState(false);
-  const [editingId, setEditingId] = useState<string | null>(null);
-
-  const {
-    data: hackathons,
-    isLoading,
-    isError,
-    error,
-    refetch,
-  } = trpc.hackathon.listAll.useQuery(
-    undefined,
-    { enabled: !!session },
-  );
-
-  if (status === "loading") return <LoadingScreen message="Loading hackathons…" />;
-  if (status === "unauthenticated") {
-    router.push(loginHref());
-    return null;
-  }
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import AdminHackathonsPage from "./AdminHackathonsPage";
 
+export default function Page() {
   return (
-    <>
-      <div className="mx-auto w-full max-w-5xl py-4 md:py-8">
-        <header className="flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between">
-          <div>
-            <h1 className={adminTitle}>Hackathons</h1>
-            <p className={pageDek}>
-              Every edition, its schedule and who has signed up. Open one to
-              review applications, check people in and run judging.
-            </p>
-          </div>
-          <button
-            type="button"
-            onClick={() => setShowCreate(true)}
-            disabled={readOnly}
-            title={readOnly ? READ_ONLY_TITLE : undefined}
-            className={`shrink-0 self-start sm:self-auto ${btnPrimary}`}
-          >
-            New hackathon
-          </button>
-        </header>
-
-        {showCreate && (
-          <CreateHackathonForm
-            onClose={() => setShowCreate(false)}
-            onCreated={(row) => {
-              setShowCreate(false);
-              utils.hackathon.listAll.invalidate();
-              // Straight into the new edition's dashboard, where its
-              // schedule, applications and judging are set up.
-              router.push(adminHackathonPath(row.name, row.id));
-            }}
-          />
-        )}
-
-        {editingId && (
-          <EditHackathonForm
-            hackathonId={editingId}
-            onClose={() => setEditingId(null)}
-            onSaved={() => {
-              // The form seeds itself from getById; left cached, reopening it
-              // shows the old values and a second save writes them back.
-              utils.hackathon.getById.invalidate({ id: editingId });
-              setEditingId(null);
-              utils.hackathon.listAll.invalidate();
-            }}
-          />
-        )}
-
-        <div className="mt-10">
-          {/* Checked before the skeleton: a failed query leaves data
-              undefined, which used to hold the skeleton up forever. */}
-          {isError ? (
-            <div className="flex flex-col items-start gap-4 border-t border-[var(--border-subtle)] pt-6">
-              <p role="alert" className="text-[15px] text-[var(--danger)]">
-                Couldn&apos;t load hackathons. {error.message}
-              </p>
-              <button
-                type="button"
-                onClick={() => refetch()}
-                className={btnSecondary}
-              >
-                Try again
-              </button>
-            </div>
-          ) : isLoading || hackathons === undefined ? (
-            <div className="space-y-6">
-              {[1, 2, 3].map((n) => (
-                <div
-                  key={n}
-                  className="h-36 animate-pulse rounded-[var(--radius-md)] bg-[var(--bg-secondary)]"
-                />
-              ))}
-            </div>
-          ) : hackathons.length === 0 ? (
-            <div className="flex flex-col items-start gap-4 border-t border-[var(--border-subtle)] pt-6">
-              <p className={body}>
-                No hackathons yet. Each edition you create will be listed here.
-              </p>
-              <button
-                type="button"
-                onClick={() => setShowCreate(true)}
-                disabled={readOnly}
-                title={readOnly ? READ_ONLY_TITLE : undefined}
-                className={btnSecondary}
-              >
-                Create the first one
-              </button>
-            </div>
-          ) : (
-            <div className="space-y-8">
-              {hackathons.map((h: NonNullable<typeof hackathons>[number]) => {
-                return (
-                  <HackathonCard
-                    key={h.id}
-                    hackathon={h}
-                    onEdit={() => setEditingId(h.id)}
-                    onStatusChange={(_newStatus) => {
-                      utils.hackathon.listAll.invalidate();
-                    }}
-                  />
-                );
-              })}
-            </div>
-          )}
-
-          <HackathonBans />
-        </div>
-      </div>
-    </>
+    <PrefetchedPage
+      reads={(c) => [
+        ["hackathon.listAll", undefined, c.hackathon.listAll()],
+        ["hackathon.listBans", undefined, c.hackathon.listBans()],
+      ]}
+    >
+      <AdminHackathonsPage />
+    </PrefetchedPage>
   );
 }
diff --git a/sites/mainweb/app/(portal)/admin/page.tsx b/sites/mainweb/app/(portal)/admin/page.tsx
index 64d68639..0a438019 100644
--- a/sites/mainweb/app/(portal)/admin/page.tsx
+++ b/sites/mainweb/app/(portal)/admin/page.tsx
@@ -1,381 +1,14 @@
-"use client";
-
-import { useSession } from "next-auth/react";
-import { trpc } from "@/lib/trpc";
-import {
-  canViewAdmin,
-  READ_ONLY_TITLE,
-  usePortalContext,
-  useReadOnly,
-} from "@/lib/use-portal-context";
-import { useState } from "react";
-import Link from "next/link";
-import { useEventQR } from "@/components/portal/EventQR";
-import { EventFormModal } from "@/components/portal/EventFormModal";
-import { EventAttendanceModal } from "@/components/portal/EventAttendanceModal";
-import {
-  body,
-  btnDanger,
-  btnPrimary,
-  btnSecondary,
-  chip,
-  itemTitle,
-  meta,
-  object,
-  page,
-  pageDek,
-  sectionRule,
-  status,
-  textLink,
-} from "@/components/portal/ui";
-
-const adminTitle =
-  "font-[family-name:var(--font-display)] text-[32px] md:text-[40px] font-semibold leading-[1.05] tracking-[-0.02em] text-[var(--text-primary)] text-balance";
-
-const inlineLink =
-  "font-semibold text-[var(--text-primary)] underline decoration-accent underline-offset-4 hover:decoration-[var(--text-primary)]";
-
-type Event = {
-  id: string;
-  title: string;
-  description: string | null;
-  location: string | null;
-  eventDate: Date;
-  qrCode: string;
-  checkInEnabled: boolean;
-  currentCheckIns: number;
-  maxCheckIns: number | null;
-};
-
-export default function AdminPage() {
-  const { data: session } = useSession();
-  const utils = trpc.useUtils();
-
-  const [showCreateEvent, setShowCreateEvent] = useState(false);
-  const qr = useEventQR();
-  const [editingEvent, setEditingEvent] = useState<Event | null>(null);
-  const [attendanceEvent, setAttendanceEvent] = useState<Event | null>(null);
-  const [editError, setEditError] = useState<string | null>(null);
-
-  const { data: portalContext } = usePortalContext();
-  const readOnly = useReadOnly();
-  const { data: allEvents, isLoading: eventsLoading } =
-    trpc.events.listAll.useQuery(undefined, {
-      enabled: !!session && canViewAdmin(portalContext),
-    });
-  // Bootcamp sessions have their own check-in controls on /admin/bootcamp.
-  const events = allEvents?.filter((e) => e.kind === "club");
-
-  type StatusFilter = "all" | "open" | "closed";
-  const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
-
-  const createEventMutation = trpc.events.create.useMutation({
-    onSuccess: (newEvent) => {
-      if (newEvent) {
-        utils.events.listAll.invalidate();
-        setShowCreateEvent(false);
-        void qr.show(newEvent);
-      }
-    },
-  });
-
-  const toggleCheckInMutation = trpc.events.toggleCheckIn.useMutation({
-    onSuccess: () => utils.events.listAll.invalidate(),
-  });
-
-  const deleteEventMutation = trpc.events.delete.useMutation({
-    onSuccess: () => {
-      utils.events.listAll.invalidate();
-      qr.hide();
-    },
-  });
-
-  // Editing rather than delete-and-recreate: deleting takes every check-in
-  // already collected with it, and mints a QR nobody's printed sign matches.
-  const updateEventMutation = trpc.events.update.useMutation({
-    onSuccess: () => {
-      utils.events.listAll.invalidate();
-      setEditingEvent(null);
-      setEditError(null);
-    },
-    onError: (error) => setEditError(error.message),
-  });
-
-  type EventForm = {
-    title: string;
-    description: string;
-    location: string;
-    eventDate: string;
-    maxCheckIns: string;
-  };
-
-  // Empty means no cap — the column is nullable and the door gate only runs
-  // when a number is set. The form used to hardcode undefined, so capacity was
-  // unreachable from anywhere in the product.
-  const parseCapacity = (value: string) => {
-    const parsed = Number(value);
-    return value.trim() && Number.isFinite(parsed) && parsed > 0
-      ? Math.floor(parsed)
-      : undefined;
-  };
-
-  const handleCreateEvent = (formData: EventForm) => {
-    createEventMutation.mutate({
-      title: formData.title,
-      description: formData.description || undefined,
-      location: formData.location || undefined,
-      eventDate: new Date(formData.eventDate),
-      maxCheckIns: parseCapacity(formData.maxCheckIns),
-    });
-  };
-
-  const handleEditEvent = (formData: EventForm) => {
-    if (!editingEvent) return;
-    setEditError(null);
-    updateEventMutation.mutate({
-      eventId: editingEvent.id,
-      title: formData.title,
-      description: formData.description || null,
-      location: formData.location || null,
-      eventDate: new Date(formData.eventDate),
-      maxCheckIns: parseCapacity(formData.maxCheckIns) ?? null,
-    });
-  };
-
-  /** `datetime-local` wants local wall-clock, not the UTC ISO string. */
-  const toLocalInput = (date: Date) => {
-    const local = new Date(
-      date.getTime() - new Date(date).getTimezoneOffset() * 60 * 1000,
-    );
-    return local.toISOString().slice(0, 16);
-  };
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import AdminPage from "./AdminPage";
 
+export default function Page() {
   return (
-    <>
-      {showCreateEvent && (
-        <EventFormModal
-          onClose={() => setShowCreateEvent(false)}
-          onSubmit={handleCreateEvent}
-          isSubmitting={createEventMutation.isPending}
-        />
-      )}
-
-      {editingEvent && (
-        <EventFormModal
-          mode="edit"
-          initial={{
-            title: editingEvent.title,
-            description: editingEvent.description ?? "",
-            location: editingEvent.location ?? "",
-            eventDate: toLocalInput(new Date(editingEvent.eventDate)),
-            maxCheckIns: editingEvent.maxCheckIns
-              ? String(editingEvent.maxCheckIns)
-              : "",
-          }}
-          onClose={() => {
-            setEditingEvent(null);
-            setEditError(null);
-          }}
-          onSubmit={handleEditEvent}
-          isSubmitting={updateEventMutation.isPending}
-          error={editError}
-        />
-      )}
-
-      {attendanceEvent && (
-        <EventAttendanceModal
-          eventId={attendanceEvent.id}
-          eventTitle={attendanceEvent.title}
-          onClose={() => setAttendanceEvent(null)}
-        />
-      )}
-
-      {qr.modal}
-
-      <div className={page}>
-        <header>
-          <h1 className={adminTitle}>Club check-ins</h1>
-          <p className={pageDek}>
-            Club meetings and workshops. Bootcamp sessions are managed on the{" "}
-            <Link href="/admin/bootcamp" className={inlineLink}>
-              bootcamp page
-            </Link>
-            , and Hacklytics weekend events live on the hackathon dashboard.
-          </p>
-        </header>
-
-        <section className="mt-10 space-y-6">
-          <div className="flex flex-wrap items-center justify-between gap-4">
-            <div
-              role="group"
-              aria-label="Filter events by check-in"
-              className="flex flex-wrap gap-2"
-            >
-              {(["all", "open", "closed"] as const).map((f) => (
-                <button
-                  key={f}
-                  type="button"
-                  onClick={() => setStatusFilter(f)}
-                  aria-pressed={statusFilter === f}
-                  className={`${chip(statusFilter === f)} tabular-nums`}
-                >
-                  {f === "all"
-                    ? `All (${events?.length ?? 0})`
-                    : f === "open"
-                      ? `Open (${events?.filter((e) => e.checkInEnabled).length ?? 0})`
-                      : `Closed (${events?.filter((e) => !e.checkInEnabled).length ?? 0})`}
-                </button>
-              ))}
-            </div>
-            <div className="flex flex-wrap gap-2">
-              <Link href="/scan/club" className={btnSecondary}>
-                Scan passes
-              </Link>
-              <button
-                type="button"
-                onClick={() => setShowCreateEvent(true)}
-                disabled={readOnly}
-                title={readOnly ? READ_ONLY_TITLE : undefined}
-                className={btnPrimary}
-              >
-                New event
-              </button>
-            </div>
-          </div>
-
-          {eventsLoading ? (
-            <div className="space-y-4" aria-hidden="true">
-              {[1, 2, 3].map((n) => (
-                <div
-                  key={n}
-                  className="h-28 animate-pulse rounded-[var(--radius-md)] bg-[var(--bg-secondary)]"
-                />
-              ))}
-            </div>
-          ) : !events || events.length === 0 ? (
-            <div className={sectionRule}>
-              <p className={body}>
-                Club events you create show up here, each with its own check-in
-                QR code.
-              </p>
-              <button
-                type="button"
-                onClick={() => setShowCreateEvent(true)}
-                disabled={readOnly}
-                title={readOnly ? READ_ONLY_TITLE : undefined}
-                className={`${textLink} mt-4 disabled:cursor-not-allowed disabled:opacity-50`}
-              >
-                Create the first event
-              </button>
-            </div>
-          ) : (
-            <ul className="space-y-4">
-              {events
-                .filter((e) =>
-                  statusFilter === "all"
-                    ? true
-                    : statusFilter === "open"
-                      ? e.checkInEnabled
-                      : !e.checkInEnabled,
-                )
-                .map((event) => (
-                  <li key={event.id} className={`${object} p-5 sm:p-6`}>
-                    <div className="flex flex-col justify-between gap-5 lg:flex-row lg:items-start">
-                      <div className="min-w-0 flex-1">
-                        <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
-                          <h2 className={itemTitle}>{event.title}</h2>
-                          <span
-                            className={status(
-                              event.checkInEnabled ? "accent" : "neutral",
-                            )}
-                          >
-                            {event.checkInEnabled
-                              ? "Check-in open"
-                              : "Check-in closed"}
-                          </span>
-                        </div>
-                        {event.description && (
-                          <p className={`${body} mt-2`}>{event.description}</p>
-                        )}
-                        <p className={`${meta} mt-2 tabular-nums`}>
-                          {event.location || "No location"} ·{" "}
-                          {new Date(event.eventDate).toLocaleDateString()} ·{" "}
-                          <span className="font-semibold text-[var(--text-primary)]">
-                            {event.currentCheckIns} check-ins
-                          </span>
-                        </p>
-                      </div>
-
-                      <div className="flex flex-wrap items-center gap-x-4 gap-y-3">
-                        <button
-                          type="button"
-                          onClick={() => void qr.show(event)}
-                          disabled={qr.generatingFor === event.qrCode}
-                          className={btnSecondary}
-                        >
-                          {qr.generatingFor === event.qrCode
-                            ? "Generating…"
-                            : "QR code"}
-                        </button>
-                        <button
-                          type="button"
-                          onClick={() =>
-                            toggleCheckInMutation.mutate({
-                              eventId: event.id,
-                              enabled: !event.checkInEnabled,
-                            })
-                          }
-                          disabled={readOnly}
-                          title={readOnly ? READ_ONLY_TITLE : undefined}
-                          className={btnSecondary}
-                        >
-                          {event.checkInEnabled
-                            ? "Close check-in"
-                            : "Open check-in"}
-                        </button>
-                        <button
-                          type="button"
-                          onClick={() => setAttendanceEvent(event)}
-                          className={textLink}
-                        >
-                          Attendance
-                        </button>
-                        <button
-                          type="button"
-                          onClick={() => setEditingEvent(event)}
-                          disabled={readOnly}
-                          title={readOnly ? READ_ONLY_TITLE : undefined}
-                          className={`${textLink} disabled:cursor-not-allowed disabled:opacity-50`}
-                        >
-                          Edit
-                        </button>
-                        <button
-                          type="button"
-                          onClick={() => {
-                            if (
-                              confirm(
-                                event.currentCheckIns > 0
-                                  ? `Delete this event? Its ${event.currentCheckIns} check-in(s) are deleted with it and cannot be recovered.`
-                                  : "Delete this event?",
-                              )
-                            ) {
-                              deleteEventMutation.mutate({ eventId: event.id });
-                            }
-                          }}
-                          disabled={readOnly}
-                          title={readOnly ? READ_ONLY_TITLE : undefined}
-                          className={btnDanger}
-                        >
-                          Delete
-                        </button>
-                      </div>
-                    </div>
-                  </li>
-                ))}
-            </ul>
-          )}
-        </section>
-      </div>
-    </>
+    <PrefetchedPage
+      reads={(c) => [
+        ["events.listAll", undefined, c.events.listAll()],
+      ]}
+    >
+      <AdminPage />
+    </PrefetchedPage>
   );
 }
diff --git a/sites/mainweb/components/admin/hackathons/HackathonBans.tsx b/sites/mainweb/components/admin/hackathons/HackathonBans.tsx
index 922eef2e..d06303e4 100644
--- a/sites/mainweb/components/admin/hackathons/HackathonBans.tsx
+++ b/sites/mainweb/components/admin/hackathons/HackathonBans.tsx
@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import { trpc } from "@/lib/trpc";
+import { venueFormat } from "@/lib/venue-time";
 import { READ_ONLY_TITLE, useReadOnly } from "@/lib/use-portal-context";
 import {
   body,
@@ -163,7 +164,7 @@ export function HackathonBans() {
                   <p className={`mt-1 ${body}`}>{b.reason}</p>
                   <p className={`mt-1 ${meta}`}>
                     Banned{" "}
-                    {new Date(b.createdAt).toLocaleDateString(undefined, {
+                    {venueFormat(b.createdAt, {
                       month: "short",
                       day: "numeric",
                       year: "numeric",
diff --git a/sites/mainweb/components/admin/hackathons/HackathonCard.tsx b/sites/mainweb/components/admin/hackathons/HackathonCard.tsx
index fb67de5c..095c7fc1 100644
--- a/sites/mainweb/components/admin/hackathons/HackathonCard.tsx
+++ b/sites/mainweb/components/admin/hackathons/HackathonCard.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { venueFormat } from "@/lib/venue-time";
 import React from "react";
 import Link from "next/link";
 import { trpc } from "@/lib/trpc";
@@ -111,8 +112,7 @@ export function HackathonCard({
             <div className="min-w-0 sm:border-l sm:border-[var(--border-subtle)] sm:pl-8">
               <dt className={label}>Dates</dt>
               <dd className="mt-1 text-[15px] tabular-nums text-[var(--text-primary)]">
-                {new Date(hackathon.startDate).toLocaleDateString()} –{" "}
-                {new Date(hackathon.endDate).toLocaleDateString()}
+                {venueFormat(hackathon.startDate)} – {venueFormat(hackathon.endDate)}
               </dd>
             </div>
             <div className="min-w-0 sm:border-l sm:border-[var(--border-subtle)] sm:pl-8">

From b73b013aa21e1686842cf4d6f5119b711e6fa0b2 Mon Sep 17 00:00:00 2001
From: aamoghS <aamoghsawantt@gmail.com>
Date: Fri, 6 Nov 2026 12:39:29 -0500
Subject: [PATCH 5/9] perf(mainweb): prefetch one hackathon's admin dashboard
 and its applications

The dashboard waited on the edition, then on the applications page and the
stats. The server page reads the edition, the first page of applications and
the analytics. The dates in the applications table move to the venue calendar,
and the registration controls (a deadline and inputs in the organiser's own
time zone, which the server cannot know) are drawn after hydration so both
renders agree; without that gate React threw #418. Cold load median of 5:
672 to 480 ms (warm 315 to 189).
---
 .../hackathons/[id]/AdminHackathonPage.tsx    | 327 ++++++++++++++++
 .../(portal)/admin/hackathons/[id]/page.tsx   | 359 ++----------------
 .../admin/hackathons/AttendeesTab.tsx         |  26 +-
 3 files changed, 381 insertions(+), 331 deletions(-)
 create mode 100644 sites/mainweb/app/(portal)/admin/hackathons/[id]/AdminHackathonPage.tsx

diff --git a/sites/mainweb/app/(portal)/admin/hackathons/[id]/AdminHackathonPage.tsx b/sites/mainweb/app/(portal)/admin/hackathons/[id]/AdminHackathonPage.tsx
new file mode 100644
index 00000000..cafb6440
--- /dev/null
+++ b/sites/mainweb/app/(portal)/admin/hackathons/[id]/AdminHackathonPage.tsx
@@ -0,0 +1,327 @@
+"use client";
+
+import { useSession } from "next-auth/react";
+import { trpc } from "@/lib/trpc";
+import {
+  READ_ONLY_TITLE,
+  canViewAdmin,
+  usePortalContext,
+  useReadOnly,
+} from "@/lib/use-portal-context";
+import { useParams, useRouter } from "next/navigation";
+import { useState, useSyncExternalStore } from "react";
+import Link from "next/link";
+import { adminHackathonPath, decodeHackathonParam } from "@/lib/hackathon-slug";
+import { LoadingScreen } from "@/components/portal/LoadingScreen";
+import { EditHackathonForm } from "@/components/admin/hackathons/EditHackathonForm";
+import { ScannerTab } from "@/components/admin/hackathons/ScannerTab";
+import { AttendeesTab } from "@/components/admin/hackathons/AttendeesTab";
+import { AnalyticsTab } from "@/components/admin/hackathons/AnalyticsTab";
+import { EventsTab } from "@/components/admin/hackathons/EventsTab";
+import { JudgesTab } from "@/components/admin/hackathons/JudgesTab";
+import { AnnouncementsTab } from "@/components/admin/hackathons/AnnouncementsTab";
+import { PointsAdminTab } from "@/components/admin/hackathons/points/PointsAdminTab";
+import { StoreTab } from "@/components/admin/hackathons/points/StoreTab";
+import {
+  body,
+  btnPrimary,
+  btnSecondary,
+  sectionTitle,
+  tab as tabClass,
+  tabList,
+} from "@/components/portal/ui";
+import {
+  BarChart3,
+  Calendar,
+  Coins,
+  Gavel,
+  Megaphone,
+  ScanLine,
+  Store,
+  Users,
+} from "lucide-react";
+
+const TABS = [
+  "events",
+  "scanner",
+  "attendees",
+  "analytics",
+  "judges",
+  "points",
+  "store",
+  "announcements",
+] as const;
+
+type Tab = (typeof TABS)[number];
+
+// The tab lives in the URL hash, like the judging console: a reload, a pasted
+// link and the schedule links on the hackathons list (#events) land on the
+// tab the organiser meant instead of Applications.
+const subscribeHash = (onChange: () => void) => {
+  window.addEventListener("hashchange", onChange);
+  return () => window.removeEventListener("hashchange", onChange);
+};
+
+function useTab(): Tab {
+  const hash = useSyncExternalStore(
+    subscribeHash,
+    () => window.location.hash.slice(1),
+    () => "",
+  );
+  return TABS.find((t) => t === hash) ?? "attendees";
+}
+
+export default function AdminHackathonDashboard() {
+  const { status } = useSession();
+  const params = useParams();
+  const router = useRouter();
+  const utils = trpc.useUtils();
+  const readOnly = useReadOnly();
+  const rawId = params?.id;
+  const hackathonId = decodeHackathonParam(
+    Array.isArray(rawId) ? (rawId[0] ?? "") : ((rawId as string | undefined) ?? ""),
+  );
+  const activeTab = useTab();
+  const [editing, setEditing] = useState(false);
+
+  const { data: portalContext, isLoading: portalLoading } = usePortalContext();
+  const {
+    data: hackathon,
+    isLoading,
+    error,
+    refetch,
+  } = trpc.hackathon.getById.useQuery(
+    { id: hackathonId },
+    { enabled: !!hackathonId && canViewAdmin(portalContext) },
+  );
+
+  // isLoading is false on the render where the query flips enabled but has not
+  // started fetching, and it is false again once the query has errored. Both
+  // used to fall through to a bare `return null`, which paints the dashboard as
+  // an unexplained black screen instead of a spinner or the actual failure.
+  const settled = !!hackathon || !!error;
+
+  if (status === "loading" || portalLoading) {
+    return <LoadingScreen message="Loading…" />;
+  }
+
+  // Not found rather than a permission error: telling a non-admin that this
+  // edition exists behind a door they cannot open is the whole leak, and the
+  // query is disabled for them anyway, so waiting on it spun forever.
+  if (!canViewAdmin(portalContext)) {
+    return <DashboardUnavailable message="Hackathon not found" />;
+  }
+
+  if (isLoading || !settled) {
+    return <LoadingScreen message="Loading…" />;
+  }
+
+  if (!hackathon) {
+    return (
+      <DashboardUnavailable
+        message={error?.message ?? "Hackathon not found"}
+        onRetry={() => refetch()}
+      />
+    );
+  }
+
+  // A rename moves the dashboard to a new slug and the old one stops
+  // resolving, so follow the row to its new path instead of landing on
+  // "Hackathon not found" the moment the save succeeds.
+  const finishEdit = async () => {
+    setEditing(false);
+    utils.hackathon.listAll.invalidate();
+    try {
+      const fresh = await utils.hackathon.getById.fetch(
+        { id: hackathon.id },
+        { staleTime: 0 },
+      );
+      const next = adminHackathonPath(fresh.name, fresh.id);
+      if (next !== window.location.pathname) {
+        router.replace(`${next}${window.location.hash}`);
+        return;
+      }
+    } catch {
+      // Fall through: the invalidation below surfaces the failure on the page.
+    }
+    utils.hackathon.getById.invalidate();
+  };
+
+  const icon = { className: "w-4 h-4", strokeWidth: 1.75, "aria-hidden": true } as const;
+  const tabs: { id: Tab; label: string; icon: React.ReactNode }[] = [
+    {
+      id: "attendees",
+      label: "Applications",
+      icon: <Users {...icon} />,
+    },
+    {
+      id: "events",
+      label: "Events",
+      icon: <Calendar {...icon} />,
+    },
+    { id: "scanner", label: "Scan", icon: <ScanLine {...icon} /> },
+    {
+      id: "analytics",
+      label: "Stats",
+      icon: <BarChart3 {...icon} />,
+    },
+    { id: "judges", label: "Judges", icon: <Gavel {...icon} /> },
+    { id: "points", label: "Points", icon: <Coins {...icon} /> },
+    { id: "store", label: "Store", icon: <Store {...icon} /> },
+    {
+      id: "announcements",
+      label: "Email",
+      icon: <Megaphone {...icon} />,
+    },
+  ];
+
+  return (
+    <div className="relative min-h-screen bg-[var(--bg-primary)] text-[var(--text-muted)] flex flex-col pb-32 md:pb-12">
+      <header className="relative sticky top-0 z-30 bg-[var(--bg-primary)] border-b border-[var(--border-subtle)] md:border-b-0">
+        <div className="max-w-7xl mx-auto px-4 pt-4 pb-4 md:pb-0">
+          <div className="flex items-end justify-between gap-4">
+            <div className="flex-1 min-w-0">
+              <Link
+                href="/admin/hackathons"
+                className="text-[13px] text-[var(--text-subtle)] hover:text-[var(--text-primary)] transition-colors"
+                aria-label="Back to hackathons hub"
+              >
+                ← <span className="hidden md:inline">All hackathons</span>
+              </Link>
+              <h1 className="mt-2 truncate font-[family-name:var(--font-display)] text-[28px] md:text-[40px] font-semibold leading-tight tracking-[-0.02em] text-[var(--text-primary)]">
+                {hackathon.name}
+              </h1>
+            </div>
+            <div className="flex flex-wrap items-center gap-2">
+              {["scanner", "attendees"].includes(activeTab) && (
+                // ScannerTab is rendered on this page; there is no
+                // /admin/hackathons/[id]/scanner route to link to.
+                <a href="#scanner" className={btnSecondary}>
+                  <ScanLine className="w-4 h-4 shrink-0" strokeWidth={1.75} aria-hidden="true" />
+                  Scan
+                </a>
+              )}
+              <Link
+                href={`/admin/judging/${hackathon.id}`}
+                className={btnSecondary}
+              >
+                <Gavel className="w-4 h-4 shrink-0" strokeWidth={1.75} aria-hidden="true" />
+                Judging
+              </Link>
+              <button
+                type="button"
+                onClick={() => setEditing(true)}
+                disabled={readOnly}
+                title={readOnly ? READ_ONLY_TITLE : undefined}
+                className={btnSecondary}
+              >
+                Edit
+              </button>
+            </div>
+          </div>
+
+          {/* DESKTOP TABS - Hidden on mobile */}
+          <div className={`hidden md:flex mt-6 ${tabList}`}>
+            {tabs.map((tab) => (
+              <a
+                key={tab.id}
+                href={`#${tab.id}`}
+                aria-current={activeTab === tab.id ? "page" : undefined}
+                className={`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${tabClass(activeTab === tab.id)}`}
+              >
+                {tab.label}
+              </a>
+            ))}
+          </div>
+        </div>
+      </header>
+
+      {/* MAIN CONTENT AREA */}
+      <main className="flex-1 px-4 py-6 md:py-8 min-h-[calc(100vh-200px)]">
+        <div className="max-w-7xl mx-auto w-full">
+          {activeTab === "events" && <EventsTab hackathonId={hackathon.id} />}
+          {activeTab === "scanner" && <ScannerTab hackathonId={hackathon.id} />}
+          {activeTab === "attendees" && (
+            <AttendeesTab
+              hackathonId={hackathon.id}
+              hackathonName={hackathon.name}
+              status={hackathon.status}
+            />
+          )}
+          {activeTab === "analytics" && (
+            <AnalyticsTab hackathonId={hackathon.id} />
+          )}
+          {activeTab === "judges" && <JudgesTab hackathonId={hackathon.id} />}
+          {activeTab === "points" && (
+            <PointsAdminTab hackathonId={hackathon.id} />
+          )}
+          {activeTab === "store" && <StoreTab hackathonId={hackathon.id} />}
+          {activeTab === "announcements" && (
+            <AnnouncementsTab
+              hackathonId={hackathon.id}
+              status={hackathon.status}
+            />
+          )}
+        </div>
+      </main>
+
+      {/* MOBILE BOTTOM NAVIGATION */}
+      {/* Scrolls horizontally rather than a fixed 5-column grid: there are
+          eight tabs, so the last ones would be laid out off the right edge of
+          the phone an organiser actually carries — unreachable, with nothing
+          to suggest they existed. */}
+      <div className="md:hidden fixed bottom-0 left-0 right-0 bg-[var(--bg-primary)] border-t border-[var(--border-subtle)] z-40 flex overflow-x-auto pb-safe [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+        {tabs.map((tab) => (
+          <a
+            key={tab.id}
+            href={`#${tab.id}`}
+            aria-current={activeTab === tab.id ? "page" : undefined}
+            className={`shrink-0 basis-1/5 flex flex-col items-center justify-center gap-1 border-t-2 -mt-px py-3 transition-colors ${
+              activeTab === tab.id
+                ? "border-accent text-[var(--text-primary)] font-semibold"
+                : "border-transparent text-[var(--text-muted)]"
+            }`}
+          >
+            {tab.icon}
+            <span className="text-[12px]">{tab.label}</span>
+          </a>
+        ))}
+      </div>
+
+      {editing && (
+        <EditHackathonForm
+          hackathonId={hackathon.id}
+          onClose={() => setEditing(false)}
+          onSaved={finishEdit}
+        />
+      )}
+    </div>
+  );
+}
+
+function DashboardUnavailable({
+  message,
+  onRetry,
+}: {
+  message: string;
+  onRetry?: () => void;
+}) {
+  return (
+    <div className="min-h-screen bg-[var(--bg-primary)] flex items-center justify-center p-6">
+      <div className="w-full max-w-md">
+        <h1 className={sectionTitle}>Hackathon unavailable</h1>
+        <p className={`mt-3 break-words ${body}`}>{message}</p>
+        <div className="mt-8 flex flex-col sm:flex-row gap-3">
+          {onRetry && (
+            <button type="button" onClick={onRetry} className={btnPrimary}>
+              Try again
+            </button>
+          )}
+          <Link href="/admin/hackathons" className={btnSecondary}>
+            Back to hackathons
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/admin/hackathons/[id]/page.tsx b/sites/mainweb/app/(portal)/admin/hackathons/[id]/page.tsx
index cafb6440..ec8ad6e8 100644
--- a/sites/mainweb/app/(portal)/admin/hackathons/[id]/page.tsx
+++ b/sites/mainweb/app/(portal)/admin/hackathons/[id]/page.tsx
@@ -1,327 +1,46 @@
-"use client";
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import { decodeHackathonParam } from "@/lib/hackathon-slug";
+import AdminHackathonDashboard from "./AdminHackathonPage";
 
-import { useSession } from "next-auth/react";
-import { trpc } from "@/lib/trpc";
-import {
-  READ_ONLY_TITLE,
-  canViewAdmin,
-  usePortalContext,
-  useReadOnly,
-} from "@/lib/use-portal-context";
-import { useParams, useRouter } from "next/navigation";
-import { useState, useSyncExternalStore } from "react";
-import Link from "next/link";
-import { adminHackathonPath, decodeHackathonParam } from "@/lib/hackathon-slug";
-import { LoadingScreen } from "@/components/portal/LoadingScreen";
-import { EditHackathonForm } from "@/components/admin/hackathons/EditHackathonForm";
-import { ScannerTab } from "@/components/admin/hackathons/ScannerTab";
-import { AttendeesTab } from "@/components/admin/hackathons/AttendeesTab";
-import { AnalyticsTab } from "@/components/admin/hackathons/AnalyticsTab";
-import { EventsTab } from "@/components/admin/hackathons/EventsTab";
-import { JudgesTab } from "@/components/admin/hackathons/JudgesTab";
-import { AnnouncementsTab } from "@/components/admin/hackathons/AnnouncementsTab";
-import { PointsAdminTab } from "@/components/admin/hackathons/points/PointsAdminTab";
-import { StoreTab } from "@/components/admin/hackathons/points/StoreTab";
-import {
-  body,
-  btnPrimary,
-  btnSecondary,
-  sectionTitle,
-  tab as tabClass,
-  tabList,
-} from "@/components/portal/ui";
-import {
-  BarChart3,
-  Calendar,
-  Coins,
-  Gavel,
-  Megaphone,
-  ScanLine,
-  Store,
-  Users,
-} from "lucide-react";
+// The Applications tab is what the dashboard opens on; a link to another tab
+// carries it in the hash, which the server never sees, so that tab fetches for
+// itself as before.
+const PAGE_SIZE = 50;
 
-const TABS = [
-  "events",
-  "scanner",
-  "attendees",
-  "analytics",
-  "judges",
-  "points",
-  "store",
-  "announcements",
-] as const;
-
-type Tab = (typeof TABS)[number];
-
-// The tab lives in the URL hash, like the judging console: a reload, a pasted
-// link and the schedule links on the hackathons list (#events) land on the
-// tab the organiser meant instead of Applications.
-const subscribeHash = (onChange: () => void) => {
-  window.addEventListener("hashchange", onChange);
-  return () => window.removeEventListener("hashchange", onChange);
-};
-
-function useTab(): Tab {
-  const hash = useSyncExternalStore(
-    subscribeHash,
-    () => window.location.hash.slice(1),
-    () => "",
-  );
-  return TABS.find((t) => t === hash) ?? "attendees";
-}
-
-export default function AdminHackathonDashboard() {
-  const { status } = useSession();
-  const params = useParams();
-  const router = useRouter();
-  const utils = trpc.useUtils();
-  const readOnly = useReadOnly();
-  const rawId = params?.id;
-  const hackathonId = decodeHackathonParam(
-    Array.isArray(rawId) ? (rawId[0] ?? "") : ((rawId as string | undefined) ?? ""),
-  );
-  const activeTab = useTab();
-  const [editing, setEditing] = useState(false);
-
-  const { data: portalContext, isLoading: portalLoading } = usePortalContext();
-  const {
-    data: hackathon,
-    isLoading,
-    error,
-    refetch,
-  } = trpc.hackathon.getById.useQuery(
-    { id: hackathonId },
-    { enabled: !!hackathonId && canViewAdmin(portalContext) },
-  );
-
-  // isLoading is false on the render where the query flips enabled but has not
-  // started fetching, and it is false again once the query has errored. Both
-  // used to fall through to a bare `return null`, which paints the dashboard as
-  // an unexplained black screen instead of a spinner or the actual failure.
-  const settled = !!hackathon || !!error;
-
-  if (status === "loading" || portalLoading) {
-    return <LoadingScreen message="Loading…" />;
-  }
-
-  // Not found rather than a permission error: telling a non-admin that this
-  // edition exists behind a door they cannot open is the whole leak, and the
-  // query is disabled for them anyway, so waiting on it spun forever.
-  if (!canViewAdmin(portalContext)) {
-    return <DashboardUnavailable message="Hackathon not found" />;
-  }
-
-  if (isLoading || !settled) {
-    return <LoadingScreen message="Loading…" />;
-  }
-
-  if (!hackathon) {
-    return (
-      <DashboardUnavailable
-        message={error?.message ?? "Hackathon not found"}
-        onRetry={() => refetch()}
-      />
-    );
-  }
-
-  // A rename moves the dashboard to a new slug and the old one stops
-  // resolving, so follow the row to its new path instead of landing on
-  // "Hackathon not found" the moment the save succeeds.
-  const finishEdit = async () => {
-    setEditing(false);
-    utils.hackathon.listAll.invalidate();
-    try {
-      const fresh = await utils.hackathon.getById.fetch(
-        { id: hackathon.id },
-        { staleTime: 0 },
-      );
-      const next = adminHackathonPath(fresh.name, fresh.id);
-      if (next !== window.location.pathname) {
-        router.replace(`${next}${window.location.hash}`);
-        return;
-      }
-    } catch {
-      // Fall through: the invalidation below surfaces the failure on the page.
-    }
-    utils.hackathon.getById.invalidate();
-  };
-
-  const icon = { className: "w-4 h-4", strokeWidth: 1.75, "aria-hidden": true } as const;
-  const tabs: { id: Tab; label: string; icon: React.ReactNode }[] = [
-    {
-      id: "attendees",
-      label: "Applications",
-      icon: <Users {...icon} />,
-    },
-    {
-      id: "events",
-      label: "Events",
-      icon: <Calendar {...icon} />,
-    },
-    { id: "scanner", label: "Scan", icon: <ScanLine {...icon} /> },
-    {
-      id: "analytics",
-      label: "Stats",
-      icon: <BarChart3 {...icon} />,
-    },
-    { id: "judges", label: "Judges", icon: <Gavel {...icon} /> },
-    { id: "points", label: "Points", icon: <Coins {...icon} /> },
-    { id: "store", label: "Store", icon: <Store {...icon} /> },
-    {
-      id: "announcements",
-      label: "Email",
-      icon: <Megaphone {...icon} />,
-    },
-  ];
-
-  return (
-    <div className="relative min-h-screen bg-[var(--bg-primary)] text-[var(--text-muted)] flex flex-col pb-32 md:pb-12">
-      <header className="relative sticky top-0 z-30 bg-[var(--bg-primary)] border-b border-[var(--border-subtle)] md:border-b-0">
-        <div className="max-w-7xl mx-auto px-4 pt-4 pb-4 md:pb-0">
-          <div className="flex items-end justify-between gap-4">
-            <div className="flex-1 min-w-0">
-              <Link
-                href="/admin/hackathons"
-                className="text-[13px] text-[var(--text-subtle)] hover:text-[var(--text-primary)] transition-colors"
-                aria-label="Back to hackathons hub"
-              >
-                ← <span className="hidden md:inline">All hackathons</span>
-              </Link>
-              <h1 className="mt-2 truncate font-[family-name:var(--font-display)] text-[28px] md:text-[40px] font-semibold leading-tight tracking-[-0.02em] text-[var(--text-primary)]">
-                {hackathon.name}
-              </h1>
-            </div>
-            <div className="flex flex-wrap items-center gap-2">
-              {["scanner", "attendees"].includes(activeTab) && (
-                // ScannerTab is rendered on this page; there is no
-                // /admin/hackathons/[id]/scanner route to link to.
-                <a href="#scanner" className={btnSecondary}>
-                  <ScanLine className="w-4 h-4 shrink-0" strokeWidth={1.75} aria-hidden="true" />
-                  Scan
-                </a>
-              )}
-              <Link
-                href={`/admin/judging/${hackathon.id}`}
-                className={btnSecondary}
-              >
-                <Gavel className="w-4 h-4 shrink-0" strokeWidth={1.75} aria-hidden="true" />
-                Judging
-              </Link>
-              <button
-                type="button"
-                onClick={() => setEditing(true)}
-                disabled={readOnly}
-                title={readOnly ? READ_ONLY_TITLE : undefined}
-                className={btnSecondary}
-              >
-                Edit
-              </button>
-            </div>
-          </div>
-
-          {/* DESKTOP TABS - Hidden on mobile */}
-          <div className={`hidden md:flex mt-6 ${tabList}`}>
-            {tabs.map((tab) => (
-              <a
-                key={tab.id}
-                href={`#${tab.id}`}
-                aria-current={activeTab === tab.id ? "page" : undefined}
-                className={`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${tabClass(activeTab === tab.id)}`}
-              >
-                {tab.label}
-              </a>
-            ))}
-          </div>
-        </div>
-      </header>
-
-      {/* MAIN CONTENT AREA */}
-      <main className="flex-1 px-4 py-6 md:py-8 min-h-[calc(100vh-200px)]">
-        <div className="max-w-7xl mx-auto w-full">
-          {activeTab === "events" && <EventsTab hackathonId={hackathon.id} />}
-          {activeTab === "scanner" && <ScannerTab hackathonId={hackathon.id} />}
-          {activeTab === "attendees" && (
-            <AttendeesTab
-              hackathonId={hackathon.id}
-              hackathonName={hackathon.name}
-              status={hackathon.status}
-            />
-          )}
-          {activeTab === "analytics" && (
-            <AnalyticsTab hackathonId={hackathon.id} />
-          )}
-          {activeTab === "judges" && <JudgesTab hackathonId={hackathon.id} />}
-          {activeTab === "points" && (
-            <PointsAdminTab hackathonId={hackathon.id} />
-          )}
-          {activeTab === "store" && <StoreTab hackathonId={hackathon.id} />}
-          {activeTab === "announcements" && (
-            <AnnouncementsTab
-              hackathonId={hackathon.id}
-              status={hackathon.status}
-            />
-          )}
-        </div>
-      </main>
-
-      {/* MOBILE BOTTOM NAVIGATION */}
-      {/* Scrolls horizontally rather than a fixed 5-column grid: there are
-          eight tabs, so the last ones would be laid out off the right edge of
-          the phone an organiser actually carries — unreachable, with nothing
-          to suggest they existed. */}
-      <div className="md:hidden fixed bottom-0 left-0 right-0 bg-[var(--bg-primary)] border-t border-[var(--border-subtle)] z-40 flex overflow-x-auto pb-safe [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-        {tabs.map((tab) => (
-          <a
-            key={tab.id}
-            href={`#${tab.id}`}
-            aria-current={activeTab === tab.id ? "page" : undefined}
-            className={`shrink-0 basis-1/5 flex flex-col items-center justify-center gap-1 border-t-2 -mt-px py-3 transition-colors ${
-              activeTab === tab.id
-                ? "border-accent text-[var(--text-primary)] font-semibold"
-                : "border-transparent text-[var(--text-muted)]"
-            }`}
-          >
-            {tab.icon}
-            <span className="text-[12px]">{tab.label}</span>
-          </a>
-        ))}
-      </div>
-
-      {editing && (
-        <EditHackathonForm
-          hackathonId={hackathon.id}
-          onClose={() => setEditing(false)}
-          onSaved={finishEdit}
-        />
-      )}
-    </div>
-  );
-}
-
-function DashboardUnavailable({
-  message,
-  onRetry,
+export default async function Page({
+  params,
 }: {
-  message: string;
-  onRetry?: () => void;
+  params: Promise<{ id: string }>;
 }) {
+  const id = decodeHackathonParam((await params).id);
   return (
-    <div className="min-h-screen bg-[var(--bg-primary)] flex items-center justify-center p-6">
-      <div className="w-full max-w-md">
-        <h1 className={sectionTitle}>Hackathon unavailable</h1>
-        <p className={`mt-3 break-words ${body}`}>{message}</p>
-        <div className="mt-8 flex flex-col sm:flex-row gap-3">
-          {onRetry && (
-            <button type="button" onClick={onRetry} className={btnPrimary}>
-              Try again
-            </button>
-          )}
-          <Link href="/admin/hackathons" className={btnSecondary}>
-            Back to hackathons
-          </Link>
-        </div>
-      </div>
-    </div>
+    <PrefetchedPage
+      reads={async (c) => {
+        const hackathon = c.hackathon.getById({ id });
+        const found = await hackathon.catch(() => null);
+        if (!found) return [["hackathon.getById", { id }, hackathon]];
+        const hackathonId = found.id;
+        return [
+          ["hackathon.getById", { id }, hackathon],
+          ["hackathon.getById", { id: hackathonId }, hackathon],
+          [
+            "hackathon.adminGetAttendees",
+            { hackathonId, limit: PAGE_SIZE, offset: 0 },
+            c.hackathon.adminGetAttendees({
+              hackathonId,
+              limit: PAGE_SIZE,
+              offset: 0,
+            }),
+          ],
+          [
+            "hackathon.analytics",
+            { hackathonId },
+            c.hackathon.analytics({ hackathonId }),
+          ],
+        ];
+      }}
+    >
+      <AdminHackathonDashboard />
+    </PrefetchedPage>
   );
 }
diff --git a/sites/mainweb/components/admin/hackathons/AttendeesTab.tsx b/sites/mainweb/components/admin/hackathons/AttendeesTab.tsx
index 523026d3..658212ef 100644
--- a/sites/mainweb/components/admin/hackathons/AttendeesTab.tsx
+++ b/sites/mainweb/components/admin/hackathons/AttendeesTab.tsx
@@ -49,6 +49,11 @@ import { AttendeeStats } from "./AttendeeStats";
 import { StatusBadge } from "@/components/hackathon/StatusBadge";
 import type { RegistrationStatus } from "./attendee-status";
 import type { HackathonStatus } from "./constants";
+import { venueFormat } from "@/lib/venue-time";
+import { useIsClient } from "@/lib/use-is-client";
+
+// What toLocaleString() prints in en-US, on the venue's clock.
+const DATE_TIME = { year: "numeric", month: "numeric", day: "numeric", hour: "numeric", minute: "2-digit", second: "2-digit" } as const;
 
 export function AttendeesTab({
   hackathonId,
@@ -61,6 +66,7 @@ export function AttendeesTab({
 }) {
   const utils = trpc.useUtils();
   const readOnly = useReadOnly();
+  const isClient = useIsClient();
 
   const [page, setPage] = useState(0);
   const [searchQuery, setSearchQuery] = useState("");
@@ -497,7 +503,11 @@ export function AttendeesTab({
 
   return (
     <div className="space-y-8">
-      <RegistrationControls hackathonId={hackathonId} status={status} />
+      {/* Its deadline and inputs are in the organiser's own time zone, which
+          the server does not know: drawn after hydration so both agree. */}
+      {isClient && (
+        <RegistrationControls hackathonId={hackathonId} status={status} />
+      )}
 
       {announced ? (
         <section className={sectionRule}>
@@ -855,9 +865,7 @@ export function AttendeesTab({
                           {attendee.attendanceConfirmedAt ? (
                             <span
                               className={statusPill("success")}
-                              title={new Date(
-                                attendee.attendanceConfirmedAt,
-                              ).toLocaleString()}
+                              title={venueFormat(attendee.attendanceConfirmedAt, DATE_TIME)}
                             >
                               Confirmed
                             </span>
@@ -880,13 +888,9 @@ export function AttendeesTab({
                       {attendee.acceptanceEmailSentAt ? (
                         <span
                           className="tabular-nums text-[var(--text-muted)]"
-                          title={new Date(
-                            attendee.acceptanceEmailSentAt,
-                          ).toLocaleString()}
+                          title={venueFormat(attendee.acceptanceEmailSentAt, DATE_TIME)}
                         >
-                          {new Date(
-                            attendee.acceptanceEmailSentAt,
-                          ).toLocaleDateString()}
+                          {venueFormat(attendee.acceptanceEmailSentAt)}
                         </span>
                       ) : attendee.registrationStatus === "approved" ? (
                         <span className={statusPill("warning")}>
@@ -919,7 +923,7 @@ export function AttendeesTab({
                         )
                       }
                     >
-                      {new Date(attendee.registeredAt).toLocaleDateString()}
+                      {venueFormat(attendee.registeredAt)}
                     </td>
                     <td
                       className="px-3 py-3 text-right"

From da9f8dcc6ab5a0f752dd7cad6afa3ebc6ae26316 Mon Sep 17 00:00:00 2001
From: aamoghS <aamoghsawantt@gmail.com>
Date: Fri, 6 Nov 2026 12:39:30 -0500
Subject: [PATCH 6/9] perf(mainweb): prefetch the admin judging list and an
 edition's console

The edition console waited on the overview and then the checklist. Server
pages read the edition list, the overview and the checklist. shortTime moves
to the venue clock so server and browser print the same times. Cold load
median of 5: /admin/judging 560 to 365 ms, an edition 963 to 495.
---
 .../admin/judging/AdminJudgingPage.tsx        |  97 +++++++
 .../[hackathonId]/AdminEditionJudgingPage.tsx | 220 ++++++++++++++++
 .../admin/judging/[hackathonId]/page.tsx      | 242 ++----------------
 .../app/(portal)/admin/judging/page.tsx       | 102 +-------
 .../components/admin/judging/shared.tsx       |   3 +-
 5 files changed, 354 insertions(+), 310 deletions(-)
 create mode 100644 sites/mainweb/app/(portal)/admin/judging/AdminJudgingPage.tsx
 create mode 100644 sites/mainweb/app/(portal)/admin/judging/[hackathonId]/AdminEditionJudgingPage.tsx

diff --git a/sites/mainweb/app/(portal)/admin/judging/AdminJudgingPage.tsx b/sites/mainweb/app/(portal)/admin/judging/AdminJudgingPage.tsx
new file mode 100644
index 00000000..8917f061
--- /dev/null
+++ b/sites/mainweb/app/(portal)/admin/judging/AdminJudgingPage.tsx
@@ -0,0 +1,97 @@
+"use client";
+
+import { venueFormat } from "@/lib/venue-time";
+import Link from "next/link";
+import { ChevronRight } from "lucide-react";
+import { trpc } from "@/lib/trpc";
+import { hackathonStatus } from "@/lib/hackathon-status";
+import {
+  body,
+  itemTitle,
+  meta,
+  pageDek,
+  sectionRule,
+  status,
+  textLink,
+} from "@/components/portal/ui";
+
+// Judging is run per edition. AdminLayout gates this page to staff.
+export default function AdminJudgingPage() {
+  const { data: hackathons, isLoading, isError, refetch } =
+    trpc.hackathon.list.useQuery({ limit: 50 });
+
+  return (
+    <div className="max-w-3xl mx-auto">
+      <header className="mb-8">
+        <h1 className="font-[family-name:var(--font-display)] text-[32px] md:text-[40px] font-semibold leading-tight tracking-[-0.02em] text-[var(--text-primary)]">
+          Judging
+        </h1>
+        <p className={pageDek}>
+          Pick an edition to open its judging console: projects, challenges,
+          rooms, the schedule, launch and results. Each edition&apos;s judge
+          roster is on its hackathon page, under Judges.
+        </p>
+      </header>
+
+      <section className={sectionRule}>
+        {isLoading ? (
+          <p className={body}>Loading editions…</p>
+        ) : isError ? (
+          <p className={body}>
+            Could not load the editions.{" "}
+            <button
+              type="button"
+              onClick={() => refetch()}
+              className={textLink}
+            >
+              Try again
+            </button>
+          </p>
+        ) : !hackathons || hackathons.length === 0 ? (
+          <p className={body}>
+            No editions yet. Create one from{" "}
+            <Link
+              href="/admin/hackathons"
+              className={textLink}
+            >
+              Hackathons
+            </Link>{" "}
+            first.
+          </p>
+        ) : (
+          <ul className="border-t border-[var(--border-subtle)]">
+            {hackathons.map((h) => {
+              const conf = hackathonStatus(h.status);
+              return (
+                <li key={h.id} className="border-b border-[var(--border-subtle)]">
+                  <Link
+                    href={`/admin/judging/${h.id}`}
+                    className="flex items-center gap-4 py-4 min-h-11 hover:bg-[var(--bg-secondary)] transition-colors"
+                  >
+                    <div className="flex-1 min-w-0">
+                      <p className={`${itemTitle} truncate`}>{h.name}</p>
+                      <p className={`mt-1 ${meta}`}>
+                        <span className={status(conf.tone)}>{conf.label}</span>
+                        {" · "}
+                        {venueFormat(h.startDate, {
+                          month: "short",
+                          day: "numeric",
+                          year: "numeric",
+                        })}
+                      </p>
+                    </div>
+                    <ChevronRight
+                      className="h-4 w-4 shrink-0 text-[var(--text-subtle)]"
+                      strokeWidth={1.75}
+                      aria-hidden="true"
+                    />
+                  </Link>
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </section>
+    </div>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/admin/judging/[hackathonId]/AdminEditionJudgingPage.tsx b/sites/mainweb/app/(portal)/admin/judging/[hackathonId]/AdminEditionJudgingPage.tsx
new file mode 100644
index 00000000..7a1dc58b
--- /dev/null
+++ b/sites/mainweb/app/(portal)/admin/judging/[hackathonId]/AdminEditionJudgingPage.tsx
@@ -0,0 +1,220 @@
+"use client";
+
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { useEffect, useRef, useSyncExternalStore } from "react";
+import { trpc } from "@/lib/trpc";
+import { trpcErrorMessage } from "@/lib/trpc-error";
+import {
+  body,
+  btnSecondary,
+  kicker,
+  meta,
+  status,
+  tab,
+  tabList,
+} from "@/components/portal/ui";
+import type { Tone } from "@/components/portal/ui";
+import {
+  OFFICER_POLL_MS,
+  SECTIONS,
+  plural,
+  stationCount,
+} from "@/components/admin/judging/shared";
+import type { Overview, SectionId } from "@/components/admin/judging/shared";
+import { ChecklistSection } from "@/components/admin/judging/ChecklistSection";
+import { ProjectsSection } from "@/components/admin/judging/ProjectsSection";
+import { ChallengesSection } from "@/components/admin/judging/ChallengesSection";
+import { RoomsSection } from "@/components/admin/judging/RoomsSection";
+import { RubricSection } from "@/components/admin/judging/RubricSection";
+import { LaunchSection } from "@/components/admin/judging/LaunchSection";
+import { AnnouncementsSection } from "@/components/admin/judging/AnnouncementsSection";
+import { RepoCheckSection } from "@/components/admin/judging/RepoCheckSection";
+import { DangerZone } from "@/components/admin/judging/DangerZone";
+import { ScheduleTab as JudgingSchedule } from "@/components/admin/judging/schedule/ScheduleTab";
+import { ClaimsPanel as JudgingClaims } from "@/components/admin/judging/claims/ClaimsPanel";
+import { ResultsTab as JudgingResults } from "@/components/admin/judging/results/ResultsTab";
+
+// One edition's judging console. The section lives in the URL hash so the
+// checklist can link straight to the part that needs work and a reload keeps
+// the organiser where they were. AdminLayout gates this page to staff.
+
+const subscribeHash = (onChange: () => void) => {
+  window.addEventListener("hashchange", onChange);
+  return () => window.removeEventListener("hashchange", onChange);
+};
+
+function useSection(): SectionId {
+  const hash = useSyncExternalStore(
+    subscribeHash,
+    () => window.location.hash.slice(1),
+    () => "",
+  );
+  return SECTIONS.find((s) => s.id === hash)?.id ?? "checklist";
+}
+
+const STATE: Record<Overview["config"]["state"], { label: string; tone: Tone }> =
+  {
+    draft: { label: "Draft", tone: "neutral" },
+    open: { label: "Open", tone: "success" },
+    closed: { label: "Closed", tone: "warning" },
+  };
+
+export default function AdminEditionJudgingPage() {
+  const params = useParams<{ hackathonId: string }>();
+  const hackathonId = params?.hackathonId ?? "";
+  const section = useSection();
+
+  const overview = trpc.judging.admin.overview.useQuery(
+    { hackathonId },
+    { enabled: !!hackathonId, refetchInterval: OFFICER_POLL_MS },
+  );
+
+  // Switching from far down a long section leaves the new one scrolled out of
+  // sight on a phone; bring its top back into view.
+  const contentRef = useRef<HTMLDivElement>(null);
+  const shown = useRef(section);
+  useEffect(() => {
+    if (shown.current === section) return;
+    shown.current = section;
+    const top = contentRef.current?.getBoundingClientRect().top ?? 0;
+    if (top < 0) contentRef.current?.scrollIntoView({ block: "start" });
+  }, [section]);
+
+  const data = overview.data;
+
+  return (
+    <div className="max-w-6xl mx-auto">
+      <Link
+        href="/admin/judging"
+        className="text-[13px] text-[var(--text-subtle)] hover:text-[var(--text-primary)] transition-colors"
+      >
+        ← All editions
+      </Link>
+      <header className="mt-4 mb-8">
+        {data && <p className={`${kicker} mb-2`}>{data.hackathon.name}</p>}
+        <h1 className="font-[family-name:var(--font-display)] text-[32px] md:text-[40px] font-semibold leading-tight tracking-[-0.02em] text-[var(--text-primary)]">
+          Judging
+        </h1>
+        {data ? (
+          <p
+            className={`mt-3 flex flex-wrap items-center gap-x-3 gap-y-1 ${meta}`}
+          >
+            <span className={status(STATE[data.config.state].tone)}>
+              Judging {STATE[data.config.state].label.toLowerCase()}
+            </span>
+            <span>
+              {plural(
+                data.counts.entries.devpost + data.counts.entries.portal,
+                "project",
+              )}
+            </span>
+            <span>
+              {stationCount(data.counts.rooms.active, data.counts.rooms.tables)}
+            </span>
+            <span>{plural(data.counts.judgesSeated, "judge")} seated</span>
+            {data.counts.checkInFlags.open > 0 && (
+              <span className={status("warning")}>
+                {plural(data.counts.checkInFlags.open, "open check-in flag")}
+              </span>
+            )}
+            {data.config.emergencyMode && (
+              <span className={status("danger")}>Emergency mode on</span>
+            )}
+          </p>
+        ) : null}
+      </header>
+
+      {overview.isLoading ? (
+        <p className={body}>Loading the edition…</p>
+      ) : overview.isError || !data ? (
+        <div className="space-y-4">
+          <p className={body}>
+            {trpcErrorMessage(overview.error, "Could not load this edition.")}
+          </p>
+          <div className="flex flex-wrap gap-3">
+            <button
+              type="button"
+              onClick={() => overview.refetch()}
+              className={btnSecondary}
+            >
+              Try again
+            </button>
+            <Link href="/admin/judging" className={btnSecondary}>
+              Pick another edition
+            </Link>
+          </div>
+        </div>
+      ) : (
+        <div className="lg:grid lg:grid-cols-[200px_minmax(0,1fr)] lg:gap-12">
+          <nav aria-label="Judging console">
+            <div className={`lg:hidden mb-8 ${tabList}`}>
+              {SECTIONS.map((s) => (
+                <a
+                  key={s.id}
+                  href={`#${s.id}`}
+                  aria-current={section === s.id ? "page" : undefined}
+                  className={tab(section === s.id)}
+                >
+                  {s.label}
+                </a>
+              ))}
+            </div>
+            <ul className="hidden lg:block sticky top-6 border-l border-[var(--border-subtle)]">
+              {SECTIONS.map((s) => (
+                <li key={s.id}>
+                  <a
+                    href={`#${s.id}`}
+                    aria-current={section === s.id ? "page" : undefined}
+                    className={`-ml-px flex min-h-9 items-center border-l-2 pl-4 text-sm transition-colors ${
+                      section === s.id
+                        ? "border-accent font-semibold text-[var(--text-primary)]"
+                        : "border-transparent text-[var(--text-muted)] hover:text-[var(--text-primary)]"
+                    }`}
+                  >
+                    {s.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+
+          <div ref={contentRef} className="min-w-0 scroll-mt-6">
+            {section === "checklist" && (
+              <ChecklistSection hackathonId={hackathonId} overview={data} />
+            )}
+            {section === "projects" && (
+              <ProjectsSection hackathonId={hackathonId} overview={data} />
+            )}
+            {section === "challenges" && (
+              <ChallengesSection hackathonId={hackathonId} overview={data} />
+            )}
+            {section === "rooms" && (
+              <RoomsSection hackathonId={hackathonId} overview={data} />
+            )}
+            {section === "rubric" && <RubricSection hackathonId={hackathonId} />}
+            {section === "launch" && (
+              <LaunchSection hackathonId={hackathonId} overview={data} />
+            )}
+            {section === "schedule" && (
+              <JudgingSchedule hackathonId={hackathonId} />
+            )}
+            {section === "claims" && <JudgingClaims hackathonId={hackathonId} />}
+            {section === "results" && (
+              <JudgingResults hackathonId={hackathonId} />
+            )}
+            {section === "repo-check" && (
+              <RepoCheckSection hackathonId={hackathonId} />
+            )}
+            {section === "announcements" && (
+              <AnnouncementsSection hackathonId={hackathonId} />
+            )}
+            {section === "danger" && (
+              <DangerZone hackathonId={hackathonId} overview={data} />
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/admin/judging/[hackathonId]/page.tsx b/sites/mainweb/app/(portal)/admin/judging/[hackathonId]/page.tsx
index 7a1dc58b..0e9928cb 100644
--- a/sites/mainweb/app/(portal)/admin/judging/[hackathonId]/page.tsx
+++ b/sites/mainweb/app/(portal)/admin/judging/[hackathonId]/page.tsx
@@ -1,220 +1,28 @@
-"use client";
-
-import Link from "next/link";
-import { useParams } from "next/navigation";
-import { useEffect, useRef, useSyncExternalStore } from "react";
-import { trpc } from "@/lib/trpc";
-import { trpcErrorMessage } from "@/lib/trpc-error";
-import {
-  body,
-  btnSecondary,
-  kicker,
-  meta,
-  status,
-  tab,
-  tabList,
-} from "@/components/portal/ui";
-import type { Tone } from "@/components/portal/ui";
-import {
-  OFFICER_POLL_MS,
-  SECTIONS,
-  plural,
-  stationCount,
-} from "@/components/admin/judging/shared";
-import type { Overview, SectionId } from "@/components/admin/judging/shared";
-import { ChecklistSection } from "@/components/admin/judging/ChecklistSection";
-import { ProjectsSection } from "@/components/admin/judging/ProjectsSection";
-import { ChallengesSection } from "@/components/admin/judging/ChallengesSection";
-import { RoomsSection } from "@/components/admin/judging/RoomsSection";
-import { RubricSection } from "@/components/admin/judging/RubricSection";
-import { LaunchSection } from "@/components/admin/judging/LaunchSection";
-import { AnnouncementsSection } from "@/components/admin/judging/AnnouncementsSection";
-import { RepoCheckSection } from "@/components/admin/judging/RepoCheckSection";
-import { DangerZone } from "@/components/admin/judging/DangerZone";
-import { ScheduleTab as JudgingSchedule } from "@/components/admin/judging/schedule/ScheduleTab";
-import { ClaimsPanel as JudgingClaims } from "@/components/admin/judging/claims/ClaimsPanel";
-import { ResultsTab as JudgingResults } from "@/components/admin/judging/results/ResultsTab";
-
-// One edition's judging console. The section lives in the URL hash so the
-// checklist can link straight to the part that needs work and a reload keeps
-// the organiser where they were. AdminLayout gates this page to staff.
-
-const subscribeHash = (onChange: () => void) => {
-  window.addEventListener("hashchange", onChange);
-  return () => window.removeEventListener("hashchange", onChange);
-};
-
-function useSection(): SectionId {
-  const hash = useSyncExternalStore(
-    subscribeHash,
-    () => window.location.hash.slice(1),
-    () => "",
-  );
-  return SECTIONS.find((s) => s.id === hash)?.id ?? "checklist";
-}
-
-const STATE: Record<Overview["config"]["state"], { label: string; tone: Tone }> =
-  {
-    draft: { label: "Draft", tone: "neutral" },
-    open: { label: "Open", tone: "success" },
-    closed: { label: "Closed", tone: "warning" },
-  };
-
-export default function AdminEditionJudgingPage() {
-  const params = useParams<{ hackathonId: string }>();
-  const hackathonId = params?.hackathonId ?? "";
-  const section = useSection();
-
-  const overview = trpc.judging.admin.overview.useQuery(
-    { hackathonId },
-    { enabled: !!hackathonId, refetchInterval: OFFICER_POLL_MS },
-  );
-
-  // Switching from far down a long section leaves the new one scrolled out of
-  // sight on a phone; bring its top back into view.
-  const contentRef = useRef<HTMLDivElement>(null);
-  const shown = useRef(section);
-  useEffect(() => {
-    if (shown.current === section) return;
-    shown.current = section;
-    const top = contentRef.current?.getBoundingClientRect().top ?? 0;
-    if (top < 0) contentRef.current?.scrollIntoView({ block: "start" });
-  }, [section]);
-
-  const data = overview.data;
-
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import AdminEditionJudgingPage from "./AdminEditionJudgingPage";
+
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ hackathonId: string }>;
+}) {
+  const { hackathonId } = await params;
   return (
-    <div className="max-w-6xl mx-auto">
-      <Link
-        href="/admin/judging"
-        className="text-[13px] text-[var(--text-subtle)] hover:text-[var(--text-primary)] transition-colors"
-      >
-        ← All editions
-      </Link>
-      <header className="mt-4 mb-8">
-        {data && <p className={`${kicker} mb-2`}>{data.hackathon.name}</p>}
-        <h1 className="font-[family-name:var(--font-display)] text-[32px] md:text-[40px] font-semibold leading-tight tracking-[-0.02em] text-[var(--text-primary)]">
-          Judging
-        </h1>
-        {data ? (
-          <p
-            className={`mt-3 flex flex-wrap items-center gap-x-3 gap-y-1 ${meta}`}
-          >
-            <span className={status(STATE[data.config.state].tone)}>
-              Judging {STATE[data.config.state].label.toLowerCase()}
-            </span>
-            <span>
-              {plural(
-                data.counts.entries.devpost + data.counts.entries.portal,
-                "project",
-              )}
-            </span>
-            <span>
-              {stationCount(data.counts.rooms.active, data.counts.rooms.tables)}
-            </span>
-            <span>{plural(data.counts.judgesSeated, "judge")} seated</span>
-            {data.counts.checkInFlags.open > 0 && (
-              <span className={status("warning")}>
-                {plural(data.counts.checkInFlags.open, "open check-in flag")}
-              </span>
-            )}
-            {data.config.emergencyMode && (
-              <span className={status("danger")}>Emergency mode on</span>
-            )}
-          </p>
-        ) : null}
-      </header>
-
-      {overview.isLoading ? (
-        <p className={body}>Loading the edition…</p>
-      ) : overview.isError || !data ? (
-        <div className="space-y-4">
-          <p className={body}>
-            {trpcErrorMessage(overview.error, "Could not load this edition.")}
-          </p>
-          <div className="flex flex-wrap gap-3">
-            <button
-              type="button"
-              onClick={() => overview.refetch()}
-              className={btnSecondary}
-            >
-              Try again
-            </button>
-            <Link href="/admin/judging" className={btnSecondary}>
-              Pick another edition
-            </Link>
-          </div>
-        </div>
-      ) : (
-        <div className="lg:grid lg:grid-cols-[200px_minmax(0,1fr)] lg:gap-12">
-          <nav aria-label="Judging console">
-            <div className={`lg:hidden mb-8 ${tabList}`}>
-              {SECTIONS.map((s) => (
-                <a
-                  key={s.id}
-                  href={`#${s.id}`}
-                  aria-current={section === s.id ? "page" : undefined}
-                  className={tab(section === s.id)}
-                >
-                  {s.label}
-                </a>
-              ))}
-            </div>
-            <ul className="hidden lg:block sticky top-6 border-l border-[var(--border-subtle)]">
-              {SECTIONS.map((s) => (
-                <li key={s.id}>
-                  <a
-                    href={`#${s.id}`}
-                    aria-current={section === s.id ? "page" : undefined}
-                    className={`-ml-px flex min-h-9 items-center border-l-2 pl-4 text-sm transition-colors ${
-                      section === s.id
-                        ? "border-accent font-semibold text-[var(--text-primary)]"
-                        : "border-transparent text-[var(--text-muted)] hover:text-[var(--text-primary)]"
-                    }`}
-                  >
-                    {s.label}
-                  </a>
-                </li>
-              ))}
-            </ul>
-          </nav>
-
-          <div ref={contentRef} className="min-w-0 scroll-mt-6">
-            {section === "checklist" && (
-              <ChecklistSection hackathonId={hackathonId} overview={data} />
-            )}
-            {section === "projects" && (
-              <ProjectsSection hackathonId={hackathonId} overview={data} />
-            )}
-            {section === "challenges" && (
-              <ChallengesSection hackathonId={hackathonId} overview={data} />
-            )}
-            {section === "rooms" && (
-              <RoomsSection hackathonId={hackathonId} overview={data} />
-            )}
-            {section === "rubric" && <RubricSection hackathonId={hackathonId} />}
-            {section === "launch" && (
-              <LaunchSection hackathonId={hackathonId} overview={data} />
-            )}
-            {section === "schedule" && (
-              <JudgingSchedule hackathonId={hackathonId} />
-            )}
-            {section === "claims" && <JudgingClaims hackathonId={hackathonId} />}
-            {section === "results" && (
-              <JudgingResults hackathonId={hackathonId} />
-            )}
-            {section === "repo-check" && (
-              <RepoCheckSection hackathonId={hackathonId} />
-            )}
-            {section === "announcements" && (
-              <AnnouncementsSection hackathonId={hackathonId} />
-            )}
-            {section === "danger" && (
-              <DangerZone hackathonId={hackathonId} overview={data} />
-            )}
-          </div>
-        </div>
-      )}
-    </div>
+    <PrefetchedPage
+      reads={(c) => [
+        [
+          "judging.admin.overview",
+          { hackathonId },
+          c.judging.admin.overview({ hackathonId }),
+        ],
+        [
+          "judging.admin.checklist",
+          { hackathonId },
+          c.judging.admin.checklist({ hackathonId }),
+        ],
+      ]}
+    >
+      <AdminEditionJudgingPage />
+    </PrefetchedPage>
   );
 }
diff --git a/sites/mainweb/app/(portal)/admin/judging/page.tsx b/sites/mainweb/app/(portal)/admin/judging/page.tsx
index c025fada..84ddf649 100644
--- a/sites/mainweb/app/(portal)/admin/judging/page.tsx
+++ b/sites/mainweb/app/(portal)/admin/judging/page.tsx
@@ -1,96 +1,14 @@
-"use client";
-
-import Link from "next/link";
-import { ChevronRight } from "lucide-react";
-import { trpc } from "@/lib/trpc";
-import { hackathonStatus } from "@/lib/hackathon-status";
-import {
-  body,
-  itemTitle,
-  meta,
-  pageDek,
-  sectionRule,
-  status,
-  textLink,
-} from "@/components/portal/ui";
-
-// Judging is run per edition. AdminLayout gates this page to staff.
-export default function AdminJudgingPage() {
-  const { data: hackathons, isLoading, isError, refetch } =
-    trpc.hackathon.list.useQuery({ limit: 50 });
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import AdminJudgingPage from "./AdminJudgingPage";
 
+export default function Page() {
   return (
-    <div className="max-w-3xl mx-auto">
-      <header className="mb-8">
-        <h1 className="font-[family-name:var(--font-display)] text-[32px] md:text-[40px] font-semibold leading-tight tracking-[-0.02em] text-[var(--text-primary)]">
-          Judging
-        </h1>
-        <p className={pageDek}>
-          Pick an edition to open its judging console: projects, challenges,
-          rooms, the schedule, launch and results. Each edition&apos;s judge
-          roster is on its hackathon page, under Judges.
-        </p>
-      </header>
-
-      <section className={sectionRule}>
-        {isLoading ? (
-          <p className={body}>Loading editions…</p>
-        ) : isError ? (
-          <p className={body}>
-            Could not load the editions.{" "}
-            <button
-              type="button"
-              onClick={() => refetch()}
-              className={textLink}
-            >
-              Try again
-            </button>
-          </p>
-        ) : !hackathons || hackathons.length === 0 ? (
-          <p className={body}>
-            No editions yet. Create one from{" "}
-            <Link
-              href="/admin/hackathons"
-              className={textLink}
-            >
-              Hackathons
-            </Link>{" "}
-            first.
-          </p>
-        ) : (
-          <ul className="border-t border-[var(--border-subtle)]">
-            {hackathons.map((h) => {
-              const conf = hackathonStatus(h.status);
-              return (
-                <li key={h.id} className="border-b border-[var(--border-subtle)]">
-                  <Link
-                    href={`/admin/judging/${h.id}`}
-                    className="flex items-center gap-4 py-4 min-h-11 hover:bg-[var(--bg-secondary)] transition-colors"
-                  >
-                    <div className="flex-1 min-w-0">
-                      <p className={`${itemTitle} truncate`}>{h.name}</p>
-                      <p className={`mt-1 ${meta}`}>
-                        <span className={status(conf.tone)}>{conf.label}</span>
-                        {" · "}
-                        {new Date(h.startDate).toLocaleDateString("en-US", {
-                          month: "short",
-                          day: "numeric",
-                          year: "numeric",
-                        })}
-                      </p>
-                    </div>
-                    <ChevronRight
-                      className="h-4 w-4 shrink-0 text-[var(--text-subtle)]"
-                      strokeWidth={1.75}
-                      aria-hidden="true"
-                    />
-                  </Link>
-                </li>
-              );
-            })}
-          </ul>
-        )}
-      </section>
-    </div>
+    <PrefetchedPage
+      reads={(c) => [
+        ["hackathon.list", { limit: 50 }, c.hackathon.list({ limit: 50 })],
+      ]}
+    >
+      <AdminJudgingPage />
+    </PrefetchedPage>
   );
 }
diff --git a/sites/mainweb/components/admin/judging/shared.tsx b/sites/mainweb/components/admin/judging/shared.tsx
index 18a6ea7e..bd352526 100644
--- a/sites/mainweb/components/admin/judging/shared.tsx
+++ b/sites/mainweb/components/admin/judging/shared.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { venueFormat } from "@/lib/venue-time";
 import type { RouterOutputs } from "@query/api";
 import { trpc } from "@/lib/trpc";
 import { fieldHint, fieldLabel, input } from "@/components/portal/ui";
@@ -57,7 +58,7 @@ export const MODE_HINT = {
 } as const;
 
 export const shortTime = (value: Date | string) =>
-  new Date(value).toLocaleString("en-US", {
+  venueFormat(value, {
     month: "short",
     day: "numeric",
     hour: "numeric",

From 1506ddb9f3b9129c006fc511a86e3e674764b67d Mon Sep 17 00:00:00 2001
From: aamoghS <aamoghsawantt@gmail.com>
Date: Fri, 6 Nov 2026 12:39:30 -0500
Subject: [PATCH 7/9] perf(mainweb): prefetch the admin bootcamp page

Attendance and the workshop table drew after hydration plus a tRPC batch.
A server page reads both for the current term and the session dates print on
the venue calendar. Cold load median of 5: 858 to 613 ms (warm 321 to 251).
---
 .../admin/bootcamp/AdminBootcampPage.tsx      | 759 +++++++++++++++++
 .../app/(portal)/admin/bootcamp/page.tsx      | 765 +-----------------
 2 files changed, 770 insertions(+), 754 deletions(-)
 create mode 100644 sites/mainweb/app/(portal)/admin/bootcamp/AdminBootcampPage.tsx

diff --git a/sites/mainweb/app/(portal)/admin/bootcamp/AdminBootcampPage.tsx b/sites/mainweb/app/(portal)/admin/bootcamp/AdminBootcampPage.tsx
new file mode 100644
index 00000000..bd61f1c5
--- /dev/null
+++ b/sites/mainweb/app/(portal)/admin/bootcamp/AdminBootcampPage.tsx
@@ -0,0 +1,759 @@
+"use client";
+
+import { venueFormat } from "@/lib/venue-time";
+import { useState } from "react";
+import { useSession } from "next-auth/react";
+import { Check, Copy, Mail } from "lucide-react";
+import { LoadingScreen } from "@/components/portal/LoadingScreen";
+import { BootcampMaterialsTable } from "@/components/portal/BootcampMaterialsTable";
+import type { BootcampMaterialRow } from "@/components/portal/BootcampMaterialsTable";
+import { BootcampWorkshopModal } from "@/components/portal/BootcampWorkshopModal";
+import type { BootcampWorkshopFormData } from "@/components/portal/BootcampWorkshopModal";
+import { EventAttendanceModal } from "@/components/portal/EventAttendanceModal";
+import { useEventQR } from "@/components/portal/EventQR";
+import { trpc } from "@/lib/trpc";
+import { READ_ONLY_TITLE, useReadOnly } from "@/lib/use-portal-context";
+import {
+  body,
+  btnPrimary,
+  btnSecondary,
+  fieldLabel,
+  input,
+  itemTitle,
+  kicker,
+  label,
+  meta,
+  pageDek,
+  sectionTitle,
+  status as statusDot,
+  textLink,
+} from "@/components/portal/ui";
+
+/** Admin pages carry a smaller headline than member pages. */
+const adminTitle =
+  "font-[family-name:var(--font-display)] text-[32px] md:text-[40px] font-semibold leading-[1.05] tracking-[-0.02em] text-[var(--text-primary)]";
+
+const th = "px-3 py-2.5 text-[13px] font-medium text-[var(--text-subtle)]";
+
+/** `2026-fall` is how it is stored; nobody should have to read it that way. */
+function termLabel(term: string) {
+  const [year, season] = term.split("-");
+  if (!year || !season) return term;
+  return `${season.charAt(0).toUpperCase()}${season.slice(1)} ${year}`;
+}
+
+/** `datetime-local` carries local wall-clock time rather than a UTC ISO value. */
+function toLocalInput(date: Date) {
+  const local = new Date(
+    date.getTime() - date.getTimezoneOffset() * 60 * 1000,
+  );
+  return local.toISOString().slice(0, 16);
+}
+
+/** A mailto with the whole cohort BCC'd stops being clickable somewhere around
+ *  2000 characters, and browsers differ on where. Past that, copying is the only
+ *  thing that reliably works. */
+const MAILTO_LIMIT = 1800;
+
+function CohortEmails({ emails }: { emails: string[] }) {
+  const [copied, setCopied] = useState(false);
+  const list = emails.join(", ");
+  const mailto = `mailto:?bcc=${encodeURIComponent(emails.join(","))}`;
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(list);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // Clipboard is blocked without a secure context or permission; the
+      // addresses are on screen below either way.
+      setCopied(false);
+    }
+  };
+
+  return (
+    <section className="mt-12 border-t border-[var(--border-subtle)] pt-6">
+      <div className="flex flex-wrap items-end justify-between gap-4">
+        <div>
+          <h2 className={itemTitle}>Email the cohort</h2>
+          <p className={`mt-1 ${body}`}>
+            <span className="tabular-nums">{emails.length}</span> address
+            {emails.length === 1 ? "" : "es"}, everyone enrolled this term.
+          </p>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-3">
+          <button type="button" onClick={copy} className={btnSecondary}>
+            <Copy aria-hidden="true" className="h-4 w-4" strokeWidth={1.75} />
+            {copied ? "Copied" : "Copy addresses"}
+          </button>
+
+          {mailto.length <= MAILTO_LIMIT && (
+            <a href={mailto} className={btnSecondary}>
+              <Mail aria-hidden="true" className="h-4 w-4" strokeWidth={1.75} />
+              Open in mail app
+            </a>
+          )}
+        </div>
+      </div>
+
+      {/* Selectable as well as copyable: a locked-down browser refuses the
+          clipboard API, and this still works. */}
+      <p className="mt-4 select-all break-words text-[13px] leading-relaxed text-[var(--text-subtle)]">
+        {list}
+      </p>
+
+      <p aria-live="polite" className="sr-only">
+        {copied ? "Addresses copied to the clipboard." : ""}
+      </p>
+
+      {mailto.length > MAILTO_LIMIT && (
+        <p className={`mt-3 ${meta}`}>
+          Too many addresses for a mail-app link. Copy them and paste them into
+          BCC.
+        </p>
+      )}
+    </section>
+  );
+}
+
+function Stat({
+  label: text,
+  value,
+}: {
+  label: string;
+  value: string | number;
+}) {
+  return (
+    <div className="sm:border-l sm:border-[var(--border-subtle)] sm:pl-6 sm:first:border-l-0 sm:first:pl-0">
+      <dt className={label}>{text}</dt>
+      <dd className="mt-1 font-[family-name:var(--font-display)] text-[32px] font-semibold leading-none tabular-nums text-[var(--text-primary)] md:text-[36px]">
+        {value}
+      </dd>
+    </div>
+  );
+}
+
+export default function AdminBootcampPage() {
+  const { data: session, status } = useSession();
+  const [term, setTerm] = useState<string | undefined>(undefined);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [selected, setSelected] = useState<BootcampMaterialRow | null>(null);
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [notice, setNotice] = useState<string | null>(null);
+  const utils = trpc.useUtils();
+  const readOnly = useReadOnly();
+
+  const attendance = trpc.bootcamp.attendance.useQuery(
+    { term },
+    { enabled: !!session },
+  );
+  const workshops = trpc.bootcamp.adminWorkshops.useQuery(
+    { term },
+    { enabled: !!session },
+  );
+  const createWorkshop = trpc.bootcamp.createWorkshop.useMutation();
+  const updateWorkshop = trpc.bootcamp.updateWorkshop.useMutation();
+  const upsertSession = trpc.bootcamp.upsertSession.useMutation();
+
+  // Session check-in lives here rather than on the Club Hub: a session is
+  // still an event underneath, with the same QR and door, but staff run it
+  // from the bootcamp page.
+  const qr = useEventQR();
+  const [attendanceFor, setAttendanceFor] = useState<{
+    id: string;
+    title: string;
+  } | null>(null);
+  const toggleCheckIn = trpc.events.toggleCheckIn.useMutation({
+    onSuccess: () => utils.bootcamp.attendance.invalidate(),
+  });
+  const setPublished = trpc.bootcamp.setPublished.useMutation({
+    onSuccess: async () => {
+      await Promise.all([
+        utils.bootcamp.adminWorkshops.invalidate(),
+        utils.bootcamp.workshops.invalidate(),
+      ]);
+    },
+  });
+
+  const upload = async (
+    workshopId: string,
+    kind: "materials" | "solution",
+    file: File,
+  ) => {
+    const response = await fetch(
+      `/api/bootcamp/materials/${workshopId}/${kind}`,
+      {
+        method: "POST",
+        headers: { "x-bootcamp-filename": encodeURIComponent(file.name) },
+        body: file,
+      },
+    );
+    if (!response.ok) {
+      const body = (await response.json().catch(() => null)) as {
+        error?: string;
+      } | null;
+      throw new Error(body?.error ?? `Upload failed (${response.status})`);
+    }
+  };
+
+  const saveWorkshop = async (form: BootcampWorkshopFormData) => {
+    setIsSaving(true);
+    setError(null);
+    setNotice(null);
+    const wasEditing = !!selected;
+    // What the form opened with, so an untouched date or room is not rewritten.
+    const initialDate = selected?.eventDate
+      ? toLocalInput(new Date(selected.eventDate))
+      : "";
+    const initialLocation = selected?.location ?? "";
+    const dateChanged = form.sessionDate !== initialDate;
+    const locationChanged = form.location.trim() !== initialLocation;
+
+    let workshopId: string;
+    try {
+      const fields = {
+        title: form.title.trim(),
+        recordingUrl: form.recordingUrl.trim() || null,
+      };
+      const saved = selected
+        ? await updateWorkshop.mutateAsync({
+            workshopId: selected.id,
+            ...fields,
+          })
+        : await createWorkshop.mutateAsync({
+            ...fields,
+            week: Number(form.week),
+            // The term being viewed, not the live one: adding a week while
+            // filtered to a past cohort must land in that cohort. Undefined
+            // until the officer picks one, which the server reads as current.
+            term,
+          });
+      workshopId = saved.id;
+      // A create followed by a failed upload must retry as an edit; otherwise
+      // the second save collides with the draft row that already succeeded.
+      setSelected({
+        ...saved,
+        eventDate: selected?.eventDate ?? null,
+        location: selected?.location ?? null,
+      });
+    } catch (cause) {
+      setError(
+        `Workshop details were not saved: ${cause instanceof Error ? cause.message : "Unknown error"}`,
+      );
+      setIsSaving(false);
+      return;
+    }
+
+    try {
+      // A blank date on a new row means TBA, not "detach week N's session".
+      if (dateChanged || (locationChanged && form.sessionDate)) {
+        await upsertSession.mutateAsync({
+          workshopId,
+          sessionDate: form.sessionDate ? new Date(form.sessionDate) : null,
+          ...(locationChanged ? { location: form.location.trim() || null } : {}),
+        });
+      }
+      // Session writes affect the material join, attendance views, and every
+      // event list that can expose the new QR-backed club event.
+      await Promise.all([
+        utils.bootcamp.adminWorkshops.invalidate(),
+        utils.bootcamp.workshops.invalidate(),
+        utils.bootcamp.attendance.invalidate(),
+        utils.bootcamp.myProgress.invalidate(),
+        utils.events.listAll.invalidate(),
+        utils.events.list.invalidate(),
+        utils.events.myEvents.invalidate(),
+        utils.events.myStats.invalidate(),
+      ]);
+    } catch (cause) {
+      setError(
+        `Workshop details were saved, but its session event was not: ${cause instanceof Error ? cause.message : "Unknown error"}`,
+      );
+      setIsSaving(false);
+      return;
+    }
+
+    try {
+      if (form.materials) {
+        await upload(workshopId, "materials", form.materials);
+      }
+      if (form.solution) {
+        await upload(workshopId, "solution", form.solution);
+      }
+    } catch (cause) {
+      await utils.bootcamp.adminWorkshops.invalidate();
+      setError(
+        `Workshop details were saved, but a ZIP upload failed: ${cause instanceof Error ? cause.message : "Unknown error"}`,
+      );
+      setIsSaving(false);
+      return;
+    }
+
+    await Promise.all([
+      utils.bootcamp.adminWorkshops.invalidate(),
+      utils.bootcamp.workshops.invalidate(),
+    ]);
+    setNotice(wasEditing ? "Workshop updated." : "Workshop created as a draft.");
+    setIsSaving(false);
+    setModalOpen(false);
+    setSelected(null);
+  };
+
+  const removeFile = async (kind: "materials" | "solution") => {
+    if (!selected) return;
+    setIsSaving(true);
+    setError(null);
+    // A network failure otherwise leaves isSaving set and the modal stuck.
+    const response = await fetch(
+      `/api/bootcamp/materials/${selected.id}/${kind}`,
+      { method: "DELETE" },
+    ).catch(() => null);
+    if (!response?.ok) {
+      const body = (await response?.json().catch(() => null)) as {
+        error?: string;
+      } | null;
+      setError(body?.error ?? `Could not remove ${kind}.`);
+      setIsSaving(false);
+      return;
+    }
+    setSelected({
+      ...selected,
+      ...(kind === "materials"
+        ? {
+            materialsKey: null,
+            materialsFileName: null,
+            materialsSizeBytes: null,
+          }
+        : {
+            solutionKey: null,
+            solutionFileName: null,
+            solutionSizeBytes: null,
+          }),
+    });
+    await utils.bootcamp.adminWorkshops.invalidate();
+    setNotice(`${kind === "materials" ? "Materials" : "Solution"} ZIP removed.`);
+    setIsSaving(false);
+  };
+
+  const deleteWorkshop = async (row: BootcampMaterialRow) => {
+    if (
+      !window.confirm(
+        `Delete week ${row.week}, its metadata, materials ZIP, and solution ZIP? This cannot be undone.`,
+      )
+    ) {
+      return;
+    }
+    setError(null);
+    setNotice(null);
+    const response = await fetch(`/api/bootcamp/materials/${row.id}`, {
+      method: "DELETE",
+    }).catch(() => null);
+    if (!response?.ok) {
+      const body = (await response?.json().catch(() => null)) as {
+        error?: string;
+      } | null;
+      setError(body?.error ?? "Could not delete workshop.");
+      return;
+    }
+    await Promise.all([
+      utils.bootcamp.adminWorkshops.invalidate(),
+      utils.bootcamp.workshops.invalidate(),
+    ]);
+    setNotice(`Week ${row.week} deleted.`);
+  };
+
+  if (status === "loading" || attendance.isPending || workshops.isPending) {
+    return <LoadingScreen message="Loading bootcamp…" />;
+  }
+
+  if (attendance.error || workshops.error) {
+    return (
+      <div className="mx-auto max-w-3xl px-5 py-12 sm:px-8">
+        <p role="alert" className="text-[15px] text-[var(--danger)]">
+          The bootcamp did not load:{" "}
+          {attendance.error?.message ?? workshops.error?.message} Reload the
+          page to try again.
+        </p>
+      </div>
+    );
+  }
+
+  const data = attendance.data;
+  const { sessions, members, stats } = data;
+
+  return (
+    <div className="min-h-screen bg-[var(--bg-primary)] pb-20 text-[var(--text-muted)]">
+      <main className="mx-auto w-full max-w-7xl px-5 py-10 sm:px-8 md:px-12 md:py-14">
+        <header className="flex flex-wrap items-end justify-between gap-6">
+          <div>
+            <p className={kicker}>{termLabel(data.term)}</p>
+            <h1 className={`mt-2 ${adminTitle}`}>Bootcamp</h1>
+            <p className={pageDek}>
+              Who is enrolled, who turned up, and what each week hands out.
+            </p>
+          </div>
+
+          {/* Attendance outlives its semester, so past terms stay reachable. */}
+          {data.terms.length > 1 && (
+            <div className="w-full sm:w-48">
+              <label htmlFor="bootcamp-term" className={fieldLabel}>
+                Term
+              </label>
+              <select
+                id="bootcamp-term"
+                value={data.term}
+                onChange={(event) => setTerm(event.target.value)}
+                className={input}
+              >
+                {data.terms.map((option) => (
+                  <option key={option} value={option}>
+                    {termLabel(option)}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+        </header>
+
+        <dl className="mt-10 grid grid-cols-2 gap-x-6 gap-y-6 border-t border-[var(--border-subtle)] pt-6 sm:grid-cols-4">
+          <Stat label="Enrolled" value={stats.enrolled} />
+          <Stat
+            label="Sessions held"
+            value={`${stats.sessionsHeld}/${stats.sessionsPlanned}`}
+          />
+          <Stat label="Average attendance" value={stats.averageAttendance} />
+          <Stat
+            label="Turnout"
+            value={
+              stats.enrolled && stats.sessionsHeld
+                ? `${Math.round((stats.averageAttendance / stats.enrolled) * 100)}%`
+                : "—"
+            }
+          />
+        </dl>
+
+        <section className="mt-12 border-t border-[var(--border-subtle)] pt-6">
+          <div className="mb-5 flex flex-wrap items-end justify-between gap-4">
+            <div>
+              <h2 className={sectionTitle}>Workshop materials</h2>
+              <p className={`mt-1 ${meta}`}>
+                What members download each week. New weeks start as drafts.
+              </p>
+            </div>
+            <button
+              type="button"
+              onClick={() => {
+                setSelected(null);
+                setError(null);
+                setModalOpen(true);
+              }}
+              disabled={readOnly}
+              title={readOnly ? READ_ONLY_TITLE : undefined}
+              className={btnPrimary}
+            >
+              Add workshop
+            </button>
+          </div>
+
+          {error && !modalOpen && (
+            <p role="alert" className="mb-4 text-sm text-[var(--danger)]">
+              {error}
+            </p>
+          )}
+          {notice && (
+            <p className={`mb-4 ${statusDot("success")}`} role="status">
+              {notice}
+            </p>
+          )}
+
+          <BootcampMaterialsTable
+            rows={workshops.data ?? []}
+            term={termLabel(data.term)}
+            isUpdating={setPublished.isPending}
+            onEdit={(row) => {
+              setSelected(row);
+              setError(null);
+              setModalOpen(true);
+            }}
+            onDelete={deleteWorkshop}
+            onSetPublished={async (row, isPublished) => {
+              setError(null);
+              setNotice(null);
+              try {
+                await setPublished.mutateAsync({
+                  workshopId: row.id,
+                  isPublished,
+                });
+                setNotice(
+                  `Week ${row.week} ${isPublished ? "published" : "returned to draft"}.`,
+                );
+              } catch (cause) {
+                setError(
+                  cause instanceof Error
+                    ? cause.message
+                    : "Could not change publication status.",
+                );
+              }
+            }}
+          />
+        </section>
+
+        {members.length > 0 && (
+          <CohortEmails emails={members.map((member) => member.email)} />
+        )}
+
+        {qr.modal}
+        {attendanceFor && (
+          <EventAttendanceModal
+            eventId={attendanceFor.id}
+            eventTitle={attendanceFor.title}
+            onClose={() => setAttendanceFor(null)}
+          />
+        )}
+
+        <section className="mt-12 border-t border-[var(--border-subtle)] pt-6">
+          <h2 className={sectionTitle}>Session check-in</h2>
+          <p className={`mt-1 ${meta}`}>
+            Show the QR code at the door, then close check-in when the session
+            ends.
+          </p>
+
+          {sessions.length > 0 && (
+            <ul className="mt-5 border-t border-[var(--border-subtle)]">
+              {sessions.map((row) => (
+                <li
+                  key={row.id}
+                  className="flex flex-col gap-3 border-b border-[var(--border-subtle)] py-4 lg:flex-row lg:items-center lg:justify-between"
+                >
+                  <div className="min-w-0">
+                    <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
+                      <span className={`${label} tabular-nums`}>
+                        Week {row.week}
+                      </span>
+                      <span className="text-[17px] font-semibold text-[var(--text-primary)]">
+                        {row.title}
+                      </span>
+                      <span
+                        className={statusDot(
+                          row.checkInEnabled ? "accent" : "neutral",
+                        )}
+                      >
+                        {row.checkInEnabled ? "Check-in open" : "Check-in closed"}
+                      </span>
+                    </div>
+                    <p className={`mt-1 ${meta}`}>
+                      {row.location || "No room set"} ·{" "}
+                      {venueFormat(row.eventDate)} ·{" "}
+                      <span className="tabular-nums">{row.attendance}</span>{" "}
+                      checked in
+                    </p>
+                  </div>
+
+                  <div className="flex flex-wrap items-center gap-3">
+                    <button
+                      type="button"
+                      onClick={() => void qr.show(row)}
+                      disabled={qr.generatingFor === row.qrCode}
+                      className={`${btnSecondary} min-h-11`}
+                    >
+                      {qr.generatingFor === row.qrCode
+                        ? "Generating…"
+                        : "Show QR code"}
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() =>
+                        toggleCheckIn.mutate({
+                          eventId: row.id,
+                          enabled: !row.checkInEnabled,
+                        })
+                      }
+                      disabled={readOnly || toggleCheckIn.isPending}
+                      title={readOnly ? READ_ONLY_TITLE : undefined}
+                      className={`${btnSecondary} min-h-11`}
+                    >
+                      {row.checkInEnabled ? "Close check-in" : "Open check-in"}
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() =>
+                        setAttendanceFor({ id: row.id, title: row.title })
+                      }
+                      className={`${textLink} min-h-11`}
+                    >
+                      Attendance
+                    </button>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          )}
+
+          <h3 className={`mt-10 ${itemTitle}`}>Attendance by member</h3>
+
+          {sessions.length === 0 ? (
+            <p className={`mt-3 max-w-2xl ${body}`}>
+              No sessions are scheduled for {termLabel(data.term)}. Give a
+              workshop a session date under Workshop materials, and its QR code,
+              check-in controls and attendance column appear here.
+            </p>
+          ) : members.length === 0 ? (
+            <p className={`mt-3 max-w-2xl ${body}`}>
+              Nobody has enrolled in this bootcamp yet. Members enrol by adding
+              the bootcamp to their membership payment, and they appear here as
+              soon as it clears.
+            </p>
+          ) : (
+            /* Twelve weeks will not fit a phone; scrolling beats squeezing. */
+            <div className="mt-4 overflow-x-auto border-y border-[var(--border-subtle)]">
+              <table className="w-full border-collapse text-[15px]">
+                <caption className="sr-only">
+                  Bootcamp attendance for {termLabel(data.term)}: one row per
+                  enrolled member, one column per session.
+                </caption>
+                <thead>
+                  <tr className="border-b border-[var(--border-subtle)]">
+                    <th
+                      scope="col"
+                      className={`sticky left-0 z-10 bg-[var(--bg-primary)] pl-0 text-left ${th}`}
+                    >
+                      Member
+                    </th>
+                    {sessions.map((row) => (
+                      <th
+                        key={row.id}
+                        scope="col"
+                        title={`${row.title} · ${row.attendance} checked in`}
+                        className={`text-center tabular-nums ${th}`}
+                      >
+                        W{row.week}
+                      </th>
+                    ))}
+                    <th scope="col" className={`pr-0 text-right ${th}`}>
+                      Total
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {members.map((member) => {
+                    const attended = new Set(member.attendedEventIds);
+                    return (
+                      <tr
+                        key={member.userId}
+                        className="group border-b border-[var(--border-subtle)] transition-colors last:border-b-0 hover:bg-[var(--bg-secondary)]"
+                      >
+                        <th
+                          scope="row"
+                          className="sticky left-0 z-10 bg-[var(--bg-primary)] py-3 pr-3 text-left font-normal transition-colors group-hover:bg-[var(--bg-secondary)]"
+                        >
+                          <span className="block font-semibold text-[var(--text-primary)]">
+                            {member.name}
+                          </span>
+                          <span className="block text-[13px] text-[var(--text-subtle)]">
+                            {member.email}
+                          </span>
+                        </th>
+
+                        {sessions.map((row) => (
+                          <td key={row.id} className="px-3 py-3 text-center">
+                            {attended.has(row.id) ? (
+                              <>
+                                <Check
+                                  aria-hidden="true"
+                                  strokeWidth={1.75}
+                                  className="mx-auto h-4 w-4 text-[var(--success)]"
+                                />
+                                <span className="sr-only">
+                                  Attended week {row.week}
+                                </span>
+                              </>
+                            ) : (
+                              <>
+                                <span aria-hidden="true" className="text-[var(--text-subtle)]">
+                                  ·
+                                </span>
+                                <span className="sr-only">
+                                  {row.past ? "Missed" : "Not held yet"} week{" "}
+                                  {row.week}
+                                </span>
+                              </>
+                            )}
+                          </td>
+                        ))}
+
+                        <td className="py-3 pl-3 text-right font-semibold tabular-nums text-[var(--text-primary)]">
+                          {member.attendedCount}
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+                <tfoot>
+                  <tr className="border-t border-[var(--border-subtle)]">
+                    <th
+                      scope="row"
+                      className={`sticky left-0 z-10 bg-[var(--bg-primary)] pl-0 text-left ${th}`}
+                    >
+                      Checked in
+                    </th>
+                    {sessions.map((row) => (
+                      <td
+                        key={row.id}
+                        className="px-3 py-2.5 text-center text-[13px] tabular-nums text-[var(--text-muted)]"
+                      >
+                        {row.attendance}
+                      </td>
+                    ))}
+                    <td />
+                  </tr>
+                </tfoot>
+              </table>
+            </div>
+          )}
+
+          {sessions.length > 0 && (
+            <p className={`mt-4 max-w-2xl ${meta}`}>
+              A session counts anyone who scanned in, member of this bootcamp or
+              not, so a per-session total can run ahead of the rows above. Fix a
+              wrong check-in from that session&rsquo;s Attendance list.
+            </p>
+          )}
+        </section>
+
+        {modalOpen && (
+          <BootcampWorkshopModal
+            mode={selected ? "edit" : "create"}
+            initial={
+              selected
+                ? {
+                    week: String(selected.week),
+                    title: selected.title,
+                    sessionDate: selected.eventDate
+                      ? toLocalInput(new Date(selected.eventDate))
+                      : "",
+                    location: selected.location ?? "",
+                    recordingUrl: selected.recordingUrl ?? "",
+                    materialsFileName: selected.materialsFileName,
+                    solutionFileName: selected.solutionFileName,
+                  }
+                : undefined
+            }
+            isSubmitting={isSaving}
+            error={error}
+            onRemoveFile={removeFile}
+            onSubmit={saveWorkshop}
+            onClose={() => {
+              if (isSaving) return;
+              setModalOpen(false);
+              setSelected(null);
+              setError(null);
+            }}
+          />
+        )}
+      </main>
+    </div>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/admin/bootcamp/page.tsx b/sites/mainweb/app/(portal)/admin/bootcamp/page.tsx
index 3fdf90fe..faa72235 100644
--- a/sites/mainweb/app/(portal)/admin/bootcamp/page.tsx
+++ b/sites/mainweb/app/(portal)/admin/bootcamp/page.tsx
@@ -1,758 +1,15 @@
-"use client";
-
-import { useState } from "react";
-import { useSession } from "next-auth/react";
-import { Check, Copy, Mail } from "lucide-react";
-import { LoadingScreen } from "@/components/portal/LoadingScreen";
-import { BootcampMaterialsTable } from "@/components/portal/BootcampMaterialsTable";
-import type { BootcampMaterialRow } from "@/components/portal/BootcampMaterialsTable";
-import { BootcampWorkshopModal } from "@/components/portal/BootcampWorkshopModal";
-import type { BootcampWorkshopFormData } from "@/components/portal/BootcampWorkshopModal";
-import { EventAttendanceModal } from "@/components/portal/EventAttendanceModal";
-import { useEventQR } from "@/components/portal/EventQR";
-import { trpc } from "@/lib/trpc";
-import { READ_ONLY_TITLE, useReadOnly } from "@/lib/use-portal-context";
-import {
-  body,
-  btnPrimary,
-  btnSecondary,
-  fieldLabel,
-  input,
-  itemTitle,
-  kicker,
-  label,
-  meta,
-  pageDek,
-  sectionTitle,
-  status as statusDot,
-  textLink,
-} from "@/components/portal/ui";
-
-/** Admin pages carry a smaller headline than member pages. */
-const adminTitle =
-  "font-[family-name:var(--font-display)] text-[32px] md:text-[40px] font-semibold leading-[1.05] tracking-[-0.02em] text-[var(--text-primary)]";
-
-const th = "px-3 py-2.5 text-[13px] font-medium text-[var(--text-subtle)]";
-
-/** `2026-fall` is how it is stored; nobody should have to read it that way. */
-function termLabel(term: string) {
-  const [year, season] = term.split("-");
-  if (!year || !season) return term;
-  return `${season.charAt(0).toUpperCase()}${season.slice(1)} ${year}`;
-}
-
-/** `datetime-local` carries local wall-clock time rather than a UTC ISO value. */
-function toLocalInput(date: Date) {
-  const local = new Date(
-    date.getTime() - date.getTimezoneOffset() * 60 * 1000,
-  );
-  return local.toISOString().slice(0, 16);
-}
-
-/** A mailto with the whole cohort BCC'd stops being clickable somewhere around
- *  2000 characters, and browsers differ on where. Past that, copying is the only
- *  thing that reliably works. */
-const MAILTO_LIMIT = 1800;
-
-function CohortEmails({ emails }: { emails: string[] }) {
-  const [copied, setCopied] = useState(false);
-  const list = emails.join(", ");
-  const mailto = `mailto:?bcc=${encodeURIComponent(emails.join(","))}`;
-
-  const copy = async () => {
-    try {
-      await navigator.clipboard.writeText(list);
-      setCopied(true);
-      window.setTimeout(() => setCopied(false), 2000);
-    } catch {
-      // Clipboard is blocked without a secure context or permission; the
-      // addresses are on screen below either way.
-      setCopied(false);
-    }
-  };
-
-  return (
-    <section className="mt-12 border-t border-[var(--border-subtle)] pt-6">
-      <div className="flex flex-wrap items-end justify-between gap-4">
-        <div>
-          <h2 className={itemTitle}>Email the cohort</h2>
-          <p className={`mt-1 ${body}`}>
-            <span className="tabular-nums">{emails.length}</span> address
-            {emails.length === 1 ? "" : "es"}, everyone enrolled this term.
-          </p>
-        </div>
-
-        <div className="flex flex-wrap items-center gap-3">
-          <button type="button" onClick={copy} className={btnSecondary}>
-            <Copy aria-hidden="true" className="h-4 w-4" strokeWidth={1.75} />
-            {copied ? "Copied" : "Copy addresses"}
-          </button>
-
-          {mailto.length <= MAILTO_LIMIT && (
-            <a href={mailto} className={btnSecondary}>
-              <Mail aria-hidden="true" className="h-4 w-4" strokeWidth={1.75} />
-              Open in mail app
-            </a>
-          )}
-        </div>
-      </div>
-
-      {/* Selectable as well as copyable: a locked-down browser refuses the
-          clipboard API, and this still works. */}
-      <p className="mt-4 select-all break-words text-[13px] leading-relaxed text-[var(--text-subtle)]">
-        {list}
-      </p>
-
-      <p aria-live="polite" className="sr-only">
-        {copied ? "Addresses copied to the clipboard." : ""}
-      </p>
-
-      {mailto.length > MAILTO_LIMIT && (
-        <p className={`mt-3 ${meta}`}>
-          Too many addresses for a mail-app link. Copy them and paste them into
-          BCC.
-        </p>
-      )}
-    </section>
-  );
-}
-
-function Stat({
-  label: text,
-  value,
-}: {
-  label: string;
-  value: string | number;
-}) {
-  return (
-    <div className="sm:border-l sm:border-[var(--border-subtle)] sm:pl-6 sm:first:border-l-0 sm:first:pl-0">
-      <dt className={label}>{text}</dt>
-      <dd className="mt-1 font-[family-name:var(--font-display)] text-[32px] font-semibold leading-none tabular-nums text-[var(--text-primary)] md:text-[36px]">
-        {value}
-      </dd>
-    </div>
-  );
-}
-
-export default function AdminBootcampPage() {
-  const { data: session, status } = useSession();
-  const [term, setTerm] = useState<string | undefined>(undefined);
-  const [modalOpen, setModalOpen] = useState(false);
-  const [selected, setSelected] = useState<BootcampMaterialRow | null>(null);
-  const [isSaving, setIsSaving] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [notice, setNotice] = useState<string | null>(null);
-  const utils = trpc.useUtils();
-  const readOnly = useReadOnly();
-
-  const attendance = trpc.bootcamp.attendance.useQuery(
-    { term },
-    { enabled: !!session },
-  );
-  const workshops = trpc.bootcamp.adminWorkshops.useQuery(
-    { term },
-    { enabled: !!session },
-  );
-  const createWorkshop = trpc.bootcamp.createWorkshop.useMutation();
-  const updateWorkshop = trpc.bootcamp.updateWorkshop.useMutation();
-  const upsertSession = trpc.bootcamp.upsertSession.useMutation();
-
-  // Session check-in lives here rather than on the Club Hub: a session is
-  // still an event underneath, with the same QR and door, but staff run it
-  // from the bootcamp page.
-  const qr = useEventQR();
-  const [attendanceFor, setAttendanceFor] = useState<{
-    id: string;
-    title: string;
-  } | null>(null);
-  const toggleCheckIn = trpc.events.toggleCheckIn.useMutation({
-    onSuccess: () => utils.bootcamp.attendance.invalidate(),
-  });
-  const setPublished = trpc.bootcamp.setPublished.useMutation({
-    onSuccess: async () => {
-      await Promise.all([
-        utils.bootcamp.adminWorkshops.invalidate(),
-        utils.bootcamp.workshops.invalidate(),
-      ]);
-    },
-  });
-
-  const upload = async (
-    workshopId: string,
-    kind: "materials" | "solution",
-    file: File,
-  ) => {
-    const response = await fetch(
-      `/api/bootcamp/materials/${workshopId}/${kind}`,
-      {
-        method: "POST",
-        headers: { "x-bootcamp-filename": encodeURIComponent(file.name) },
-        body: file,
-      },
-    );
-    if (!response.ok) {
-      const body = (await response.json().catch(() => null)) as {
-        error?: string;
-      } | null;
-      throw new Error(body?.error ?? `Upload failed (${response.status})`);
-    }
-  };
-
-  const saveWorkshop = async (form: BootcampWorkshopFormData) => {
-    setIsSaving(true);
-    setError(null);
-    setNotice(null);
-    const wasEditing = !!selected;
-    // What the form opened with, so an untouched date or room is not rewritten.
-    const initialDate = selected?.eventDate
-      ? toLocalInput(new Date(selected.eventDate))
-      : "";
-    const initialLocation = selected?.location ?? "";
-    const dateChanged = form.sessionDate !== initialDate;
-    const locationChanged = form.location.trim() !== initialLocation;
-
-    let workshopId: string;
-    try {
-      const fields = {
-        title: form.title.trim(),
-        recordingUrl: form.recordingUrl.trim() || null,
-      };
-      const saved = selected
-        ? await updateWorkshop.mutateAsync({
-            workshopId: selected.id,
-            ...fields,
-          })
-        : await createWorkshop.mutateAsync({
-            ...fields,
-            week: Number(form.week),
-            // The term being viewed, not the live one: adding a week while
-            // filtered to a past cohort must land in that cohort. Undefined
-            // until the officer picks one, which the server reads as current.
-            term,
-          });
-      workshopId = saved.id;
-      // A create followed by a failed upload must retry as an edit; otherwise
-      // the second save collides with the draft row that already succeeded.
-      setSelected({
-        ...saved,
-        eventDate: selected?.eventDate ?? null,
-        location: selected?.location ?? null,
-      });
-    } catch (cause) {
-      setError(
-        `Workshop details were not saved: ${cause instanceof Error ? cause.message : "Unknown error"}`,
-      );
-      setIsSaving(false);
-      return;
-    }
-
-    try {
-      // A blank date on a new row means TBA, not "detach week N's session".
-      if (dateChanged || (locationChanged && form.sessionDate)) {
-        await upsertSession.mutateAsync({
-          workshopId,
-          sessionDate: form.sessionDate ? new Date(form.sessionDate) : null,
-          ...(locationChanged ? { location: form.location.trim() || null } : {}),
-        });
-      }
-      // Session writes affect the material join, attendance views, and every
-      // event list that can expose the new QR-backed club event.
-      await Promise.all([
-        utils.bootcamp.adminWorkshops.invalidate(),
-        utils.bootcamp.workshops.invalidate(),
-        utils.bootcamp.attendance.invalidate(),
-        utils.bootcamp.myProgress.invalidate(),
-        utils.events.listAll.invalidate(),
-        utils.events.list.invalidate(),
-        utils.events.myEvents.invalidate(),
-        utils.events.myStats.invalidate(),
-      ]);
-    } catch (cause) {
-      setError(
-        `Workshop details were saved, but its session event was not: ${cause instanceof Error ? cause.message : "Unknown error"}`,
-      );
-      setIsSaving(false);
-      return;
-    }
-
-    try {
-      if (form.materials) {
-        await upload(workshopId, "materials", form.materials);
-      }
-      if (form.solution) {
-        await upload(workshopId, "solution", form.solution);
-      }
-    } catch (cause) {
-      await utils.bootcamp.adminWorkshops.invalidate();
-      setError(
-        `Workshop details were saved, but a ZIP upload failed: ${cause instanceof Error ? cause.message : "Unknown error"}`,
-      );
-      setIsSaving(false);
-      return;
-    }
-
-    await Promise.all([
-      utils.bootcamp.adminWorkshops.invalidate(),
-      utils.bootcamp.workshops.invalidate(),
-    ]);
-    setNotice(wasEditing ? "Workshop updated." : "Workshop created as a draft.");
-    setIsSaving(false);
-    setModalOpen(false);
-    setSelected(null);
-  };
-
-  const removeFile = async (kind: "materials" | "solution") => {
-    if (!selected) return;
-    setIsSaving(true);
-    setError(null);
-    // A network failure otherwise leaves isSaving set and the modal stuck.
-    const response = await fetch(
-      `/api/bootcamp/materials/${selected.id}/${kind}`,
-      { method: "DELETE" },
-    ).catch(() => null);
-    if (!response?.ok) {
-      const body = (await response?.json().catch(() => null)) as {
-        error?: string;
-      } | null;
-      setError(body?.error ?? `Could not remove ${kind}.`);
-      setIsSaving(false);
-      return;
-    }
-    setSelected({
-      ...selected,
-      ...(kind === "materials"
-        ? {
-            materialsKey: null,
-            materialsFileName: null,
-            materialsSizeBytes: null,
-          }
-        : {
-            solutionKey: null,
-            solutionFileName: null,
-            solutionSizeBytes: null,
-          }),
-    });
-    await utils.bootcamp.adminWorkshops.invalidate();
-    setNotice(`${kind === "materials" ? "Materials" : "Solution"} ZIP removed.`);
-    setIsSaving(false);
-  };
-
-  const deleteWorkshop = async (row: BootcampMaterialRow) => {
-    if (
-      !window.confirm(
-        `Delete week ${row.week}, its metadata, materials ZIP, and solution ZIP? This cannot be undone.`,
-      )
-    ) {
-      return;
-    }
-    setError(null);
-    setNotice(null);
-    const response = await fetch(`/api/bootcamp/materials/${row.id}`, {
-      method: "DELETE",
-    }).catch(() => null);
-    if (!response?.ok) {
-      const body = (await response?.json().catch(() => null)) as {
-        error?: string;
-      } | null;
-      setError(body?.error ?? "Could not delete workshop.");
-      return;
-    }
-    await Promise.all([
-      utils.bootcamp.adminWorkshops.invalidate(),
-      utils.bootcamp.workshops.invalidate(),
-    ]);
-    setNotice(`Week ${row.week} deleted.`);
-  };
-
-  if (status === "loading" || attendance.isPending || workshops.isPending) {
-    return <LoadingScreen message="Loading bootcamp…" />;
-  }
-
-  if (attendance.error || workshops.error) {
-    return (
-      <div className="mx-auto max-w-3xl px-5 py-12 sm:px-8">
-        <p role="alert" className="text-[15px] text-[var(--danger)]">
-          The bootcamp did not load:{" "}
-          {attendance.error?.message ?? workshops.error?.message} Reload the
-          page to try again.
-        </p>
-      </div>
-    );
-  }
-
-  const data = attendance.data;
-  const { sessions, members, stats } = data;
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import AdminBootcampPage from "./AdminBootcampPage";
 
+export default function Page() {
   return (
-    <div className="min-h-screen bg-[var(--bg-primary)] pb-20 text-[var(--text-muted)]">
-      <main className="mx-auto w-full max-w-7xl px-5 py-10 sm:px-8 md:px-12 md:py-14">
-        <header className="flex flex-wrap items-end justify-between gap-6">
-          <div>
-            <p className={kicker}>{termLabel(data.term)}</p>
-            <h1 className={`mt-2 ${adminTitle}`}>Bootcamp</h1>
-            <p className={pageDek}>
-              Who is enrolled, who turned up, and what each week hands out.
-            </p>
-          </div>
-
-          {/* Attendance outlives its semester, so past terms stay reachable. */}
-          {data.terms.length > 1 && (
-            <div className="w-full sm:w-48">
-              <label htmlFor="bootcamp-term" className={fieldLabel}>
-                Term
-              </label>
-              <select
-                id="bootcamp-term"
-                value={data.term}
-                onChange={(event) => setTerm(event.target.value)}
-                className={input}
-              >
-                {data.terms.map((option) => (
-                  <option key={option} value={option}>
-                    {termLabel(option)}
-                  </option>
-                ))}
-              </select>
-            </div>
-          )}
-        </header>
-
-        <dl className="mt-10 grid grid-cols-2 gap-x-6 gap-y-6 border-t border-[var(--border-subtle)] pt-6 sm:grid-cols-4">
-          <Stat label="Enrolled" value={stats.enrolled} />
-          <Stat
-            label="Sessions held"
-            value={`${stats.sessionsHeld}/${stats.sessionsPlanned}`}
-          />
-          <Stat label="Average attendance" value={stats.averageAttendance} />
-          <Stat
-            label="Turnout"
-            value={
-              stats.enrolled && stats.sessionsHeld
-                ? `${Math.round((stats.averageAttendance / stats.enrolled) * 100)}%`
-                : "—"
-            }
-          />
-        </dl>
-
-        <section className="mt-12 border-t border-[var(--border-subtle)] pt-6">
-          <div className="mb-5 flex flex-wrap items-end justify-between gap-4">
-            <div>
-              <h2 className={sectionTitle}>Workshop materials</h2>
-              <p className={`mt-1 ${meta}`}>
-                What members download each week. New weeks start as drafts.
-              </p>
-            </div>
-            <button
-              type="button"
-              onClick={() => {
-                setSelected(null);
-                setError(null);
-                setModalOpen(true);
-              }}
-              disabled={readOnly}
-              title={readOnly ? READ_ONLY_TITLE : undefined}
-              className={btnPrimary}
-            >
-              Add workshop
-            </button>
-          </div>
-
-          {error && !modalOpen && (
-            <p role="alert" className="mb-4 text-sm text-[var(--danger)]">
-              {error}
-            </p>
-          )}
-          {notice && (
-            <p className={`mb-4 ${statusDot("success")}`} role="status">
-              {notice}
-            </p>
-          )}
-
-          <BootcampMaterialsTable
-            rows={workshops.data ?? []}
-            term={termLabel(data.term)}
-            isUpdating={setPublished.isPending}
-            onEdit={(row) => {
-              setSelected(row);
-              setError(null);
-              setModalOpen(true);
-            }}
-            onDelete={deleteWorkshop}
-            onSetPublished={async (row, isPublished) => {
-              setError(null);
-              setNotice(null);
-              try {
-                await setPublished.mutateAsync({
-                  workshopId: row.id,
-                  isPublished,
-                });
-                setNotice(
-                  `Week ${row.week} ${isPublished ? "published" : "returned to draft"}.`,
-                );
-              } catch (cause) {
-                setError(
-                  cause instanceof Error
-                    ? cause.message
-                    : "Could not change publication status.",
-                );
-              }
-            }}
-          />
-        </section>
-
-        {members.length > 0 && (
-          <CohortEmails emails={members.map((member) => member.email)} />
-        )}
-
-        {qr.modal}
-        {attendanceFor && (
-          <EventAttendanceModal
-            eventId={attendanceFor.id}
-            eventTitle={attendanceFor.title}
-            onClose={() => setAttendanceFor(null)}
-          />
-        )}
-
-        <section className="mt-12 border-t border-[var(--border-subtle)] pt-6">
-          <h2 className={sectionTitle}>Session check-in</h2>
-          <p className={`mt-1 ${meta}`}>
-            Show the QR code at the door, then close check-in when the session
-            ends.
-          </p>
-
-          {sessions.length > 0 && (
-            <ul className="mt-5 border-t border-[var(--border-subtle)]">
-              {sessions.map((row) => (
-                <li
-                  key={row.id}
-                  className="flex flex-col gap-3 border-b border-[var(--border-subtle)] py-4 lg:flex-row lg:items-center lg:justify-between"
-                >
-                  <div className="min-w-0">
-                    <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
-                      <span className={`${label} tabular-nums`}>
-                        Week {row.week}
-                      </span>
-                      <span className="text-[17px] font-semibold text-[var(--text-primary)]">
-                        {row.title}
-                      </span>
-                      <span
-                        className={statusDot(
-                          row.checkInEnabled ? "accent" : "neutral",
-                        )}
-                      >
-                        {row.checkInEnabled ? "Check-in open" : "Check-in closed"}
-                      </span>
-                    </div>
-                    <p className={`mt-1 ${meta}`}>
-                      {row.location || "No room set"} ·{" "}
-                      {new Date(row.eventDate).toLocaleDateString()} ·{" "}
-                      <span className="tabular-nums">{row.attendance}</span>{" "}
-                      checked in
-                    </p>
-                  </div>
-
-                  <div className="flex flex-wrap items-center gap-3">
-                    <button
-                      type="button"
-                      onClick={() => void qr.show(row)}
-                      disabled={qr.generatingFor === row.qrCode}
-                      className={`${btnSecondary} min-h-11`}
-                    >
-                      {qr.generatingFor === row.qrCode
-                        ? "Generating…"
-                        : "Show QR code"}
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() =>
-                        toggleCheckIn.mutate({
-                          eventId: row.id,
-                          enabled: !row.checkInEnabled,
-                        })
-                      }
-                      disabled={readOnly || toggleCheckIn.isPending}
-                      title={readOnly ? READ_ONLY_TITLE : undefined}
-                      className={`${btnSecondary} min-h-11`}
-                    >
-                      {row.checkInEnabled ? "Close check-in" : "Open check-in"}
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() =>
-                        setAttendanceFor({ id: row.id, title: row.title })
-                      }
-                      className={`${textLink} min-h-11`}
-                    >
-                      Attendance
-                    </button>
-                  </div>
-                </li>
-              ))}
-            </ul>
-          )}
-
-          <h3 className={`mt-10 ${itemTitle}`}>Attendance by member</h3>
-
-          {sessions.length === 0 ? (
-            <p className={`mt-3 max-w-2xl ${body}`}>
-              No sessions are scheduled for {termLabel(data.term)}. Give a
-              workshop a session date under Workshop materials, and its QR code,
-              check-in controls and attendance column appear here.
-            </p>
-          ) : members.length === 0 ? (
-            <p className={`mt-3 max-w-2xl ${body}`}>
-              Nobody has enrolled in this bootcamp yet. Members enrol by adding
-              the bootcamp to their membership payment, and they appear here as
-              soon as it clears.
-            </p>
-          ) : (
-            /* Twelve weeks will not fit a phone; scrolling beats squeezing. */
-            <div className="mt-4 overflow-x-auto border-y border-[var(--border-subtle)]">
-              <table className="w-full border-collapse text-[15px]">
-                <caption className="sr-only">
-                  Bootcamp attendance for {termLabel(data.term)}: one row per
-                  enrolled member, one column per session.
-                </caption>
-                <thead>
-                  <tr className="border-b border-[var(--border-subtle)]">
-                    <th
-                      scope="col"
-                      className={`sticky left-0 z-10 bg-[var(--bg-primary)] pl-0 text-left ${th}`}
-                    >
-                      Member
-                    </th>
-                    {sessions.map((row) => (
-                      <th
-                        key={row.id}
-                        scope="col"
-                        title={`${row.title} · ${row.attendance} checked in`}
-                        className={`text-center tabular-nums ${th}`}
-                      >
-                        W{row.week}
-                      </th>
-                    ))}
-                    <th scope="col" className={`pr-0 text-right ${th}`}>
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {members.map((member) => {
-                    const attended = new Set(member.attendedEventIds);
-                    return (
-                      <tr
-                        key={member.userId}
-                        className="group border-b border-[var(--border-subtle)] transition-colors last:border-b-0 hover:bg-[var(--bg-secondary)]"
-                      >
-                        <th
-                          scope="row"
-                          className="sticky left-0 z-10 bg-[var(--bg-primary)] py-3 pr-3 text-left font-normal transition-colors group-hover:bg-[var(--bg-secondary)]"
-                        >
-                          <span className="block font-semibold text-[var(--text-primary)]">
-                            {member.name}
-                          </span>
-                          <span className="block text-[13px] text-[var(--text-subtle)]">
-                            {member.email}
-                          </span>
-                        </th>
-
-                        {sessions.map((row) => (
-                          <td key={row.id} className="px-3 py-3 text-center">
-                            {attended.has(row.id) ? (
-                              <>
-                                <Check
-                                  aria-hidden="true"
-                                  strokeWidth={1.75}
-                                  className="mx-auto h-4 w-4 text-[var(--success)]"
-                                />
-                                <span className="sr-only">
-                                  Attended week {row.week}
-                                </span>
-                              </>
-                            ) : (
-                              <>
-                                <span aria-hidden="true" className="text-[var(--text-subtle)]">
-                                  ·
-                                </span>
-                                <span className="sr-only">
-                                  {row.past ? "Missed" : "Not held yet"} week{" "}
-                                  {row.week}
-                                </span>
-                              </>
-                            )}
-                          </td>
-                        ))}
-
-                        <td className="py-3 pl-3 text-right font-semibold tabular-nums text-[var(--text-primary)]">
-                          {member.attendedCount}
-                        </td>
-                      </tr>
-                    );
-                  })}
-                </tbody>
-                <tfoot>
-                  <tr className="border-t border-[var(--border-subtle)]">
-                    <th
-                      scope="row"
-                      className={`sticky left-0 z-10 bg-[var(--bg-primary)] pl-0 text-left ${th}`}
-                    >
-                      Checked in
-                    </th>
-                    {sessions.map((row) => (
-                      <td
-                        key={row.id}
-                        className="px-3 py-2.5 text-center text-[13px] tabular-nums text-[var(--text-muted)]"
-                      >
-                        {row.attendance}
-                      </td>
-                    ))}
-                    <td />
-                  </tr>
-                </tfoot>
-              </table>
-            </div>
-          )}
-
-          {sessions.length > 0 && (
-            <p className={`mt-4 max-w-2xl ${meta}`}>
-              A session counts anyone who scanned in, member of this bootcamp or
-              not, so a per-session total can run ahead of the rows above. Fix a
-              wrong check-in from that session&rsquo;s Attendance list.
-            </p>
-          )}
-        </section>
-
-        {modalOpen && (
-          <BootcampWorkshopModal
-            mode={selected ? "edit" : "create"}
-            initial={
-              selected
-                ? {
-                    week: String(selected.week),
-                    title: selected.title,
-                    sessionDate: selected.eventDate
-                      ? toLocalInput(new Date(selected.eventDate))
-                      : "",
-                    location: selected.location ?? "",
-                    recordingUrl: selected.recordingUrl ?? "",
-                    materialsFileName: selected.materialsFileName,
-                    solutionFileName: selected.solutionFileName,
-                  }
-                : undefined
-            }
-            isSubmitting={isSaving}
-            error={error}
-            onRemoveFile={removeFile}
-            onSubmit={saveWorkshop}
-            onClose={() => {
-              if (isSaving) return;
-              setModalOpen(false);
-              setSelected(null);
-              setError(null);
-            }}
-          />
-        )}
-      </main>
-    </div>
+    <PrefetchedPage
+      reads={(c) => [
+        ["bootcamp.attendance", { term: undefined }, c.bootcamp.attendance({ term: undefined })],
+        ["bootcamp.adminWorkshops", { term: undefined }, c.bootcamp.adminWorkshops({ term: undefined })],
+      ]}
+    >
+      <AdminBootcampPage />
+    </PrefetchedPage>
   );
 }

From 84e2b555f71d628889166d3d8a197e9d99390f6b Mon Sep 17 00:00:00 2001
From: aamoghS <aamoghsawantt@gmail.com>
Date: Fri, 6 Nov 2026 12:39:31 -0500
Subject: [PATCH 8/9] perf(mainweb): prefetch leads, projects, subteams,
 bootcamp and judge sign-up

Each page held a loading screen until its first tRPC batch returned. Server
pages read the first reads of lead, lead/[id], initiatives, subteams,
club/bootcamp and judge/register for the unchanged client pages. Cold load
median of 5: lead 582 to 369 ms, a project 695 to 432, initiatives 437 to 301,
subteams 643 to 475, club/bootcamp 621 to 392, judge/register 699 to 419.
---
 .../(portal)/club/bootcamp/BootcampPage.tsx   | 213 +++++++
 .../app/(portal)/club/bootcamp/page.tsx       | 219 +------
 .../(portal)/initiatives/InitiativesPage.tsx  | 592 +++++++++++++++++
 .../mainweb/app/(portal)/initiatives/page.tsx | 601 +-----------------
 .../judge/register/JudgeRegisterPage.tsx      | 448 +++++++++++++
 .../app/(portal)/judge/register/page.tsx      | 456 +------------
 sites/mainweb/app/(portal)/lead/LeadPage.tsx  | 365 +++++++++++
 .../(portal)/lead/[id]/LeadInitiativePage.tsx | 351 ++++++++++
 sites/mainweb/app/(portal)/lead/[id]/page.tsx | 358 +----------
 sites/mainweb/app/(portal)/lead/page.tsx      | 369 +----------
 .../app/(portal)/subteams/SubteamsPage.tsx    | 402 ++++++++++++
 sites/mainweb/app/(portal)/subteams/page.tsx  | 408 +-----------
 12 files changed, 2438 insertions(+), 2344 deletions(-)
 create mode 100644 sites/mainweb/app/(portal)/club/bootcamp/BootcampPage.tsx
 create mode 100644 sites/mainweb/app/(portal)/initiatives/InitiativesPage.tsx
 create mode 100644 sites/mainweb/app/(portal)/judge/register/JudgeRegisterPage.tsx
 create mode 100644 sites/mainweb/app/(portal)/lead/LeadPage.tsx
 create mode 100644 sites/mainweb/app/(portal)/lead/[id]/LeadInitiativePage.tsx
 create mode 100644 sites/mainweb/app/(portal)/subteams/SubteamsPage.tsx

diff --git a/sites/mainweb/app/(portal)/club/bootcamp/BootcampPage.tsx b/sites/mainweb/app/(portal)/club/bootcamp/BootcampPage.tsx
new file mode 100644
index 00000000..95aaeb54
--- /dev/null
+++ b/sites/mainweb/app/(portal)/club/bootcamp/BootcampPage.tsx
@@ -0,0 +1,213 @@
+"use client";
+
+import { useEffect } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useSession } from "next-auth/react";
+import { ExternalLink } from "lucide-react";
+import { LoadingScreen } from "@/components/portal/LoadingScreen";
+import { BootcampAddOn } from "@/components/portal/BootcampAddOn";
+import { BootcampMaterialsTable } from "@/components/portal/BootcampMaterialsTable";
+import { trpc } from "@/lib/trpc";
+import { loginHref } from "@/lib/safe-callback";
+import {
+  BOOTCAMP_MEETING_TIME,
+  BOOTCAMP_ROOM,
+  BOOTCAMP_START_DATE,
+  BOOTCAMP_WORKSPACE_URL,
+} from "@/lib/bootcamp-schedule";
+import {
+  MEMBERSHIP_CENTS,
+  SEMESTER_MEMBERSHIP_CENTS,
+  BOOTCAMP_ADDON_CENTS,
+  formatCents,
+} from "@query/api/pricing";
+import {
+  body,
+  btnPrimary,
+  btnSecondary,
+  kicker,
+  label,
+  meta,
+  page,
+  pageDek,
+  pageTitle,
+  sectionRule,
+  sectionTitle,
+  status,
+} from "@/components/portal/ui";
+
+/** `2026-fall` is how it is stored; nobody should have to read it that way. */
+function termLabel(term: string) {
+  const [year, season] = term.split("-");
+  if (!year || !season) return term;
+  return `${season.charAt(0).toUpperCase()}${season.slice(1)} ${year}`;
+}
+
+/** Where and when it meets — the thing somebody checks walking to class. */
+function MeetingCard() {
+  const rows = [
+    { label: "Room", value: BOOTCAMP_ROOM },
+    { label: "Time", value: BOOTCAMP_MEETING_TIME },
+    { label: "First session", value: BOOTCAMP_START_DATE },
+  ];
+
+  return (
+    <dl className="grid grid-cols-1 gap-x-8 gap-y-4 sm:grid-cols-3">
+      {rows.map((row) => (
+        <div key={row.label}>
+          <dt className={label}>{row.label}</dt>
+          <dd className="mt-1 text-[17px] font-semibold text-[var(--text-primary)]">
+            {row.value ?? "To be announced"}
+          </dd>
+        </div>
+      ))}
+    </dl>
+  );
+}
+
+/** Hidden until the URL is set — a button that goes nowhere is worse. */
+function WorkspaceLink() {
+  if (!BOOTCAMP_WORKSPACE_URL) return null;
+
+  return (
+    <a
+      href={BOOTCAMP_WORKSPACE_URL}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={btnSecondary}
+    >
+      Open bootcamp workspace
+      <ExternalLink aria-hidden="true" strokeWidth={1.75} className="h-4 w-4" />
+    </a>
+  );
+}
+
+/** Members buy the add-on here; non-members go to the flow that sells both. */
+function NotEnrolled({ term }: { term: string }) {
+  const memberStatus = trpc.member.checkStatus.useQuery();
+  const isMember = !!memberStatus.data?.isActive;
+
+  return (
+    <div>
+      <h2 className={sectionTitle}>
+        You are not in the {termLabel(term)} bootcamp
+      </h2>
+      <p className={`${body} mt-3 max-w-2xl`}>
+        Nine weeks of Python and data science, taught in person, with the
+        notebooks to keep. It runs for one semester, so joining covers this term
+        {isMember
+          ? ""
+          : ` — ${formatCents(BOOTCAMP_ADDON_CENTS)} on top of a membership (${formatCents(MEMBERSHIP_CENTS)} a year or ${formatCents(SEMESTER_MEMBERSHIP_CENTS)} a semester)`}
+        .
+      </p>
+
+      {isMember ? (
+        <BootcampAddOn term={termLabel(term)} />
+      ) : (
+        <Link href="/dashboard" className={`${btnPrimary} mt-6`}>
+          Become a member
+        </Link>
+      )}
+    </div>
+  );
+}
+
+export default function BootcampPortalPage() {
+  const { data: session, status: sessionStatus } = useSession();
+  const router = useRouter();
+  // Queries wait on the session, so a signed-out visitor otherwise sits on
+  // the loading screen forever.
+  useEffect(() => {
+    if (sessionStatus === "unauthenticated") router.push(loginHref());
+  }, [sessionStatus, router]);
+  const progress = trpc.bootcamp.myProgress.useQuery(undefined, {
+    enabled: !!session,
+  });
+  const workshops = trpc.bootcamp.workshops.useQuery(undefined, {
+    enabled: !!session,
+  });
+
+  if (
+    sessionStatus === "loading" ||
+    progress.isPending ||
+    workshops.isPending
+  ) {
+    return <LoadingScreen message="Loading bootcamp…" />;
+  }
+
+  const data = progress.data;
+  const enrolled = !!data?.enrolled;
+
+  return (
+    <div className="min-h-screen bg-[var(--bg-primary)] text-[var(--text-muted)]">
+      <main className={page}>
+        <header>
+          <p className={kicker}>
+            {data ? `${termLabel(data.term)} · ` : ""}Data Science at Georgia
+            Tech
+          </p>
+          <h1 className={`${pageTitle} mt-2`}>Bootcamp</h1>
+
+          {enrolled && data && (
+            <>
+              <p className="mt-4 flex flex-wrap items-center gap-x-4 gap-y-1">
+                <span className={status("success")}>Enrolled</span>
+                {/* 0 of 0 reads as a failure. */}
+                {data.held > 0 && (
+                  <span className={meta}>
+                    {data.attended} of {data.held} attended
+                  </span>
+                )}
+              </p>
+              <p className={pageDek}>
+                Meeting details, notebooks, datasets, solutions and recordings
+                for the {termLabel(data.term)} cohort. Solutions and recordings
+                go up after each in-person workshop.
+              </p>
+            </>
+          )}
+        </header>
+
+        {progress.error && (
+          <p role="alert" className="mt-6 text-sm text-[var(--danger)]">
+            {progress.error.message}
+          </p>
+        )}
+
+        {workshops.error && (
+          <p role="alert" className="mt-6 text-sm text-[var(--danger)]">
+            {workshops.error.message}
+          </p>
+        )}
+
+        {/* Enrolled members came for the room and time; everyone else needs the offer. */}
+        {(enrolled || data) && (
+          <section className={`${sectionRule} mt-10`}>
+            {enrolled ? <MeetingCard /> : data && <NotEnrolled term={data.term} />}
+          </section>
+        )}
+
+        {/* Scoped to the member's own cohort by the server, so a past cohort's
+            files stay here after the term rolls even though the upsell shows. */}
+        {(enrolled || (workshops.data?.length ?? 0) > 0) && (
+          <section className="mt-12">
+            <h2 className={sectionTitle}>Weekly materials</h2>
+            <div className="mt-4">
+              <BootcampMaterialsTable
+                rows={workshops.data ?? []}
+                term={
+                  data ? termLabel(workshops.data?.[0]?.term ?? data.term) : ""
+                }
+              />
+            </div>
+          </section>
+        )}
+
+        <div className="mt-10">
+          <WorkspaceLink />
+        </div>
+      </main>
+    </div>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/club/bootcamp/page.tsx b/sites/mainweb/app/(portal)/club/bootcamp/page.tsx
index 95aaeb54..f84ca446 100644
--- a/sites/mainweb/app/(portal)/club/bootcamp/page.tsx
+++ b/sites/mainweb/app/(portal)/club/bootcamp/page.tsx
@@ -1,213 +1,16 @@
-"use client";
-
-import { useEffect } from "react";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useSession } from "next-auth/react";
-import { ExternalLink } from "lucide-react";
-import { LoadingScreen } from "@/components/portal/LoadingScreen";
-import { BootcampAddOn } from "@/components/portal/BootcampAddOn";
-import { BootcampMaterialsTable } from "@/components/portal/BootcampMaterialsTable";
-import { trpc } from "@/lib/trpc";
-import { loginHref } from "@/lib/safe-callback";
-import {
-  BOOTCAMP_MEETING_TIME,
-  BOOTCAMP_ROOM,
-  BOOTCAMP_START_DATE,
-  BOOTCAMP_WORKSPACE_URL,
-} from "@/lib/bootcamp-schedule";
-import {
-  MEMBERSHIP_CENTS,
-  SEMESTER_MEMBERSHIP_CENTS,
-  BOOTCAMP_ADDON_CENTS,
-  formatCents,
-} from "@query/api/pricing";
-import {
-  body,
-  btnPrimary,
-  btnSecondary,
-  kicker,
-  label,
-  meta,
-  page,
-  pageDek,
-  pageTitle,
-  sectionRule,
-  sectionTitle,
-  status,
-} from "@/components/portal/ui";
-
-/** `2026-fall` is how it is stored; nobody should have to read it that way. */
-function termLabel(term: string) {
-  const [year, season] = term.split("-");
-  if (!year || !season) return term;
-  return `${season.charAt(0).toUpperCase()}${season.slice(1)} ${year}`;
-}
-
-/** Where and when it meets — the thing somebody checks walking to class. */
-function MeetingCard() {
-  const rows = [
-    { label: "Room", value: BOOTCAMP_ROOM },
-    { label: "Time", value: BOOTCAMP_MEETING_TIME },
-    { label: "First session", value: BOOTCAMP_START_DATE },
-  ];
-
-  return (
-    <dl className="grid grid-cols-1 gap-x-8 gap-y-4 sm:grid-cols-3">
-      {rows.map((row) => (
-        <div key={row.label}>
-          <dt className={label}>{row.label}</dt>
-          <dd className="mt-1 text-[17px] font-semibold text-[var(--text-primary)]">
-            {row.value ?? "To be announced"}
-          </dd>
-        </div>
-      ))}
-    </dl>
-  );
-}
-
-/** Hidden until the URL is set — a button that goes nowhere is worse. */
-function WorkspaceLink() {
-  if (!BOOTCAMP_WORKSPACE_URL) return null;
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import BootcampPage from "./BootcampPage";
 
+export default function Page() {
   return (
-    <a
-      href={BOOTCAMP_WORKSPACE_URL}
-      target="_blank"
-      rel="noopener noreferrer"
-      className={btnSecondary}
+    <PrefetchedPage
+      reads={(c) => [
+        ["bootcamp.myProgress", undefined, c.bootcamp.myProgress()],
+        ["bootcamp.workshops", undefined, c.bootcamp.workshops()],
+        ["member.checkStatus", undefined, c.member.checkStatus()],
+      ]}
     >
-      Open bootcamp workspace
-      <ExternalLink aria-hidden="true" strokeWidth={1.75} className="h-4 w-4" />
-    </a>
-  );
-}
-
-/** Members buy the add-on here; non-members go to the flow that sells both. */
-function NotEnrolled({ term }: { term: string }) {
-  const memberStatus = trpc.member.checkStatus.useQuery();
-  const isMember = !!memberStatus.data?.isActive;
-
-  return (
-    <div>
-      <h2 className={sectionTitle}>
-        You are not in the {termLabel(term)} bootcamp
-      </h2>
-      <p className={`${body} mt-3 max-w-2xl`}>
-        Nine weeks of Python and data science, taught in person, with the
-        notebooks to keep. It runs for one semester, so joining covers this term
-        {isMember
-          ? ""
-          : ` — ${formatCents(BOOTCAMP_ADDON_CENTS)} on top of a membership (${formatCents(MEMBERSHIP_CENTS)} a year or ${formatCents(SEMESTER_MEMBERSHIP_CENTS)} a semester)`}
-        .
-      </p>
-
-      {isMember ? (
-        <BootcampAddOn term={termLabel(term)} />
-      ) : (
-        <Link href="/dashboard" className={`${btnPrimary} mt-6`}>
-          Become a member
-        </Link>
-      )}
-    </div>
-  );
-}
-
-export default function BootcampPortalPage() {
-  const { data: session, status: sessionStatus } = useSession();
-  const router = useRouter();
-  // Queries wait on the session, so a signed-out visitor otherwise sits on
-  // the loading screen forever.
-  useEffect(() => {
-    if (sessionStatus === "unauthenticated") router.push(loginHref());
-  }, [sessionStatus, router]);
-  const progress = trpc.bootcamp.myProgress.useQuery(undefined, {
-    enabled: !!session,
-  });
-  const workshops = trpc.bootcamp.workshops.useQuery(undefined, {
-    enabled: !!session,
-  });
-
-  if (
-    sessionStatus === "loading" ||
-    progress.isPending ||
-    workshops.isPending
-  ) {
-    return <LoadingScreen message="Loading bootcamp…" />;
-  }
-
-  const data = progress.data;
-  const enrolled = !!data?.enrolled;
-
-  return (
-    <div className="min-h-screen bg-[var(--bg-primary)] text-[var(--text-muted)]">
-      <main className={page}>
-        <header>
-          <p className={kicker}>
-            {data ? `${termLabel(data.term)} · ` : ""}Data Science at Georgia
-            Tech
-          </p>
-          <h1 className={`${pageTitle} mt-2`}>Bootcamp</h1>
-
-          {enrolled && data && (
-            <>
-              <p className="mt-4 flex flex-wrap items-center gap-x-4 gap-y-1">
-                <span className={status("success")}>Enrolled</span>
-                {/* 0 of 0 reads as a failure. */}
-                {data.held > 0 && (
-                  <span className={meta}>
-                    {data.attended} of {data.held} attended
-                  </span>
-                )}
-              </p>
-              <p className={pageDek}>
-                Meeting details, notebooks, datasets, solutions and recordings
-                for the {termLabel(data.term)} cohort. Solutions and recordings
-                go up after each in-person workshop.
-              </p>
-            </>
-          )}
-        </header>
-
-        {progress.error && (
-          <p role="alert" className="mt-6 text-sm text-[var(--danger)]">
-            {progress.error.message}
-          </p>
-        )}
-
-        {workshops.error && (
-          <p role="alert" className="mt-6 text-sm text-[var(--danger)]">
-            {workshops.error.message}
-          </p>
-        )}
-
-        {/* Enrolled members came for the room and time; everyone else needs the offer. */}
-        {(enrolled || data) && (
-          <section className={`${sectionRule} mt-10`}>
-            {enrolled ? <MeetingCard /> : data && <NotEnrolled term={data.term} />}
-          </section>
-        )}
-
-        {/* Scoped to the member's own cohort by the server, so a past cohort's
-            files stay here after the term rolls even though the upsell shows. */}
-        {(enrolled || (workshops.data?.length ?? 0) > 0) && (
-          <section className="mt-12">
-            <h2 className={sectionTitle}>Weekly materials</h2>
-            <div className="mt-4">
-              <BootcampMaterialsTable
-                rows={workshops.data ?? []}
-                term={
-                  data ? termLabel(workshops.data?.[0]?.term ?? data.term) : ""
-                }
-              />
-            </div>
-          </section>
-        )}
-
-        <div className="mt-10">
-          <WorkspaceLink />
-        </div>
-      </main>
-    </div>
+      <BootcampPage />
+    </PrefetchedPage>
   );
 }
diff --git a/sites/mainweb/app/(portal)/initiatives/InitiativesPage.tsx b/sites/mainweb/app/(portal)/initiatives/InitiativesPage.tsx
new file mode 100644
index 00000000..fc963737
--- /dev/null
+++ b/sites/mainweb/app/(portal)/initiatives/InitiativesPage.tsx
@@ -0,0 +1,592 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useSession } from "next-auth/react";
+import { LoadingScreen } from "@/components/portal/LoadingScreen";
+import {
+  ApplicationChip,
+  InitiativeChip,
+  initiativeState,
+  seatLabel,
+} from "@/components/portal/initiatives/chips";
+import {
+  InitiativeFields,
+  emptyDraft,
+  toInput,
+} from "@/components/portal/initiatives/form-fields";
+import {
+  body,
+  btnDanger,
+  btnPrimary,
+  btnSecondary,
+  fieldHint,
+  fieldLabel,
+  input,
+  itemTitle,
+  meta,
+  object,
+  page,
+  pageDek,
+  pageTitle,
+  sectionTitle,
+} from "@/components/portal/ui";
+import { trpc } from "@/lib/trpc";
+import { loginHref } from "@/lib/safe-callback";
+import type { RouterOutputs } from "@query/api";
+
+type OpenInitiative = RouterOutputs["initiative"]["list"][number];
+type MyApplication = RouterOutputs["initiative"]["myApplications"][number];
+type MyProposal = RouterOutputs["initiative"]["myProposals"][number];
+
+const errorText = "text-sm text-[var(--danger)]";
+const quietAction =
+  "text-sm font-semibold text-[var(--text-subtle)] transition-colors hover:text-[var(--text-primary)] disabled:opacity-50";
+const inlineLink =
+  "font-semibold text-[var(--text-primary)] underline decoration-accent underline-offset-4 hover:decoration-[var(--text-primary)]";
+const listRow = "border-b border-[var(--border-subtle)] py-5";
+
+/**
+ * Proposing something to run, rather than joining something that exists.
+ *
+ * An admin reviews it; approving turns the proposal into a draft project
+ * and makes the proposer a project leader, so this is the one place a member
+ * can earn that role.
+ */
+function ProposeSection({ canPropose }: { canPropose: boolean }) {
+  const utils = trpc.useUtils();
+  const [open, setOpen] = useState(false);
+  const [draft, setDraft] = useState(emptyDraft);
+
+  const propose = trpc.initiative.propose.useMutation({
+    onSuccess: async () => {
+      setOpen(false);
+      setDraft(emptyDraft);
+      await utils.initiative.myProposals.invalidate();
+    },
+  });
+
+  if (!canPropose) return null;
+
+  if (!open) {
+    return (
+      <section className="mt-12 flex flex-col justify-between gap-4 border-t border-[var(--border-subtle)] pt-6 md:flex-row md:items-end">
+        <div>
+          <h2 className={sectionTitle}>Have something to build?</h2>
+          <p className={`${body} mt-2 max-w-xl`}>
+            Pitch it. If it is approved you become its project leader and pick
+            who joins.
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={() => setOpen(true)}
+          className={`${btnSecondary} shrink-0 self-start md:self-auto`}
+        >
+          Propose a project
+        </button>
+      </section>
+    );
+  }
+
+  return (
+    <section className="mt-12 border-t border-[var(--border-subtle)] pt-6">
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+          propose.mutate(toInput(draft));
+        }}
+      >
+        <h2 className={sectionTitle}>Propose a project</h2>
+        <p className={`${body} mt-2 mb-5 max-w-xl`}>
+          An organiser reviews it. If it is approved you lead it and pick who
+          joins.
+        </p>
+        <InitiativeFields draft={draft} onChange={setDraft} />
+
+        <div className="mt-5 flex flex-wrap gap-3">
+          <button
+            type="submit"
+            disabled={propose.isPending}
+            className={btnPrimary}
+          >
+            {propose.isPending ? "Sending…" : "Send for review"}
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              setOpen(false);
+              propose.reset();
+            }}
+            className={btnSecondary}
+          >
+            Cancel
+          </button>
+        </div>
+
+        {propose.error && (
+          <p aria-live="polite" className={`${errorText} mt-3`}>
+            {propose.error.message}
+          </p>
+        )}
+      </form>
+    </section>
+  );
+}
+
+function ProposalRow({ proposal }: { proposal: MyProposal }) {
+  const utils = trpc.useUtils();
+
+  const withdraw = trpc.initiative.withdrawProposal.useMutation({
+    onSuccess: async () => {
+      await utils.initiative.myProposals.invalidate();
+    },
+  });
+
+  const state = initiativeState(proposal);
+
+  return (
+    <li className={listRow}>
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
+            <h3 className="text-[15px] font-semibold text-[var(--text-primary)]">
+              {proposal.title}
+            </h3>
+            <InitiativeChip state={state} />
+          </div>
+          {proposal.summary && (
+            <p className={`${body} mt-1`}>{proposal.summary}</p>
+          )}
+
+          {/* The reviewer's note is the whole point of a decline — without it a
+              member has no idea what to change before pitching again. */}
+          {proposal.reviewNote && (
+            <p
+              className={`${body} mt-3 border-l-2 border-[var(--border-medium)] pl-3`}
+            >
+              {proposal.reviewNote}
+            </p>
+          )}
+
+          {proposal.status === "draft" && (
+            <p className={`${body} mt-2`}>
+              Approved. Finish writing it and open it to members from{" "}
+              <Link href="/lead" className={inlineLink}>
+                your projects
+              </Link>
+              .
+            </p>
+          )}
+        </div>
+
+        {proposal.status === "proposed" && (
+          <button
+            type="button"
+            disabled={withdraw.isPending}
+            onClick={() => withdraw.mutate({ id: proposal.id })}
+            className={`${quietAction} shrink-0`}
+          >
+            Withdraw
+          </button>
+        )}
+      </div>
+
+      {withdraw.error && (
+        <p className={`${errorText} mt-3`}>{withdraw.error.message}</p>
+      )}
+    </li>
+  );
+}
+
+function OpenRow({
+  initiative,
+  canApply,
+}: {
+  initiative: OpenInitiative;
+  canApply: boolean;
+}) {
+  const utils = trpc.useUtils();
+  const [writing, setWriting] = useState(false);
+  const [pitch, setPitch] = useState("");
+
+  // Both lists move together: applying takes a project out of one and puts
+  // it into the other, so refreshing one alone renders it twice.
+  const refresh = async () => {
+    await Promise.all([
+      utils.initiative.list.invalidate(),
+      utils.initiative.myApplications.invalidate(),
+    ]);
+  };
+
+  const [resume, setResume] = useState<{
+    fileName: string;
+    dataUrl: string;
+  } | null>(null);
+  const [resumeError, setResumeError] = useState<string | null>(null);
+
+  const join = trpc.initiative.requestToJoin.useMutation({
+    onSuccess: async () => {
+      setWriting(false);
+      setPitch("");
+      setResume(null);
+      await refresh();
+    },
+  });
+
+  // 2 MB is the server's whole-payload cap; catching it here saves a round
+  // trip and says which file was too big.
+  const readResume = (file: File | undefined) => {
+    setResumeError(null);
+    // Cleared first: a rejected pick must not leave the previous file attached
+    // and submitted under the error.
+    setResume(null);
+    if (!file) return;
+    if (file.type !== "application/pdf") {
+      return setResumeError(
+        "Your resume must be a PDF. Export it as one and try again.",
+      );
+    }
+    if (file.size > 1.4 * 1024 * 1024) {
+      return setResumeError(
+        "That PDF is over 1.4 MB. Compress it and try again.",
+      );
+    }
+    const reader = new FileReader();
+    reader.onload = () =>
+      setResume({ fileName: file.name, dataUrl: String(reader.result) });
+    reader.onerror = () =>
+      setResumeError("Could not read that file. Try choosing it again.");
+    reader.readAsDataURL(file);
+  };
+
+  return (
+    <li className={`${object} p-5`}>
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div className="min-w-0 flex-1">
+          <h3 className={itemTitle}>{initiative.title}</h3>
+          <p className={`${meta} mt-1`}>
+            Led by {initiative.leaderName ?? "a project leader"} ·{" "}
+            {seatLabel(initiative.accepted, initiative.maxMembers)}
+            {initiative.commitment ? ` · ${initiative.commitment}` : ""}
+          </p>
+        </div>
+
+        {initiative.isFull ? (
+          <span className="shrink-0 text-sm font-semibold text-[var(--text-subtle)]">
+            Full
+          </span>
+        ) : (
+          !writing &&
+          canApply && (
+            <button
+              type="button"
+              onClick={() => setWriting(true)}
+              className={`${btnSecondary} shrink-0`}
+            >
+              Apply
+            </button>
+          )
+        )}
+      </div>
+
+      {initiative.summary && (
+        <p className="mt-3 text-[15px] leading-relaxed text-[var(--text-secondary)]">
+          {initiative.summary}
+        </p>
+      )}
+      {initiative.description && (
+        <p className={`${body} mt-2 whitespace-pre-line`}>
+          {initiative.description}
+        </p>
+      )}
+
+      {!canApply && !initiative.isFull && (
+        <p className={`${meta} mt-3`}>
+          Joining needs an active membership.{" "}
+          <Link href="/dashboard" className={inlineLink}>
+            Become a member
+          </Link>
+        </p>
+      )}
+
+      {writing && (
+        <form
+          className="mt-5 border-t border-[var(--border-subtle)] pt-5"
+          onSubmit={(event) => {
+            event.preventDefault();
+            join.mutate({
+              initiativeId: initiative.id,
+              pitch: pitch.trim(),
+              resume: resume ?? undefined,
+            });
+          }}
+        >
+          <label htmlFor={`pitch-${initiative.id}`} className={fieldLabel}>
+            Why do you want to join?
+          </label>
+          <textarea
+            id={`pitch-${initiative.id}`}
+            rows={3}
+            required
+            maxLength={1000}
+            value={pitch}
+            onChange={(event) => setPitch(event.target.value)}
+            placeholder="What you want to work on, and what you have built before."
+            className={input}
+          />
+
+          <label
+            htmlFor={`resume-${initiative.id}`}
+            className={`${fieldLabel} mt-5`}
+          >
+            Resume (PDF, optional)
+          </label>
+          <input
+            id={`resume-${initiative.id}`}
+            type="file"
+            accept="application/pdf,.pdf"
+            onChange={(event) => readResume(event.target.files?.[0])}
+            className="block w-full text-sm text-[var(--text-muted)] file:mr-3 file:cursor-pointer file:rounded-[var(--radius-sm)] file:border file:border-solid file:border-[var(--border-medium)] file:bg-transparent file:px-4 file:py-2 file:text-sm file:font-semibold file:text-[var(--text-primary)] hover:file:bg-[var(--bg-secondary)]"
+          />
+          {resume && <p className={fieldHint}>Attached: {resume.fileName}</p>}
+          {resumeError && (
+            <p aria-live="polite" className={`${errorText} mt-1.5`}>
+              {resumeError}
+            </p>
+          )}
+
+          <div className="mt-5 flex flex-wrap gap-3">
+            <button
+              type="submit"
+              disabled={join.isPending || !pitch.trim()}
+              className={btnPrimary}
+            >
+              {join.isPending ? "Sending…" : "Send application"}
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                setWriting(false);
+                join.reset();
+              }}
+              className={btnSecondary}
+            >
+              Cancel
+            </button>
+          </div>
+
+          {join.error && (
+            <p aria-live="polite" className={`${errorText} mt-3`}>
+              {join.error.message}
+            </p>
+          )}
+        </form>
+      )}
+    </li>
+  );
+}
+
+function ApplicationRow({ application }: { application: MyApplication }) {
+  const utils = trpc.useUtils();
+  const [confirm, setConfirm] = useState(false);
+
+  const withdraw = trpc.initiative.withdraw.useMutation({
+    onSuccess: async () => {
+      await Promise.all([
+        utils.initiative.list.invalidate(),
+        utils.initiative.myApplications.invalidate(),
+      ]);
+    },
+  });
+
+  // Nothing to leave once the leader has said no, and an archived project is
+  // over — the control would change nothing either way.
+  const canWithdraw =
+    application.myStatus !== "rejected" && application.archivedAt === null;
+  const leaving = application.myStatus === "accepted";
+
+  return (
+    <li className={listRow}>
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
+            <h3 className="text-[15px] font-semibold text-[var(--text-primary)]">
+              {application.title}
+            </h3>
+            <ApplicationChip status={application.myStatus} />
+          </div>
+          <p className={`${meta} mt-1`}>
+            Led by {application.leaderName ?? "a project leader"}
+            {application.archivedAt !== null ? " · archived" : ""}
+          </p>
+          {application.leaderEmail && (
+            <p className={`${body} mt-1`}>
+              Reach them at{" "}
+              <a
+                href={`mailto:${application.leaderEmail}`}
+                className={inlineLink}
+              >
+                {application.leaderEmail}
+              </a>
+            </p>
+          )}
+        </div>
+
+        {canWithdraw &&
+          (confirm ? (
+            <span className="flex flex-wrap items-center gap-3">
+              <span className="text-sm text-[var(--text-muted)]">
+                {leaving ? "Leave this project?" : "Withdraw your application?"}
+              </span>
+              <button
+                type="button"
+                disabled={withdraw.isPending}
+                onClick={() => {
+                  withdraw.mutate({ initiativeId: application.id });
+                  setConfirm(false);
+                }}
+                className={btnDanger}
+              >
+                {leaving ? "Leave" : "Withdraw"}
+              </button>
+              <button
+                type="button"
+                onClick={() => setConfirm(false)}
+                className={btnSecondary}
+              >
+                Cancel
+              </button>
+            </span>
+          ) : (
+            <button
+              type="button"
+              onClick={() => setConfirm(true)}
+              className={`${quietAction} shrink-0`}
+            >
+              {leaving ? "Leave" : "Withdraw"}
+            </button>
+          ))}
+      </div>
+
+      {withdraw.error && (
+        <p className={`${errorText} mt-3`}>{withdraw.error.message}</p>
+      )}
+    </li>
+  );
+}
+
+export default function InitiativesPage() {
+  const { data: session, status } = useSession();
+  const router = useRouter();
+  // Queries wait on the session, so a signed-out visitor otherwise sits on
+  // the loading screen forever.
+  useEffect(() => {
+    if (status === "unauthenticated") router.push(loginHref());
+  }, [status, router]);
+
+  const open = trpc.initiative.list.useQuery(undefined, { enabled: !!session });
+  const mine = trpc.initiative.myApplications.useQuery(undefined, {
+    enabled: !!session,
+  });
+  const memberStatus = trpc.member.checkStatus.useQuery(undefined, {
+    enabled: !!session,
+  });
+  const proposals = trpc.initiative.myProposals.useQuery(undefined, {
+    enabled: !!session,
+  });
+
+  if (
+    status === "loading" ||
+    open.isPending ||
+    mine.isPending ||
+    proposals.isPending
+  ) {
+    return <LoadingScreen />;
+  }
+
+  const applications = mine.data ?? [];
+  const myProposals = proposals.data ?? [];
+  // Already applied belongs in the member's own list, not in the one offering
+  // them a chance to apply again.
+  const joinable = (open.data ?? []).filter((row) => row.myStatus === null);
+  const canApply = !!memberStatus.data?.isActive;
+  const loadError = open.error ?? mine.error ?? proposals.error;
+
+  return (
+    <div className={page}>
+      <Link
+        href="/dashboard"
+        className="text-[13px] text-[var(--text-subtle)] transition-colors hover:text-[var(--text-primary)]"
+      >
+        ← Dashboard
+      </Link>
+
+      <header className="mt-6">
+        <h1 className={pageTitle}>
+          {joinable.length > 0
+            ? `${joinable.length} club project${joinable.length === 1 ? " is" : "s are"} taking members`
+            : "Club projects"}
+        </h1>
+        <p className={pageDek}>
+          Projects the club runs year-round. Leaders post what they are building
+          and pick who joins.
+        </p>
+      </header>
+
+      {loadError && (
+        <p className={`${errorText} mt-6`}>
+          {loadError.message} Refresh the page to try again.
+        </p>
+      )}
+
+      <section className="mt-10">
+        <h2 className={sectionTitle}>Open to join</h2>
+        {joinable.length > 0 ? (
+          <ul className="mt-5 space-y-4">
+            {joinable.map((initiative) => (
+              <OpenRow
+                key={initiative.id}
+                initiative={initiative}
+                canApply={canApply}
+              />
+            ))}
+          </ul>
+        ) : (
+          <p className={`${body} mt-3 max-w-xl`}>
+            {applications.length > 0
+              ? "Nothing else is open right now."
+              : "No projects are taking applications right now."}{" "}
+            Leaders open them through the year, so check back or ask at a
+            general meeting what is being planned.
+          </p>
+        )}
+      </section>
+
+      {applications.length > 0 && (
+        <section className="mt-12">
+          <h2 className={sectionTitle}>Your applications</h2>
+          <ul className="mt-4 border-t border-[var(--border-subtle)]">
+            {applications.map((application) => (
+              <ApplicationRow key={application.id} application={application} />
+            ))}
+          </ul>
+        </section>
+      )}
+
+      {myProposals.length > 0 && (
+        <section className="mt-12">
+          <h2 className={sectionTitle}>What you proposed</h2>
+          <ul className="mt-4 border-t border-[var(--border-subtle)]">
+            {myProposals.map((proposal) => (
+              <ProposalRow key={proposal.id} proposal={proposal} />
+            ))}
+          </ul>
+        </section>
+      )}
+
+      <ProposeSection canPropose={canApply} />
+    </div>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/initiatives/page.tsx b/sites/mainweb/app/(portal)/initiatives/page.tsx
index fc963737..cb4bcbec 100644
--- a/sites/mainweb/app/(portal)/initiatives/page.tsx
+++ b/sites/mainweb/app/(portal)/initiatives/page.tsx
@@ -1,592 +1,17 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useSession } from "next-auth/react";
-import { LoadingScreen } from "@/components/portal/LoadingScreen";
-import {
-  ApplicationChip,
-  InitiativeChip,
-  initiativeState,
-  seatLabel,
-} from "@/components/portal/initiatives/chips";
-import {
-  InitiativeFields,
-  emptyDraft,
-  toInput,
-} from "@/components/portal/initiatives/form-fields";
-import {
-  body,
-  btnDanger,
-  btnPrimary,
-  btnSecondary,
-  fieldHint,
-  fieldLabel,
-  input,
-  itemTitle,
-  meta,
-  object,
-  page,
-  pageDek,
-  pageTitle,
-  sectionTitle,
-} from "@/components/portal/ui";
-import { trpc } from "@/lib/trpc";
-import { loginHref } from "@/lib/safe-callback";
-import type { RouterOutputs } from "@query/api";
-
-type OpenInitiative = RouterOutputs["initiative"]["list"][number];
-type MyApplication = RouterOutputs["initiative"]["myApplications"][number];
-type MyProposal = RouterOutputs["initiative"]["myProposals"][number];
-
-const errorText = "text-sm text-[var(--danger)]";
-const quietAction =
-  "text-sm font-semibold text-[var(--text-subtle)] transition-colors hover:text-[var(--text-primary)] disabled:opacity-50";
-const inlineLink =
-  "font-semibold text-[var(--text-primary)] underline decoration-accent underline-offset-4 hover:decoration-[var(--text-primary)]";
-const listRow = "border-b border-[var(--border-subtle)] py-5";
-
-/**
- * Proposing something to run, rather than joining something that exists.
- *
- * An admin reviews it; approving turns the proposal into a draft project
- * and makes the proposer a project leader, so this is the one place a member
- * can earn that role.
- */
-function ProposeSection({ canPropose }: { canPropose: boolean }) {
-  const utils = trpc.useUtils();
-  const [open, setOpen] = useState(false);
-  const [draft, setDraft] = useState(emptyDraft);
-
-  const propose = trpc.initiative.propose.useMutation({
-    onSuccess: async () => {
-      setOpen(false);
-      setDraft(emptyDraft);
-      await utils.initiative.myProposals.invalidate();
-    },
-  });
-
-  if (!canPropose) return null;
-
-  if (!open) {
-    return (
-      <section className="mt-12 flex flex-col justify-between gap-4 border-t border-[var(--border-subtle)] pt-6 md:flex-row md:items-end">
-        <div>
-          <h2 className={sectionTitle}>Have something to build?</h2>
-          <p className={`${body} mt-2 max-w-xl`}>
-            Pitch it. If it is approved you become its project leader and pick
-            who joins.
-          </p>
-        </div>
-        <button
-          type="button"
-          onClick={() => setOpen(true)}
-          className={`${btnSecondary} shrink-0 self-start md:self-auto`}
-        >
-          Propose a project
-        </button>
-      </section>
-    );
-  }
-
-  return (
-    <section className="mt-12 border-t border-[var(--border-subtle)] pt-6">
-      <form
-        onSubmit={(event) => {
-          event.preventDefault();
-          propose.mutate(toInput(draft));
-        }}
-      >
-        <h2 className={sectionTitle}>Propose a project</h2>
-        <p className={`${body} mt-2 mb-5 max-w-xl`}>
-          An organiser reviews it. If it is approved you lead it and pick who
-          joins.
-        </p>
-        <InitiativeFields draft={draft} onChange={setDraft} />
-
-        <div className="mt-5 flex flex-wrap gap-3">
-          <button
-            type="submit"
-            disabled={propose.isPending}
-            className={btnPrimary}
-          >
-            {propose.isPending ? "Sending…" : "Send for review"}
-          </button>
-          <button
-            type="button"
-            onClick={() => {
-              setOpen(false);
-              propose.reset();
-            }}
-            className={btnSecondary}
-          >
-            Cancel
-          </button>
-        </div>
-
-        {propose.error && (
-          <p aria-live="polite" className={`${errorText} mt-3`}>
-            {propose.error.message}
-          </p>
-        )}
-      </form>
-    </section>
-  );
-}
-
-function ProposalRow({ proposal }: { proposal: MyProposal }) {
-  const utils = trpc.useUtils();
-
-  const withdraw = trpc.initiative.withdrawProposal.useMutation({
-    onSuccess: async () => {
-      await utils.initiative.myProposals.invalidate();
-    },
-  });
-
-  const state = initiativeState(proposal);
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import InitiativesPage from "./InitiativesPage";
 
+export default function Page() {
   return (
-    <li className={listRow}>
-      <div className="flex flex-wrap items-start justify-between gap-4">
-        <div className="min-w-0 flex-1">
-          <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
-            <h3 className="text-[15px] font-semibold text-[var(--text-primary)]">
-              {proposal.title}
-            </h3>
-            <InitiativeChip state={state} />
-          </div>
-          {proposal.summary && (
-            <p className={`${body} mt-1`}>{proposal.summary}</p>
-          )}
-
-          {/* The reviewer's note is the whole point of a decline — without it a
-              member has no idea what to change before pitching again. */}
-          {proposal.reviewNote && (
-            <p
-              className={`${body} mt-3 border-l-2 border-[var(--border-medium)] pl-3`}
-            >
-              {proposal.reviewNote}
-            </p>
-          )}
-
-          {proposal.status === "draft" && (
-            <p className={`${body} mt-2`}>
-              Approved. Finish writing it and open it to members from{" "}
-              <Link href="/lead" className={inlineLink}>
-                your projects
-              </Link>
-              .
-            </p>
-          )}
-        </div>
-
-        {proposal.status === "proposed" && (
-          <button
-            type="button"
-            disabled={withdraw.isPending}
-            onClick={() => withdraw.mutate({ id: proposal.id })}
-            className={`${quietAction} shrink-0`}
-          >
-            Withdraw
-          </button>
-        )}
-      </div>
-
-      {withdraw.error && (
-        <p className={`${errorText} mt-3`}>{withdraw.error.message}</p>
-      )}
-    </li>
-  );
-}
-
-function OpenRow({
-  initiative,
-  canApply,
-}: {
-  initiative: OpenInitiative;
-  canApply: boolean;
-}) {
-  const utils = trpc.useUtils();
-  const [writing, setWriting] = useState(false);
-  const [pitch, setPitch] = useState("");
-
-  // Both lists move together: applying takes a project out of one and puts
-  // it into the other, so refreshing one alone renders it twice.
-  const refresh = async () => {
-    await Promise.all([
-      utils.initiative.list.invalidate(),
-      utils.initiative.myApplications.invalidate(),
-    ]);
-  };
-
-  const [resume, setResume] = useState<{
-    fileName: string;
-    dataUrl: string;
-  } | null>(null);
-  const [resumeError, setResumeError] = useState<string | null>(null);
-
-  const join = trpc.initiative.requestToJoin.useMutation({
-    onSuccess: async () => {
-      setWriting(false);
-      setPitch("");
-      setResume(null);
-      await refresh();
-    },
-  });
-
-  // 2 MB is the server's whole-payload cap; catching it here saves a round
-  // trip and says which file was too big.
-  const readResume = (file: File | undefined) => {
-    setResumeError(null);
-    // Cleared first: a rejected pick must not leave the previous file attached
-    // and submitted under the error.
-    setResume(null);
-    if (!file) return;
-    if (file.type !== "application/pdf") {
-      return setResumeError(
-        "Your resume must be a PDF. Export it as one and try again.",
-      );
-    }
-    if (file.size > 1.4 * 1024 * 1024) {
-      return setResumeError(
-        "That PDF is over 1.4 MB. Compress it and try again.",
-      );
-    }
-    const reader = new FileReader();
-    reader.onload = () =>
-      setResume({ fileName: file.name, dataUrl: String(reader.result) });
-    reader.onerror = () =>
-      setResumeError("Could not read that file. Try choosing it again.");
-    reader.readAsDataURL(file);
-  };
-
-  return (
-    <li className={`${object} p-5`}>
-      <div className="flex flex-wrap items-start justify-between gap-4">
-        <div className="min-w-0 flex-1">
-          <h3 className={itemTitle}>{initiative.title}</h3>
-          <p className={`${meta} mt-1`}>
-            Led by {initiative.leaderName ?? "a project leader"} ·{" "}
-            {seatLabel(initiative.accepted, initiative.maxMembers)}
-            {initiative.commitment ? ` · ${initiative.commitment}` : ""}
-          </p>
-        </div>
-
-        {initiative.isFull ? (
-          <span className="shrink-0 text-sm font-semibold text-[var(--text-subtle)]">
-            Full
-          </span>
-        ) : (
-          !writing &&
-          canApply && (
-            <button
-              type="button"
-              onClick={() => setWriting(true)}
-              className={`${btnSecondary} shrink-0`}
-            >
-              Apply
-            </button>
-          )
-        )}
-      </div>
-
-      {initiative.summary && (
-        <p className="mt-3 text-[15px] leading-relaxed text-[var(--text-secondary)]">
-          {initiative.summary}
-        </p>
-      )}
-      {initiative.description && (
-        <p className={`${body} mt-2 whitespace-pre-line`}>
-          {initiative.description}
-        </p>
-      )}
-
-      {!canApply && !initiative.isFull && (
-        <p className={`${meta} mt-3`}>
-          Joining needs an active membership.{" "}
-          <Link href="/dashboard" className={inlineLink}>
-            Become a member
-          </Link>
-        </p>
-      )}
-
-      {writing && (
-        <form
-          className="mt-5 border-t border-[var(--border-subtle)] pt-5"
-          onSubmit={(event) => {
-            event.preventDefault();
-            join.mutate({
-              initiativeId: initiative.id,
-              pitch: pitch.trim(),
-              resume: resume ?? undefined,
-            });
-          }}
-        >
-          <label htmlFor={`pitch-${initiative.id}`} className={fieldLabel}>
-            Why do you want to join?
-          </label>
-          <textarea
-            id={`pitch-${initiative.id}`}
-            rows={3}
-            required
-            maxLength={1000}
-            value={pitch}
-            onChange={(event) => setPitch(event.target.value)}
-            placeholder="What you want to work on, and what you have built before."
-            className={input}
-          />
-
-          <label
-            htmlFor={`resume-${initiative.id}`}
-            className={`${fieldLabel} mt-5`}
-          >
-            Resume (PDF, optional)
-          </label>
-          <input
-            id={`resume-${initiative.id}`}
-            type="file"
-            accept="application/pdf,.pdf"
-            onChange={(event) => readResume(event.target.files?.[0])}
-            className="block w-full text-sm text-[var(--text-muted)] file:mr-3 file:cursor-pointer file:rounded-[var(--radius-sm)] file:border file:border-solid file:border-[var(--border-medium)] file:bg-transparent file:px-4 file:py-2 file:text-sm file:font-semibold file:text-[var(--text-primary)] hover:file:bg-[var(--bg-secondary)]"
-          />
-          {resume && <p className={fieldHint}>Attached: {resume.fileName}</p>}
-          {resumeError && (
-            <p aria-live="polite" className={`${errorText} mt-1.5`}>
-              {resumeError}
-            </p>
-          )}
-
-          <div className="mt-5 flex flex-wrap gap-3">
-            <button
-              type="submit"
-              disabled={join.isPending || !pitch.trim()}
-              className={btnPrimary}
-            >
-              {join.isPending ? "Sending…" : "Send application"}
-            </button>
-            <button
-              type="button"
-              onClick={() => {
-                setWriting(false);
-                join.reset();
-              }}
-              className={btnSecondary}
-            >
-              Cancel
-            </button>
-          </div>
-
-          {join.error && (
-            <p aria-live="polite" className={`${errorText} mt-3`}>
-              {join.error.message}
-            </p>
-          )}
-        </form>
-      )}
-    </li>
-  );
-}
-
-function ApplicationRow({ application }: { application: MyApplication }) {
-  const utils = trpc.useUtils();
-  const [confirm, setConfirm] = useState(false);
-
-  const withdraw = trpc.initiative.withdraw.useMutation({
-    onSuccess: async () => {
-      await Promise.all([
-        utils.initiative.list.invalidate(),
-        utils.initiative.myApplications.invalidate(),
-      ]);
-    },
-  });
-
-  // Nothing to leave once the leader has said no, and an archived project is
-  // over — the control would change nothing either way.
-  const canWithdraw =
-    application.myStatus !== "rejected" && application.archivedAt === null;
-  const leaving = application.myStatus === "accepted";
-
-  return (
-    <li className={listRow}>
-      <div className="flex flex-wrap items-start justify-between gap-4">
-        <div className="min-w-0 flex-1">
-          <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
-            <h3 className="text-[15px] font-semibold text-[var(--text-primary)]">
-              {application.title}
-            </h3>
-            <ApplicationChip status={application.myStatus} />
-          </div>
-          <p className={`${meta} mt-1`}>
-            Led by {application.leaderName ?? "a project leader"}
-            {application.archivedAt !== null ? " · archived" : ""}
-          </p>
-          {application.leaderEmail && (
-            <p className={`${body} mt-1`}>
-              Reach them at{" "}
-              <a
-                href={`mailto:${application.leaderEmail}`}
-                className={inlineLink}
-              >
-                {application.leaderEmail}
-              </a>
-            </p>
-          )}
-        </div>
-
-        {canWithdraw &&
-          (confirm ? (
-            <span className="flex flex-wrap items-center gap-3">
-              <span className="text-sm text-[var(--text-muted)]">
-                {leaving ? "Leave this project?" : "Withdraw your application?"}
-              </span>
-              <button
-                type="button"
-                disabled={withdraw.isPending}
-                onClick={() => {
-                  withdraw.mutate({ initiativeId: application.id });
-                  setConfirm(false);
-                }}
-                className={btnDanger}
-              >
-                {leaving ? "Leave" : "Withdraw"}
-              </button>
-              <button
-                type="button"
-                onClick={() => setConfirm(false)}
-                className={btnSecondary}
-              >
-                Cancel
-              </button>
-            </span>
-          ) : (
-            <button
-              type="button"
-              onClick={() => setConfirm(true)}
-              className={`${quietAction} shrink-0`}
-            >
-              {leaving ? "Leave" : "Withdraw"}
-            </button>
-          ))}
-      </div>
-
-      {withdraw.error && (
-        <p className={`${errorText} mt-3`}>{withdraw.error.message}</p>
-      )}
-    </li>
-  );
-}
-
-export default function InitiativesPage() {
-  const { data: session, status } = useSession();
-  const router = useRouter();
-  // Queries wait on the session, so a signed-out visitor otherwise sits on
-  // the loading screen forever.
-  useEffect(() => {
-    if (status === "unauthenticated") router.push(loginHref());
-  }, [status, router]);
-
-  const open = trpc.initiative.list.useQuery(undefined, { enabled: !!session });
-  const mine = trpc.initiative.myApplications.useQuery(undefined, {
-    enabled: !!session,
-  });
-  const memberStatus = trpc.member.checkStatus.useQuery(undefined, {
-    enabled: !!session,
-  });
-  const proposals = trpc.initiative.myProposals.useQuery(undefined, {
-    enabled: !!session,
-  });
-
-  if (
-    status === "loading" ||
-    open.isPending ||
-    mine.isPending ||
-    proposals.isPending
-  ) {
-    return <LoadingScreen />;
-  }
-
-  const applications = mine.data ?? [];
-  const myProposals = proposals.data ?? [];
-  // Already applied belongs in the member's own list, not in the one offering
-  // them a chance to apply again.
-  const joinable = (open.data ?? []).filter((row) => row.myStatus === null);
-  const canApply = !!memberStatus.data?.isActive;
-  const loadError = open.error ?? mine.error ?? proposals.error;
-
-  return (
-    <div className={page}>
-      <Link
-        href="/dashboard"
-        className="text-[13px] text-[var(--text-subtle)] transition-colors hover:text-[var(--text-primary)]"
-      >
-        ← Dashboard
-      </Link>
-
-      <header className="mt-6">
-        <h1 className={pageTitle}>
-          {joinable.length > 0
-            ? `${joinable.length} club project${joinable.length === 1 ? " is" : "s are"} taking members`
-            : "Club projects"}
-        </h1>
-        <p className={pageDek}>
-          Projects the club runs year-round. Leaders post what they are building
-          and pick who joins.
-        </p>
-      </header>
-
-      {loadError && (
-        <p className={`${errorText} mt-6`}>
-          {loadError.message} Refresh the page to try again.
-        </p>
-      )}
-
-      <section className="mt-10">
-        <h2 className={sectionTitle}>Open to join</h2>
-        {joinable.length > 0 ? (
-          <ul className="mt-5 space-y-4">
-            {joinable.map((initiative) => (
-              <OpenRow
-                key={initiative.id}
-                initiative={initiative}
-                canApply={canApply}
-              />
-            ))}
-          </ul>
-        ) : (
-          <p className={`${body} mt-3 max-w-xl`}>
-            {applications.length > 0
-              ? "Nothing else is open right now."
-              : "No projects are taking applications right now."}{" "}
-            Leaders open them through the year, so check back or ask at a
-            general meeting what is being planned.
-          </p>
-        )}
-      </section>
-
-      {applications.length > 0 && (
-        <section className="mt-12">
-          <h2 className={sectionTitle}>Your applications</h2>
-          <ul className="mt-4 border-t border-[var(--border-subtle)]">
-            {applications.map((application) => (
-              <ApplicationRow key={application.id} application={application} />
-            ))}
-          </ul>
-        </section>
-      )}
-
-      {myProposals.length > 0 && (
-        <section className="mt-12">
-          <h2 className={sectionTitle}>What you proposed</h2>
-          <ul className="mt-4 border-t border-[var(--border-subtle)]">
-            {myProposals.map((proposal) => (
-              <ProposalRow key={proposal.id} proposal={proposal} />
-            ))}
-          </ul>
-        </section>
-      )}
-
-      <ProposeSection canPropose={canApply} />
-    </div>
+    <PrefetchedPage
+      reads={(c) => [
+        ["initiative.list", undefined, c.initiative.list()],
+        ["initiative.myApplications", undefined, c.initiative.myApplications()],
+        ["member.checkStatus", undefined, c.member.checkStatus()],
+        ["initiative.myProposals", undefined, c.initiative.myProposals()],
+      ]}
+    >
+      <InitiativesPage />
+    </PrefetchedPage>
   );
 }
diff --git a/sites/mainweb/app/(portal)/judge/register/JudgeRegisterPage.tsx b/sites/mainweb/app/(portal)/judge/register/JudgeRegisterPage.tsx
new file mode 100644
index 00000000..38645b30
--- /dev/null
+++ b/sites/mainweb/app/(portal)/judge/register/JudgeRegisterPage.tsx
@@ -0,0 +1,448 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { loginHref } from "@/lib/safe-callback";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useSession } from "next-auth/react";
+import { trpc } from "@/lib/trpc";
+import {
+  FormInput,
+  FormTextarea,
+  FormChipSelect,
+  FormMultiChipSelect,
+  StepProgress,
+  StepContainer,
+  FormErrorAlert,
+  FormNavigation,
+} from "@/components/hackathon/FormComponents";
+import { SHIRT_SIZES, DIETARY_OPTIONS } from "@/components/hackathon/constants";
+import Link from "next/link";
+import { LoadingScreen } from "@/components/portal/LoadingScreen";
+import {
+  body,
+  btnPrimary,
+  btnSecondary,
+  fieldHint,
+  meta,
+  page,
+  pageDek,
+  pageTitle,
+} from "@/components/portal/ui";
+
+const JUDGE_REGISTRATION_STEPS = [
+  "Event",
+  "About you",
+  "Experience",
+  "Logistics",
+];
+
+export default function JudgeRegisterPage() {
+  const router = useRouter();
+  const { data: session, status: authStatus } = useSession();
+  // Null until the judge moves, so the first step can depend on data that has
+  // not loaded yet.
+  const [pickedStep, setStep] = useState<number | null>(null);
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState(false);
+
+  const { data: hackathons, isLoading } = trpc.hackathon.list.useQuery({});
+  // An application or a participant registration for the edition means the
+  // form would only end in a refusal from judge.register.
+  const signedIn = authStatus === "authenticated";
+  const { data: applications, isLoading: applicationsLoading } =
+    trpc.judge.myApplications.useQuery(undefined, { enabled: signedIn });
+  const { data: registrations, isLoading: registrationsLoading } =
+    trpc.hackathon.myRegistrations.useQuery(undefined, { enabled: signedIn });
+  const utils = trpc.useUtils();
+  const registerMutation = trpc.judge.register.useMutation({
+    onSuccess: () => {
+      setSuccess(true);
+      // Or /judge still offers "Apply to Judge", which now throws "already
+      // applied".
+      void utils.judge.myApplications.invalidate();
+    },
+    onError: (e) => setError(e.message),
+  });
+
+  // Form State
+  // /judge links here with the edition already chosen; starting step 0 empty
+  // made the judge pick it again.
+  const searchParams = useSearchParams();
+  const [linkedHackathonId] = useState(
+    () => searchParams.get("hackathonId") ?? "",
+  );
+  const [hackathonId, setHackathonId] = useState(linkedHackathonId);
+  const [preferredTrack, setPreferredTrack] = useState("");
+  // Null until edited, so the session's name and email fill in whenever it
+  // arrives without an effect to copy them over.
+  const [typedName, setName] = useState<string | null>(null);
+  const [typedEmail, setEmail] = useState<string | null>(null);
+  const name = typedName ?? session?.user?.name ?? "";
+  const email = typedEmail ?? session?.user?.email ?? "";
+  const [phone, setPhone] = useState("");
+  const [company, setCompany] = useState("");
+  const [title, setTitle] = useState("");
+  const [specialty, setSpecialty] = useState("");
+  const [linkedinUrl, setLinkedinUrl] = useState("");
+  const [githubUrl, setGithubUrl] = useState("");
+  const [previousExperience, setPreviousExperience] = useState("");
+  const [whyJudge, setWhyJudge] = useState("");
+  const [shirtSize, setShirtSize] = useState("");
+  const [dietary, setDietary] = useState<string[]>([]);
+
+  // judge.register is protected, so an outside professional following a shared
+  // link filled in all four steps and only then got "Not authenticated".
+  useEffect(() => {
+    if (authStatus === "unauthenticated") router.push(loginHref());
+  }, [authStatus, router]);
+
+  if (authStatus === "loading" || authStatus === "unauthenticated") {
+    return <LoadingScreen message="Checking your session…" />;
+  }
+
+  if (isLoading || applicationsLoading || registrationsLoading) {
+    return <LoadingScreen message="Loading hackathons…" />;
+  }
+
+  // `closed` belongs here: closing participant registration is the natural step
+  // *before* recruiting judges, and leaving it out emptied this page with no
+  // explanation exactly when organisers were sending the link out.
+  const activeHackathons =
+    hackathons?.filter(
+      // Announced too: judges are recruited before registration opens.
+      (h) =>
+        h.status === "announced" ||
+        h.status === "open" ||
+        h.status === "closed" ||
+        h.status === "in_progress",
+    ) || [];
+
+  const selectedHackathon = activeHackathons.find((h) => h.id === hackathonId);
+  const trackOptions = [
+    ...(selectedHackathon?.tracks ?? []),
+    ...(selectedHackathon?.challenges ?? []),
+  ];
+
+  // A link from /judge already chose the edition, so a valid one skips the
+  // picker; a stale or unknown id still lands on it.
+  const step =
+    pickedStep ??
+    (activeHackathons.some((h) => h.id === linkedHackathonId) ? 1 : 0);
+
+  const application = applications?.find((a) => a.hackathonId === hackathonId);
+  const isParticipant = !!registrations?.some(
+    (r) => r.hackathonId === hackathonId,
+  );
+
+  function validateStep(s: number): boolean {
+    setError("");
+    if (s === 0) {
+      if (!selectedHackathon) {
+        setError("Pick a hackathon to judge.");
+        return false;
+      }
+    } else if (s === 1) {
+      if (!name.trim()) {
+        setError("Enter your full name.");
+        return false;
+      }
+      if (!email.trim() || !email.includes("@")) {
+        setError("Enter a valid email address.");
+        return false;
+      }
+    }
+    return true;
+  }
+
+  function handleNext() {
+    if (!validateStep(step)) return;
+    setStep(Math.min(step + 1, JUDGE_REGISTRATION_STEPS.length - 1));
+  }
+
+  function handleBack() {
+    setError("");
+    setStep(Math.max(step - 1, 0));
+  }
+
+  function handleSubmit() {
+    if (!validateStep(3)) return;
+    setError("");
+    registerMutation.mutate({
+      hackathonId,
+      name: name.trim(),
+      email: email.trim(),
+      phone: phone.trim() || undefined,
+      company: company.trim() || undefined,
+      title: title.trim() || undefined,
+      specialty: specialty.trim() || undefined,
+      linkedinUrl: linkedinUrl.trim() || undefined,
+      githubUrl: githubUrl.trim() || undefined,
+      previousExperience: previousExperience.trim() || undefined,
+      whyJudge: whyJudge.trim() || undefined,
+      shirtSize: shirtSize || undefined,
+      dietaryRestrictions: dietary.length ? dietary : undefined,
+      preferredTrack: preferredTrack || undefined,
+    });
+  }
+
+  if (success) {
+    return (
+      <main className={page}>
+        <div className="max-w-xl">
+          <h1 className={pageTitle}>Application received</h1>
+          {/* judge.setActive sends the approval email on the transition. */}
+          <p className={pageDek}>
+            An organiser will review it. You&apos;ll get an email once
+            you&apos;re approved.
+          </p>
+          <Link href="/judge" className={`mt-8 ${btnPrimary}`}>
+            See your application
+          </Link>
+        </div>
+      </main>
+    );
+  }
+
+  // Shown instead of the form: the edition is already settled one way or the
+  // other, and submitting would be refused.
+  if (selectedHackathon && (application || isParticipant)) {
+    return (
+      <main className={page}>
+        <div className="max-w-xl">
+          <h1 className={pageTitle}>
+            {application
+              ? application.approved
+                ? `You're judging ${selectedHackathon.name}`
+                : "Application received"
+              : `You're registered for ${selectedHackathon.name}`}
+          </h1>
+          <p className={pageDek}>
+            {application
+              ? application.approved
+                ? "An organiser approved your application. Open your edition on judging day."
+                : `An organiser will review your application to judge ${selectedHackathon.name}. You'll get an email once you're approved.`
+              : "People registered as participants can't judge the same event."}
+          </p>
+          <div className="mt-8 flex flex-wrap gap-3">
+            {application ? (
+              <Link href="/judge" className={btnPrimary}>
+                See your application
+              </Link>
+            ) : (
+              <Link href="/hackathons" className={btnSecondary}>
+                Back to hackathons
+              </Link>
+            )}
+            <button
+              type="button"
+              onClick={() => {
+                setHackathonId("");
+                setStep(0);
+              }}
+              className={btnSecondary}
+            >
+              Choose another event
+            </button>
+          </div>
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <main className={page}>
+      <Link
+        href="/hackathons"
+        className="text-[13px] text-[var(--text-subtle)] hover:text-[var(--text-primary)] transition-colors"
+      >
+        ← All hackathons
+      </Link>
+
+      <header className="mt-6">
+        <h1 className={pageTitle}>Apply to judge</h1>
+        <p className={pageDek}>
+          Pick an event, tell us about yourself, and choose a track. Takes
+          about five minutes.
+        </p>
+      </header>
+
+      <div className="mt-10 max-w-3xl border-t border-[var(--border-subtle)] pt-6">
+        <StepProgress steps={JUDGE_REGISTRATION_STEPS} current={step} />
+
+        {step === 0 && (
+          <StepContainer title="Which event will you judge?">
+            {activeHackathons.length === 0 ? (
+              <p className={body}>
+                No hackathons are taking judge applications right now. Check
+                back closer to the next event.
+              </p>
+            ) : (
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                {activeHackathons.map((h) => (
+                  <button
+                    key={h.id}
+                    type="button"
+                    aria-pressed={hackathonId === h.id}
+                    onClick={() => setHackathonId(h.id)}
+                    className={`rounded-[var(--radius-md)] border text-left p-5 min-h-11 transition-colors ${
+                      hackathonId === h.id
+                        ? "border-accent bg-[var(--accent-dim)]"
+                        : "border-[var(--border-subtle)] bg-[var(--bg-card)] hover:border-[var(--border-hover)]"
+                    }`}
+                  >
+                    <span className="block text-[17px] font-semibold text-[var(--text-primary)]">
+                      {h.name}
+                    </span>
+                    {h.description && (
+                      <span className={`mt-1 block line-clamp-2 ${meta}`}>
+                        {h.description}
+                      </span>
+                    )}
+                  </button>
+                ))}
+              </div>
+            )}
+          </StepContainer>
+        )}
+
+        {step === 1 && (
+          <StepContainer title="About you">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
+              <FormInput
+                label="Full name"
+                required
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="Jane Doe"
+              />
+              <FormInput
+                label="Email"
+                required
+                type="email"
+                autoComplete="email"
+                spellCheck={false}
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="jane@example.com"
+              />
+            </div>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
+              <FormInput
+                label="Company or organisation"
+                value={company}
+                onChange={(e) => setCompany(e.target.value)}
+                placeholder="Acme Corp"
+              />
+              <FormInput
+                label="Title or role"
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+                placeholder="Senior Software Engineer"
+              />
+            </div>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
+              <FormInput
+                label="Phone"
+                value={phone}
+                onChange={(e) => setPhone(e.target.value)}
+                placeholder="(555) 123-4567"
+              />
+              <FormInput
+                label="Specialty"
+                value={specialty}
+                onChange={(e) => setSpecialty(e.target.value)}
+                placeholder="e.g. AI, Web3, Design, Product"
+              />
+            </div>
+          </StepContainer>
+        )}
+
+        {step === 2 && (
+          <StepContainer title="Experience">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
+              <FormInput
+                label="LinkedIn URL"
+                type="url"
+                value={linkedinUrl}
+                onChange={(e) => setLinkedinUrl(e.target.value)}
+                placeholder="https://linkedin.com/in/…"
+              />
+              <FormInput
+                label="GitHub URL"
+                type="url"
+                value={githubUrl}
+                onChange={(e) => setGithubUrl(e.target.value)}
+                placeholder="https://github.com/…"
+              />
+            </div>
+            <FormTextarea
+              label="Judging or mentoring you have done"
+              value={previousExperience}
+              onChange={(e) => setPreviousExperience(e.target.value)}
+              placeholder="Hackathons you have judged, students you have mentored…"
+              rows={3}
+            />
+            <FormTextarea
+              label="Why do you want to judge?"
+              value={whyJudge}
+              onChange={(e) => setWhyJudge(e.target.value)}
+              placeholder="What excites you about being a judge for this event?"
+              rows={3}
+            />
+          </StepContainer>
+        )}
+
+        {step === 3 && (
+          <StepContainer title="Logistics">
+            {/* The chosen edition's own labels, not free text, so organisers
+                placing judges in rooms see a track that exists. Leaving it
+                unset means "any project", which is a real and common answer. */}
+            {trackOptions.length > 0 ? (
+              <FormChipSelect
+                label="Track you would like to judge"
+                options={trackOptions}
+                value={preferredTrack}
+                onChange={setPreferredTrack}
+                allowDeselect
+              />
+            ) : (
+              <p className={fieldHint}>
+                This hackathon has no tracks published yet. You can apply
+                without one.
+              </p>
+            )}
+            <div className="mt-6">
+              <FormChipSelect
+                label="T-shirt size"
+                options={[...SHIRT_SIZES]}
+                value={shirtSize}
+                onChange={setShirtSize}
+                allowDeselect
+              />
+            </div>
+            <div className="mt-6">
+              <FormMultiChipSelect
+                label="Dietary restrictions"
+                options={[...DIETARY_OPTIONS]}
+                selected={dietary}
+                onChange={setDietary}
+                noneOption="None"
+              />
+            </div>
+          </StepContainer>
+        )}
+
+        <FormErrorAlert message={error} />
+        <FormNavigation
+          step={step}
+          totalSteps={JUDGE_REGISTRATION_STEPS.length}
+          onBack={handleBack}
+          onNext={handleNext}
+          onSubmit={handleSubmit}
+          onCancel={() => router.push("/hackathons")}
+          isSubmitting={registerMutation.isPending}
+        />
+      </div>
+    </main>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/judge/register/page.tsx b/sites/mainweb/app/(portal)/judge/register/page.tsx
index 38645b30..7f7cad32 100644
--- a/sites/mainweb/app/(portal)/judge/register/page.tsx
+++ b/sites/mainweb/app/(portal)/judge/register/page.tsx
@@ -1,448 +1,16 @@
-"use client";
-
-import React, { useEffect, useState } from "react";
-import { loginHref } from "@/lib/safe-callback";
-import { useRouter, useSearchParams } from "next/navigation";
-import { useSession } from "next-auth/react";
-import { trpc } from "@/lib/trpc";
-import {
-  FormInput,
-  FormTextarea,
-  FormChipSelect,
-  FormMultiChipSelect,
-  StepProgress,
-  StepContainer,
-  FormErrorAlert,
-  FormNavigation,
-} from "@/components/hackathon/FormComponents";
-import { SHIRT_SIZES, DIETARY_OPTIONS } from "@/components/hackathon/constants";
-import Link from "next/link";
-import { LoadingScreen } from "@/components/portal/LoadingScreen";
-import {
-  body,
-  btnPrimary,
-  btnSecondary,
-  fieldHint,
-  meta,
-  page,
-  pageDek,
-  pageTitle,
-} from "@/components/portal/ui";
-
-const JUDGE_REGISTRATION_STEPS = [
-  "Event",
-  "About you",
-  "Experience",
-  "Logistics",
-];
-
-export default function JudgeRegisterPage() {
-  const router = useRouter();
-  const { data: session, status: authStatus } = useSession();
-  // Null until the judge moves, so the first step can depend on data that has
-  // not loaded yet.
-  const [pickedStep, setStep] = useState<number | null>(null);
-  const [error, setError] = useState("");
-  const [success, setSuccess] = useState(false);
-
-  const { data: hackathons, isLoading } = trpc.hackathon.list.useQuery({});
-  // An application or a participant registration for the edition means the
-  // form would only end in a refusal from judge.register.
-  const signedIn = authStatus === "authenticated";
-  const { data: applications, isLoading: applicationsLoading } =
-    trpc.judge.myApplications.useQuery(undefined, { enabled: signedIn });
-  const { data: registrations, isLoading: registrationsLoading } =
-    trpc.hackathon.myRegistrations.useQuery(undefined, { enabled: signedIn });
-  const utils = trpc.useUtils();
-  const registerMutation = trpc.judge.register.useMutation({
-    onSuccess: () => {
-      setSuccess(true);
-      // Or /judge still offers "Apply to Judge", which now throws "already
-      // applied".
-      void utils.judge.myApplications.invalidate();
-    },
-    onError: (e) => setError(e.message),
-  });
-
-  // Form State
-  // /judge links here with the edition already chosen; starting step 0 empty
-  // made the judge pick it again.
-  const searchParams = useSearchParams();
-  const [linkedHackathonId] = useState(
-    () => searchParams.get("hackathonId") ?? "",
-  );
-  const [hackathonId, setHackathonId] = useState(linkedHackathonId);
-  const [preferredTrack, setPreferredTrack] = useState("");
-  // Null until edited, so the session's name and email fill in whenever it
-  // arrives without an effect to copy them over.
-  const [typedName, setName] = useState<string | null>(null);
-  const [typedEmail, setEmail] = useState<string | null>(null);
-  const name = typedName ?? session?.user?.name ?? "";
-  const email = typedEmail ?? session?.user?.email ?? "";
-  const [phone, setPhone] = useState("");
-  const [company, setCompany] = useState("");
-  const [title, setTitle] = useState("");
-  const [specialty, setSpecialty] = useState("");
-  const [linkedinUrl, setLinkedinUrl] = useState("");
-  const [githubUrl, setGithubUrl] = useState("");
-  const [previousExperience, setPreviousExperience] = useState("");
-  const [whyJudge, setWhyJudge] = useState("");
-  const [shirtSize, setShirtSize] = useState("");
-  const [dietary, setDietary] = useState<string[]>([]);
-
-  // judge.register is protected, so an outside professional following a shared
-  // link filled in all four steps and only then got "Not authenticated".
-  useEffect(() => {
-    if (authStatus === "unauthenticated") router.push(loginHref());
-  }, [authStatus, router]);
-
-  if (authStatus === "loading" || authStatus === "unauthenticated") {
-    return <LoadingScreen message="Checking your session…" />;
-  }
-
-  if (isLoading || applicationsLoading || registrationsLoading) {
-    return <LoadingScreen message="Loading hackathons…" />;
-  }
-
-  // `closed` belongs here: closing participant registration is the natural step
-  // *before* recruiting judges, and leaving it out emptied this page with no
-  // explanation exactly when organisers were sending the link out.
-  const activeHackathons =
-    hackathons?.filter(
-      // Announced too: judges are recruited before registration opens.
-      (h) =>
-        h.status === "announced" ||
-        h.status === "open" ||
-        h.status === "closed" ||
-        h.status === "in_progress",
-    ) || [];
-
-  const selectedHackathon = activeHackathons.find((h) => h.id === hackathonId);
-  const trackOptions = [
-    ...(selectedHackathon?.tracks ?? []),
-    ...(selectedHackathon?.challenges ?? []),
-  ];
-
-  // A link from /judge already chose the edition, so a valid one skips the
-  // picker; a stale or unknown id still lands on it.
-  const step =
-    pickedStep ??
-    (activeHackathons.some((h) => h.id === linkedHackathonId) ? 1 : 0);
-
-  const application = applications?.find((a) => a.hackathonId === hackathonId);
-  const isParticipant = !!registrations?.some(
-    (r) => r.hackathonId === hackathonId,
-  );
-
-  function validateStep(s: number): boolean {
-    setError("");
-    if (s === 0) {
-      if (!selectedHackathon) {
-        setError("Pick a hackathon to judge.");
-        return false;
-      }
-    } else if (s === 1) {
-      if (!name.trim()) {
-        setError("Enter your full name.");
-        return false;
-      }
-      if (!email.trim() || !email.includes("@")) {
-        setError("Enter a valid email address.");
-        return false;
-      }
-    }
-    return true;
-  }
-
-  function handleNext() {
-    if (!validateStep(step)) return;
-    setStep(Math.min(step + 1, JUDGE_REGISTRATION_STEPS.length - 1));
-  }
-
-  function handleBack() {
-    setError("");
-    setStep(Math.max(step - 1, 0));
-  }
-
-  function handleSubmit() {
-    if (!validateStep(3)) return;
-    setError("");
-    registerMutation.mutate({
-      hackathonId,
-      name: name.trim(),
-      email: email.trim(),
-      phone: phone.trim() || undefined,
-      company: company.trim() || undefined,
-      title: title.trim() || undefined,
-      specialty: specialty.trim() || undefined,
-      linkedinUrl: linkedinUrl.trim() || undefined,
-      githubUrl: githubUrl.trim() || undefined,
-      previousExperience: previousExperience.trim() || undefined,
-      whyJudge: whyJudge.trim() || undefined,
-      shirtSize: shirtSize || undefined,
-      dietaryRestrictions: dietary.length ? dietary : undefined,
-      preferredTrack: preferredTrack || undefined,
-    });
-  }
-
-  if (success) {
-    return (
-      <main className={page}>
-        <div className="max-w-xl">
-          <h1 className={pageTitle}>Application received</h1>
-          {/* judge.setActive sends the approval email on the transition. */}
-          <p className={pageDek}>
-            An organiser will review it. You&apos;ll get an email once
-            you&apos;re approved.
-          </p>
-          <Link href="/judge" className={`mt-8 ${btnPrimary}`}>
-            See your application
-          </Link>
-        </div>
-      </main>
-    );
-  }
-
-  // Shown instead of the form: the edition is already settled one way or the
-  // other, and submitting would be refused.
-  if (selectedHackathon && (application || isParticipant)) {
-    return (
-      <main className={page}>
-        <div className="max-w-xl">
-          <h1 className={pageTitle}>
-            {application
-              ? application.approved
-                ? `You're judging ${selectedHackathon.name}`
-                : "Application received"
-              : `You're registered for ${selectedHackathon.name}`}
-          </h1>
-          <p className={pageDek}>
-            {application
-              ? application.approved
-                ? "An organiser approved your application. Open your edition on judging day."
-                : `An organiser will review your application to judge ${selectedHackathon.name}. You'll get an email once you're approved.`
-              : "People registered as participants can't judge the same event."}
-          </p>
-          <div className="mt-8 flex flex-wrap gap-3">
-            {application ? (
-              <Link href="/judge" className={btnPrimary}>
-                See your application
-              </Link>
-            ) : (
-              <Link href="/hackathons" className={btnSecondary}>
-                Back to hackathons
-              </Link>
-            )}
-            <button
-              type="button"
-              onClick={() => {
-                setHackathonId("");
-                setStep(0);
-              }}
-              className={btnSecondary}
-            >
-              Choose another event
-            </button>
-          </div>
-        </div>
-      </main>
-    );
-  }
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import JudgeRegisterPage from "./JudgeRegisterPage";
 
+export default function Page() {
   return (
-    <main className={page}>
-      <Link
-        href="/hackathons"
-        className="text-[13px] text-[var(--text-subtle)] hover:text-[var(--text-primary)] transition-colors"
-      >
-        ← All hackathons
-      </Link>
-
-      <header className="mt-6">
-        <h1 className={pageTitle}>Apply to judge</h1>
-        <p className={pageDek}>
-          Pick an event, tell us about yourself, and choose a track. Takes
-          about five minutes.
-        </p>
-      </header>
-
-      <div className="mt-10 max-w-3xl border-t border-[var(--border-subtle)] pt-6">
-        <StepProgress steps={JUDGE_REGISTRATION_STEPS} current={step} />
-
-        {step === 0 && (
-          <StepContainer title="Which event will you judge?">
-            {activeHackathons.length === 0 ? (
-              <p className={body}>
-                No hackathons are taking judge applications right now. Check
-                back closer to the next event.
-              </p>
-            ) : (
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-                {activeHackathons.map((h) => (
-                  <button
-                    key={h.id}
-                    type="button"
-                    aria-pressed={hackathonId === h.id}
-                    onClick={() => setHackathonId(h.id)}
-                    className={`rounded-[var(--radius-md)] border text-left p-5 min-h-11 transition-colors ${
-                      hackathonId === h.id
-                        ? "border-accent bg-[var(--accent-dim)]"
-                        : "border-[var(--border-subtle)] bg-[var(--bg-card)] hover:border-[var(--border-hover)]"
-                    }`}
-                  >
-                    <span className="block text-[17px] font-semibold text-[var(--text-primary)]">
-                      {h.name}
-                    </span>
-                    {h.description && (
-                      <span className={`mt-1 block line-clamp-2 ${meta}`}>
-                        {h.description}
-                      </span>
-                    )}
-                  </button>
-                ))}
-              </div>
-            )}
-          </StepContainer>
-        )}
-
-        {step === 1 && (
-          <StepContainer title="About you">
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
-              <FormInput
-                label="Full name"
-                required
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                placeholder="Jane Doe"
-              />
-              <FormInput
-                label="Email"
-                required
-                type="email"
-                autoComplete="email"
-                spellCheck={false}
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                placeholder="jane@example.com"
-              />
-            </div>
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
-              <FormInput
-                label="Company or organisation"
-                value={company}
-                onChange={(e) => setCompany(e.target.value)}
-                placeholder="Acme Corp"
-              />
-              <FormInput
-                label="Title or role"
-                value={title}
-                onChange={(e) => setTitle(e.target.value)}
-                placeholder="Senior Software Engineer"
-              />
-            </div>
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
-              <FormInput
-                label="Phone"
-                value={phone}
-                onChange={(e) => setPhone(e.target.value)}
-                placeholder="(555) 123-4567"
-              />
-              <FormInput
-                label="Specialty"
-                value={specialty}
-                onChange={(e) => setSpecialty(e.target.value)}
-                placeholder="e.g. AI, Web3, Design, Product"
-              />
-            </div>
-          </StepContainer>
-        )}
-
-        {step === 2 && (
-          <StepContainer title="Experience">
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
-              <FormInput
-                label="LinkedIn URL"
-                type="url"
-                value={linkedinUrl}
-                onChange={(e) => setLinkedinUrl(e.target.value)}
-                placeholder="https://linkedin.com/in/…"
-              />
-              <FormInput
-                label="GitHub URL"
-                type="url"
-                value={githubUrl}
-                onChange={(e) => setGithubUrl(e.target.value)}
-                placeholder="https://github.com/…"
-              />
-            </div>
-            <FormTextarea
-              label="Judging or mentoring you have done"
-              value={previousExperience}
-              onChange={(e) => setPreviousExperience(e.target.value)}
-              placeholder="Hackathons you have judged, students you have mentored…"
-              rows={3}
-            />
-            <FormTextarea
-              label="Why do you want to judge?"
-              value={whyJudge}
-              onChange={(e) => setWhyJudge(e.target.value)}
-              placeholder="What excites you about being a judge for this event?"
-              rows={3}
-            />
-          </StepContainer>
-        )}
-
-        {step === 3 && (
-          <StepContainer title="Logistics">
-            {/* The chosen edition's own labels, not free text, so organisers
-                placing judges in rooms see a track that exists. Leaving it
-                unset means "any project", which is a real and common answer. */}
-            {trackOptions.length > 0 ? (
-              <FormChipSelect
-                label="Track you would like to judge"
-                options={trackOptions}
-                value={preferredTrack}
-                onChange={setPreferredTrack}
-                allowDeselect
-              />
-            ) : (
-              <p className={fieldHint}>
-                This hackathon has no tracks published yet. You can apply
-                without one.
-              </p>
-            )}
-            <div className="mt-6">
-              <FormChipSelect
-                label="T-shirt size"
-                options={[...SHIRT_SIZES]}
-                value={shirtSize}
-                onChange={setShirtSize}
-                allowDeselect
-              />
-            </div>
-            <div className="mt-6">
-              <FormMultiChipSelect
-                label="Dietary restrictions"
-                options={[...DIETARY_OPTIONS]}
-                selected={dietary}
-                onChange={setDietary}
-                noneOption="None"
-              />
-            </div>
-          </StepContainer>
-        )}
-
-        <FormErrorAlert message={error} />
-        <FormNavigation
-          step={step}
-          totalSteps={JUDGE_REGISTRATION_STEPS.length}
-          onBack={handleBack}
-          onNext={handleNext}
-          onSubmit={handleSubmit}
-          onCancel={() => router.push("/hackathons")}
-          isSubmitting={registerMutation.isPending}
-        />
-      </div>
-    </main>
+    <PrefetchedPage
+      reads={(c) => [
+        ["hackathon.list", {}, c.hackathon.list({})],
+        ["judge.myApplications", undefined, c.judge.myApplications()],
+        ["hackathon.myRegistrations", undefined, c.hackathon.myRegistrations()],
+      ]}
+    >
+      <JudgeRegisterPage />
+    </PrefetchedPage>
   );
 }
diff --git a/sites/mainweb/app/(portal)/lead/LeadPage.tsx b/sites/mainweb/app/(portal)/lead/LeadPage.tsx
new file mode 100644
index 00000000..d9000903
--- /dev/null
+++ b/sites/mainweb/app/(portal)/lead/LeadPage.tsx
@@ -0,0 +1,365 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useSession } from "next-auth/react";
+import { LoadingScreen } from "@/components/portal/LoadingScreen";
+import {
+  InitiativeChip,
+  initiativeState,
+  seatLabel,
+} from "@/components/portal/initiatives/chips";
+import {
+  InitiativeFields,
+  draftFrom,
+  toInput,
+} from "@/components/portal/initiatives/form-fields";
+import {
+  body,
+  btnDanger,
+  btnPrimary,
+  btnSecondary,
+  chip,
+  itemTitle,
+  kicker,
+  label,
+  meta,
+  page,
+  pageDek,
+  pageTitle,
+  textLink,
+} from "@/components/portal/ui";
+import { trpc } from "@/lib/trpc";
+import { loginHref } from "@/lib/safe-callback";
+import type { RouterOutputs } from "@query/api";
+
+type LeadInitiative = RouterOutputs["initiative"]["listMine"][number];
+
+const statuses = [
+  { value: "draft", label: "Draft" },
+  { value: "open", label: "Open" },
+  { value: "closed", label: "Closed" },
+] as const;
+
+const errorText = "text-sm text-[var(--danger)]";
+const quietAction =
+  "text-sm font-semibold text-[var(--text-subtle)] transition-colors hover:text-[var(--text-primary)] disabled:opacity-50";
+
+function InitiativeForm({
+  initiative,
+  onDone,
+}: {
+  initiative?: LeadInitiative;
+  onDone: () => void;
+}) {
+  const utils = trpc.useUtils();
+  const [error, setError] = useState<string | null>(null);
+  const [draft, setDraft] = useState(() => draftFrom(initiative));
+
+  const done = async () => {
+    await utils.initiative.listMine.invalidate();
+    onDone();
+  };
+
+  const create = trpc.initiative.create.useMutation({
+    onSuccess: done,
+    onError: (e) => setError(e.message),
+  });
+  const update = trpc.initiative.update.useMutation({
+    onSuccess: done,
+    onError: (e) => setError(e.message),
+  });
+  const pending = create.isPending || update.isPending;
+
+  return (
+    <form
+      onSubmit={(event) => {
+        event.preventDefault();
+        setError(null);
+        const values = toInput(draft);
+        if (initiative) update.mutate({ ...values, id: initiative.id });
+        else create.mutate(values);
+      }}
+    >
+      <h2 className={`${itemTitle} mb-4`}>
+        {initiative ? `Edit ${initiative.title}` : "New project"}
+      </h2>
+
+      <InitiativeFields draft={draft} onChange={setDraft} />
+
+      {error && <p className={`${errorText} mt-3`}>{error}</p>}
+
+      <div className="mt-5 flex flex-wrap gap-3">
+        <button type="submit" disabled={pending} className={btnPrimary}>
+          {pending ? "Saving…" : initiative ? "Save changes" : "Create draft"}
+        </button>
+        <button type="button" onClick={onDone} className={btnSecondary}>
+          Cancel
+        </button>
+      </div>
+
+      {!initiative && (
+        <p className={`${meta} mt-3`}>
+          It starts as a draft. Nothing reaches members until you open it.
+        </p>
+      )}
+    </form>
+  );
+}
+
+function InitiativeRow({ initiative }: { initiative: LeadInitiative }) {
+  const utils = trpc.useUtils();
+  const [editing, setEditing] = useState(false);
+  const [confirmArchive, setConfirmArchive] = useState(false);
+
+  // The applicants screen reads getById, so invalidating only the list leaves
+  // it serving a stale initiative.
+  const refresh = async () => {
+    await Promise.all([
+      utils.initiative.listMine.invalidate(),
+      utils.initiative.getById.invalidate({ id: initiative.id }),
+    ]);
+  };
+
+  const setStatus = trpc.initiative.setStatus.useMutation({
+    onSuccess: refresh,
+  });
+  const archive = trpc.initiative.setArchived.useMutation({
+    onSuccess: refresh,
+  });
+
+  if (editing) {
+    return (
+      <InitiativeForm
+        initiative={initiative}
+        onDone={() => setEditing(false)}
+      />
+    );
+  }
+
+  const state = initiativeState(initiative);
+  const archived = state === "archived";
+
+  return (
+    <>
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
+            <h3 className={itemTitle}>{initiative.title}</h3>
+            <InitiativeChip state={state} />
+          </div>
+          {initiative.summary && (
+            <p className={`${body} mt-1`}>{initiative.summary}</p>
+          )}
+          <p className={`${meta} mt-1`}>
+            {seatLabel(initiative.accepted, initiative.maxMembers)}
+            {initiative.pending > 0
+              ? ` · ${initiative.pending} waiting on you`
+              : " · nobody waiting"}
+          </p>
+          {!initiative.isMine && (
+            <p className={`${meta} mt-1`}>Led by {initiative.leaderName}</p>
+          )}
+        </div>
+
+        <Link
+          href={`/lead/${initiative.id}`}
+          className={`${initiative.pending > 0 ? btnSecondary : textLink} shrink-0`}
+        >
+          {initiative.pending > 0
+            ? `Review ${initiative.pending} application${initiative.pending === 1 ? "" : "s"}`
+            : "Applications"}
+        </Link>
+      </div>
+
+      <div className="mt-4 flex flex-wrap items-center gap-x-4 gap-y-3">
+        <div
+          role="group"
+          aria-label="Status"
+          className="flex flex-wrap items-center gap-2"
+        >
+          <span className={label}>Status</span>
+          {statuses.map((option) => (
+            <button
+              key={option.value}
+              type="button"
+              aria-pressed={initiative.status === option.value}
+              disabled={archived || setStatus.isPending}
+              onClick={() =>
+                setStatus.mutate({ id: initiative.id, status: option.value })
+              }
+              className={`${chip(initiative.status === option.value)} disabled:cursor-not-allowed disabled:opacity-40`}
+            >
+              {option.label}
+            </button>
+          ))}
+        </div>
+
+        <button
+          type="button"
+          onClick={() => setEditing(true)}
+          className={textLink}
+        >
+          Edit
+        </button>
+
+        <div className="flex flex-wrap items-center gap-3 sm:ml-auto">
+          {confirmArchive ? (
+            <>
+              <span className="text-sm text-[var(--text-muted)]">
+                {archived ? "Restore this project?" : "Archive this project?"}
+              </span>
+              <button
+                type="button"
+                onClick={() => {
+                  archive.mutate({
+                    id: initiative.id,
+                    archived: !archived,
+                  });
+                  setConfirmArchive(false);
+                }}
+                className={archived ? btnSecondary : btnDanger}
+              >
+                {archived ? "Restore" : "Archive"}
+              </button>
+              <button
+                type="button"
+                onClick={() => setConfirmArchive(false)}
+                className={btnSecondary}
+              >
+                Cancel
+              </button>
+            </>
+          ) : (
+            <button
+              type="button"
+              onClick={() => setConfirmArchive(true)}
+              className={quietAction}
+            >
+              {archived ? "Restore" : "Archive"}
+            </button>
+          )}
+        </div>
+      </div>
+
+      {(setStatus.error ?? archive.error) && (
+        <p className={`${errorText} mt-3`}>
+          {(setStatus.error ?? archive.error)?.message}
+        </p>
+      )}
+    </>
+  );
+}
+
+export default function LeadPage() {
+  const { data: session, status } = useSession();
+  const router = useRouter();
+  // Queries wait on the session, so a signed-out visitor otherwise sits on
+  // the loading screen forever.
+  useEffect(() => {
+    if (status === "unauthenticated") router.push(loginHref());
+  }, [status, router]);
+  const [creating, setCreating] = useState(false);
+
+  const listing = trpc.initiative.listMine.useQuery(undefined, {
+    enabled: !!session,
+  });
+
+  if (status === "loading" || listing.isPending) return <LoadingScreen />;
+
+  if (listing.error) {
+    const forbidden = listing.error.data?.code === "FORBIDDEN";
+    return (
+      <div className={page}>
+        <h1 className={pageTitle}>
+          {forbidden
+            ? "This page is for project leaders"
+            : "Your projects did not load"}
+        </h1>
+        <p className={pageDek}>
+          {forbidden
+            ? "Pitch a project from the projects page. If it is approved, you lead it and manage it here."
+            : `${listing.error.message} Refresh the page to try again.`}
+        </p>
+        <Link href="/initiatives" className={`${textLink} mt-6`}>
+          Browse projects instead
+        </Link>
+      </div>
+    );
+  }
+
+  const initiatives = listing.data ?? [];
+  const waiting = initiatives.reduce((total, row) => total + row.pending, 0);
+
+  return (
+    <div className={page}>
+      <Link
+        href="/initiatives"
+        className="text-[13px] text-[var(--text-subtle)] transition-colors hover:text-[var(--text-primary)]"
+      >
+        ← Club projects
+      </Link>
+
+      <header className="mt-6 flex flex-col justify-between gap-6 md:flex-row md:items-end">
+        <div>
+          <p className={kicker}>Projects you lead</p>
+          <h1 className={`${pageTitle} mt-2`}>
+            {waiting > 0
+              ? `${waiting} application${waiting === 1 ? "" : "s"} waiting on you`
+              : "Nothing waiting on you"}
+          </h1>
+          <p className={pageDek}>
+            Open a project to members, review who applies, and keep the team
+            list current.
+          </p>
+        </div>
+
+        {!creating && (
+          <button
+            type="button"
+            onClick={() => setCreating(true)}
+            className={`${btnPrimary} shrink-0 self-start md:self-auto`}
+          >
+            New project
+          </button>
+        )}
+      </header>
+
+      {creating && (
+        <section className="mt-10 border-t border-[var(--border-subtle)] pt-6">
+          <InitiativeForm onDone={() => setCreating(false)} />
+        </section>
+      )}
+
+      {initiatives.length > 0 ? (
+        <ul className="mt-10 border-t border-[var(--border-subtle)]">
+          {initiatives.map((initiative) => (
+            <li
+              key={initiative.id}
+              className="border-b border-[var(--border-subtle)] py-6"
+            >
+              <InitiativeRow initiative={initiative} />
+            </li>
+          ))}
+        </ul>
+      ) : (
+        !creating && (
+          <div className="mt-10 border-t border-[var(--border-subtle)] pt-6">
+            <p className={`${body} max-w-xl`}>
+              You have no projects yet. A new one starts as a draft, so you can
+              write it up now and open it to members when you are ready.
+            </p>
+            <button
+              type="button"
+              onClick={() => setCreating(true)}
+              className={`${textLink} mt-4`}
+            >
+              Start a draft
+            </button>
+          </div>
+        )
+      )}
+    </div>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/lead/[id]/LeadInitiativePage.tsx b/sites/mainweb/app/(portal)/lead/[id]/LeadInitiativePage.tsx
new file mode 100644
index 00000000..5037c3f0
--- /dev/null
+++ b/sites/mainweb/app/(portal)/lead/[id]/LeadInitiativePage.tsx
@@ -0,0 +1,351 @@
+"use client";
+
+import { use, useState } from "react";
+import Link from "next/link";
+import { LoadingScreen } from "@/components/portal/LoadingScreen";
+import {
+  ApplicationChip,
+  InitiativeChip,
+  initiativeState,
+  seatLabel,
+} from "@/components/portal/initiatives/chips";
+import {
+  body,
+  btnDanger,
+  btnPrimary,
+  btnSecondary,
+  label,
+  meta,
+  page,
+  pageDek,
+  pageTitle,
+  sectionTitle,
+  textLink,
+} from "@/components/portal/ui";
+import { trpc } from "@/lib/trpc";
+import type { RouterOutputs } from "@query/api";
+import type { ApplicationStatus } from "@query/db";
+
+type Applicant = RouterOutputs["initiative"]["getById"]["applicants"][number];
+
+const errorText = "text-sm text-[var(--danger)]";
+const quietAction =
+  "text-sm font-semibold text-[var(--text-subtle)] transition-colors hover:text-[var(--danger)] disabled:opacity-50";
+const backLink =
+  "text-[13px] text-[var(--text-subtle)] transition-colors hover:text-[var(--text-primary)]";
+const factRow =
+  "grid grid-cols-1 gap-1 border-b border-[var(--border-subtle)] py-3.5 sm:grid-cols-[200px_1fr] sm:gap-6";
+const factValue = "text-[15px] font-semibold text-[var(--text-primary)]";
+
+function ApplicantRow({
+  initiativeId,
+  applicant,
+  full,
+}: {
+  initiativeId: string;
+  applicant: Applicant;
+  full: boolean;
+}) {
+  const utils = trpc.useUtils();
+  const [confirmRemove, setConfirmRemove] = useState(false);
+  const [wantResume, setWantResume] = useState(false);
+
+  // Fetched on click, not with the queue: thirty applicants would otherwise
+  // mean thirty PDFs on page load.
+  const resume = trpc.initiative.applicantResume.useQuery(
+    { initiativeId, userId: applicant.userId },
+    { enabled: wantResume },
+  );
+
+  const decide = trpc.initiative.decide.useMutation({
+    onSuccess: async () => {
+      await Promise.all([
+        utils.initiative.getById.invalidate({ id: initiativeId }),
+        // The list row carries the pending count, so leaving it alone keeps
+        // offering a queue that is already empty.
+        utils.initiative.listMine.invalidate(),
+      ]);
+    },
+  });
+
+  const send = (decision: "accepted" | "rejected") =>
+    decide.mutate({ initiativeId, userId: applicant.userId, decision });
+
+  return (
+    <li className="border-b border-[var(--border-subtle)] py-5">
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
+            <p className="text-[15px] font-semibold text-[var(--text-primary)]">
+              {applicant.name ?? applicant.email}
+            </p>
+            <ApplicationChip status={applicant.status} side="leader" />
+          </div>
+          <p className={`${meta} mt-0.5`}>
+            <a
+              href={`mailto:${applicant.email}`}
+              className="transition-colors hover:text-[var(--text-primary)]"
+            >
+              {applicant.email}
+            </a>
+          </p>
+          {applicant.pitch && (
+            <p
+              className={`${body} mt-3 max-w-2xl whitespace-pre-line border-l-2 border-[var(--border-medium)] pl-3`}
+            >
+              {applicant.pitch}
+            </p>
+          )}
+
+          {applicant.resumeFileName &&
+            (resume.data ? (
+              <a
+                href={resume.data.dataUrl}
+                download={resume.data.fileName}
+                className={`${textLink} mt-3`}
+              >
+                Download {resume.data.fileName}
+              </a>
+            ) : (
+              <button
+                type="button"
+                onClick={() => setWantResume(true)}
+                disabled={resume.isFetching}
+                className={`${textLink} mt-3 disabled:opacity-50`}
+              >
+                {resume.isFetching
+                  ? "Loading resume…"
+                  : `Resume: ${applicant.resumeFileName}`}
+              </button>
+            ))}
+          {resume.error && (
+            <p aria-live="polite" className={`${errorText} mt-2`}>
+              {resume.error.message}
+            </p>
+          )}
+        </div>
+
+        <div className="flex shrink-0 flex-wrap items-center gap-3">
+          {applicant.status === "pending" && (
+            <>
+              <button
+                type="button"
+                disabled={decide.isPending || full}
+                onClick={() => send("accepted")}
+                className={btnPrimary}
+              >
+                Accept
+              </button>
+              <button
+                type="button"
+                disabled={decide.isPending}
+                onClick={() => send("rejected")}
+                className={btnDanger}
+              >
+                Reject
+              </button>
+            </>
+          )}
+
+          {applicant.status === "rejected" && (
+            <button
+              type="button"
+              disabled={decide.isPending || full}
+              onClick={() => send("accepted")}
+              className={btnSecondary}
+            >
+              Accept after all
+            </button>
+          )}
+
+          {applicant.status === "accepted" &&
+            (confirmRemove ? (
+              <>
+                <span className="text-sm text-[var(--text-muted)]">
+                  Take them off the team?
+                </span>
+                <button
+                  type="button"
+                  disabled={decide.isPending}
+                  onClick={() => {
+                    send("rejected");
+                    setConfirmRemove(false);
+                  }}
+                  className={btnDanger}
+                >
+                  Remove
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setConfirmRemove(false)}
+                  className={btnSecondary}
+                >
+                  Cancel
+                </button>
+              </>
+            ) : (
+              <button
+                type="button"
+                onClick={() => setConfirmRemove(true)}
+                className={quietAction}
+              >
+                Remove
+              </button>
+            ))}
+        </div>
+      </div>
+
+      {decide.error && (
+        <p className={`${errorText} mt-3`}>{decide.error.message}</p>
+      )}
+    </li>
+  );
+}
+
+function Group({
+  title,
+  rows,
+  render,
+}: {
+  title: string;
+  rows: Applicant[];
+  render: (applicant: Applicant) => React.ReactNode;
+}) {
+  if (rows.length === 0) return null;
+  return (
+    <section className="mt-12">
+      <div className="flex items-baseline justify-between gap-4">
+        <h2 className={sectionTitle}>{title}</h2>
+        <span className={`${meta} tabular-nums`}>{rows.length}</span>
+      </div>
+      <ul className="mt-4 border-t border-[var(--border-subtle)]">
+        {rows.map(render)}
+      </ul>
+    </section>
+  );
+}
+
+export default function LeadInitiativePage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = use(params);
+  const detail = trpc.initiative.getById.useQuery({ id });
+
+  if (detail.isPending) return <LoadingScreen />;
+
+  if (detail.error) {
+    return (
+      <div className={page}>
+        <Link href="/lead" className={backLink}>
+          ← Your projects
+        </Link>
+        <h1 className={`${pageTitle} mt-6`}>This project did not load</h1>
+        <p className={pageDek}>
+          {detail.error.message} Go back to your projects and open it again.
+        </p>
+        <Link href="/lead" className={`${textLink} mt-6`}>
+          Back to your projects
+        </Link>
+      </div>
+    );
+  }
+
+  const { initiative, applicants, accepted } = detail.data;
+  const state = initiativeState(initiative);
+  const full =
+    initiative.maxMembers !== null && accepted >= initiative.maxMembers;
+
+  const inState = (...wanted: ApplicationStatus[]) =>
+    applicants.filter((row) => wanted.includes(row.status));
+
+  const row = (applicant: Applicant) => (
+    <ApplicantRow
+      key={applicant.userId}
+      initiativeId={initiative.id}
+      applicant={applicant}
+      full={full}
+    />
+  );
+
+  return (
+    <div className={page}>
+      <Link href="/lead" className={backLink}>
+        ← Your projects
+      </Link>
+
+      <header className="mt-6">
+        <h1 className={pageTitle}>{initiative.title}</h1>
+
+        {/* Said once, at the top: every Accept below is off and the reason has to
+            be readable without hovering a disabled button. */}
+        {full && (
+          <p className={pageDek}>
+            Every spot is taken. Raise the team size, or remove somebody, before
+            accepting anyone else.
+          </p>
+        )}
+
+        {state === "draft" && (
+          <p className={pageDek}>
+            This is still a draft, so members cannot see it or apply. Open it
+            from your projects list.
+          </p>
+        )}
+      </header>
+
+      <dl className="mt-8 max-w-3xl border-t border-[var(--border-subtle)]">
+        <div className={factRow}>
+          <dt className={label}>Status</dt>
+          <dd>
+            <InitiativeChip state={state} />
+          </dd>
+        </div>
+        <div className={factRow}>
+          <dt className={label}>Team</dt>
+          <dd className={factValue}>
+            {seatLabel(accepted, initiative.maxMembers)}
+          </dd>
+        </div>
+        {initiative.commitment && (
+          <div className={factRow}>
+            <dt className={label}>Commitment</dt>
+            <dd className={factValue}>{initiative.commitment}</dd>
+          </div>
+        )}
+      </dl>
+
+      {applicants.length === 0 ? (
+        <section className="mt-12">
+          <h2 className={sectionTitle}>Applications</h2>
+          <p className={`${body} mt-3 max-w-xl`}>
+            Nobody has applied yet.{" "}
+            {state === "open"
+              ? "It is open, so it is showing on the members' projects page."
+              : "Open it from your projects list and it will start showing to members."}
+          </p>
+          {state !== "open" && (
+            <Link href="/lead" className={`${textLink} mt-4`}>
+              Go to your projects
+            </Link>
+          )}
+        </section>
+      ) : (
+        <>
+          <Group
+            title="Waiting on you"
+            rows={inState("pending")}
+            render={row}
+          />
+          <Group title="On the team" rows={inState("accepted")} render={row} />
+          <Group
+            title="Turned down and withdrawn"
+            rows={inState("rejected", "withdrawn")}
+            render={row}
+          />
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/lead/[id]/page.tsx b/sites/mainweb/app/(portal)/lead/[id]/page.tsx
index 5037c3f0..06dafe07 100644
--- a/sites/mainweb/app/(portal)/lead/[id]/page.tsx
+++ b/sites/mainweb/app/(portal)/lead/[id]/page.tsx
@@ -1,351 +1,15 @@
-"use client";
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import LeadInitiativePage from "./LeadInitiativePage";
 
-import { use, useState } from "react";
-import Link from "next/link";
-import { LoadingScreen } from "@/components/portal/LoadingScreen";
-import {
-  ApplicationChip,
-  InitiativeChip,
-  initiativeState,
-  seatLabel,
-} from "@/components/portal/initiatives/chips";
-import {
-  body,
-  btnDanger,
-  btnPrimary,
-  btnSecondary,
-  label,
-  meta,
-  page,
-  pageDek,
-  pageTitle,
-  sectionTitle,
-  textLink,
-} from "@/components/portal/ui";
-import { trpc } from "@/lib/trpc";
-import type { RouterOutputs } from "@query/api";
-import type { ApplicationStatus } from "@query/db";
-
-type Applicant = RouterOutputs["initiative"]["getById"]["applicants"][number];
-
-const errorText = "text-sm text-[var(--danger)]";
-const quietAction =
-  "text-sm font-semibold text-[var(--text-subtle)] transition-colors hover:text-[var(--danger)] disabled:opacity-50";
-const backLink =
-  "text-[13px] text-[var(--text-subtle)] transition-colors hover:text-[var(--text-primary)]";
-const factRow =
-  "grid grid-cols-1 gap-1 border-b border-[var(--border-subtle)] py-3.5 sm:grid-cols-[200px_1fr] sm:gap-6";
-const factValue = "text-[15px] font-semibold text-[var(--text-primary)]";
-
-function ApplicantRow({
-  initiativeId,
-  applicant,
-  full,
-}: {
-  initiativeId: string;
-  applicant: Applicant;
-  full: boolean;
-}) {
-  const utils = trpc.useUtils();
-  const [confirmRemove, setConfirmRemove] = useState(false);
-  const [wantResume, setWantResume] = useState(false);
-
-  // Fetched on click, not with the queue: thirty applicants would otherwise
-  // mean thirty PDFs on page load.
-  const resume = trpc.initiative.applicantResume.useQuery(
-    { initiativeId, userId: applicant.userId },
-    { enabled: wantResume },
-  );
-
-  const decide = trpc.initiative.decide.useMutation({
-    onSuccess: async () => {
-      await Promise.all([
-        utils.initiative.getById.invalidate({ id: initiativeId }),
-        // The list row carries the pending count, so leaving it alone keeps
-        // offering a queue that is already empty.
-        utils.initiative.listMine.invalidate(),
-      ]);
-    },
-  });
-
-  const send = (decision: "accepted" | "rejected") =>
-    decide.mutate({ initiativeId, userId: applicant.userId, decision });
-
-  return (
-    <li className="border-b border-[var(--border-subtle)] py-5">
-      <div className="flex flex-wrap items-start justify-between gap-4">
-        <div className="min-w-0 flex-1">
-          <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
-            <p className="text-[15px] font-semibold text-[var(--text-primary)]">
-              {applicant.name ?? applicant.email}
-            </p>
-            <ApplicationChip status={applicant.status} side="leader" />
-          </div>
-          <p className={`${meta} mt-0.5`}>
-            <a
-              href={`mailto:${applicant.email}`}
-              className="transition-colors hover:text-[var(--text-primary)]"
-            >
-              {applicant.email}
-            </a>
-          </p>
-          {applicant.pitch && (
-            <p
-              className={`${body} mt-3 max-w-2xl whitespace-pre-line border-l-2 border-[var(--border-medium)] pl-3`}
-            >
-              {applicant.pitch}
-            </p>
-          )}
-
-          {applicant.resumeFileName &&
-            (resume.data ? (
-              <a
-                href={resume.data.dataUrl}
-                download={resume.data.fileName}
-                className={`${textLink} mt-3`}
-              >
-                Download {resume.data.fileName}
-              </a>
-            ) : (
-              <button
-                type="button"
-                onClick={() => setWantResume(true)}
-                disabled={resume.isFetching}
-                className={`${textLink} mt-3 disabled:opacity-50`}
-              >
-                {resume.isFetching
-                  ? "Loading resume…"
-                  : `Resume: ${applicant.resumeFileName}`}
-              </button>
-            ))}
-          {resume.error && (
-            <p aria-live="polite" className={`${errorText} mt-2`}>
-              {resume.error.message}
-            </p>
-          )}
-        </div>
-
-        <div className="flex shrink-0 flex-wrap items-center gap-3">
-          {applicant.status === "pending" && (
-            <>
-              <button
-                type="button"
-                disabled={decide.isPending || full}
-                onClick={() => send("accepted")}
-                className={btnPrimary}
-              >
-                Accept
-              </button>
-              <button
-                type="button"
-                disabled={decide.isPending}
-                onClick={() => send("rejected")}
-                className={btnDanger}
-              >
-                Reject
-              </button>
-            </>
-          )}
-
-          {applicant.status === "rejected" && (
-            <button
-              type="button"
-              disabled={decide.isPending || full}
-              onClick={() => send("accepted")}
-              className={btnSecondary}
-            >
-              Accept after all
-            </button>
-          )}
-
-          {applicant.status === "accepted" &&
-            (confirmRemove ? (
-              <>
-                <span className="text-sm text-[var(--text-muted)]">
-                  Take them off the team?
-                </span>
-                <button
-                  type="button"
-                  disabled={decide.isPending}
-                  onClick={() => {
-                    send("rejected");
-                    setConfirmRemove(false);
-                  }}
-                  className={btnDanger}
-                >
-                  Remove
-                </button>
-                <button
-                  type="button"
-                  onClick={() => setConfirmRemove(false)}
-                  className={btnSecondary}
-                >
-                  Cancel
-                </button>
-              </>
-            ) : (
-              <button
-                type="button"
-                onClick={() => setConfirmRemove(true)}
-                className={quietAction}
-              >
-                Remove
-              </button>
-            ))}
-        </div>
-      </div>
-
-      {decide.error && (
-        <p className={`${errorText} mt-3`}>{decide.error.message}</p>
-      )}
-    </li>
-  );
-}
-
-function Group({
-  title,
-  rows,
-  render,
-}: {
-  title: string;
-  rows: Applicant[];
-  render: (applicant: Applicant) => React.ReactNode;
-}) {
-  if (rows.length === 0) return null;
+export default function Page({ params }: { params: Promise<{ id: string }> }) {
   return (
-    <section className="mt-12">
-      <div className="flex items-baseline justify-between gap-4">
-        <h2 className={sectionTitle}>{title}</h2>
-        <span className={`${meta} tabular-nums`}>{rows.length}</span>
-      </div>
-      <ul className="mt-4 border-t border-[var(--border-subtle)]">
-        {rows.map(render)}
-      </ul>
-    </section>
-  );
-}
-
-export default function LeadInitiativePage({
-  params,
-}: {
-  params: Promise<{ id: string }>;
-}) {
-  const { id } = use(params);
-  const detail = trpc.initiative.getById.useQuery({ id });
-
-  if (detail.isPending) return <LoadingScreen />;
-
-  if (detail.error) {
-    return (
-      <div className={page}>
-        <Link href="/lead" className={backLink}>
-          ← Your projects
-        </Link>
-        <h1 className={`${pageTitle} mt-6`}>This project did not load</h1>
-        <p className={pageDek}>
-          {detail.error.message} Go back to your projects and open it again.
-        </p>
-        <Link href="/lead" className={`${textLink} mt-6`}>
-          Back to your projects
-        </Link>
-      </div>
-    );
-  }
-
-  const { initiative, applicants, accepted } = detail.data;
-  const state = initiativeState(initiative);
-  const full =
-    initiative.maxMembers !== null && accepted >= initiative.maxMembers;
-
-  const inState = (...wanted: ApplicationStatus[]) =>
-    applicants.filter((row) => wanted.includes(row.status));
-
-  const row = (applicant: Applicant) => (
-    <ApplicantRow
-      key={applicant.userId}
-      initiativeId={initiative.id}
-      applicant={applicant}
-      full={full}
-    />
-  );
-
-  return (
-    <div className={page}>
-      <Link href="/lead" className={backLink}>
-        ← Your projects
-      </Link>
-
-      <header className="mt-6">
-        <h1 className={pageTitle}>{initiative.title}</h1>
-
-        {/* Said once, at the top: every Accept below is off and the reason has to
-            be readable without hovering a disabled button. */}
-        {full && (
-          <p className={pageDek}>
-            Every spot is taken. Raise the team size, or remove somebody, before
-            accepting anyone else.
-          </p>
-        )}
-
-        {state === "draft" && (
-          <p className={pageDek}>
-            This is still a draft, so members cannot see it or apply. Open it
-            from your projects list.
-          </p>
-        )}
-      </header>
-
-      <dl className="mt-8 max-w-3xl border-t border-[var(--border-subtle)]">
-        <div className={factRow}>
-          <dt className={label}>Status</dt>
-          <dd>
-            <InitiativeChip state={state} />
-          </dd>
-        </div>
-        <div className={factRow}>
-          <dt className={label}>Team</dt>
-          <dd className={factValue}>
-            {seatLabel(accepted, initiative.maxMembers)}
-          </dd>
-        </div>
-        {initiative.commitment && (
-          <div className={factRow}>
-            <dt className={label}>Commitment</dt>
-            <dd className={factValue}>{initiative.commitment}</dd>
-          </div>
-        )}
-      </dl>
-
-      {applicants.length === 0 ? (
-        <section className="mt-12">
-          <h2 className={sectionTitle}>Applications</h2>
-          <p className={`${body} mt-3 max-w-xl`}>
-            Nobody has applied yet.{" "}
-            {state === "open"
-              ? "It is open, so it is showing on the members' projects page."
-              : "Open it from your projects list and it will start showing to members."}
-          </p>
-          {state !== "open" && (
-            <Link href="/lead" className={`${textLink} mt-4`}>
-              Go to your projects
-            </Link>
-          )}
-        </section>
-      ) : (
-        <>
-          <Group
-            title="Waiting on you"
-            rows={inState("pending")}
-            render={row}
-          />
-          <Group title="On the team" rows={inState("accepted")} render={row} />
-          <Group
-            title="Turned down and withdrawn"
-            rows={inState("rejected", "withdrawn")}
-            render={row}
-          />
-        </>
-      )}
-    </div>
+    <PrefetchedPage
+      reads={async (c) => {
+        const { id } = await params;
+        return [["initiative.getById", { id }, c.initiative.getById({ id })]];
+      }}
+    >
+      <LeadInitiativePage params={params} />
+    </PrefetchedPage>
   );
 }
diff --git a/sites/mainweb/app/(portal)/lead/page.tsx b/sites/mainweb/app/(portal)/lead/page.tsx
index d9000903..b24fcffa 100644
--- a/sites/mainweb/app/(portal)/lead/page.tsx
+++ b/sites/mainweb/app/(portal)/lead/page.tsx
@@ -1,365 +1,14 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useSession } from "next-auth/react";
-import { LoadingScreen } from "@/components/portal/LoadingScreen";
-import {
-  InitiativeChip,
-  initiativeState,
-  seatLabel,
-} from "@/components/portal/initiatives/chips";
-import {
-  InitiativeFields,
-  draftFrom,
-  toInput,
-} from "@/components/portal/initiatives/form-fields";
-import {
-  body,
-  btnDanger,
-  btnPrimary,
-  btnSecondary,
-  chip,
-  itemTitle,
-  kicker,
-  label,
-  meta,
-  page,
-  pageDek,
-  pageTitle,
-  textLink,
-} from "@/components/portal/ui";
-import { trpc } from "@/lib/trpc";
-import { loginHref } from "@/lib/safe-callback";
-import type { RouterOutputs } from "@query/api";
-
-type LeadInitiative = RouterOutputs["initiative"]["listMine"][number];
-
-const statuses = [
-  { value: "draft", label: "Draft" },
-  { value: "open", label: "Open" },
-  { value: "closed", label: "Closed" },
-] as const;
-
-const errorText = "text-sm text-[var(--danger)]";
-const quietAction =
-  "text-sm font-semibold text-[var(--text-subtle)] transition-colors hover:text-[var(--text-primary)] disabled:opacity-50";
-
-function InitiativeForm({
-  initiative,
-  onDone,
-}: {
-  initiative?: LeadInitiative;
-  onDone: () => void;
-}) {
-  const utils = trpc.useUtils();
-  const [error, setError] = useState<string | null>(null);
-  const [draft, setDraft] = useState(() => draftFrom(initiative));
-
-  const done = async () => {
-    await utils.initiative.listMine.invalidate();
-    onDone();
-  };
-
-  const create = trpc.initiative.create.useMutation({
-    onSuccess: done,
-    onError: (e) => setError(e.message),
-  });
-  const update = trpc.initiative.update.useMutation({
-    onSuccess: done,
-    onError: (e) => setError(e.message),
-  });
-  const pending = create.isPending || update.isPending;
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import LeadPage from "./LeadPage";
 
+export default function Page() {
   return (
-    <form
-      onSubmit={(event) => {
-        event.preventDefault();
-        setError(null);
-        const values = toInput(draft);
-        if (initiative) update.mutate({ ...values, id: initiative.id });
-        else create.mutate(values);
-      }}
+    <PrefetchedPage
+      reads={(c) => [
+        ["initiative.listMine", undefined, c.initiative.listMine()],
+      ]}
     >
-      <h2 className={`${itemTitle} mb-4`}>
-        {initiative ? `Edit ${initiative.title}` : "New project"}
-      </h2>
-
-      <InitiativeFields draft={draft} onChange={setDraft} />
-
-      {error && <p className={`${errorText} mt-3`}>{error}</p>}
-
-      <div className="mt-5 flex flex-wrap gap-3">
-        <button type="submit" disabled={pending} className={btnPrimary}>
-          {pending ? "Saving…" : initiative ? "Save changes" : "Create draft"}
-        </button>
-        <button type="button" onClick={onDone} className={btnSecondary}>
-          Cancel
-        </button>
-      </div>
-
-      {!initiative && (
-        <p className={`${meta} mt-3`}>
-          It starts as a draft. Nothing reaches members until you open it.
-        </p>
-      )}
-    </form>
-  );
-}
-
-function InitiativeRow({ initiative }: { initiative: LeadInitiative }) {
-  const utils = trpc.useUtils();
-  const [editing, setEditing] = useState(false);
-  const [confirmArchive, setConfirmArchive] = useState(false);
-
-  // The applicants screen reads getById, so invalidating only the list leaves
-  // it serving a stale initiative.
-  const refresh = async () => {
-    await Promise.all([
-      utils.initiative.listMine.invalidate(),
-      utils.initiative.getById.invalidate({ id: initiative.id }),
-    ]);
-  };
-
-  const setStatus = trpc.initiative.setStatus.useMutation({
-    onSuccess: refresh,
-  });
-  const archive = trpc.initiative.setArchived.useMutation({
-    onSuccess: refresh,
-  });
-
-  if (editing) {
-    return (
-      <InitiativeForm
-        initiative={initiative}
-        onDone={() => setEditing(false)}
-      />
-    );
-  }
-
-  const state = initiativeState(initiative);
-  const archived = state === "archived";
-
-  return (
-    <>
-      <div className="flex flex-wrap items-start justify-between gap-4">
-        <div className="min-w-0 flex-1">
-          <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
-            <h3 className={itemTitle}>{initiative.title}</h3>
-            <InitiativeChip state={state} />
-          </div>
-          {initiative.summary && (
-            <p className={`${body} mt-1`}>{initiative.summary}</p>
-          )}
-          <p className={`${meta} mt-1`}>
-            {seatLabel(initiative.accepted, initiative.maxMembers)}
-            {initiative.pending > 0
-              ? ` · ${initiative.pending} waiting on you`
-              : " · nobody waiting"}
-          </p>
-          {!initiative.isMine && (
-            <p className={`${meta} mt-1`}>Led by {initiative.leaderName}</p>
-          )}
-        </div>
-
-        <Link
-          href={`/lead/${initiative.id}`}
-          className={`${initiative.pending > 0 ? btnSecondary : textLink} shrink-0`}
-        >
-          {initiative.pending > 0
-            ? `Review ${initiative.pending} application${initiative.pending === 1 ? "" : "s"}`
-            : "Applications"}
-        </Link>
-      </div>
-
-      <div className="mt-4 flex flex-wrap items-center gap-x-4 gap-y-3">
-        <div
-          role="group"
-          aria-label="Status"
-          className="flex flex-wrap items-center gap-2"
-        >
-          <span className={label}>Status</span>
-          {statuses.map((option) => (
-            <button
-              key={option.value}
-              type="button"
-              aria-pressed={initiative.status === option.value}
-              disabled={archived || setStatus.isPending}
-              onClick={() =>
-                setStatus.mutate({ id: initiative.id, status: option.value })
-              }
-              className={`${chip(initiative.status === option.value)} disabled:cursor-not-allowed disabled:opacity-40`}
-            >
-              {option.label}
-            </button>
-          ))}
-        </div>
-
-        <button
-          type="button"
-          onClick={() => setEditing(true)}
-          className={textLink}
-        >
-          Edit
-        </button>
-
-        <div className="flex flex-wrap items-center gap-3 sm:ml-auto">
-          {confirmArchive ? (
-            <>
-              <span className="text-sm text-[var(--text-muted)]">
-                {archived ? "Restore this project?" : "Archive this project?"}
-              </span>
-              <button
-                type="button"
-                onClick={() => {
-                  archive.mutate({
-                    id: initiative.id,
-                    archived: !archived,
-                  });
-                  setConfirmArchive(false);
-                }}
-                className={archived ? btnSecondary : btnDanger}
-              >
-                {archived ? "Restore" : "Archive"}
-              </button>
-              <button
-                type="button"
-                onClick={() => setConfirmArchive(false)}
-                className={btnSecondary}
-              >
-                Cancel
-              </button>
-            </>
-          ) : (
-            <button
-              type="button"
-              onClick={() => setConfirmArchive(true)}
-              className={quietAction}
-            >
-              {archived ? "Restore" : "Archive"}
-            </button>
-          )}
-        </div>
-      </div>
-
-      {(setStatus.error ?? archive.error) && (
-        <p className={`${errorText} mt-3`}>
-          {(setStatus.error ?? archive.error)?.message}
-        </p>
-      )}
-    </>
-  );
-}
-
-export default function LeadPage() {
-  const { data: session, status } = useSession();
-  const router = useRouter();
-  // Queries wait on the session, so a signed-out visitor otherwise sits on
-  // the loading screen forever.
-  useEffect(() => {
-    if (status === "unauthenticated") router.push(loginHref());
-  }, [status, router]);
-  const [creating, setCreating] = useState(false);
-
-  const listing = trpc.initiative.listMine.useQuery(undefined, {
-    enabled: !!session,
-  });
-
-  if (status === "loading" || listing.isPending) return <LoadingScreen />;
-
-  if (listing.error) {
-    const forbidden = listing.error.data?.code === "FORBIDDEN";
-    return (
-      <div className={page}>
-        <h1 className={pageTitle}>
-          {forbidden
-            ? "This page is for project leaders"
-            : "Your projects did not load"}
-        </h1>
-        <p className={pageDek}>
-          {forbidden
-            ? "Pitch a project from the projects page. If it is approved, you lead it and manage it here."
-            : `${listing.error.message} Refresh the page to try again.`}
-        </p>
-        <Link href="/initiatives" className={`${textLink} mt-6`}>
-          Browse projects instead
-        </Link>
-      </div>
-    );
-  }
-
-  const initiatives = listing.data ?? [];
-  const waiting = initiatives.reduce((total, row) => total + row.pending, 0);
-
-  return (
-    <div className={page}>
-      <Link
-        href="/initiatives"
-        className="text-[13px] text-[var(--text-subtle)] transition-colors hover:text-[var(--text-primary)]"
-      >
-        ← Club projects
-      </Link>
-
-      <header className="mt-6 flex flex-col justify-between gap-6 md:flex-row md:items-end">
-        <div>
-          <p className={kicker}>Projects you lead</p>
-          <h1 className={`${pageTitle} mt-2`}>
-            {waiting > 0
-              ? `${waiting} application${waiting === 1 ? "" : "s"} waiting on you`
-              : "Nothing waiting on you"}
-          </h1>
-          <p className={pageDek}>
-            Open a project to members, review who applies, and keep the team
-            list current.
-          </p>
-        </div>
-
-        {!creating && (
-          <button
-            type="button"
-            onClick={() => setCreating(true)}
-            className={`${btnPrimary} shrink-0 self-start md:self-auto`}
-          >
-            New project
-          </button>
-        )}
-      </header>
-
-      {creating && (
-        <section className="mt-10 border-t border-[var(--border-subtle)] pt-6">
-          <InitiativeForm onDone={() => setCreating(false)} />
-        </section>
-      )}
-
-      {initiatives.length > 0 ? (
-        <ul className="mt-10 border-t border-[var(--border-subtle)]">
-          {initiatives.map((initiative) => (
-            <li
-              key={initiative.id}
-              className="border-b border-[var(--border-subtle)] py-6"
-            >
-              <InitiativeRow initiative={initiative} />
-            </li>
-          ))}
-        </ul>
-      ) : (
-        !creating && (
-          <div className="mt-10 border-t border-[var(--border-subtle)] pt-6">
-            <p className={`${body} max-w-xl`}>
-              You have no projects yet. A new one starts as a draft, so you can
-              write it up now and open it to members when you are ready.
-            </p>
-            <button
-              type="button"
-              onClick={() => setCreating(true)}
-              className={`${textLink} mt-4`}
-            >
-              Start a draft
-            </button>
-          </div>
-        )
-      )}
-    </div>
+      <LeadPage />
+    </PrefetchedPage>
   );
 }
diff --git a/sites/mainweb/app/(portal)/subteams/SubteamsPage.tsx b/sites/mainweb/app/(portal)/subteams/SubteamsPage.tsx
new file mode 100644
index 00000000..a004e1a8
--- /dev/null
+++ b/sites/mainweb/app/(portal)/subteams/SubteamsPage.tsx
@@ -0,0 +1,402 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useSession } from "next-auth/react";
+import { LoadingScreen } from "@/components/portal/LoadingScreen";
+import {
+  SubteamApplicationChip,
+  shortDate,
+} from "@/components/portal/subteams/chips";
+import {
+  body,
+  btnDanger,
+  btnPrimary,
+  btnSecondary,
+  fieldLabel,
+  input,
+  itemTitle,
+  meta,
+  object,
+  page,
+  pageDek,
+  pageTitle,
+  sectionTitle,
+} from "@/components/portal/ui";
+import { trpc } from "@/lib/trpc";
+import { loginHref } from "@/lib/safe-callback";
+import type { RouterOutputs } from "@query/api";
+
+type OpenSubteam = RouterOutputs["subteam"]["list"][number];
+type MyApplication = RouterOutputs["subteam"]["myApplications"][number];
+
+const errorText = "text-sm text-[var(--danger)]";
+const quietAction =
+  "text-sm font-semibold text-[var(--text-subtle)] transition-colors hover:text-[var(--text-primary)] disabled:opacity-50";
+const inlineLink =
+  "font-semibold text-[var(--text-primary)] underline decoration-accent underline-offset-4 hover:decoration-[var(--text-primary)]";
+const listRow = "border-b border-[var(--border-subtle)] py-5";
+const quote = `${body} whitespace-pre-line border-l-2 border-[var(--border-medium)] pl-3`;
+
+// Mirrors the router's limits, so the browser stops the typing rather than the
+// server bouncing the whole form.
+const MAX_ANSWER = 2000;
+const MAX_NOTE = 1000;
+
+function ApplyForm({
+  subteam,
+  onDone,
+}: {
+  subteam: OpenSubteam;
+  onDone: () => void;
+}) {
+  const utils = trpc.useUtils();
+  const [answers, setAnswers] = useState<Record<string, string>>({});
+  const [note, setNote] = useState("");
+
+  const join = trpc.subteam.requestToJoin.useMutation({
+    onSuccess: async () => {
+      onDone();
+      // Applying moves a subteam from one list to the other; refreshing one
+      // alone renders it twice.
+      await Promise.all([
+        utils.subteam.list.invalidate(),
+        utils.subteam.myApplications.invalidate(),
+      ]);
+    },
+  });
+
+  const missing = subteam.questions.some(
+    (question) => question.required && !answers[question.id]?.trim(),
+  );
+
+  return (
+    <form
+      className="mt-5 space-y-5 border-t border-[var(--border-subtle)] pt-5"
+      onSubmit={(event) => {
+        event.preventDefault();
+        join.mutate({
+          subteamId: subteam.id,
+          answers: subteam.questions.map((question) => ({
+            questionId: question.id,
+            answer: (answers[question.id] ?? "").trim(),
+          })),
+          note: note.trim() || undefined,
+        });
+      }}
+    >
+      {subteam.questions.map((question) => {
+        const id = `answer-${subteam.id}-${question.id}`;
+        return (
+          <div key={question.id}>
+            <label htmlFor={id} className={fieldLabel}>
+              {question.prompt}
+              {!question.required && (
+                <span className="font-normal text-[var(--text-subtle)]">
+                  {" "}
+                  (optional)
+                </span>
+              )}
+            </label>
+            <textarea
+              id={id}
+              rows={3}
+              required={question.required}
+              maxLength={MAX_ANSWER}
+              value={answers[question.id] ?? ""}
+              onChange={(event) =>
+                setAnswers((prev) => ({
+                  ...prev,
+                  [question.id]: event.target.value,
+                }))
+              }
+              className={input}
+            />
+          </div>
+        );
+      })}
+
+      <div>
+        <label htmlFor={`note-${subteam.id}`} className={fieldLabel}>
+          Anything else we should know?{" "}
+          <span className="font-normal text-[var(--text-subtle)]">
+            (optional)
+          </span>
+        </label>
+        <textarea
+          id={`note-${subteam.id}`}
+          rows={2}
+          maxLength={MAX_NOTE}
+          value={note}
+          onChange={(event) => setNote(event.target.value)}
+          className={input}
+        />
+      </div>
+
+      <div className="flex flex-wrap gap-3">
+        <button
+          type="submit"
+          disabled={join.isPending || missing}
+          className={btnPrimary}
+        >
+          {join.isPending ? "Sending…" : "Send application"}
+        </button>
+        <button
+          type="button"
+          onClick={() => {
+            join.reset();
+            onDone();
+          }}
+          className={btnSecondary}
+        >
+          Cancel
+        </button>
+      </div>
+
+      {join.error && (
+        <p aria-live="polite" className={errorText}>
+          {join.error.message}
+        </p>
+      )}
+    </form>
+  );
+}
+
+function SubteamCard({
+  subteam,
+  canApply,
+}: {
+  subteam: OpenSubteam;
+  canApply: boolean;
+}) {
+  const [writing, setWriting] = useState(false);
+
+  return (
+    <li className={`${object} p-5`}>
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div className="min-w-0 flex-1">
+          <h3 className={itemTitle}>{subteam.name}</h3>
+          {subteam.summary && (
+            <p className="mt-1 text-[15px] leading-relaxed text-[var(--text-secondary)]">
+              {subteam.summary}
+            </p>
+          )}
+        </div>
+
+        {subteam.myStatus ? (
+          <SubteamApplicationChip status={subteam.myStatus} />
+        ) : (
+          !writing &&
+          canApply && (
+            <button
+              type="button"
+              onClick={() => setWriting(true)}
+              className={`${btnSecondary} shrink-0`}
+            >
+              Apply
+            </button>
+          )
+        )}
+      </div>
+
+      {subteam.description && (
+        <div className="mt-4">
+          <p className={meta}>What you would do</p>
+          <p className={`${body} mt-1 whitespace-pre-line`}>
+            {subteam.description}
+          </p>
+        </div>
+      )}
+
+      {writing && (
+        <ApplyForm subteam={subteam} onDone={() => setWriting(false)} />
+      )}
+    </li>
+  );
+}
+
+function ApplicationRow({ application }: { application: MyApplication }) {
+  const utils = trpc.useUtils();
+  const [confirm, setConfirm] = useState(false);
+
+  const withdraw = trpc.subteam.withdraw.useMutation({
+    onSuccess: async () => {
+      await Promise.all([
+        utils.subteam.list.invalidate(),
+        utils.subteam.myApplications.invalidate(),
+      ]);
+    },
+  });
+
+  return (
+    <li className={listRow}>
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
+            <h3 className="text-[15px] font-semibold text-[var(--text-primary)]">
+              {application.subteamName}
+            </h3>
+            <SubteamApplicationChip status={application.status} />
+          </div>
+          <p className={`${meta} mt-1`}>
+            Applied {shortDate(application.appliedAt)}
+            {application.subteamArchivedAt !== null ? " · archived" : ""}
+          </p>
+          {application.decisionNote && (
+            <p className={`${quote} mt-3`}>{application.decisionNote}</p>
+          )}
+          {application.answers.length > 0 && (
+            <details className="mt-3">
+              <summary className={`${quietAction} cursor-pointer`}>
+                Your answers
+              </summary>
+              <dl className="mt-3 space-y-3">
+                {application.answers.map((row) => (
+                  <div key={row.questionId}>
+                    <dt className={meta}>{row.prompt}</dt>
+                    <dd className={`${body} mt-0.5 whitespace-pre-line`}>
+                      {row.answer}
+                    </dd>
+                  </div>
+                ))}
+              </dl>
+            </details>
+          )}
+        </div>
+
+        {/* Only while nobody has decided: after that it is the admins' record. */}
+        {application.status === "pending" &&
+          (confirm ? (
+            <span className="flex flex-wrap items-center gap-3">
+              <span className="text-sm text-[var(--text-muted)]">
+                Withdraw your application?
+              </span>
+              <button
+                type="button"
+                disabled={withdraw.isPending}
+                onClick={() => {
+                  withdraw.mutate({ applicationId: application.id });
+                  setConfirm(false);
+                }}
+                className={btnDanger}
+              >
+                Withdraw
+              </button>
+              <button
+                type="button"
+                onClick={() => setConfirm(false)}
+                className={btnSecondary}
+              >
+                Cancel
+              </button>
+            </span>
+          ) : (
+            <button
+              type="button"
+              onClick={() => setConfirm(true)}
+              className={`${quietAction} shrink-0`}
+            >
+              Withdraw
+            </button>
+          ))}
+      </div>
+
+      {withdraw.error && (
+        <p className={`${errorText} mt-3`}>{withdraw.error.message}</p>
+      )}
+    </li>
+  );
+}
+
+export default function SubteamsPage() {
+  const { data: session, status } = useSession();
+  const router = useRouter();
+  // Queries wait on the session, so a signed-out visitor otherwise sits on
+  // the loading screen forever.
+  useEffect(() => {
+    if (status === "unauthenticated") router.push(loginHref());
+  }, [status, router]);
+
+  const open = trpc.subteam.list.useQuery(undefined, { enabled: !!session });
+  const mine = trpc.subteam.myApplications.useQuery(undefined, {
+    enabled: !!session,
+  });
+  const memberStatus = trpc.member.checkStatus.useQuery(undefined, {
+    enabled: !!session,
+  });
+
+  if (status === "loading" || open.isPending || mine.isPending) {
+    return <LoadingScreen />;
+  }
+
+  const subteams = open.data ?? [];
+  const applications = mine.data ?? [];
+  const canApply = !!memberStatus.data?.isActive;
+  const loadError = open.error ?? mine.error;
+
+  return (
+    <div className={page}>
+      <Link
+        href="/dashboard"
+        className="text-[13px] text-[var(--text-subtle)] transition-colors hover:text-[var(--text-primary)]"
+      >
+        ← Dashboard
+      </Link>
+
+      <header className="mt-6">
+        <h1 className={pageTitle}>Subteams</h1>
+        <p className={pageDek}>
+          The groups that run the club. Pick one you want to help with and tell
+          us a little about yourself.
+        </p>
+      </header>
+
+      {loadError && (
+        <p className={`${errorText} mt-6`}>
+          {loadError.message} Refresh the page to try again.
+        </p>
+      )}
+
+      {!canApply && memberStatus.isSuccess && (
+        <p className={`${meta} mt-6`}>
+          Applying needs an active membership.{" "}
+          <Link href="/dashboard" className={inlineLink}>
+            Become a member
+          </Link>
+        </p>
+      )}
+
+      <section className="mt-10">
+        <h2 className={sectionTitle}>Taking applications</h2>
+        {subteams.length > 0 ? (
+          <ul className="mt-5 space-y-4">
+            {subteams.map((subteam) => (
+              <SubteamCard
+                key={subteam.id}
+                subteam={subteam}
+                canApply={canApply}
+              />
+            ))}
+          </ul>
+        ) : (
+          <p className={`${body} mt-3 max-w-xl`}>
+            No subteams are taking applications right now. Check back at the
+            start of the semester, when most of them open.
+          </p>
+        )}
+      </section>
+
+      {applications.length > 0 && (
+        <section className="mt-12">
+          <h2 className={sectionTitle}>Your applications</h2>
+          <ul className="mt-4 border-t border-[var(--border-subtle)]">
+            {applications.map((application) => (
+              <ApplicationRow key={application.id} application={application} />
+            ))}
+          </ul>
+        </section>
+      )}
+    </div>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/subteams/page.tsx b/sites/mainweb/app/(portal)/subteams/page.tsx
index a004e1a8..adf12234 100644
--- a/sites/mainweb/app/(portal)/subteams/page.tsx
+++ b/sites/mainweb/app/(portal)/subteams/page.tsx
@@ -1,402 +1,16 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useSession } from "next-auth/react";
-import { LoadingScreen } from "@/components/portal/LoadingScreen";
-import {
-  SubteamApplicationChip,
-  shortDate,
-} from "@/components/portal/subteams/chips";
-import {
-  body,
-  btnDanger,
-  btnPrimary,
-  btnSecondary,
-  fieldLabel,
-  input,
-  itemTitle,
-  meta,
-  object,
-  page,
-  pageDek,
-  pageTitle,
-  sectionTitle,
-} from "@/components/portal/ui";
-import { trpc } from "@/lib/trpc";
-import { loginHref } from "@/lib/safe-callback";
-import type { RouterOutputs } from "@query/api";
-
-type OpenSubteam = RouterOutputs["subteam"]["list"][number];
-type MyApplication = RouterOutputs["subteam"]["myApplications"][number];
-
-const errorText = "text-sm text-[var(--danger)]";
-const quietAction =
-  "text-sm font-semibold text-[var(--text-subtle)] transition-colors hover:text-[var(--text-primary)] disabled:opacity-50";
-const inlineLink =
-  "font-semibold text-[var(--text-primary)] underline decoration-accent underline-offset-4 hover:decoration-[var(--text-primary)]";
-const listRow = "border-b border-[var(--border-subtle)] py-5";
-const quote = `${body} whitespace-pre-line border-l-2 border-[var(--border-medium)] pl-3`;
-
-// Mirrors the router's limits, so the browser stops the typing rather than the
-// server bouncing the whole form.
-const MAX_ANSWER = 2000;
-const MAX_NOTE = 1000;
-
-function ApplyForm({
-  subteam,
-  onDone,
-}: {
-  subteam: OpenSubteam;
-  onDone: () => void;
-}) {
-  const utils = trpc.useUtils();
-  const [answers, setAnswers] = useState<Record<string, string>>({});
-  const [note, setNote] = useState("");
-
-  const join = trpc.subteam.requestToJoin.useMutation({
-    onSuccess: async () => {
-      onDone();
-      // Applying moves a subteam from one list to the other; refreshing one
-      // alone renders it twice.
-      await Promise.all([
-        utils.subteam.list.invalidate(),
-        utils.subteam.myApplications.invalidate(),
-      ]);
-    },
-  });
-
-  const missing = subteam.questions.some(
-    (question) => question.required && !answers[question.id]?.trim(),
-  );
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import SubteamsPage from "./SubteamsPage";
 
+export default function Page() {
   return (
-    <form
-      className="mt-5 space-y-5 border-t border-[var(--border-subtle)] pt-5"
-      onSubmit={(event) => {
-        event.preventDefault();
-        join.mutate({
-          subteamId: subteam.id,
-          answers: subteam.questions.map((question) => ({
-            questionId: question.id,
-            answer: (answers[question.id] ?? "").trim(),
-          })),
-          note: note.trim() || undefined,
-        });
-      }}
+    <PrefetchedPage
+      reads={(c) => [
+        ["subteam.list", undefined, c.subteam.list()],
+        ["subteam.myApplications", undefined, c.subteam.myApplications()],
+        ["member.checkStatus", undefined, c.member.checkStatus()],
+      ]}
     >
-      {subteam.questions.map((question) => {
-        const id = `answer-${subteam.id}-${question.id}`;
-        return (
-          <div key={question.id}>
-            <label htmlFor={id} className={fieldLabel}>
-              {question.prompt}
-              {!question.required && (
-                <span className="font-normal text-[var(--text-subtle)]">
-                  {" "}
-                  (optional)
-                </span>
-              )}
-            </label>
-            <textarea
-              id={id}
-              rows={3}
-              required={question.required}
-              maxLength={MAX_ANSWER}
-              value={answers[question.id] ?? ""}
-              onChange={(event) =>
-                setAnswers((prev) => ({
-                  ...prev,
-                  [question.id]: event.target.value,
-                }))
-              }
-              className={input}
-            />
-          </div>
-        );
-      })}
-
-      <div>
-        <label htmlFor={`note-${subteam.id}`} className={fieldLabel}>
-          Anything else we should know?{" "}
-          <span className="font-normal text-[var(--text-subtle)]">
-            (optional)
-          </span>
-        </label>
-        <textarea
-          id={`note-${subteam.id}`}
-          rows={2}
-          maxLength={MAX_NOTE}
-          value={note}
-          onChange={(event) => setNote(event.target.value)}
-          className={input}
-        />
-      </div>
-
-      <div className="flex flex-wrap gap-3">
-        <button
-          type="submit"
-          disabled={join.isPending || missing}
-          className={btnPrimary}
-        >
-          {join.isPending ? "Sending…" : "Send application"}
-        </button>
-        <button
-          type="button"
-          onClick={() => {
-            join.reset();
-            onDone();
-          }}
-          className={btnSecondary}
-        >
-          Cancel
-        </button>
-      </div>
-
-      {join.error && (
-        <p aria-live="polite" className={errorText}>
-          {join.error.message}
-        </p>
-      )}
-    </form>
-  );
-}
-
-function SubteamCard({
-  subteam,
-  canApply,
-}: {
-  subteam: OpenSubteam;
-  canApply: boolean;
-}) {
-  const [writing, setWriting] = useState(false);
-
-  return (
-    <li className={`${object} p-5`}>
-      <div className="flex flex-wrap items-start justify-between gap-4">
-        <div className="min-w-0 flex-1">
-          <h3 className={itemTitle}>{subteam.name}</h3>
-          {subteam.summary && (
-            <p className="mt-1 text-[15px] leading-relaxed text-[var(--text-secondary)]">
-              {subteam.summary}
-            </p>
-          )}
-        </div>
-
-        {subteam.myStatus ? (
-          <SubteamApplicationChip status={subteam.myStatus} />
-        ) : (
-          !writing &&
-          canApply && (
-            <button
-              type="button"
-              onClick={() => setWriting(true)}
-              className={`${btnSecondary} shrink-0`}
-            >
-              Apply
-            </button>
-          )
-        )}
-      </div>
-
-      {subteam.description && (
-        <div className="mt-4">
-          <p className={meta}>What you would do</p>
-          <p className={`${body} mt-1 whitespace-pre-line`}>
-            {subteam.description}
-          </p>
-        </div>
-      )}
-
-      {writing && (
-        <ApplyForm subteam={subteam} onDone={() => setWriting(false)} />
-      )}
-    </li>
-  );
-}
-
-function ApplicationRow({ application }: { application: MyApplication }) {
-  const utils = trpc.useUtils();
-  const [confirm, setConfirm] = useState(false);
-
-  const withdraw = trpc.subteam.withdraw.useMutation({
-    onSuccess: async () => {
-      await Promise.all([
-        utils.subteam.list.invalidate(),
-        utils.subteam.myApplications.invalidate(),
-      ]);
-    },
-  });
-
-  return (
-    <li className={listRow}>
-      <div className="flex flex-wrap items-start justify-between gap-4">
-        <div className="min-w-0 flex-1">
-          <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
-            <h3 className="text-[15px] font-semibold text-[var(--text-primary)]">
-              {application.subteamName}
-            </h3>
-            <SubteamApplicationChip status={application.status} />
-          </div>
-          <p className={`${meta} mt-1`}>
-            Applied {shortDate(application.appliedAt)}
-            {application.subteamArchivedAt !== null ? " · archived" : ""}
-          </p>
-          {application.decisionNote && (
-            <p className={`${quote} mt-3`}>{application.decisionNote}</p>
-          )}
-          {application.answers.length > 0 && (
-            <details className="mt-3">
-              <summary className={`${quietAction} cursor-pointer`}>
-                Your answers
-              </summary>
-              <dl className="mt-3 space-y-3">
-                {application.answers.map((row) => (
-                  <div key={row.questionId}>
-                    <dt className={meta}>{row.prompt}</dt>
-                    <dd className={`${body} mt-0.5 whitespace-pre-line`}>
-                      {row.answer}
-                    </dd>
-                  </div>
-                ))}
-              </dl>
-            </details>
-          )}
-        </div>
-
-        {/* Only while nobody has decided: after that it is the admins' record. */}
-        {application.status === "pending" &&
-          (confirm ? (
-            <span className="flex flex-wrap items-center gap-3">
-              <span className="text-sm text-[var(--text-muted)]">
-                Withdraw your application?
-              </span>
-              <button
-                type="button"
-                disabled={withdraw.isPending}
-                onClick={() => {
-                  withdraw.mutate({ applicationId: application.id });
-                  setConfirm(false);
-                }}
-                className={btnDanger}
-              >
-                Withdraw
-              </button>
-              <button
-                type="button"
-                onClick={() => setConfirm(false)}
-                className={btnSecondary}
-              >
-                Cancel
-              </button>
-            </span>
-          ) : (
-            <button
-              type="button"
-              onClick={() => setConfirm(true)}
-              className={`${quietAction} shrink-0`}
-            >
-              Withdraw
-            </button>
-          ))}
-      </div>
-
-      {withdraw.error && (
-        <p className={`${errorText} mt-3`}>{withdraw.error.message}</p>
-      )}
-    </li>
-  );
-}
-
-export default function SubteamsPage() {
-  const { data: session, status } = useSession();
-  const router = useRouter();
-  // Queries wait on the session, so a signed-out visitor otherwise sits on
-  // the loading screen forever.
-  useEffect(() => {
-    if (status === "unauthenticated") router.push(loginHref());
-  }, [status, router]);
-
-  const open = trpc.subteam.list.useQuery(undefined, { enabled: !!session });
-  const mine = trpc.subteam.myApplications.useQuery(undefined, {
-    enabled: !!session,
-  });
-  const memberStatus = trpc.member.checkStatus.useQuery(undefined, {
-    enabled: !!session,
-  });
-
-  if (status === "loading" || open.isPending || mine.isPending) {
-    return <LoadingScreen />;
-  }
-
-  const subteams = open.data ?? [];
-  const applications = mine.data ?? [];
-  const canApply = !!memberStatus.data?.isActive;
-  const loadError = open.error ?? mine.error;
-
-  return (
-    <div className={page}>
-      <Link
-        href="/dashboard"
-        className="text-[13px] text-[var(--text-subtle)] transition-colors hover:text-[var(--text-primary)]"
-      >
-        ← Dashboard
-      </Link>
-
-      <header className="mt-6">
-        <h1 className={pageTitle}>Subteams</h1>
-        <p className={pageDek}>
-          The groups that run the club. Pick one you want to help with and tell
-          us a little about yourself.
-        </p>
-      </header>
-
-      {loadError && (
-        <p className={`${errorText} mt-6`}>
-          {loadError.message} Refresh the page to try again.
-        </p>
-      )}
-
-      {!canApply && memberStatus.isSuccess && (
-        <p className={`${meta} mt-6`}>
-          Applying needs an active membership.{" "}
-          <Link href="/dashboard" className={inlineLink}>
-            Become a member
-          </Link>
-        </p>
-      )}
-
-      <section className="mt-10">
-        <h2 className={sectionTitle}>Taking applications</h2>
-        {subteams.length > 0 ? (
-          <ul className="mt-5 space-y-4">
-            {subteams.map((subteam) => (
-              <SubteamCard
-                key={subteam.id}
-                subteam={subteam}
-                canApply={canApply}
-              />
-            ))}
-          </ul>
-        ) : (
-          <p className={`${body} mt-3 max-w-xl`}>
-            No subteams are taking applications right now. Check back at the
-            start of the semester, when most of them open.
-          </p>
-        )}
-      </section>
-
-      {applications.length > 0 && (
-        <section className="mt-12">
-          <h2 className={sectionTitle}>Your applications</h2>
-          <ul className="mt-4 border-t border-[var(--border-subtle)]">
-            {applications.map((application) => (
-              <ApplicationRow key={application.id} application={application} />
-            ))}
-          </ul>
-        </section>
-      )}
-    </div>
+      <SubteamsPage />
+    </PrefetchedPage>
   );
 }

From 83197e4ce268d678ba6d41d1cc807f9c590de85f Mon Sep 17 00:00:00 2001
From: aamoghS <aamoghsawantt@gmail.com>
Date: Fri, 6 Nov 2026 12:46:35 -0500
Subject: [PATCH 9/9] fix(api): make the hackathon roster search work

Every search on the admin roster answered 500: "operator does not exist:
uuid = text". The filter is shared by the paged roster, which runs as a
relational query (db.query.hackathonParticipants.findMany), and inside that
Drizzle renders every column in a raw sql template against the participants
alias. The user-name and email subquery therefore compared
"hackathonParticipants"."id" (uuid) with its own user_id (text), and read
name and email off the participants alias too.

The user table now has a hand-written alias in that subquery. Checked on a
production build against the local Docker database: "example.test" matches
the 8 seeded attendees through their user email, "casey" 1, "zzzz" 0.
---
 .../api/src/routers/hackathon/admin/attendee-where.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/api/src/routers/hackathon/admin/attendee-where.ts b/packages/api/src/routers/hackathon/admin/attendee-where.ts
index 39d13370..e275a94c 100644
--- a/packages/api/src/routers/hackathon/admin/attendee-where.ts
+++ b/packages/api/src/routers/hackathon/admin/attendee-where.ts
@@ -41,6 +41,11 @@ export const buildAttendeeWhere = (input: {
     // Escaped so a literal % or _ in a name searches for that character instead
     // of turning into a wildcard.
     const pattern = `%${term.replace(/[\\%_]/g, (c) => `\\${c}`)}%`;
+    // The user table gets its own alias, written by hand. Inside the relational
+    // roster query (db.query...findMany) Drizzle renders every column in this
+    // template against the participants alias, so `${users.id}` came out as
+    // "hackathonParticipants"."id" (a uuid) compared with user_id (text) and
+    // every search answered 500.
     clauses.push(
       sql`(
         ${hackathonParticipants.firstName} ilike ${pattern}
@@ -49,9 +54,9 @@ export const buildAttendeeWhere = (input: {
         or ${hackathonParticipants.major} ilike ${pattern}
         or ${hackathonParticipants.whyAttend} ilike ${pattern}
         or exists (
-          select 1 from ${users}
-          where ${users.id} = ${hackathonParticipants.userId}
-            and (${users.name} ilike ${pattern} or ${users.email} ilike ${pattern})
+          select 1 from ${users} as attendee_user
+          where attendee_user."id" = ${hackathonParticipants.userId}
+            and (attendee_user."name" ilike ${pattern} or attendee_user."email" ilike ${pattern})
         )
       )`,
     );