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

Merge pull request #49 from Portabase/feat/organization-dropdown

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