[TOOL-4292] Dashboard: Show Team selector page for '~' team slug

Author: MananTank

apps/dashboard/src/app/(app)/team/~/[[...paths]]/page.tsx

@@ -0,0 +1,115 @@
+import { type Team, getTeams } from "@/api/team";
+import { GradientAvatar } from "@/components/blocks/Avatars/GradientAvatar";
+import { getThirdwebClient } from "@/constants/thirdweb.server";
+import { ChevronRightIcon, UsersIcon } from "lucide-react";
+import Link from "next/link";
+import { notFound, redirect } from "next/navigation";
+import { getAuthToken } from "../../../api/lib/getAuthToken";
+import { TeamPlanBadge } from "../../../components/TeamPlanBadge";
+import { TeamHeader } from "../../components/TeamHeader/team-header";
+
+export default async function Page(props: {
+  params: Promise<{
+    paths?: string[];
+  }>;
+  searchParams: Promise<Record<string, string | undefined | string[]>>;
+}) {
+  const params = await props.params;
+  const searchParams = await props.searchParams;
+
+  const teams = await getTeams();
+  const authToken = await getAuthToken();
+
+  if (!teams || !authToken) {
+    notFound();
+  }
+
+  const searchParamsString = Object.entries(searchParams)
+    .map(([key, value]) => {
+      if (Array.isArray(value)) {
+        return value.map((v) => `${key}=${v}`).join("&");
+      }
+      return `${key}=${value}`;
+    })
+    .join("&");
+
+  // if there is a single team, redirect to the team page directly
+  if (teams.length === 1 && teams[0]) {
+    redirect(
+      createTeamLink({
+        team: teams[0],
+        paths: params.paths,
+        searchParams: searchParamsString,
+      }),
+    );
+  }
+
+  const client = getThirdwebClient({
+    jwt: authToken,
+    teamId: undefined,
+  });
+
+  return (
+    <div className="flex min-h-dvh flex-col">
+      <div className="border-b bg-card">
+        <TeamHeader />
+      </div>
+
+      <div className="container flex grow flex-col items-center justify-center">
+        <div className="w-full max-w-lg rounded-xl border bg-card shadow-2xl">
+          <div className="border-b p-6">
+            <div className="mb-1 inline-block rounded-full border p-2">
+              <UsersIcon className="size-5 text-muted-foreground" />
+            </div>
+            <h1 className="mb-0.5 font-semibold text-xl tracking-tight">
+              Select a team
+            </h1>
+            <p className="text-muted-foreground text-sm">
+              You are currently a member of multiple teams
+              <br />
+              Select a team to view this page
+            </p>
+          </div>
+
+          <div className="flex flex-col [&>*:not(:last-child)]:border-b">
+            {teams.map((team) => {
+              return (
+                <div
+                  key={team.id}
+                  className="group relative flex items-center gap-3 px-6 py-4 hover:bg-accent/50"
+                >
+                  <GradientAvatar
+                    src={team.image || ""}
+                    id={team.id}
+                    className="size-8 rounded-full border"
+                    client={client}
+                  />
+                  <Link
+                    href={createTeamLink({
+                      team,
+                      paths: params.paths,
+                      searchParams: searchParamsString,
+                    })}
+                    className="before:absolute before:inset-0"
+                  >
+                    {team.name}
+                  </Link>
+                  <TeamPlanBadge plan={team.billingPlan} />
+                  <ChevronRightIcon className="ml-auto size-4 text-muted-foreground group-hover:text-foreground" />
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function createTeamLink(params: {
+  team: Team;
+  paths: string[] | undefined;
+  searchParams: string | undefined;
+}) {
+  return `/team/${params.team.slug}/${(params.paths || [])?.join("/") || ""}${params.searchParams ? `?${params.searchParams}` : ""}`;
+}

apps/dashboard/src/middleware.ts

@@ -1,4 +1,3 @@
-import { getDefaultTeam } from "@/api/team";
 import { isLoginRequired } from "@/constants/auth";
 import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
 import { type NextRequest, NextResponse } from "next/server";
@@ -188,18 +187,6 @@ export async function middleware(request: NextRequest) {
     }
   }
 
-  // redirect /team/~/... to /team/<first_team_slug>/...
-  if (paths[0] === "team" && paths[1] === "~") {
-    const firstTeam = await getDefaultTeam();
-    if (firstTeam) {
-      const modifiedPaths = [...paths];
-      modifiedPaths[1] = firstTeam.slug;
-      return redirect(request, `/${modifiedPaths.join("/")}`, {
-        searchParams: request.nextUrl.searchParams.toString(),
-        cookiesToSet,
-      });
-    }
-  }
   // END /<address>/... case
   // all other cases are handled by the file system router so we just fall through
   if (cookiesToSet) {