Canvas: Update layout
Combine separate Overview and Canvas tabs into one Build tab
Add Overview <-> Canvas switcher to Actions
Change-Id: I40f7742be587b475ae6e88af2bcf9cae34f93168
diff --git a/apps/canvas/front/src/Build.tsx b/apps/canvas/front/src/Build.tsx
new file mode 100644
index 0000000..a3960ba
--- /dev/null
+++ b/apps/canvas/front/src/Build.tsx
@@ -0,0 +1,66 @@
+import { Canvas } from "./Canvas";
+import { Details } from "./Details";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./components/ui/resizable";
+import { Tools } from "./Tools";
+import { Agent } from "./Agent";
+import { useBuildMode, useLeadAgent } from "./lib/state";
+import { Overview } from "./Overview";
+import { useMemo } from "react";
+
+export function Build() {
+ const leadAgent = useLeadAgent();
+ const buildMode = useBuildMode();
+ const mainWidth = useMemo(() => {
+ let ret = 100;
+ if (leadAgent) {
+ ret -= 25;
+ }
+ if (buildMode === "canvas") {
+ ret -= 20;
+ }
+ return ret;
+ }, [leadAgent, buildMode]);
+ return (
+ <ResizablePanelGroup direction="horizontal" className="w-full h-full">
+ {leadAgent && (
+ <>
+ <ResizablePanel defaultSize={25}>
+ <Agent agent={leadAgent} />
+ </ResizablePanel>
+ <ResizableHandle withHandle />
+ </>
+ )}
+ <ResizablePanel defaultSize={mainWidth}>
+ <ResizablePanelGroup direction="vertical">
+ <ResizablePanel defaultSize={80}>
+ <OverviewOrCanvas />
+ </ResizablePanel>
+ <ResizableHandle withHandle />
+ <ResizablePanel defaultSize={20}>
+ <Tools />
+ </ResizablePanel>
+ </ResizablePanelGroup>
+ </ResizablePanel>
+ {buildMode === "canvas" && (
+ <>
+ <ResizableHandle withHandle />
+ <ResizablePanel defaultSize={20} className="!overflow-y-auto !overflow-x-hidden">
+ <Details />
+ </ResizablePanel>
+ </>
+ )}
+ </ResizablePanelGroup>
+ );
+}
+
+function OverviewOrCanvas() {
+ const buildMode = useBuildMode();
+ switch (buildMode) {
+ case "overview":
+ return <Overview />;
+ case "canvas":
+ return <Canvas />;
+ default:
+ throw new Error(`Unknown build mode: ${buildMode}`);
+ }
+}