Add Engine pages to teams (chakra)

apps/dashboard/src/@/components/ChakraProviderSetup.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { ChakraProvider, useColorMode } from "@chakra-ui/react";
+import { useTheme } from "next-themes";
+import { useEffect } from "react";
+import chakraTheme from "../../theme";
+
+export function ChakraProviderSetup(props: {
+  children: React.ReactNode;
+}) {
+  return (
+    <ChakraProvider theme={chakraTheme}>
+      {props.children}
+      <SyncTheme />
+    </ChakraProvider>
+  );
+}
+
+function SyncTheme() {
+  const { theme, setTheme } = useTheme();
+  const { setColorMode } = useColorMode();
+
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    setColorMode(theme === "light" ? "light" : "dark");
+  }, [setColorMode, theme]);
+
+  // handle dashboard with now old "system" set
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (theme === "system") {
+      setTheme("dark");
+      setColorMode("dark");
+    }
+  }, [theme, setTheme, setColorMode]);
+
+  return null;
+}

apps/dashboard/src/@/components/blocks/MobileSidebar.tsx

@@ -4,9 +4,10 @@ import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 import { useState } from "react";
 import { NavLink } from "../ui/NavLink";
+import type { SidebarLink } from "./Sidebar";
 
 export function MobileSidebar(props: {
-  links?: { href: string; label: React.ReactNode }[];
+  links?: SidebarLink[];
   footer?: React.ReactNode;
   trigger: React.ReactNode;
 }) {
@@ -31,6 +32,8 @@ export function MobileSidebar(props: {
                   href={link.href}
                   className="!text-left justify-start flex gap-2 h-auto py-3"
                   activeClassName="bg-accent"
+                  exactMatch={link.exactMatch}
+                  tracking={link.tracking}
                 >
                   {link.label}
                 </NavLink>

apps/dashboard/src/@/components/blocks/Sidebar.tsx

@@ -2,9 +2,20 @@ import type React from "react";
 import { cn } from "../../lib/utils";
 import { NavLink } from "../ui/NavLink";
 
+export type SidebarLink = {
+  href: string;
+  label: React.ReactNode;
+  exactMatch?: boolean;
+  tracking?: {
+    category: string;
+    action: string;
+    label: string;
+  };
+};
+
 export type SidebarContentProps = {
   header?: React.ReactNode;
-  links: { href: string; label: React.ReactNode; exactMatch?: boolean }[];
+  links: SidebarLink[];
   className?: string;
 };
 

apps/dashboard/src/@/components/ui/NavLink.tsx

@@ -3,15 +3,22 @@
 import { cn } from "@/lib/utils";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useTrack } from "../../../hooks/analytics/useTrack";
 
 export type NavButtonProps = {
   className?: string;
   activeClassName?: string;
   href: string;
   exactMatch?: boolean;
+  tracking?: {
+    category: string;
+    action: string;
+    label: string;
+  };
 };
 
 export function NavLink(props: React.PropsWithChildren<NavButtonProps>) {
+  const track = useTrack();
   const pathname = usePathname();
   const isActive = pathname
     ? props.exactMatch
@@ -23,6 +30,16 @@ export function NavLink(props: React.PropsWithChildren<NavButtonProps>) {
       href={props.href}
       className={cn(props.className, isActive && props.activeClassName)}
       target={props.href.startsWith("http") ? "_blank" : undefined}
+      onClick={() => {
+        if (props.tracking) {
+          track({
+            category: props.tracking.category,
+            action: props.tracking.action,
+            label: props.tracking.label,
+            url: props.href,
+          });
+        }
+      }}
     >
       {props.children}
     </Link>

apps/dashboard/src/app/components/Header/TeamHeader/TeamHeaderUI.tsx

@@ -46,7 +46,7 @@ export function TeamHeaderDesktopUI(props: TeamHeaderCompProps) {
             className="font-normal text-sm flex flex-row gap-2 items-center"
           >
             {/* TODO - replace with team image */}
-            <div className="bg-muted border size-6 rounded-full" />
+            <div className="bg-muted border border-border size-6 rounded-full" />
 
             <span> {currentTeam.name} </span>
             <Badge
@@ -146,7 +146,7 @@ export function TeamHeaderMobileUI(props: TeamHeaderCompProps) {
             )}
           >
             {/* TODO - replace with team image */}
-            <div className="bg-muted border size-7 rounded-full" />
+            <div className="bg-muted border border-border size-7 rounded-full" />
 
             {!props.currentProject && (
               <span className="font-semibold">{currentTeam.name}</span>

apps/dashboard/src/app/team/[team_slug]/(team)/TeamOverviewPage.tsx

@@ -71,7 +71,7 @@ export function TeamOverviewPage(props: {
 
       {/* Projects */}
       {projectsToShow.length === 0 ? (
-        <div className="border rounded-lg h-[450px] flex items-center justify-center ">
+        <div className="border border-border rounded-lg h-[450px] flex items-center justify-center ">
           No projects found
         </div>
       ) : (
@@ -101,7 +101,7 @@ function ProjectCard(props: {
   return (
     <div
       key={project.id}
-      className="border rounded-lg p-4 relative hover:bg-muted/70 flex items-center gap-4 bg-muted/50 transition-colors"
+      className="border border-border rounded-lg p-4 relative hover:bg-muted/70 flex items-center gap-4 bg-muted/50 transition-colors"
     >
       {/* TODO - replace with project image */}
       <div className="size-10 rounded-full bg-border shrink-0" />

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/_components/sidebar/TeamSettingsSidebar.tsx

@@ -29,7 +29,7 @@ function RenderLinkGroup(props: {
     <>
       <div className="flex items-center gap-1.5 px-4">
         {/* TODO - using placeholder for now */}
-        <div className="size-4 bg-muted rounded-full border" />
+        <div className="size-4 bg-muted rounded-full border border-border" />
         <p className="text-muted-foreground text-xs">{props.title}</p>
       </div>
 

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/_components/sidebar/TeamsMobileNav.tsx

@@ -13,7 +13,7 @@ export function TeamSettingsMobileNav(props: {
 
   if (!showFull) {
     return (
-      <div className="py-4 px-4 border-b flex items-center gap-2 text-muted-foreground">
+      <div className="py-4 px-4 border-b border-border flex items-center gap-2 text-muted-foreground">
         <Link
           href={teamLinks[0].href}
           className="inline-flex items-center gap-1"
@@ -43,7 +43,7 @@ export function TeamSettingsMobileNav(props: {
           <li key={link.href}>
             <Link
               href={link.href}
-              className="p-4 border-b flex"
+              className="p-4 border-b flex border-border"
               onClick={() => {
                 if (link === teamLinks[0]) {
                   setShowFull(false);

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/GeneralSettingsPage.stories.tsx

@@ -65,7 +65,7 @@ function Story() {
 
 function ComponentVariantions() {
   return (
-    <div className="pt-20 border-t p-6">
+    <div className="pt-20 border-t p-6 border-border">
       <div className="max-w-[1100px] mx-auto">
         <h2 className="mb-5 text-3xl"> Component variations </h2>
         <div className="flex flex-col gap-6">

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/GeneralSettingsPage.tsx

@@ -121,8 +121,8 @@ function TeamSlugFormControl(props: {
       }}
       noPermissionText={undefined} // TODO
     >
-      <div className="relative border rounded-lg flex md:w-[450px]">
-        <div className="bg-muted/50 text-muted-foreground/80 self-stretch flex items-center px-3 text-sm border-r rounded-l-lg font-mono">
+      <div className="relative border border-border rounded-lg flex md:w-[450px]">
+        <div className="bg-muted/50 text-muted-foreground/80 self-stretch flex items-center px-3 text-sm border-r border-border rounded-l-lg font-mono">
           thirdweb.com/team/
         </div>
         <Input

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/SettingsCard.tsx

@@ -21,7 +21,7 @@ export function SettingsCard(props: {
     <div className="border rounded-lg bg-muted/50 relative">
       <div
         className={cn(
-          "border-b px-4 lg:px-6 py-6 relative",
+          "border-b border-border px-4 lg:px-6 py-6 relative",
           props.noPermissionText && "cursor-not-allowed",
         )}
       >

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/layout.tsx

@@ -27,7 +27,7 @@ export default function Layout(props: {
   return (
     <div>
       {/* Huge page title  */}
-      <div className="py-10 border-b">
+      <div className="py-10 border-b border-border">
         <div className="container max-w-[1200px]">
           <h1 className="text-3xl tracking-tight font-semibold">
             Team Settings

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/InviteSection.tsx

@@ -29,7 +29,7 @@ export function InviteSection(props: {
 
   if (teamPlan !== "pro") {
     bottomSection = (
-      <div className="px-4 lg:px6 py-4 flex items-center justify-between border-t gap-4">
+      <div className="px-4 lg:px6 py-4 flex items-center justify-between border-t border-border gap-4">
         <p className="text-muted-foreground text-sm">
           This feature is only available on the{" "}
           <Link
@@ -49,15 +49,15 @@ export function InviteSection(props: {
     );
   } else if (!props.userHasEditPermission) {
     bottomSection = (
-      <div className="px-4 lg:px-6 py-4 flex items-center justify-between border-t min-h-[60px]">
+      <div className="px-4 lg:px-6 py-4 flex items-center justify-between border-t border-border min-h-[60px]">
         <p className="text-muted-foreground text-sm">
           You don't have permission to invite members
         </p>
       </div>
     );
   } else {
     bottomSection = (
-      <div className="py-4 px-4 lg:px-6 flex items-center lg:justify-end border-t ">
+      <div className="py-4 px-4 lg:px-6 flex items-center lg:justify-end border-t border-border">
         <Button variant="outline" size="sm" className="gap-2 max-sm:w-full">
           <UserPlus className="size-3" />
           Invite
@@ -71,7 +71,7 @@ export function InviteSection(props: {
       <h2 className="text-2xl font-semibold tracking-tight mb-3">Invite</h2>
 
       {/* Card */}
-      <div className="border rounded-lg bg-muted/50">
+      <div className="border border-border rounded-lg bg-muted/50">
         {/* Invite via Link */}
         <div
           className={cn(

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/ManageMembersSection.tsx

@@ -1,21 +1,20 @@
 "use client";
 
 import type { Team } from "@/api/team";
-import { Input } from "@/components/ui/input";
-import { EllipsisIcon, SearchIcon } from "lucide-react";
-
 import type { TeamAccountRole, TeamMember } from "@/api/team-members";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { EllipsisIcon, SearchIcon } from "lucide-react";
 import { useState } from "react";
-import { Button } from "../../../../../../../@/components/ui/button";
-import { Checkbox } from "../../../../../../../@/components/ui/checkbox";
-import { Label } from "../../../../../../../@/components/ui/label";
 
 export function ManageMembersSection(props: {
   team: Team;
@@ -26,15 +25,15 @@ export function ManageMembersSection(props: {
 
   if (!props.userHasEditPermission) {
     topSection = (
-      <div className="border-b p-4">
+      <div className="border-b border-border p-4">
         <p className="text-muted-foreground text-sm">
           You don't have permission to manage members
         </p>
       </div>
     );
   } else {
     topSection = (
-      <div className="border-b p-4 flex items-center justify-between">
+      <div className="border-b border-border p-4 flex items-center justify-between">
         <div className="flex items-center gap-3 lg:gap-4">
           <Checkbox
             id="select-all"
@@ -74,7 +73,7 @@ export function ManageMembersSection(props: {
       <div className="h-4" />
 
       {/* Card */}
-      <div className="border rounded-lg bg-muted/50">
+      <div className="border border-border rounded-lg bg-muted/50">
         {/* Top section */}
         {topSection}
 
@@ -109,7 +108,7 @@ function MemberRow(props: {
   userHasEditPermission: boolean;
 }) {
   return (
-    <div className="flex items-center justify-between py-4 px-4 border-b">
+    <div className="flex items-center justify-between py-4 px-4 border-b border-border">
       <div className="flex items-center gap-3 lg:gap-4">
         {/* Checkbox */}
         <Checkbox
@@ -119,7 +118,7 @@ function MemberRow(props: {
         />
 
         {/* PFP */}
-        <div className="size-8 lg:size-9 bg-muted border rounded-full" />
+        <div className="size-8 lg:size-9 bg-muted border border-border rounded-full" />
 
         <div>
           <p className="text-sm font-semibold mb-0.5">

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/TeamMembersSettingsPage.stories.tsx

@@ -110,7 +110,7 @@ function Story() {
 
 function CompVariants() {
   return (
-    <div className="py-10 border-t">
+    <div className="py-10 border-t border-border">
       <div className="max-w-[1000px] mx-auto px-4">
         <h2 className="text-3xl font-semibold py-4"> Invite Variants </h2>
 

apps/dashboard/src/app/team/[team_slug]/[project_slug]/engine/(general)/create/page.tsx

@@ -0,0 +1,5 @@
+import { CreateEnginePage } from "components/engine/create/CreateEnginePage";
+
+export default function Page() {
+  return <CreateEnginePage />;
+}

apps/dashboard/src/app/team/[team_slug]/[project_slug]/engine/(general)/getEngineGeneralSidebarLinks.tsx

@@ -0,0 +1,21 @@
+import type { SidebarLink } from "@/components/blocks/Sidebar";
+
+export function getEngineGeneralSidebarLinks(
+  linkPrefix: string,
+): SidebarLink[] {
+  return [
+    {
+      label: "Overview",
+      href: `${linkPrefix}`,
+      exactMatch: true,
+    },
+    {
+      label: "Create",
+      href: `${linkPrefix}/create`,
+    },
+    {
+      label: "Import",
+      href: `${linkPrefix}/import`,
+    },
+  ];
+}

apps/dashboard/src/app/team/[team_slug]/[project_slug]/engine/(general)/import/page.tsx

@@ -0,0 +1,5 @@
+import { EngineImportPage } from "components/engine/import/EngineImportPage";
+
+export default function Page() {
+  return <EngineImportPage />;
+}

apps/dashboard/src/app/team/[team_slug]/[project_slug]/engine/(general)/layout.tsx

@@ -0,0 +1,25 @@
+import { Sidebar } from "@/components/blocks/Sidebar";
+import { getEngineGeneralSidebarLinks } from "./getEngineGeneralSidebarLinks";
+import { EngineGeneralPageMobileSidebar } from "./sidebars";
+
+export default function Layout(props: {
+  params: {
+    team_slug: string;
+    project_slug: string;
+    engineId: string;
+  };
+  children: React.ReactNode;
+}) {
+  const linkPrefix = `/team/${props.params.team_slug}/${props.params.project_slug}/engine`;
+  const sidebarLinks = getEngineGeneralSidebarLinks(linkPrefix);
+
+  return (
+    <div className="container flex gap-6">
+      <Sidebar links={sidebarLinks} />
+      <div className="pt-6 grow max-sm:w-full">
+        <EngineGeneralPageMobileSidebar links={sidebarLinks} />
+        {props.children}
+      </div>
+    </div>
+  );
+}