Pre-conf work 2025

src/app/(dashboard)/experiments/[id]/designer/DesignerPageClient.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { DesignerRoot } from "~/components/experiments/designer/DesignerRoot";
+import { useBreadcrumbsEffect } from "~/components/ui/breadcrumb-provider";
+import type { ExperimentStep } from "~/lib/experiment-designer/types";
+
+interface DesignerPageClientProps {
+  experiment: {
+    id: string;
+    name: string;
+    description: string | null;
+    study: {
+      id: string;
+      name: string;
+    };
+  };
+  initialDesign?: {
+    id: string;
+    name: string;
+    description: string;
+    steps: ExperimentStep[];
+    version: number;
+    lastSaved: Date;
+  };
+}
+
+export function DesignerPageClient({
+  experiment,
+  initialDesign,
+}: DesignerPageClientProps) {
+  // Set breadcrumbs
+  useBreadcrumbsEffect([
+    {
+      label: "Dashboard",
+      href: "/",
+    },
+    {
+      label: "Studies",
+      href: "/studies",
+    },
+    {
+      label: experiment.study.name,
+      href: `/studies/${experiment.study.id}`,
+    },
+    {
+      label: "Experiments",
+      href: `/studies/${experiment.study.id}/experiments`,
+    },
+    {
+      label: experiment.name,
+      href: `/experiments/${experiment.id}`,
+    },
+    {
+      label: "Designer",
+    },
+  ]);
+
+  return (
+    <DesignerRoot experimentId={experiment.id} initialDesign={initialDesign} />
+  );
+}

src/app/(dashboard)/experiments/[id]/designer/page.tsx

@@ -1,5 +1,4 @@
 import { notFound } from "next/navigation";
-import { DesignerRoot } from "~/components/experiments/designer/DesignerRoot";
 import type {
   ExperimentStep,
   ExperimentAction,
@@ -8,6 +7,7 @@ import type {
   ExecutionDescriptor,
 } from "~/lib/experiment-designer/types";
 import { api } from "~/trpc/server";
+import { DesignerPageClient } from "./DesignerPageClient";
 
 interface ExperimentDesignerPageProps {
   params: Promise<{
@@ -239,8 +239,8 @@ export default async function ExperimentDesignerPage({
     }
 
     return (
-      <DesignerRoot
-        experimentId={experiment.id}
+      <DesignerPageClient
+        experiment={experiment}
         initialDesign={initialDesign}
       />
     );