feat(platform): Sync on new UI design

autogpt_platform/frontend/src/app/auth/callback/route.ts

@@ -6,7 +6,7 @@ export async function GET(request: Request) {
   const { searchParams, origin } = new URL(request.url);
   const code = searchParams.get("code");
   // if "next" is in param, use it as the redirect URL
-  const next = searchParams.get("next") ?? "/profile";
+  const next = searchParams.get("next") ?? "/";
 
   if (code) {
     const supabase = createServerClient();

autogpt_platform/frontend/src/app/build/page.tsx

@@ -8,7 +8,7 @@ export default function Home() {
 
   return (
       <FlowEditor
-        className="flow-container w-full min-h-[86vh] border border-gray-300 dark:border-gray-700 rounded-lg"
+        className="flow-container"
         flowID={query.get("flowID") ?? query.get("templateID") ?? undefined}
         template={!!query.get("templateID")}
       />

autogpt_platform/frontend/src/app/layout.tsx

@@ -34,7 +34,7 @@ export default function RootLayout({
         >
           <div className="flex min-h-screen flex-col">
             <NavBar />
-            <main className="flex-1 overflow-hidden p-4">{children}</main>
+            <main className="flex-1 p-4">{children}</main>
             <TallyPopupSimple />
           </div>
           <Toaster />

autogpt_platform/frontend/src/app/login/actions.ts

@@ -30,7 +30,7 @@ export async function login(values: z.infer<typeof loginFormSchema>) {
     }
 
     revalidatePath("/", "layout");
-    redirect("/profile");
+    redirect("/");
   });
 }
 
@@ -61,7 +61,7 @@ export async function signup(values: z.infer<typeof loginFormSchema>) {
       }
 
       revalidatePath("/", "layout");
-      redirect("/profile");
+      redirect("/");
     },
   );
 }

autogpt_platform/frontend/src/app/login/page.tsx

@@ -48,8 +48,8 @@ export default function LoginPage() {
   });
 
   if (user) {
-    console.log("User exists, redirecting to profile");
-    router.push("/profile");
+    console.log("User exists, redirecting to home");
+    router.push("/");
   }
 
   if (isUserLoading || isSupabaseLoading || user) {

autogpt_platform/frontend/src/components/CustomNode.tsx

@@ -585,7 +585,7 @@ export function CustomNode({ data, id, width, height }: NodeProps<CustomNode>) {
       {blockCost && (
         <div className="p-3 font-semibold">
           <span className="ml-auto flex items-center">
-            <IconCoin /> {blockCost.cost_amount} per {blockCost.cost_type}
+            <IconCoin /> {blockCost.cost_amount} credits/{blockCost.cost_type}
           </span>
         </div>
       )}

autogpt_platform/frontend/src/components/Flow.tsx

@@ -579,21 +579,27 @@ const FlowEditor: React.FC<{
         >
           <Controls />
           <Background />
-          <ControlPanel className="absolute z-10" controls={editorControls}>
-            <BlocksControl
-              pinBlocksPopover={pinBlocksPopover} // Pass the state to BlocksControl
-              blocks={availableNodes}
-              addBlock={addNode}
-            />
-            <SaveControl
-              agentMeta={savedAgent}
-              onSave={(isTemplate) => requestSave(isTemplate ?? false)}
-              agentDescription={agentDescription}
-              onDescriptionChange={setAgentDescription}
-              agentName={agentName}
-              onNameChange={setAgentName}
-            />
-          </ControlPanel>
+          <ControlPanel
+            className="absolute z-10"
+            controls={editorControls}
+            topChildren={
+              <BlocksControl
+                pinBlocksPopover={pinBlocksPopover} // Pass the state to BlocksControl
+                blocks={availableNodes}
+                addBlock={addNode}
+              />
+            }
+            botChildren={
+              <SaveControl
+                agentMeta={savedAgent}
+                onSave={(isTemplate) => requestSave(isTemplate ?? false)}
+                agentDescription={agentDescription}
+                onDescriptionChange={setAgentDescription}
+                agentName={agentName}
+                onNameChange={setAgentName}
+              />
+            }
+          ></ControlPanel>
           <PrimaryActionBar
             onClickAgentOutputs={() => runnerUIRef.current?.openRunnerOutput()}
             onClickRunAgent={() => {

autogpt_platform/frontend/src/components/NavBar.tsx

@@ -27,7 +27,7 @@ export async function NavBar() {
   const { user } = await getServerUser();
 
   return (
-    <header className="sticky top-0 z-50 flex h-16 items-center gap-4 border-b bg-background px-4 md:rounded-b-3xl md:px-6 md:shadow-md">
+    <header className="sticky top-0 z-50 mx-4 flex h-16 items-center gap-4 border-b bg-background p-3 md:rounded-b-2xl md:px-6 md:shadow">
       <div className="flex flex-1 items-center gap-4">
         <Sheet>
           <SheetTrigger asChild>

autogpt_platform/frontend/src/components/PrimaryActionButton.tsx

@@ -42,8 +42,10 @@ const PrimaryActionBar: React.FC<PrimaryActionBarProps> = ({
               size="primary"
               variant="outline"
             >
-              <LogOut className="h-5 w-5" />
-              <span className="text-lg font-medium">Agent Outputs </span>
+              <LogOut className="hidden h-5 w-5 md:flex" />
+              <span className="text-sm font-medium md:text-lg">
+                Agent Outputs{" "}
+              </span>
             </Button>
           </TooltipTrigger>
           <TooltipContent>
@@ -62,7 +64,9 @@ const PrimaryActionBar: React.FC<PrimaryActionBarProps> = ({
               }}
             >
               {runButtonIcon}
-              <span className="text-lg font-medium">{runButtonLabel}</span>
+              <span className="text-sm font-medium md:text-lg">
+                {runButtonLabel}
+              </span>
             </Button>
           </TooltipTrigger>
           <TooltipContent>

autogpt_platform/frontend/src/components/TallyPopup.tsx

@@ -47,7 +47,7 @@ const TallyPopupSimple = () => {
   };
 
   return (
-    <div className="fixed bottom-6 right-6 z-50 flex items-center gap-4 p-3 transition-all duration-300 ease-in-out">
+    <div className="fixed bottom-6 right-6 z-50 hidden items-center gap-4 p-3 transition-all duration-300 ease-in-out md:flex">
       <Button variant="default" onClick={resetTutorial} className="mb-0">
         Tutorial
       </Button>

autogpt_platform/frontend/src/components/edit/control/ControlPanel.tsx

@@ -25,7 +25,8 @@ export type Control = {
 
 interface ControlPanelProps {
   controls: Control[];
-  children?: React.ReactNode;
+  topChildren?: React.ReactNode;
+  botChildren?: React.ReactNode;
   className?: string;
 }
 
@@ -39,14 +40,15 @@ interface ControlPanelProps {
  */
 export const ControlPanel = ({
   controls,
-  children,
+  topChildren,
+  botChildren,
   className,
 }: ControlPanelProps) => {
   return (
-    <Card className={cn("w-14", className)}>
+    <Card className={cn("m-4 mt-24 w-14", className)}>
       <CardContent className="p-0">
-        <div className="rounded-radius flex flex-col items-center gap-8 px-2 sm:py-5">
-          {children}
+        <div className="flex flex-col items-center gap-3 rounded-xl border border-[rgba(225,225,225,1)] py-3">
+          {topChildren}
           <Separator />
           {controls.map((control, index) => (
             <Tooltip key={index} delayDuration={500}>
@@ -67,6 +69,8 @@ export const ControlPanel = ({
               <TooltipContent side="right">{control.label}</TooltipContent>
             </Tooltip>
           ))}
+          <Separator />
+          {botChildren}
         </div>
       </CardContent>
     </Card>

autogpt_platform/frontend/src/components/flow.css

@@ -111,6 +111,9 @@ textarea::placeholder {
 }
 
 .flow-container {
-  width: 100%;
-  height: 600px; /* Adjust this height as needed */
+  width: 100vw;
+  height: 100vh;
+  /* 4rem nav, 1rem padding */
+  margin-top: -5rem;
+  margin-left: -1rem;
 }

autogpt_platform/frontend/src/components/ui/button.tsx

@@ -25,7 +25,7 @@ const buttonVariants = cva(
         default: "h-9 px-4 py-2",
         sm: "h-8 rounded-md px-3 text-xs",
         lg: "h-10 rounded-md px-8",
-        primary: "h-14 w-44 rounded-2xl",
+        primary: "md:h-14 md:w-44 rounded-2xl h-10 w-28",
         icon: "h-9 w-9",
       },
     },