From 5a307de89974aa30ba394023ae87146a3168b98d Mon Sep 17 00:00:00 2001
From: Andreas Thomas <dev@chronark.com>
Date: Sat, 7 Dec 2024 19:18:14 +0100
Subject: [PATCH] fix: use workspace name in team switcher (#2719)

---
 apps/dashboard/app/(app)/desktop-sidebar.tsx |  2 +-
 apps/dashboard/app/(app)/mobile-sidebar.tsx  |  2 +-
 apps/dashboard/app/(app)/team-switcher.tsx   | 19 ++++++++++---------
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/apps/dashboard/app/(app)/desktop-sidebar.tsx b/apps/dashboard/app/(app)/desktop-sidebar.tsx
index 36815078e4..0b881847e6 100644
--- a/apps/dashboard/app/(app)/desktop-sidebar.tsx
+++ b/apps/dashboard/app/(app)/desktop-sidebar.tsx
@@ -54,7 +54,7 @@ export const DesktopSidebar: React.FC<Props> = ({ workspace, className }) => {
       )}
     >
       <div className="flex min-w-full mt-2 -mx-2">
-        <WorkspaceSwitcher />
+        <WorkspaceSwitcher workspace={workspace} />
       </div>
       {workspace.planDowngradeRequest ? (
         <div className="flex justify-center w-full mt-2">
diff --git a/apps/dashboard/app/(app)/mobile-sidebar.tsx b/apps/dashboard/app/(app)/mobile-sidebar.tsx
index 17ad006ef7..4229e1f030 100644
--- a/apps/dashboard/app/(app)/mobile-sidebar.tsx
+++ b/apps/dashboard/app/(app)/mobile-sidebar.tsx
@@ -35,7 +35,7 @@ export const MobileSideBar = ({ className, workspace }: Props) => {
             <SheetTrigger>
               <Menu className="w-6 h-6 " />
             </SheetTrigger>
-            <WorkspaceSwitcher />
+            <WorkspaceSwitcher workspace={workspace} />
           </div>
           <UserButton />
         </div>
diff --git a/apps/dashboard/app/(app)/team-switcher.tsx b/apps/dashboard/app/(app)/team-switcher.tsx
index cd56895ba2..f236394485 100644
--- a/apps/dashboard/app/(app)/team-switcher.tsx
+++ b/apps/dashboard/app/(app)/team-switcher.tsx
@@ -22,7 +22,12 @@ import { useOrganization, useOrganizationList, useUser } from "@clerk/nextjs";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import Link from "next/link";
 
-export const WorkspaceSwitcher: React.FC = (): JSX.Element => {
+type Props = {
+  workspace: {
+    name: string;
+  };
+};
+export const WorkspaceSwitcher: React.FC<Props> = (props): JSX.Element => {
   const { isLoaded, setActive, userMemberships } = useOrganizationList({
     userMemberships: {
       infinite: true,
@@ -63,7 +68,7 @@ export const WorkspaceSwitcher: React.FC = (): JSX.Element => {
         <div className="flex items-center gap-2 overflow-hidden whitespace-nowrap">
           <Avatar className="w-5 h-5">
             {currentOrg?.imageUrl ? (
-              <AvatarImage src={currentOrg.imageUrl} alt={currentOrg.name ?? "Profile picture"} />
+              <AvatarImage src={currentOrg.imageUrl} alt={props.workspace.name} />
             ) : user?.imageUrl ? (
               <AvatarImage
                 src={user.imageUrl}
@@ -71,9 +76,7 @@ export const WorkspaceSwitcher: React.FC = (): JSX.Element => {
               />
             ) : null}
             <AvatarFallback className="flex items-center justify-center w-8 h-8 text-gray-700 bg-gray-100 border border-gray-500 rounded">
-              {(currentOrg?.name ?? user?.username ?? user?.fullName ?? "")
-                .slice(0, 2)
-                .toUpperCase() ?? "P"}
+              {props.workspace.name.slice(0, 2).toUpperCase()}
             </AvatarFallback>
           </Avatar>
           {!isLoaded ? (
@@ -82,13 +85,11 @@ export const WorkspaceSwitcher: React.FC = (): JSX.Element => {
             <Tooltip>
               <TooltipTrigger asChild>
                 <span className="overflow-hidden text-sm font-medium text-ellipsis">
-                  {currentOrg?.name ?? "Personal Workspace"}
+                  {props.workspace.name}
                 </span>
               </TooltipTrigger>
               <TooltipContent>
-                <span className="text-sm font-medium">
-                  {currentOrg?.name ?? "Personal Workspace"}
-                </span>
+                <span className="text-sm font-medium">{props.workspace.name}</span>
               </TooltipContent>
             </Tooltip>
           )}