From 5a936a335bd832bac4c728c1276c2e47b152c447 Mon Sep 17 00:00:00 2001
From: ngc2207 <cfngc3109@gmail.com>
Date: Fri, 7 Feb 2025 11:37:16 +0800
Subject: [PATCH] feat(workspace-switcher): improve workspace display logic for
 empty and active states

---
 src/components/workspace-switcher.tsx | 48 ++++++++++++++++++---------
 1 file changed, 33 insertions(+), 15 deletions(-)

diff --git a/src/components/workspace-switcher.tsx b/src/components/workspace-switcher.tsx
index e971aea..c275786 100644
--- a/src/components/workspace-switcher.tsx
+++ b/src/components/workspace-switcher.tsx
@@ -32,13 +32,14 @@ export function WorkspaceSwitcher() {
     setActiveWorkspace(workspaces?.documents[0]);
   }, [workspaces]);
 
-  if (!activeWorkspace)
+  if (!workspaces) {
     return (
       <div className="flex p-2">
         <Skeleton className="h-8 w-8 rounded-lg" />
         <Skeleton className="flex-1 ml-2" />
       </div>
     );
+  }
 
   return (
     <SidebarMenu>
@@ -49,20 +50,37 @@ export function WorkspaceSwitcher() {
               size="lg"
               className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
             >
-              <div className="flex aspect-square size-8 items-center justify-center rounded-lg border bg-background text-sidebar-primary-foreground">
-                <WorkspaceAvatar
-                  name={activeWorkspace.name}
-                  image={activeWorkspace.imageUrl}
-                  className="size-4"
-                />
-              </div>
-              <div className="grid flex-1 text-left text-sm leading-tight">
-                <span className="truncate font-semibold">
-                  {activeWorkspace.name}
-                </span>
-                {/* <span className="truncate text-xs"></span> */}
-              </div>
-              <ChevronsUpDown className="ml-auto" />
+              {workspaces.documents.length === 0 ? (
+                <>
+                  <div className="flex aspect-square size-8 items-center justify-center rounded-lg border bg-background text-sidebar-primary-foreground">
+                    <WorkspaceAvatar name="+" className="size-4" />
+                  </div>
+                  <div className="grid flex-1 text-left text-sm leading-tight">
+                    <span className="truncate font-semibold">
+                      Add workspace
+                    </span>
+                    {/* <span className="truncate text-xs"></span> */}
+                  </div>
+                  <ChevronsUpDown className="ml-auto" />
+                </>
+              ) : (
+                <>
+                  <div className="flex aspect-square size-8 items-center justify-center rounded-lg border bg-background text-sidebar-primary-foreground">
+                    <WorkspaceAvatar
+                      name={activeWorkspace?.name ?? ""}
+                      image={activeWorkspace?.imageUrl ?? ""}
+                      className="size-4"
+                    />
+                  </div>
+                  <div className="grid flex-1 text-left text-sm leading-tight">
+                    <span className="truncate font-semibold">
+                      {activeWorkspace?.name ?? ""}
+                    </span>
+                    {/* <span className="truncate text-xs"></span> */}
+                  </div>
+                  <ChevronsUpDown className="ml-auto" />
+                </>
+              )}
             </SidebarMenuButton>
           </DropdownMenuTrigger>
           <DropdownMenuContent