From d8c22398592d9f2844bda3c475b0150e81c999b2 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Sat, 18 Oct 2025 03:25:57 +0000
Subject: [PATCH] Teams page: import Layout and add optimistic create

cgen-20ecdc943e6a484b953ee7a59adf8bd7
---
 client/pages/Teams.tsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/client/pages/Teams.tsx b/client/pages/Teams.tsx
index 1fe1298e..dee39dd1 100644
--- a/client/pages/Teams.tsx
+++ b/client/pages/Teams.tsx
@@ -1,4 +1,5 @@
 import Layout from "@/components/Layout";
+import Layout from "@/components/Layout";
 import { useAuth } from "@/contexts/AuthContext";
 import { useEffect, useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
@@ -10,6 +11,7 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { aethexCollabService } from "@/lib/aethex-collab-service";
 import LoadingScreen from "@/components/LoadingScreen";
+import { aethexToast } from "@/lib/aethex-toast";
 
 export default function Teams() {
   const { user, profile, loading } = useAuth();
@@ -44,11 +46,19 @@ export default function Teams() {
     if (!user?.id) return;
     if (!canCreate) return;
     setCreating(true);
+    const tempId = `temp-${Date.now()}`;
+    const optimistic = { team_id: tempId, teams: { id: tempId, name: name.trim(), description: description.trim() || null, visibility: "private" } } as any;
+    setTeams((prev) => [optimistic, ...prev]);
+    setName("");
+    setDescription("");
+    let created: any | null = null;
     try {
-      const team = await aethexCollabService.createTeam(user.id, name.trim(), description.trim() || null, "private");
-      setName("");
-      setDescription("");
-      setTeams((prev) => [{ team_id: team.id, teams: team }, ...prev]);
+      created = await aethexCollabService.createTeam(user.id, optimistic.teams.name, optimistic.teams.description, "private");
+      setTeams((prev) => prev.map((t: any) => (t.team_id === tempId ? { team_id: created.id, teams: created } : t)));
+      aethexToast.success({ title: "Team created" });
+    } catch (e: any) {
+      setTeams((prev) => prev.filter((t: any) => t.team_id !== tempId));
+      aethexToast.error({ title: "Failed to create team", description: e?.message || "Try again later." });
     } finally {
       setCreating(false);
     }