pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-02-11 23:46:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

clean up ui pass 1

Browse Source
This commit is contained in:
miloschwartz
2025-06-30 09:33:48 -07:00
parent 3b6a44e683
commit a0381eb2c6
82 changed files with 17618 additions and 17258 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
src/components/OrgSelector.tsx
View File

@@ -15,10 +15,16 @@ import {
PopoverContent,
PopoverTrigger
} from "@app/components/ui/popover";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@app/components/ui/tooltip";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { cn } from "@app/lib/cn";
import { ListUserOrgsResponse } from "@server/routers/org";
import { Check, ChevronsUpDown, Plus } from "lucide-react";
import { Check, ChevronsUpDown, Plus, Building2, Users } from "lucide-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { useUserContext } from "@app/hooks/useUserContext";
@@ -27,94 +33,110 @@ import { useTranslations } from "next-intl";
interface OrgSelectorProps {
orgId?: string;
orgs?: ListUserOrgsResponse["orgs"];
isCollapsed?: boolean;
}
export function OrgSelector({ orgId, orgs }: OrgSelectorProps) {
export function OrgSelector({ orgId, orgs, isCollapsed = false }: OrgSelectorProps) {
const { user } = useUserContext();
const [open, setOpen] = useState(false);
const router = useRouter();
const { env } = useEnvContext();
const t = useTranslations();
return (
const selectedOrg = orgs?.find((org) => org.orgId === orgId);
const orgSelectorContent = (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
size="lg"
variant="secondary"
size={isCollapsed ? "icon" : "lg"}
role="combobox"
aria-expanded={open}
className="w-full h-12 px-3 py-4 bg-neutral hover:bg-neutral"
className={cn(
"shadow-xs",
isCollapsed ? "w-8 h-8" : "w-full h-12 px-3 py-4"
)}
>
<div className="flex items-center justify-between w-full min-w-0">
<div className="flex flex-col items-start min-w-0 flex-1">
<span className="font-bold text-sm">
{t('org')}
</span>
<span className="text-sm text-muted-foreground truncate w-full">
{orgId
? orgs?.find(
(org) =>
org.orgId ===
orgId
)?.name
: t('noneSelected')}
</span>
{isCollapsed ? (
<Building2 className="h-4 w-4" />
) : (
<div className="flex items-center justify-between w-full min-w-0">
<div className="flex items-center min-w-0 flex-1">
<Building2 className="h-4 w-4 mr-2 shrink-0" />
<div className="flex flex-col items-start min-w-0 flex-1">
<span className="font-bold text-sm">
{t('org')}
</span>
<span className="text-sm text-muted-foreground truncate w-full text-left">
{selectedOrg?.name || t('noneSelected')}
</span>
</div>
</div>
<ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50 ml-2" />
</div>
<ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50 ml-2" />
</div>
)}
</Button>
</PopoverTrigger>
<PopoverContent className="w-[280px] p-0">
<Command>
<CommandInput placeholder={t('searchProgress')} />
<CommandEmpty>
{t('orgNotFound2')}
<PopoverContent className="w-[320px] p-0" align="start">
<Command className="rounded-lg">
<CommandInput
placeholder={t('searchProgress')}
className="border-0 focus:ring-0"
/>
<CommandEmpty className="py-6 text-center">
<div className="text-muted-foreground text-sm">
{t('orgNotFound2')}
</div>
</CommandEmpty>
{(!env.flags.disableUserCreateOrg ||
user.serverAdmin) && (
{(!env.flags.disableUserCreateOrg || user.serverAdmin) && (
<>
<CommandGroup heading={t('create')}>
<CommandGroup heading={t('create')} className="py-2">
<CommandList>
<CommandItem
onSelect={(
currentValue
) => {
router.push(
"/setup"
);
onSelect={() => {
setOpen(false);
router.push("/setup");
}}
className="mx-2 rounded-md"
>
<Plus className="mr-2 h-4 w-4" />
{t('setupNewOrg')}
<div className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 mr-3">
<Plus className="h-4 w-4 text-primary" />
</div>
<div className="flex flex-col">
<span className="font-medium">{t('setupNewOrg')}</span>
<span className="text-xs text-muted-foreground">Create a new organization</span>
</div>
</CommandItem>
</CommandList>
</CommandGroup>
<CommandSeparator />
<CommandSeparator className="my-2" />
</>
)}
<CommandGroup heading={t('orgs')}>
<CommandGroup heading={t('orgs')} className="py-2">
<CommandList>
{orgs?.map((org) => (
<CommandItem
key={org.orgId}
onSelect={(
currentValue
) => {
router.push(
`/${org.orgId}/settings`
);
onSelect={() => {
setOpen(false);
router.push(`/${org.orgId}/settings`);
}}
className="mx-2 rounded-md"
>
<div className="flex items-center justify-center w-8 h-8 rounded-lg bg-muted mr-3">
<Users className="h-4 w-4 text-muted-foreground" />
</div>
<div className="flex flex-col flex-1">
<span className="font-medium">{org.name}</span>
<span className="text-xs text-muted-foreground">Organization</span>
</div>
<Check
className={cn(
"mr-2 h-4 w-4",
orgId === org.orgId
? "opacity-100"
: "opacity-0"
"h-4 w-4 text-primary",
orgId === org.orgId ? "opacity-100" : "opacity-0"
)}
/>
{org.name}
</CommandItem>
))}
</CommandList>
@@ -123,4 +145,24 @@ export function OrgSelector({ orgId, orgs }: OrgSelectorProps) {
</PopoverContent>
</Popover>
);
if (isCollapsed) {
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
{orgSelectorContent}
</TooltipTrigger>
<TooltipContent side="right" sideOffset={8}>
<div className="text-center">
<p className="font-medium">{selectedOrg?.name || t('noneSelected')}</p>
<p className="text-xs text-muted-foreground">{t('org')}</p>
</div>
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
}
return orgSelectorContent;
}