feat(workspace-switcher): improve workspace display logic for empty and active states

This commit is contained in:
ngc2207 2025-02-07 11:37:16 +08:00
parent 6b3e851d4a
commit 5a936a335b

View File

@ -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"
>
{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}
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}
{activeWorkspace?.name ?? ""}
</span>
{/* <span className="truncate text-xs"></span> */}
</div>
<ChevronsUpDown className="ml-auto" />
</>
)}
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent