Bug fixes and refactoring user dropdown.

This commit is contained in:
charlesgauthereau
2025-12-30 14:02:49 +01:00
parent 07ce5215d4
commit 475e404fae
4 changed files with 33 additions and 14 deletions
+10 -4
View File
@@ -43,13 +43,17 @@ export function ComboBox<T = string>(props: ComboBoxProps<T>) {
<PopoverTrigger asChild> <PopoverTrigger asChild>
{sideBar ? ( {sideBar ? (
<SidebarMenuButton> <SidebarMenuButton>
<label className="max-w-[170px] truncate">
{value ? choices.find((c) => c.value === value)?.label : "Select choice..."} {value ? choices.find((c) => c.value === value)?.label : "Select choice..."}
<ChevronDown className="ml-auto"/> </label>
<ChevronDown className="ml-auto"/>
</SidebarMenuButton> </SidebarMenuButton>
) : ( ) : (
<Button variant="outline" role="combobox" aria-expanded={open} <Button variant="outline" role="combobox" aria-expanded={open}
className="w-full justify-between"> className="w-full justify-between">
{value ? choices.find((c) => c.value === value)?.label : "Select choice..."} <label className="max-w-[170px] truncate">
{value ? choices.find((c) => c.value === value)?.label : "Select choice..."}
</label>
<ChevronDown className="opacity-50"/> <ChevronDown className="opacity-50"/>
</Button> </Button>
)} )}
@@ -59,7 +63,7 @@ export function ComboBox<T = string>(props: ComboBoxProps<T>) {
className="p-0" className="p-0"
align="start" align="start"
sideOffset={4} sideOffset={4}
style={{ width: 'var(--radix-popover-trigger-width)' }} style={{width: 'var(--radix-popover-trigger-width)'}}
> >
<Command> <Command>
@@ -80,7 +84,9 @@ export function ComboBox<T = string>(props: ComboBoxProps<T>) {
} }
}} }}
> >
{choice.label} <label className="max-w-[170px] truncate">
{choice.label}
</label>
<Check <Check
className={cn("ml-auto", value === choice.value ? "opacity-100" : "opacity-0")}/> className={cn("ml-auto", value === choice.value ? "opacity-100" : "opacity-0")}/>
</CommandItem> </CommandItem>
@@ -1,6 +1,6 @@
"use client"; "use client";
import {ChevronUp} from "lucide-react"; import {ChevronsUpDown, ChevronUp} 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";
@@ -35,14 +35,23 @@ export const LoggedInButtonClient = ({
accounts={accounts} accounts={accounts}
providers={providers} providers={providers}
> >
<SidebarMenuButton type="button"> <SidebarMenuButton type="button" className="h-auto justify-between py-2" >
<Avatar className="size-6"> <div className="flex items-center gap-2">
<AvatarFallback>{user.name[0].toUpperCase()}</AvatarFallback> <Avatar className="size-6">
{user.image && <AvatarImage src={user.image}/>} <AvatarFallback>{user.name[0].toUpperCase()}</AvatarFallback>
</Avatar> {user.image && <AvatarImage src={user.image}/>}
</Avatar>
<span className="first-letter:capitalize">{user.name}</span> <div className="flex flex-col items-start">
<ChevronUp className="ml-auto"/> <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}
>
{user.email}
</span>
</div>
</div>
<ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50"/>
</SidebarMenuButton> </SidebarMenuButton>
</LoggedInDropdown> </LoggedInDropdown>
); );
@@ -34,7 +34,6 @@ export function AppSidebar() {
<SidebarMenu className="mb-2"> <SidebarMenu className="mb-2">
<SidebarMenuItem className="p-2"> <SidebarMenuItem className="p-2">
<LoggedInButton/> <LoggedInButton/>
</SidebarMenuItem> </SidebarMenuItem>
</SidebarMenu> </SidebarMenu>
<SideBarFooterCredit/> <SideBarFooterCredit/>
@@ -28,6 +28,7 @@ import {
import {toast} from "sonner"; import {toast} from "sonner";
import {User as BetterAuthUser} from "better-auth"; import {User as BetterAuthUser} from "better-auth";
import {User} from "@/db/schema/02_user"; import {User} from "@/db/schema/02_user";
import {authClient} from "@/lib/auth/auth-client";
export type organizationFormProps = { export type organizationFormProps = {
defaultValues?: OrganizationWithMembers; defaultValues?: OrganizationWithMembers;
@@ -36,6 +37,8 @@ export type organizationFormProps = {
}; };
export const OrganizationForm = (props: organizationFormProps) => { export const OrganizationForm = (props: organizationFormProps) => {
const {data: activeOrganization, refetch: refetchActiveOrga} = authClient.useActiveOrganization();
const {data: organizations, refetch} = authClient.useListOrganizations();
const router = useRouter(); const router = useRouter();
const isCreate = !Boolean(props.defaultValues); const isCreate = !Boolean(props.defaultValues);
@@ -75,6 +78,8 @@ export const OrganizationForm = (props: organizationFormProps) => {
onSuccess: async (result) => { onSuccess: async (result) => {
if (result?.data?.success) { if (result?.data?.success) {
toast.success(result.data.actionSuccess?.message || "Organization updated successfully."); toast.success(result.data.actionSuccess?.message || "Organization updated successfully.");
refetch()
refetchActiveOrga()
router.push("/dashboard/settings"); router.push("/dashboard/settings");
} else { } else {
// @ts-ignore // @ts-ignore