Build the degree composition from the student's degree

apps/web/app/dashboard/dashboard.tsx

@@ -19,6 +19,8 @@ import {
 import { DegreeComposition } from "@/ui/dashboard/degree-composition";
 import { AppShell } from "@/ui/shell";
 import type { PlanCatalogue } from "@/lib/coursemap/plan-catalogue";
+import type { OnboardingCatalogue } from "@/lib/coursemap/onboarding-catalogue";
+import { degreeComposition } from "@/lib/coursemap/degree-composition";
 import {
   cumulativeDashboardUnits,
   currentDashboardTermId,
@@ -70,7 +72,13 @@ function finishLabelFor(
   return `${term?.name ?? last.label} ${last.year}`;
 }
 
-export function Dashboard({ catalogue }: { catalogue: PlanCatalogue }) {
+export function Dashboard({
+  catalogue,
+  choices,
+}: {
+  catalogue: PlanCatalogue;
+  choices: OnboardingCatalogue;
+}) {
   const { state } = useCoursemap();
   const previewMetrics = process.env.NODE_ENV === "development";
   const degree = catalogue.degrees.find(
@@ -159,6 +167,31 @@ export function Dashboard({ catalogue }: { catalogue: PlanCatalogue }) {
     [catalogue.structureRequirements, planningCatalogue, state.attempts],
   );
 
+  const composition = useMemo(() => {
+    const inYear = <T extends { catalogueYear: number }>(items: T[]) =>
+      items.filter((item) => item.catalogueYear === catalogue.academicYear);
+    return degreeComposition({
+      degreeUnits: unitTarget,
+      profile: state.profile,
+      programme:
+        inYear(choices.degrees).find(
+          (item) => item.code === state.profile.degreeCode,
+        ) ?? null,
+      structureOptions: [...inYear(choices.majors), ...inYear(choices.minors)],
+      requirements: catalogue.structureRequirements,
+      attempts: state.attempts,
+      catalogue: planningCatalogue,
+    });
+  }, [
+    catalogue.academicYear,
+    catalogue.structureRequirements,
+    choices,
+    planningCatalogue,
+    state.attempts,
+    state.profile,
+    unitTarget,
+  ]);
+
   const academicInputs = useMemo(
     () => ({ ...planningCatalogue, attempts: state.attempts }),
     [planningCatalogue, state.attempts],
@@ -313,6 +346,8 @@ export function Dashboard({ catalogue }: { catalogue: PlanCatalogue }) {
 
         <div className="grid items-stretch gap-4 lg:grid-cols-[minmax(0,1fr)_19rem]">
           <DegreeComposition
+            sections={composition}
+            academicYear={catalogue.academicYear}
             courseLinks={Object.fromEntries(
               catalogue.courses.map((course) => [
                 course.code,

apps/web/app/dashboard/page.tsx

@@ -1,5 +1,6 @@
 import { PlanningCatalogueError } from "@/ui/plan/planning-catalogue-error";
 import { loadCurrentUserPlanCatalogue } from "@/lib/coursemap/plan-catalogue";
+import { loadOnboardingCatalogue } from "@/lib/coursemap/onboarding-catalogue";
 import { Dashboard } from "./dashboard";
 
 export const dynamic = "force-dynamic";
@@ -9,13 +10,17 @@ export const dynamic = "force-dynamic";
  * which offers onboarding, rather than being redirected into it.
  */
 export default async function DashboardPage() {
-  let catalogue;
+  let data;
   try {
-    catalogue = await loadCurrentUserPlanCatalogue();
+    const [catalogue, choices] = await Promise.all([
+      loadCurrentUserPlanCatalogue(),
+      loadOnboardingCatalogue(),
+    ]);
+    data = { catalogue, choices };
   } catch {
     return (
       <PlanningCatalogueError pageTitle="Dashboard" retryHref="/dashboard" />
     );
   }
-  return <Dashboard catalogue={catalogue} />;
+  return <Dashboard {...data} />;
 }

apps/web/app/requirements/page.tsx

@@ -1,5 +1,6 @@
 import { PlanningCatalogueError } from "@/ui/plan/planning-catalogue-error";
 import {
+  isPlanStructureKind,
   loadCurrentUserPlanCatalogue,
   planCourseFromDetails,
 } from "@/lib/coursemap/plan-catalogue";
@@ -10,7 +11,12 @@ import { Requirements } from "./requirements";
 
 export const dynamic = "force-dynamic";
 
-export default async function RequirementsPage() {
+export default async function RequirementsPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ tab?: string }>;
+}) {
+  const { tab } = await searchParams;
   let data;
   try {
     const [catalogue, choices] = await Promise.all([
@@ -50,5 +56,10 @@ export default async function RequirementsPage() {
     );
   }
 
-  return <Requirements {...data} />;
+  return (
+    <Requirements
+      {...data}
+      initialTab={tab && isPlanStructureKind(tab) ? tab : "programme"}
+    />
+  );
 }

apps/web/app/requirements/requirements.tsx

@@ -38,13 +38,16 @@ const sections = [
 export function Requirements({
   catalogue,
   choices,
+  initialTab = "programme",
 }: {
   catalogue: PlanCatalogue;
   choices: OnboardingCatalogue;
+  /** The section to open first, such as the major when adding one. */
+  initialTab?: PlanStructureKind;
 }) {
   const { state, updateProfile, notify } = useCoursemap();
   const router = useRouter();
-  const [tab, setTab] = useState<PlanStructureKind>("programme");
+  const [tab, setTab] = useState<PlanStructureKind>(initialTab);
   const [choosing, setChoosing] = useState(false);
   const [pending, setPending] = useState(false);
   const [addingCourse, setAddingCourse] = useState<Course | null>(null);

apps/web/hooks/use-element-size.ts

@@ -0,0 +1,29 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+
+/**
+ * The rendered size of an element, following resizes. Until the first
+ * measurement it reports `fallback`, so server and first client render agree.
+ */
+export function useElementSize<T extends HTMLElement>(fallback: {
+  width: number;
+  height: number;
+}) {
+  const ref = useRef<T | null>(null);
+  const [size, setSize] = useState(fallback);
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    const observer = new ResizeObserver(([entry]) => {
+      const { width, height } = entry.contentRect;
+      setSize((current) =>
+        current.width === width && current.height === height
+          ? current
+          : { width, height },
+      );
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  return [ref, size] as const;
+}