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
+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();
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
+39 -36
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)
} }
@@ -46,18 +46,17 @@ export function OrganizationCombobox() {
if (isPendingList || isPendingActive) { if (isPendingList || isPendingActive) {
return ( return (
<SidebarMenuButton size="lg" className="pointer-events-none"> <SidebarMenuButton size="lg" className="pointer-events-none">
<Skeleton className="size-8 rounded-lg shrink-0" /> <Skeleton className="size-8 rounded-lg shrink-0"/>
<div className="flex flex-col gap-1.5 flex-1 overflow-hidden"> <div className="flex flex-col gap-1.5 flex-1 overflow-hidden">
<Skeleton className="h-4 w-24" /> <Skeleton className="h-4 w-24"/>
<Skeleton className="h-3 w-16" /> <Skeleton className="h-3 w-16"/>
</div> </div>
<Skeleton className="size-4 shrink-0" /> <Skeleton className="size-4 shrink-0"/>
</SidebarMenuButton> </SidebarMenuButton>
) )
} }
return ( return (
<> <>
<CreateOrganizationModal <CreateOrganizationModal
@@ -80,23 +79,25 @@ export function OrganizationCombobox() {
isOpen && "scale-105" isOpen && "scale-105"
)}> )}>
{activeOrganization?.logo ? ( {activeOrganization?.logo ? (
<img src={activeOrganization.logo} alt={activeOrganization.name} className="size-8 rounded-lg object-cover" /> <img src={activeOrganization.logo} alt={activeOrganization.name}
className="size-8 rounded-lg object-cover"/>
) : ( ) : (
<Building2 className="size-5" /> <Building2 className="size-5"/>
)} )}
</div> </div>
<div className="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden"> <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) => {
@@ -106,7 +107,7 @@ export function OrganizationCombobox() {
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"
@@ -117,12 +118,12 @@ export function OrganizationCombobox() {
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">
@@ -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>