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