Dashboard: Header UI improvement for contract layout

Author: MananTank

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/layout.tsx

@@ -1,13 +1,11 @@
 import { redirect } from "next/navigation";
+import { getAuthToken, getAuthTokenWalletAddress } from "@/api/auth-token";
 import { getProjects } from "@/api/projects";
 import { getTeams } from "@/api/team";
 import { AppFooter } from "@/components/footers/app-footer";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
-import {
-  getAuthToken,
-  getAuthTokenWalletAddress,
-} from "../../../../../../../../@/api/auth-token";
-import { ErrorProvider } from "../../../../../../../../@/contexts/error-handler";
+import { ErrorProvider } from "@/contexts/error-handler";
+import { ContractIcon } from "@/icons/ContractIcon";
 import { SharedContractLayout } from "../../../../../../(dashboard)/(chain)/[chain_id]/[contractAddress]/shared-layout";
 import { getValidAccount } from "../../../../../../account/settings/getAccount";
 import { TeamHeaderLoggedIn } from "../../../../../components/TeamHeader/team-header-logged-in.client";
@@ -68,6 +66,11 @@ export default async function ContractLayout(props: {
             accountAddress={accountAddress}
             client={client}
             currentProject={project}
+            currentProjectSubpath={{
+              href: `/team/${params.team_slug}/${params.project_slug}/contracts`,
+              icon: <ContractIcon />,
+              label: "Contracts",
+            }}
             currentTeam={team}
             teamsAndProjects={teamsAndProjects}
           />

apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamHeaderUI.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/nextjs";
+import { BoxIcon } from "lucide-react";
 import { ThirdwebProvider } from "thirdweb/react";
 import type { Project } from "@/api/projects";
 import type { Team } from "@/api/team";
@@ -119,6 +120,19 @@ function Variants(props: { type: "mobile" | "desktop" }) {
             type={props.type}
           />
         </BadgeContainer>
+
+        <BadgeContainer label="Pro Plan - active subpage">
+          <Variant
+            currentProject={proTeam.projects[0]}
+            currentProjectSubpath={{
+              href: "/team/project/foo",
+              icon: <BoxIcon />,
+              label: "Foo",
+            }}
+            team={proTeam.team}
+            type={props.type}
+          />
+        </BadgeContainer>
       </div>
     </ThirdwebProvider>
   );
@@ -132,6 +146,11 @@ function Variant(props: {
   team: Team;
   type: "mobile" | "desktop";
   currentProject?: Project;
+  currentProjectSubpath?: {
+    label: string;
+    href: string;
+    icon: React.ReactNode;
+  };
 }) {
   const Comp =
     props.type === "mobile" ? TeamHeaderMobileUI : TeamHeaderDesktopUI;
@@ -149,6 +168,7 @@ function Variant(props: {
         createProject={() => {}}
         createTeam={() => {}}
         currentProject={undefined}
+        currentProjectSubpath={props.currentProjectSubpath}
         currentTeam={props.team}
         logout={() => {}}
         teamsAndProjects={teamsAndProjectsStub}

apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamHeaderUI.tsx

@@ -21,6 +21,13 @@ export type TeamHeaderCompProps = {
   currentTeam: Team;
   teamsAndProjects: Array<{ team: Team; projects: Project[] }>;
   currentProject: Project | undefined;
+  currentProjectSubpath:
+    | {
+        label: string;
+        icon: React.ReactNode;
+        href: string;
+      }
+    | undefined;
   className?: string;
   account: Pick<Account, "email" | "id">;
   logout: () => void;
@@ -107,6 +114,23 @@ export function TeamHeaderDesktopUI(props: TeamHeaderCompProps) {
                 teamsAndProjects={props.teamsAndProjects}
               />
             </div>
+
+            {props.currentProjectSubpath && (
+              <>
+                <SlashSeparator />
+                <div className="flex items-center gap-1.5">
+                  <div className="flex items-center justify-center rounded-full border size-6 [&>svg]:size-[50%] [&>svg]:text-muted-foreground">
+                    {props.currentProjectSubpath.icon}
+                  </div>
+                  <Link
+                    className="flex flex-row items-center gap-2 font-semibold text-sm"
+                    href={props.currentProjectSubpath.href}
+                  >
+                    {props.currentProjectSubpath.label}
+                  </Link>
+                </div>
+              </>
+            )}
           </>
         )}
       </div>

apps/dashboard/src/app/(app)/team/components/TeamHeader/team-header-logged-in.client.tsx

@@ -28,6 +28,11 @@ export function TeamHeaderLoggedIn(props: {
   account: Pick<Account, "email" | "id">;
   accountAddress: string;
   client: ThirdwebClient;
+  currentProjectSubpath?: {
+    label: string;
+    href: string;
+    icon: React.ReactNode;
+  };
 }) {
   // identify the account
   useIdentifyAccount({
@@ -89,6 +94,7 @@ export function TeamHeaderLoggedIn(props: {
       );
     },
     currentProject: props.currentProject,
+    currentProjectSubpath: props.currentProjectSubpath,
     currentTeam: props.currentTeam,
     logout: logout,
     teamsAndProjects: props.teamsAndProjects,