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 {SUPPORTED_PROVIDERS} from "../../../../../../portabase.config";
export const LoggedInButton = async () => {
const user = await currentUser();
const sessions = await getSessions();
src/components/wrappers/dashboard/common/logged-in/logged-in-button.tsx
+4 -2
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,
@@ -42,7 +43,8 @@ export const LoggedInButtonClient = ({
{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
+19 -16
View File
@@ -7,24 +7,24 @@ 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"
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 {
data: activeOrganization,
isPending: isPendingActive,
refetch: refetchActiveOrga
} = authClient.useActiveOrganization()
const [openModal, setOpenModal] = React.useState(false)
const [isOpen, setIsOpen] = React.useState(false)
@@ -57,7 +57,6 @@ export function OrganizationCombobox() {
}
return (
<>
<CreateOrganizationModal
@@ -80,12 +79,14 @@ export function OrganizationCombobox() {
isOpen && "scale-105"
)}>
{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"/>
)}
</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">
{activeOrganization?.name || "Select Organization"}
</span>
@@ -94,9 +95,9 @@ export function OrganizationCombobox() {
</SidebarMenuButton>
</DropdownMenuTrigger>
<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"
side={isMobile ? "bottom" : "right"}
side="bottom"
sideOffset={4}
>
{orgs.map((org) => {
@@ -106,7 +107,7 @@ export function OrganizationCombobox() {
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",
"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"
@@ -132,7 +133,8 @@ 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">
<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>
)}
@@ -144,7 +146,8 @@ export function OrganizationCombobox() {
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">
<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>