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/Overview.tsx b/apps/canvas/front/src/Overview.tsx
index 1c86aae..58c4d79 100644
--- a/apps/canvas/front/src/Overview.tsx
+++ b/apps/canvas/front/src/Overview.tsx
@@ -1,10 +1,9 @@
import React, { useMemo } from "react";
-import { useStateStore, useLeadAgent } from "@/lib/state";
+import { useStateStore } from "@/lib/state";
import { NodeDetails } from "./components/node-details";
import { Actions } from "./components/actions";
-import { Canvas } from "./components/canvas";
+import { Canvas } from "./Canvas";
import { Separator } from "./components/ui/separator";
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./components/ui/resizable";
import { AppNode, NodeType } from "config";
const sections: { title: string; nodes: NodeType[] }[] = [
@@ -23,30 +22,6 @@
];
export function Overview(): React.ReactNode {
- const leadAgent = useLeadAgent();
- if (leadAgent) {
- return (
- <ResizablePanelGroup direction="horizontal" className="w-full h-full">
- <ResizablePanel defaultSize={25}>
- <iframe
- key={leadAgent.name}
- src={`${leadAgent.address}?m`}
- title={leadAgent.agentName}
- className="w-full h-full"
- />
- </ResizablePanel>
- <ResizableHandle withHandle />
- <ResizablePanel defaultSize={75} className="!overflow-y-auto !overflow-x-hidden">
- <OverviewImpl />
- </ResizablePanel>
- </ResizablePanelGroup>
- );
- } else {
- return <OverviewImpl />;
- }
-}
-
-function OverviewImpl(): React.ReactNode {
const store = useStateStore();
const nodes = useMemo(() => {
return store.nodes.filter((n) => n.type !== "network" && n.type !== "github" && n.type !== undefined);
@@ -63,7 +38,7 @@
return (
<div className="h-full w-full overflow-auto bg-white p-2">
<div className="w-full flex flex-row justify-end">
- <Actions isOverview={true} />
+ <Actions />
<Canvas className="hidden" />
</div>
<div className="flex flex-col gap-4 pt-2">