[TOOL-4120] Dashboard: Improved team switching UX, switch to same subpage

Author: MananTank

apps/dashboard/src/app/(app)/account/components/AccountHeaderUI.tsx

@@ -113,6 +113,7 @@ export function AccountHeaderMobileUI(props: AccountHeaderCompProps) {
 
           {props.teamsAndProjects.length > 0 && (
             <TeamSelectorMobileMenuButton
+              isOnProjectPage={false}
               currentTeam={undefined}
               teamsAndProjects={props.teamsAndProjects}
               upgradeTeamLink={undefined}

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

@@ -84,6 +84,7 @@ export function TeamAndProjectSelectorPopoverButton(props: TeamSwitcherProps) {
           <div className="no-scrollbar flex [&>div]:min-w-[280px]">
             {/* Left */}
             <TeamSelectionUI
+              isOnProjectPage={!!props.currentProject}
               currentTeam={currentTeam}
               setHoveredTeam={setHoveredTeam}
               teamsAndProjects={teamsAndProjects}

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

@@ -166,6 +166,7 @@ export function TeamHeaderMobileUI(props: TeamHeaderCompProps) {
           </Link>
 
           <TeamSelectorMobileMenuButton
+            isOnProjectPage={!!props.currentProject}
             currentTeam={props.currentTeam}
             teamsAndProjects={props.teamsAndProjects}
             upgradeTeamLink={`/team/${currentTeam.slug}/settings`}

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

@@ -9,6 +9,7 @@ import { cn } from "@/lib/utils";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { CirclePlusIcon } from "lucide-react";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { useState } from "react";
 import type { ThirdwebClient } from "thirdweb";
 import { TeamPlanBadge } from "../../../components/TeamPlanBadge";
@@ -23,8 +24,10 @@ export function TeamSelectionUI(props: {
   upgradeTeamLink: string | undefined;
   account: Pick<Account, "email" | "id" | "image"> | undefined;
   client: ThirdwebClient;
+  isOnProjectPage: boolean;
 }) {
   const { setHoveredTeam, currentTeam, teamsAndProjects } = props;
+  const pathname = usePathname();
   const teamPlan = currentTeam ? getValidTeamPlan(currentTeam) : undefined;
   const teams = teamsAndProjects.map((x) => x.team);
   const [searchTeamTerm, setSearchTeamTerm] = useState("");
@@ -88,7 +91,13 @@ export function TeamSelectionUI(props: {
                     variant="ghost"
                     asChild
                   >
-                    <Link href={`/team/${team.slug}`}>
+                    <Link
+                      href={
+                        currentTeam && !props.isOnProjectPage
+                          ? pathname.replace(currentTeam.slug, team.slug)
+                          : `/team/${team.slug}`
+                      }
+                    >
                       <div className="flex items-center gap-2">
                         <GradientAvatar
                           src={team.image || ""}

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

@@ -16,6 +16,7 @@ type TeamSelectorMobileMenuButtonProps = {
   upgradeTeamLink: string | undefined;
   account: Pick<Account, "email" | "id"> | undefined;
   client: ThirdwebClient;
+  isOnProjectPage: boolean;
 };
 
 export function TeamSelectorMobileMenuButton(
@@ -43,6 +44,7 @@ export function TeamSelectorMobileMenuButton(
       <DialogContent dialogCloseClassName="hidden" className="p-0">
         <DynamicHeight>
           <TeamSelectionUI
+            isOnProjectPage={props.isOnProjectPage}
             currentTeam={currentTeam}
             setHoveredTeam={() => {}} // don't care on mobile
             teamsAndProjects={teamsAndProjects}