Team Switcher UI (#71)

* added basic team switcher

* improved styling

apps/demo/src/app/teams/my-teams.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link, Text } from "@stackframe/stack";
+import { Link, TeamSwitcher, Text } from "@stackframe/stack";
 import { stackServerApp } from 'src/stack';
 import { CreateTeam } from './create-team';
 
@@ -10,6 +10,7 @@ export default async function MyTeams() {
 
   return (
     <div className='flex-col'>
+      <TeamSwitcher />
       <CreateTeam />
 
       {teams.length > 0 && teams.map((team) => (

packages/stack/src/components/team-switcher.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import {
+  useUser,
+  Text,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuLabel,
+  useStackApp,
+} from "..";
+import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { Check } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useMemo } from "react";
+
+type TeamSwitcherProps = {
+  projectUrlMap?: (projectId: string) => string,
+};
+
+function TeamIcon(props: { displayName: string }) {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '1.5rem', height: '1.5rem', marginRight: '0.5rem', borderRadius: '0.25rem', backgroundColor: 'rgb(228 228 231)' }}>
+      <Text style={{ color: 'black', fontWeight: 400 }}>{props.displayName.slice(0, 1).toUpperCase()}</Text>
+    </div>
+  );
+}
+
+export default function TeamSwitcher(props: TeamSwitcherProps) {
+  const user = useUser();
+  const router = useRouter();
+  const selectedTeam = user?.useSelectedTeam();
+  const rawTeams = user?.useTeams();
+  const teams = useMemo(() => rawTeams?.sort((a, b) => b.id === selectedTeam?.id ? 1 : -1), [rawTeams, selectedTeam]);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <TeamIcon displayName={selectedTeam?.displayName || ''} />
+          <Text>{selectedTeam?.displayName || 'Select team'}</Text>
+        </div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent style={{ zIndex: 1500 }}>
+        <DropdownMenuLabel>Teams</DropdownMenuLabel>
+        {teams && teams.map(team => (
+          <DropdownMenuItem
+            key={team.id}
+            onClick={() => {
+              runAsynchronouslyWithAlert(async () => {
+                await user?.setSelectedTeam(team);
+                if (props.projectUrlMap) {
+                  router.push(props.projectUrlMap(team.id));
+                }
+              });
+            }}
+            style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}
+          >
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              <TeamIcon displayName={team.displayName} />
+              <Text>{team.displayName}</Text>
+            </div>
+            <Check style={{ marginLeft: '0.5rem', visibility: team.id === selectedTeam?.id ? 'visible' : 'hidden', height: '1rem', width: '1rem' }} />
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

packages/stack/src/index.tsx

@@ -10,6 +10,7 @@ export { default as EmailVerification } from "./components-page/email-verificati
 export { default as PasswordReset } from "./components-page/password-reset";
 export { default as ForgotPassword } from "./components-page/forgot-password";
 export { default as MessageCard } from "./components/message-cards/message-card";
+export { default as TeamSwitcher } from "./components/team-switcher";
 
 export { default as CredentialSignIn } from "./components/credential-sign-in";
 export { default as CredentialSignUp } from "./components/credential-sign-up";

packages/stack/src/lib/stack-app.ts

@@ -765,7 +765,7 @@ class _StackClientAppImpl<HasTokenStore extends boolean, ProjectId extends strin
       },
     
       // TODO these should not actually be on Auth, instead on User
-      async updateSelectedTeam(team: Team | null) {
+      async setSelectedTeam(team: Team | null) {
         await app._updateUser({ selectedTeamId: team?.id ?? null }, session);
       },
       update(update) {
@@ -1853,7 +1853,7 @@ type Auth<T, C> = {
 
   // TODO these should not actually be here
   update(this: T, user: C): Promise<void>,
-  updateSelectedTeam(this: T, team: Team | null): Promise<void>,
+  setSelectedTeam(this: T, team: Team | null): Promise<void>,
   sendVerificationEmail(this: T): Promise<KnownErrors["EmailAlreadyVerified"] | void>,
   updatePassword(this: T, options: { oldPassword: string, newPassword: string}): Promise<KnownErrors["PasswordMismatch"] | KnownErrors["PasswordRequirementsNotMet"] | void>,
 };