swithcer (stack-auth#715)

fomalhautb · N2D4 · web-flow · commit d6f3be5543e4 · 2025-07-02T19:23:53.000+02:00
---- > [!IMPORTANT] > Enhance `SelectedTeamSwitcher` to support nullable teams and add 'personal' team icon in `TeamIcon`, with updated translations. > > - **Behavior**: > - `SelectedTeamSwitcher` in `selected-team-switcher.tsx` now supports nullable teams with `allowNull` prop and `nullLabel` for display. > - `onChange` callback added to `SelectedTeamSwitcher` to handle team changes. > - `TeamIcon` in `team-icon.tsx` now supports a 'personal' team type, displaying a default icon. > - **Translations**: > - Added translation key for "Personal team" in `quetzal-translations.ts`. > - **Misc**: > - Updated `SelectedTeamSwitcherProps` type to handle nullable teams and added `onChange` callback. > - Minor refactoring in `selected-team-switcher.tsx` for better handling of team selection logic. > > <sup>This description was created by </sup>[<img alt="Ellipsis" src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=stack-auth%2Fstack-auth&utm_source=github&utm_medium=referral)<sup> for ddb61e9. You can [customize](https://app.ellipsis.dev/stack-auth/settings/summaries) this summary. It will automatically update as commits are pushed.</sup>  --------- Co-authored-by: Konsti Wohlwend <n2d4xc@gmail.com>
diff --git a/examples/docs-examples/src/app/team/[teamId]/page.tsx b/examples/docs-examples/src/app/team/[teamId]/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useUser, SelectedTeamSwitcher } from "@stackframe/stack";
+import { SelectedTeamSwitcher, useUser } from "@stackframe/stack";
 
 export default function TeamPage({ params }: { params: { teamId: string } }) {
   const user = useUser({ or: 'redirect' });
diff --git a/packages/template/src/components/selected-team-switcher.tsx b/packages/template/src/components/selected-team-switcher.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { StackAssertionError } from "@stackframe/stack-shared/dist/utils/errors";
 import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
 import {
   Button,
@@ -25,10 +26,13 @@ type MockTeam = {
   profileImageUrl?: string | null,
 };
 
-type SelectedTeamSwitcherProps = {
-  urlMap?: (team: Team) => string,
+type SelectedTeamSwitcherProps<AllowNull extends boolean = false> = {
+  urlMap?: (team: AllowNull extends true ? Team | null : Team) => string,
   selectedTeam?: Team,
   noUpdateSelectedTeam?: boolean,
+  allowNull?: AllowNull,
+  nullLabel?: string,
+  onChange?: (team: AllowNull extends true ? Team | null : Team) => void,
   // Mock data props
   mockUser?: {
     selectedTeam?: MockTeam,
@@ -41,7 +45,7 @@ type SelectedTeamSwitcherProps = {
   },
 };
 
-export function SelectedTeamSwitcher(props: SelectedTeamSwitcherProps) {
+export function SelectedTeamSwitcher<AllowNull extends boolean = false>(props: SelectedTeamSwitcherProps<AllowNull>) {
   return <Suspense fallback={<Fallback />}>
     <Inner {...props} />
   </Suspense>;
@@ -51,7 +55,7 @@ function Fallback() {
   return <Skeleton className="h-9 w-full max-w-64 stack-scope" />;
 }
 
-function Inner(props: SelectedTeamSwitcherProps) {
+function Inner<AllowNull extends boolean>(props: SelectedTeamSwitcherProps<AllowNull>) {
   const { t } = useTranslation();
   const appFromHook = useStackApp();
   const userFromHook = useUser();
@@ -83,17 +87,27 @@ function Inner(props: SelectedTeamSwitcherProps) {
 
   return (
     <Select
-      value={selectedTeam?.id}
+      value={selectedTeam?.id || (props.allowNull ? 'null-sentinel' : undefined)}
       onValueChange={(value) => {
-        // Skip actual navigation/updates in mock mode
-        if (props.mockUser) return;
-
         runAsynchronouslyWithAlert(async () => {
-          const team = teams?.find(team => team.id === value);
-          if (!team) {
-            throw new Error('Team not found, this should not happen');
+          let team: MockTeam | null = null;
+          if (value !== 'null-sentinel') {
+            team = teams?.find(team => team.id === value) || null;
+            if (!team) {
+              throw new StackAssertionError('Team not found, this should not happen');
+            }
+          } else {
+            team = null;
+          }
+
+          // Call onChange callback if provided
+          if (props.onChange) {
+            props.onChange(team as Team);
           }
 
+          // Skip actual navigation/updates in mock mode
+          if (props.mockUser) return;
+
           if (!props.noUpdateSelectedTeam) {
             await user?.setSelectedTeam(team as Team);
           }
@@ -136,6 +150,15 @@ function Inner(props: SelectedTeamSwitcherProps) {
           </SelectItem>
         </SelectGroup> : undefined}
 
+        {props.allowNull && <SelectGroup>
+          <SelectItem value="null-sentinel">
+            <div className="flex items-center gap-2">
+              <TeamIcon team='personal' />
+              <Typography className="max-w-40 truncate">{props.nullLabel || t('No team')}</Typography>
+            </div>
+          </SelectItem>
+        </SelectGroup>}
+
         {teams?.length ?
           <SelectGroup>
             <SelectLabel>{t('Other teams')}</SelectLabel>
@@ -148,10 +171,12 @@ function Inner(props: SelectedTeamSwitcherProps) {
                   </div>
                 </SelectItem>
               ))}
-          </SelectGroup> :
+          </SelectGroup> : null}
+
+        {!teams?.length && !props.allowNull ?
           <SelectGroup>
             <SelectLabel>{t('No teams yet')}</SelectLabel>
-          </SelectGroup>}
+          </SelectGroup> : null}
 
         {project.config.clientTeamCreationEnabled && <>
           <SelectSeparator/>
diff --git a/packages/template/src/components/team-icon.tsx b/packages/template/src/components/team-icon.tsx
@@ -1,7 +1,15 @@
 import { Avatar, AvatarImage, Typography } from "@stackframe/stack-ui";
+import { User2 } from "lucide-react";
 import { Team } from "..";
 
-export function TeamIcon(props: { team: Team }) {
+export function TeamIcon(props: { team: Team | 'personal' }) {
+  if (props.team === 'personal') {
+    return (
+      <div className="flex items-center justify-center min-w-6 min-h-6 max-w-6 max-h-6 rounded bg-zinc-200">
+        <User2 className="w-4 h-4" />
+      </div>
+    );
+  }
   if (props.team.profileImageUrl) {
     return (
       <Avatar className="min-w-6 min-h-6 max-w-6 max-h-6 rounded">
diff --git a/packages/template/src/generated/quetzal-translations.ts b/packages/template/src/generated/quetzal-translations.ts
