External/portabase
1
0
Fork 0
mirror of https://github.com/Portabase/portabase.git synced 2026-07-14 11:16:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: adjust organisation dropdown size.

Browse Source
This commit is contained in:
killian-larcher
2026-01-28 19:48:40 +01:00
parent 1760c1b852
commit 7fcb3f2c31
3 changed files with 110 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/wrappers/dashboard/common/logged-in/logged-in-button.server.tsx
+2 -1
View File
@@ -3,6 +3,7 @@ import {getAccounts, getSession, getSessions} from "@/lib/auth/auth";
import {LoggedInButtonClient} from "./logged-in-button";
import {SUPPORTED_PROVIDERS} from "../../../../../../portabase.config";
export const LoggedInButton = async () => {
const user = await currentUser();
const sessions = await getSessions();
@@ -16,7 +17,7 @@ export const LoggedInButton = async () => {
<LoggedInButtonClient
user={user}
sessions={sessions}
// @ts-ignore
// @ts-ignore
currentSession={currentSession.session}
accounts={accounts}
providers={SUPPORTED_PROVIDERS.filter((p) => p.isActive)}
src/components/wrappers/dashboard/common/logged-in/logged-in-button.tsx
+5 -3
View File
@@ -1,6 +1,6 @@
"use client";
import {ChevronsUpDown, ChevronUp} from "lucide-react";
import {ChevronsUpDown} from "lucide-react";
import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
import {SidebarMenuButton} from "@/components/ui/sidebar";
import {LoggedInDropdown} from "./logged-in-dropdown";
@@ -15,6 +15,7 @@ type LoggedInButtonClientProps = {
providers: AuthProviderConfig[]
}
export const LoggedInButtonClient = ({
user,
sessions,
@@ -35,14 +36,15 @@ export const LoggedInButtonClient = ({
accounts={accounts}
providers={providers}
>
<SidebarMenuButton type="button" className="h-auto justify-between py-2" >
<SidebarMenuButton type="button" className="h-auto justify-between py-2">
<div className="flex items-center gap-2">
<Avatar className="size-6">
<AvatarFallback>{user.name[0].toUpperCase()}</AvatarFallback>
{user.image && <AvatarImage src={user.image}/>}
</Avatar>
<div className="flex flex-col items-start">
<span className="text-sm font-medium first-letter:capitalize max-w-[170px] truncate">{user.name}</span>
<span
className="text-sm font-medium first-letter:capitalize max-w-[170px] truncate">{user.name}</span>
<span
className="text-xs text-muted-foreground max-w-[170px] truncate"
title={user.email}
src/components/wrappers/dashboard/organization/organization-combobox.tsx
+103 -100
View File
@@ -1,36 +1,36 @@
"use client"
import * as React from "react"
import { Building2, Check, ChevronsUpDown, Plus } from "lucide-react"
import { useRouter } from "next/navigation"
import { authClient } from "@/lib/auth/auth-client"
import { cn } from "@/lib/utils"
import {Building2, Check, ChevronsUpDown, Plus} from "lucide-react"
import {useRouter} from "next/navigation"
import {authClient} from "@/lib/auth/auth-client"
import {cn} from "@/lib/utils"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
SidebarMenuButton,
useSidebar,
SidebarMenuButton, useSidebar,
} from "@/components/ui/sidebar"
import { CreateOrganizationModal } from "@/components/wrappers/dashboard/organization/create-organisation-modal"
import { Skeleton } from "@/components/ui/skeleton"
import {CreateOrganizationModal} from "@/components/wrappers/dashboard/organization/create-organisation-modal"
import {Skeleton} from "@/components/ui/skeleton"
export function OrganizationCombobox() {
const router = useRouter()
const { isMobile, state } = useSidebar()
const { data: organizations, isPending: isPendingList, refetch } = authClient.useListOrganizations()
const { data: activeOrganization, isPending: isPendingActive, refetch: refetchActiveOrga } = authClient.useActiveOrganization()
const {isMobile, state} = useSidebar()
const {data: organizations, isPending: isPendingList, refetch} = authClient.useListOrganizations()
const {
data: activeOrganization,
isPending: isPendingActive,
refetch: refetchActiveOrga
} = authClient.useActiveOrganization()
const [openModal, setOpenModal] = React.useState(false)
const [isOpen, setIsOpen] = React.useState(false)
const handleSelect = async (slug: string) => {
if (activeOrganization?.slug === slug) return
await authClient.organization.setActive({ organizationSlug: slug })
await authClient.organization.setActive({organizationSlug: slug})
router.refresh()
setIsOpen(false)
}
@@ -41,90 +41,91 @@ export function OrganizationCombobox() {
router.refresh();
};
const orgs = organizations || []
if (isPendingList || isPendingActive) {
return (
<SidebarMenuButton size="lg" className="pointer-events-none">
<Skeleton className="size-8 rounded-lg shrink-0" />
<div className="flex flex-col gap-1.5 flex-1 overflow-hidden">
<Skeleton className="h-4 w-24" />
<Skeleton className="h-3 w-16" />
</div>
<Skeleton className="size-4 shrink-0" />
</SidebarMenuButton>
)
}
const orgs = organizations || []
if (isPendingList || isPendingActive) {
return (
<>
<CreateOrganizationModal
open={openModal}
onSuccess={handleReload}
onOpenChange={setOpenModal}
/>
<DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
<DropdownMenuTrigger asChild>
<SidebarMenuButton
size="lg"
className={cn(
"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground transition-all duration-200 ease-in-out",
state === "collapsed" && "justify-center p-0"
<SidebarMenuButton size="lg" className="pointer-events-none">
<Skeleton className="size-8 rounded-lg shrink-0"/>
<div className="flex flex-col gap-1.5 flex-1 overflow-hidden">
<Skeleton className="h-4 w-24"/>
<Skeleton className="h-3 w-16"/>
</div>
<Skeleton className="size-4 shrink-0"/>
</SidebarMenuButton>
)
}
return (
<>
<CreateOrganizationModal
open={openModal}
onSuccess={handleReload}
onOpenChange={setOpenModal}
/>
<DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
<DropdownMenuTrigger asChild>
<SidebarMenuButton
size="lg"
className={cn(
"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground transition-all duration-200 ease-in-out",
state === "collapsed" && "justify-center p-0"
)}
>
<div className={cn(
"flex aspect-square size-8 items-center justify-center rounded-lg text-white shadow-sm transition-transform duration-200",
activeOrganization?.logo ? "bg-transparent" : "bg-orange-500",
isOpen && "scale-105"
)}>
{activeOrganization?.logo ? (
<img src={activeOrganization.logo} alt={activeOrganization.name}
className="size-8 rounded-lg object-cover"/>
) : (
<Building2 className="size-5"/>
)}
>
<div className={cn(
"flex aspect-square size-8 items-center justify-center rounded-lg text-white shadow-sm transition-transform duration-200",
activeOrganization?.logo ? "bg-transparent" : "bg-orange-500",
isOpen && "scale-105"
)}>
{activeOrganization?.logo ? (
<img src={activeOrganization.logo} alt={activeOrganization.name} className="size-8 rounded-lg object-cover" />
) : (
<Building2 className="size-5" />
)}
</div>
<div className="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
</div>
<div
className="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
<span className="truncate font-semibold tracking-tight">
{activeOrganization?.name || "Select Organization"}
</span>
</div>
<ChevronsUpDown className="ml-auto size-4 opacity-50 group-data-[collapsible=icon]:hidden" />
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
className="w-[--radix-dropdown-menu-trigger-width] min-w-64 rounded-xl border-2 border-border bg-popover shadow-none"
align="start"
side={isMobile ? "bottom" : "right"}
sideOffset={4}
>
{orgs.map((org) => {
const isActive = activeOrganization?.id === org.id;
return (
<DropdownMenuItem
key={org.id}
onClick={() => handleSelect(org.slug)}
className={cn(
"group gap-1 p-1 cursor-pointer rounded-lg mb-1 last:mb-0 transition-colors",
isActive
? "bg-orange-500/10 text-orange-600 dark:text-orange-400 border border-orange-500/20"
: "focus:bg-accent hover:bg-accent/50 border border-transparent"
)}>
<div className={cn(
"flex size-9 items-center justify-center rounded-md border shadow-sm transition-all group-hover:shadow-md",
org.logo ? "bg-transparent border-transparent" : "",
isActive && !org.logo ? "bg-orange-500 text-white border-orange-500/30" : "bg-muted/50 border-border"
)}>
{org.logo ? (
<img src={org.logo} alt={org.name} className="size-9 rounded-md object-cover" />
) : (
<Building2 className={cn(
"size-5",
isActive ? "text-white" : "text-muted-foreground"
)} />
)}
</div>
</div>
<ChevronsUpDown className="ml-auto size-4 opacity-50 group-data-[collapsible=icon]:hidden"/>
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
className="min-w-[var(--radix-popper-anchor-width)] rounded-xl border-2 border-border bg-popover shadow-none"
align="start"
side="bottom"
sideOffset={4}
>
{orgs.map((org) => {
const isActive = activeOrganization?.id === org.id;
return (
<DropdownMenuItem
key={org.id}
onClick={() => handleSelect(org.slug)}
className={cn(
"group gap-2 p-1 cursor-pointer rounded-lg mb-1 last:mb-0 transition-colors",
isActive
? "bg-orange-500/10 text-orange-600 dark:text-orange-400 border border-orange-500/20"
: "focus:bg-accent hover:bg-accent/50 border border-transparent"
)}>
<div className={cn(
"flex size-9 items-center justify-center rounded-md border shadow-sm transition-all group-hover:shadow-md",
org.logo ? "bg-transparent border-transparent" : "",
isActive && !org.logo ? "bg-orange-500 text-white border-orange-500/30" : "bg-muted/50 border-border"
)}>
{org.logo ? (
<img src={org.logo} alt={org.name} className="size-9 rounded-md object-cover"/>
) : (
<Building2 className={cn(
"size-5",
isActive ? "text-white" : "text-muted-foreground"
)}/>
)}
</div>
<div className="flex flex-col gap-0.5">
<span className={cn(
"text-sm max-w-42.5 truncate font-medium leading-none",
@@ -132,20 +133,22 @@ export function OrganizationCombobox() {
)}>{org.name}</span>
</div>
{isActive && (
<div className="ml-auto flex size-5 items-center justify-center rounded-full bg-orange-500 shadow-sm">
<Check className="size-3 text-white" strokeWidth={3} />
<div
className="ml-auto flex size-5 items-center justify-center rounded-full bg-orange-500 shadow-sm">
<Check className="size-3 text-white" strokeWidth={3}/>
</div>
)}
</DropdownMenuItem>
)
})}
<DropdownMenuSeparator className="my-2 bg-border/50" />
<DropdownMenuSeparator className="my-2 bg-border/50"/>
<DropdownMenuItem
className="gap-3 p-2.5 cursor-pointer text-muted-foreground focus:text-foreground group rounded-lg"
onClick={() => setOpenModal(true)}
>
<div className="flex size-9 items-center justify-center rounded-md border border-dashed border-muted-foreground/30 bg-background transition-colors group-hover:border-primary/50 group-hover:bg-primary/5">
<Plus className="size-4" />
<div
className="flex size-9 items-center justify-center rounded-md border border-dashed border-muted-foreground/30 bg-background transition-colors group-hover:border-primary/50 group-hover:bg-primary/5">
<Plus className="size-4"/>
</div>
<div className="font-medium">Create new organization</div>
</DropdownMenuItem>