Files
supabase/apps/studio/components/layouts/AppLayout/OrganizationDropdownCommandContent.tsx
T
Francesco Sansalvadore b997b7fb13 feat(studio): org project branch mobile selector (#43238)
- add new
[OrgSelector](https://github.com/supabase/supabase/pull/43238/changes#diff-214b339101a9c06864ea2755ac7246eb4c971ce74c5d3169b1385a28ee1d4227)
and
[ProjectBranchSelector](https://github.com/supabase/supabase/pull/43238/changes#diff-82d25c128c306b61bea7481026f58f670a229874f23ca3a1a1d78ddeabde21e0)
components to the mobile navigation, replacing the previous which took
up a lot of horizontal space
- org/project/branch dropdowns now open up in the bottom MobileSheetNav
for a better mobile ux
- desktop nav remains unchanged
2026-03-11 16:25:22 +01:00

136 lines
4.1 KiB
TypeScript

import PartnerIcon from 'components/ui/PartnerIcon'
import { Plus } from 'lucide-react'
import Link from 'next/link'
import type { Organization } from 'types'
import {
Button,
cn,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
CommandSeparator_Shadcn_,
ScrollArea,
} from 'ui'
import { OrgCommandItem } from './OrgCommandItem'
export interface OrganizationDropdownCommandContentProps {
embedded: boolean
className?: string
organizations: Organization[]
selectedSlug: string | undefined
routePathname: string
hasRouteSlug: boolean
organizationCreationEnabled: boolean
onClose: () => void
}
export function OrganizationDropdownCommandContent({
embedded,
className,
organizations,
selectedSlug,
routePathname,
hasRouteSlug,
organizationCreationEnabled,
onClose,
}: OrganizationDropdownCommandContentProps) {
const orgList = (
<>
{organizations?.map((org) => (
<OrgCommandItem
key={org.slug}
org={org}
selectedSlug={selectedSlug}
routePathname={routePathname}
hasRouteSlug={hasRouteSlug}
onClose={onClose}
compactPadding={!embedded}
/>
))}
</>
)
if (embedded) {
return (
<Command_Shadcn_ className={cn(className, 'flex flex-col flex-1 min-h-0 overflow-hidden')}>
<div className="flex items-center gap-2 shrink-0 border-b p-2">
<Button type="text" block size="small" asChild>
<Link
href="/organizations"
className="text-xs text-foreground-light hover:text-foreground"
onClick={onClose}
>
All Organizations
</Link>
</Button>
{organizationCreationEnabled && (
<Button
type="default"
block
size="small"
asChild
icon={<Plus size={14} strokeWidth={1.5} />}
>
<Link
href="/new"
className="text-xs text-foreground-light hover:text-foreground"
onClick={onClose}
>
New organization
</Link>
</Button>
)}
</div>
<CommandInput_Shadcn_
placeholder="Find organization..."
wrapperClassName="shrink-0"
className="text-base sm:text-sm"
/>
<CommandList_Shadcn_ className="flex flex-col flex-1 min-h-0 overflow-y-auto p-1 !max-h-none">
<CommandEmpty_Shadcn_>No organizations found</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_ className="min-h-0">{orgList}</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
)
}
return (
<Command_Shadcn_ className={className}>
<CommandInput_Shadcn_ placeholder="Find organization..." />
<CommandList_Shadcn_>
<CommandEmpty_Shadcn_>No organizations found</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_>
<ScrollArea className={(organizations || []).length > 7 ? 'md:h-[210px]' : ''}>
{orgList}
</ScrollArea>
</CommandGroup_Shadcn_>
<CommandSeparator_Shadcn_ />
<CommandGroup_Shadcn_>
<CommandItem_Shadcn_ className="cursor-pointer w-full" onSelect={() => onClose()}>
<Link href="/organizations" className="flex items-center gap-2 w-full">
All Organizations
</Link>
</CommandItem_Shadcn_>
</CommandGroup_Shadcn_>
{organizationCreationEnabled && (
<>
<CommandSeparator_Shadcn_ />
<CommandGroup_Shadcn_>
<CommandItem_Shadcn_ className="cursor-pointer w-full" onSelect={() => onClose()}>
<Link href="/new" className="flex items-center gap-2 w-full">
<Plus size={14} strokeWidth={1.5} />
<p>New organization</p>
</Link>
</CommandItem_Shadcn_>
</CommandGroup_Shadcn_>
</>
)}
</CommandList_Shadcn_>
</Command_Shadcn_>
)
}