apps/canvas/front/src/Tools.tsx

import { Badge } from "./components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs";
import { Gateways } from "./Gateways";
import { useEnv, useMessages } from "./lib/state";
import { Messages } from "./Messages";

export function Tools() {
	const messages = useMessages();
	const env = useEnv();
	return (
		<Tabs defaultValue="messages" className="h-full flex-1 flex flex-col bg-muted">
			<TabsList className="!justify-start !rounded-none">
				<TabsTrigger value="messages" className="space-x-2">
					<div>Messages</div>
					<Badge>{messages.length}</Badge>
				</TabsTrigger>
				<TabsTrigger value="gateways" className="space-x-2">
					<div>Gateways</div>
					<Badge>{env.access.length}</Badge>
				</TabsTrigger>
				<TabsTrigger value="deployKeys">Deploy keys</TabsTrigger>
			</TabsList>
			<div className="!overflow-y-auto p-1">
				<TabsContent value="messages">
					<Messages />
				</TabsContent>
				<TabsContent value="gateways">
					<Gateways />
				</TabsContent>
				<TabsContent value="deployKeys">{env.deployKey && <>{env.deployKey}</>}</TabsContent>
			</div>
		</Tabs>
	);
}