chore: wip

autogpt_platform/frontend/src/app/(platform)/layout.tsx

@@ -1,67 +1,10 @@
+import { Navbar } from "@/components/layout/Navbar/Navbar";
 import { ReactNode } from "react";
-import { Navbar } from "@/components/agptui/Navbar";
-import { IconType } from "@/components/ui/icons";
 
 export default function PlatformLayout({ children }: { children: ReactNode }) {
   return (
     <>
-      <Navbar
-        links={[
-          {
-            name: "Marketplace",
-            href: "/marketplace",
-          },
-          {
-            name: "Library",
-            href: "/library",
-          },
-          {
-            name: "Build",
-            href: "/build",
-          },
-        ]}
-        menuItemGroups={[
-          {
-            items: [
-              {
-                icon: IconType.Edit,
-                text: "Edit profile",
-                href: "/profile",
-              },
-            ],
-          },
-          {
-            items: [
-              {
-                icon: IconType.LayoutDashboard,
-                text: "Creator Dashboard",
-                href: "/profile/dashboard",
-              },
-              {
-                icon: IconType.UploadCloud,
-                text: "Publish an agent",
-              },
-            ],
-          },
-          {
-            items: [
-              {
-                icon: IconType.Settings,
-                text: "Settings",
-                href: "/profile/settings",
-              },
-            ],
-          },
-          {
-            items: [
-              {
-                icon: IconType.LogOut,
-                text: "Log out",
-              },
-            ],
-          },
-        ]}
-      />
+      <Navbar />
       <main>{children}</main>
     </>
   );

autogpt_platform/frontend/src/app/(platform)/signup/page.tsx

@@ -135,7 +135,7 @@ export default function SignupPage() {
                       />
                     </FormControl>
                     <div>
-                      <FormLabel className="flex items-center gap-1">
+                      <FormLabel className="flex flex-wrap items-center gap-1">
                         <Text
                           variant="body-medium"
                           className="inline-block text-slate-950"

autogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsx

@@ -1,36 +1,16 @@
 import { IconAutoGPTLogo, IconType } from "@/components/ui/icons";
 import { ProfileDetails } from "@/lib/autogpt-server-api/types";
 import Link from "next/link";
-import { MobileNavBar } from "./MobileNavBar";
-import { NavbarLink } from "./NavbarLink";
-import { ProfilePopoutMenu } from "./ProfilePopoutMenu";
-import Wallet from "./Wallet";
+import { MobileNavBar } from "../../agptui/MobileNavBar";
+import Wallet from "../../agptui/Wallet";
+import { NavbarLink } from "./components/NavbarLink";
+import { ProfilePopoutMenu } from "./components/ProfilePopoutMenu";
 
 import BackendAPI from "@/lib/autogpt-server-api";
 import { getServerUser } from "@/lib/supabase/server/getServerUser";
 import { SignInIcon } from "@phosphor-icons/react/dist/ssr";
-import { Button } from "../atoms/Button/Button";
-
-// Disable theme toggle for now
-// import { ThemeToggle } from "./ThemeToggle";
-
-interface NavLink {
-  name: string;
-  href: string;
-}
-
-interface NavbarProps {
-  links: NavLink[];
-  menuItemGroups: {
-    groupName?: string;
-    items: {
-      icon: IconType;
-      text: string;
-      href?: string;
-      onClick?: () => void;
-    }[];
-  }[];
-}
+import { Button } from "../../atoms/Button/Button";
+import { accountMeunItems, loggedInLinks } from "./helpers";
 
 async function getProfileData() {
   const api = new BackendAPI();
@@ -39,32 +19,38 @@ async function getProfileData() {
   return profile;
 }
 
-export const Navbar = async ({ links, menuItemGroups }: NavbarProps) => {
+export async function Navbar() {
   const { user } = await getServerUser();
   const isLoggedIn = user !== null;
+
   let profile: ProfileDetails | null = null;
+
   if (isLoggedIn) {
     profile = await getProfileData();
   }
 
   return (
     <>
-      <nav className="sticky top-0 z-40 mx-[16px] hidden h-16 items-center justify-between rounded-bl-2xl rounded-br-2xl border border-white/50 bg-white/5 py-3 pl-6 pr-3 backdrop-blur-[26px] dark:border-gray-700 dark:bg-gray-900 md:inline-flex">
-        <div className="flex items-center gap-11">
-          <div className="relative h-10 w-[88.87px]">
-            <IconAutoGPTLogo className="h-full w-full" />
-          </div>
-          {links.map((link) => (
+      <nav className="sticky top-0 z-40 mx-[16px] hidden h-16 items-center rounded-bl-2xl rounded-br-2xl border border-white/50 bg-white/5 py-3 pl-6 pr-3 backdrop-blur-[26px] dark:border-gray-700 dark:bg-gray-900 md:inline-flex">
+        {/* Left section */}
+        <div className="flex flex-1 items-center gap-6">
+          {loggedInLinks.map((link) => (
             <NavbarLink key={link.name} name={link.name} href={link.href} />
           ))}
         </div>
-        {/* Profile section */}
-        <div className="flex items-center gap-4">
+
+        {/* Centered logo */}
+        <div className="absolute left-1/2 top-1/2 h-10 w-[88.87px] -translate-x-1/2 -translate-y-1/2">
+          <IconAutoGPTLogo className="h-full w-full" />
+        </div>
+
+        {/* Right section */}
+        <div className="flex flex-1 items-center justify-end gap-4">
           {isLoggedIn ? (
             <div className="flex items-center gap-4">
               {profile && <Wallet />}
               <ProfilePopoutMenu
-                menuItemGroups={menuItemGroups}
+                menuItemGroups={accountMeunItems}
                 userName={profile?.username}
                 userEmail={profile?.name}
                 avatarSrc={profile?.avatar_url}
@@ -133,4 +119,4 @@ export const Navbar = async ({ links, menuItemGroups }: NavbarProps) => {
       </>
     </>
   );
-};
+}

autogpt_platform/frontend/src/components/layout/Navbar/components/NavbarLink.tsx

@@ -1,12 +1,13 @@
 "use client";
-import Link from "next/link";
+import { IconLaptop } from "@/components/ui/icons";
 import {
-  IconShoppingCart,
-  IconBoxes,
-  IconLibrary,
-  IconLaptop,
-} from "@/components/ui/icons";
+  CubeIcon,
+  HouseIcon,
+  StorefrontIcon,
+} from "@phosphor-icons/react/dist/ssr";
+import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { Text } from "../../../atoms/Text/Text";
 
 interface NavbarLinkProps {
   name: string;
@@ -25,19 +26,19 @@ export const NavbarLink = ({ name, href }: NavbarLinkProps) => {
       className="font-poppins text-[20px] leading-[28px]"
     >
       <div
-        className={`h-[48px] px-5 py-4 ${
+        className={`p-2 ${
           activeLink === href
             ? "rounded-2xl bg-neutral-800 dark:bg-neutral-200"
             : ""
-        } flex items-center justify-start gap-3`}
+        } flex items-center justify-start gap-1`}
       >
         {href === "/marketplace" && (
-          <IconShoppingCart
+          <StorefrontIcon
             className={`h-6 w-6 ${activeLink === href ? "text-white dark:text-black" : ""}`}
           />
         )}
         {href === "/build" && (
-          <IconBoxes
+          <CubeIcon
             className={`h-6 w-6 ${activeLink === href ? "text-white dark:text-black" : ""}`}
           />
         )}
@@ -47,19 +48,20 @@ export const NavbarLink = ({ name, href }: NavbarLinkProps) => {
           />
         )}
         {href === "/library" && (
-          <IconLibrary
+          <HouseIcon
             className={`h-6 w-6 ${activeLink === href ? "text-white dark:text-black" : ""}`}
           />
         )}
-        <div
-          className={`hidden font-poppins text-[20px] font-medium leading-[28px] lg:block ${
+        <Text
+          variant="body-medium"
+          className={`hidden lg:block ${
             activeLink === href
               ? "text-neutral-50 dark:text-neutral-900"
               : "text-neutral-900 dark:text-neutral-50"
           }`}
         >
           {name}
-        </div>
+        </Text>
       </div>
     </Link>
   );

autogpt_platform/frontend/src/components/layout/Navbar/components/ProfilePopoutMenu.tsx

@@ -1,40 +1,32 @@
-import * as React from "react";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   Popover,
-  PopoverTrigger,
   PopoverContent,
+  PopoverTrigger,
 } from "@/components/ui/popover";
+import Link from "next/link";
+import * as React from "react";
+import { ProfilePopoutMenuLogoutButton } from "../../../agptui/ProfilePopoutMenuLogoutButton";
+import { PublishAgentPopout } from "../../../agptui/composite/PublishAgentPopout";
 import {
-  IconType,
+  IconBuilder,
   IconEdit,
   IconLayoutDashboard,
-  IconUploadCloud,
-  IconSettings,
-  IconLogOut,
-  IconRefresh,
-  IconMarketplace,
   IconLibrary,
-  IconBuilder,
-} from "../ui/icons";
-import Link from "next/link";
-import { ProfilePopoutMenuLogoutButton } from "./ProfilePopoutMenuLogoutButton";
-import { PublishAgentPopout } from "./composite/PublishAgentPopout";
+  IconLogOut,
+  IconMarketplace,
+  IconRefresh,
+  IconSettings,
+  IconType,
+  IconUploadCloud,
+} from "../../../ui/icons";
 
 interface ProfilePopoutMenuProps {
   userName?: string;
   userEmail?: string;
   avatarSrc?: string;
   hideNavBarUsername?: boolean;
-  menuItemGroups: {
-    groupName?: string;
-    items: {
-      icon: IconType;
-      text: string;
-      href?: string;
-      onClick?: () => void;
-    }[];
-  }[];
+  menuItemGroups: MenuItemGroup[];
 }
 
 export function ProfilePopoutMenu({

autogpt_platform/frontend/src/components/layout/Navbar/helpers.ts

@@ -0,0 +1,86 @@
+import { Icon } from "@phosphor-icons/react";
+import {
+  CloudArrowUp,
+  GearIcon,
+  SignOut,
+  SquaresFourIcon,
+  UserSquareIcon,
+} from "@phosphor-icons/react/dist/ssr";
+
+type Link = {
+  name: string;
+  href: string;
+};
+
+export const loggedInLinks: Link[] = [
+  {
+    name: "Home",
+    href: "/library",
+  },
+  {
+    name: "Marketplace",
+    href: "/marketplace",
+  },
+  {
+    name: "Build",
+    href: "/build",
+  },
+];
+
+export const loggedOutLinks: Link[] = [
+  {
+    name: "Marketplace",
+    href: "/marketplace",
+  },
+];
+
+type MenuItemGroup = {
+  items: {
+    icon: Icon;
+    text: string;
+    href?: string;
+    onClick?: () => void;
+  }[];
+};
+
+export const accountMeunItems: MenuItemGroup[] = [
+  {
+    items: [
+      {
+        icon: UserSquareIcon,
+        text: "Edit profile",
+        href: "/profile",
+      },
+    ],
+  },
+  {
+    items: [
+      {
+        icon: SquaresFourIcon,
+        text: "Creator Dashboard",
+        href: "/profile/dashboard",
+      },
+      {
+        icon: CloudArrowUp,
+        text: "Publish an agent",
+      },
+    ],
+  },
+  {
+    items: [
+      {
+        icon: GearIcon,
+        text: "Settings",
+        href: "/profile/settings",
+      },
+    ],
+  },
+  {
+    items: [
+      {
+        icon: SignOut,
+        text: "Log out",
+      },
+    ],
+  },
+];