fix: clean up organization selector

izadoesdev · izadoesdev · commit 142452de3516 · 2025-08-08T20:05:22.000+03:00
diff --git a/apps/dashboard/components/layout/organization-selector.tsx b/apps/dashboard/components/layout/organization-selector.tsx
@@ -4,11 +4,12 @@ import {
 	CaretDownIcon,
 	CheckIcon,
 	PlusIcon,
+	SpinnerGapIcon,
 	UserIcon,
 	UsersIcon,
 } from '@phosphor-icons/react';
 import { useRouter } from 'next/navigation';
-import * as React from 'react';
+import { useCallback, useState } from 'react';
 import { CreateOrganizationDialog } from '@/components/organizations/create-organization-dialog';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
@@ -32,19 +33,43 @@ const getOrganizationInitials = (name: string) => {
 		.slice(0, 2);
 };
 
+function filterOrganizations<T extends { name: string; slug?: string | null }>(
+	orgs: T[] | undefined,
+	query: string
+): T[] {
+	if (!orgs || orgs.length === 0) {
+		return [];
+	}
+	if (!query) {
+		return orgs;
+	}
+	const q = query.toLowerCase();
+	const filtered: T[] = [];
+	for (const org of orgs) {
+		const nameMatch = org.name.toLowerCase().includes(q);
+		const slugMatch = org.slug ? org.slug.toLowerCase().includes(q) : false;
+		if (nameMatch || slugMatch) {
+			filtered.push(org);
+		}
+	}
+	return filtered;
+}
+
 export function OrganizationSelector() {
 	const {
 		organizations,
 		activeOrganization,
 		isLoading,
 		setActiveOrganization,
 		isSettingActiveOrganization,
+		hasError,
 	} = useOrganizations();
 	const router = useRouter();
-	const [isOpen, setIsOpen] = React.useState(false);
-	const [showCreateDialog, setShowCreateDialog] = React.useState(false);
+	const [isOpen, setIsOpen] = useState(false);
+	const [showCreateDialog, setShowCreateDialog] = useState(false);
+	const [query, setQuery] = useState('');
 
-	const handleSelectOrganization = React.useCallback(
+	const handleSelectOrganization = useCallback(
 		(organizationId: string | null) => {
 			if (organizationId === activeOrganization?.id) {
 				return;
@@ -58,21 +83,23 @@ export function OrganizationSelector() {
 		[activeOrganization, setActiveOrganization]
 	);
 
-	const handleCreateOrganization = React.useCallback(() => {
+	const handleCreateOrganization = useCallback(() => {
 		setShowCreateDialog(true);
 		setIsOpen(false);
 	}, []);
 
-	const handleManageOrganizations = React.useCallback(() => {
+	const handleManageOrganizations = useCallback(() => {
 		router.push('/organizations');
 		setIsOpen(false);
 	}, [router]);
 
+	const filteredOrganizations = filterOrganizations(organizations, query);
+
 	if (isLoading) {
 		return (
 			<div className="rounded border border-border/50 bg-accent/30 px-2 py-2">
 				<div className="flex items-center gap-3">
-					<Skeleton className="h-8 w-8 rounded-full" />
+					<Skeleton className="h-8 w-8 rounded" />
 					<div className="space-y-1">
 						<Skeleton className="h-4 w-24 rounded" />
 						<Skeleton className="h-3 w-16 rounded" />
@@ -82,19 +109,40 @@ export function OrganizationSelector() {
 		);
 	}
 
+	if (hasError) {
+		return (
+			<div className="rounded border border-destructive/50 bg-destructive/10 px-3 py-2 text-destructive">
+				<div className="flex items-center gap-2 text-sm">
+					<span>Failed to load workspaces</span>
+				</div>
+			</div>
+		);
+	}
+
 	return (
 		<>
-			<DropdownMenu onOpenChange={setIsOpen} open={isOpen}>
+			<DropdownMenu
+				onOpenChange={(open) => {
+					setIsOpen(open);
+					if (!open) {
+						setQuery('');
+					}
+				}}
+				open={isOpen}
+			>
 				<DropdownMenuTrigger asChild>
 					<Button
-						className="h-auto w-full p-0 hover:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0"
+						aria-expanded={isOpen}
+						aria-haspopup="listbox"
+						className="h-auto w-full p-0 hover:bg-transparent"
 						disabled={isSettingActiveOrganization}
+						type="button"
 						variant="ghost"
 					>
 						<div
 							className={cn(
-								'w-full rounded border border-border/50 bg-accent/30 px-2 py-2 transition-all duration-200',
-								'hover:border-border/70 hover:bg-accent/50',
+								'w-full rounded border border-border/50 bg-accent/30 px-2 py-2 transition-colors',
+								'hover:border-border/70 hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50',
 								isSettingActiveOrganization && 'cursor-not-allowed opacity-70',
 								isOpen && 'border-border/70 bg-accent/50'
 							)}
@@ -111,35 +159,41 @@ export function OrganizationSelector() {
 												getOrganizationInitials(activeOrganization.name)
 											) : (
 												<UserIcon
-													className="h-4 w-4"
-													size={32}
+													className="not-dark:text-primary"
 													weight="duotone"
 												/>
 											)}
 										</AvatarFallback>
 									</Avatar>
 									<div className="flex min-w-0 flex-col text-left">
-										<span className="max-w-[140px] truncate font-medium text-sm">
+										<span className="max-w-[140px] truncate font-medium text-sm sm:max-w-[180px]">
 											{activeOrganization?.name || 'Personal'}
 										</span>
-										<span className="max-w-[140px] truncate text-muted-foreground text-xs">
+										<span className="max-w-[140px] truncate text-muted-foreground text-xs sm:max-w-[180px]">
 											{activeOrganization?.slug || 'Your workspace'}
 										</span>
 									</div>
 								</div>
-								<CaretDownIcon
-									className={cn(
-										'h-4 w-4 text-muted-foreground transition-transform duration-200',
-										isOpen && 'rotate-180'
-									)}
-									size={32}
-									weight="duotone"
-								/>
+								{isSettingActiveOrganization ? (
+									<SpinnerGapIcon
+										aria-label="Switching workspace"
+										className="h-4 w-4 animate-spin text-muted-foreground"
+										weight="duotone"
+									/>
+								) : (
+									<CaretDownIcon
+										className={cn(
+											'h-4 w-4 text-muted-foreground transition-transform duration-200',
+											isOpen && 'rotate-180'
+										)}
+										weight="fill"
+									/>
+								)}
 							</div>
 						</div>
 					</Button>
 				</DropdownMenuTrigger>
-				<DropdownMenuContent align="start" className="w-64 p-1" sideOffset={4}>
+				<DropdownMenuContent align="start" className="w-72 p-1" sideOffset={4}>
 					{/* Personal Workspace */}
 					<DropdownMenuItem
 						className={cn(
@@ -151,7 +205,7 @@ export function OrganizationSelector() {
 					>
 						<Avatar className="h-6 w-6">
 							<AvatarFallback className="bg-muted text-xs">
-								<UserIcon className="h-4 w-4" size={32} weight="duotone" />
+								<UserIcon className="not-dark:text-primary" weight="duotone" />
 							</AvatarFallback>
 						</Avatar>
 						<div className="flex min-w-0 flex-1 flex-col">
@@ -162,17 +216,16 @@ export function OrganizationSelector() {
 						</div>
 						{!activeOrganization && (
 							<CheckIcon
-								className="h-4 w-4 text-primary"
-								size={32}
+								className="h-4 w-4 not-dark:text-primary"
 								weight="duotone"
 							/>
 						)}
 					</DropdownMenuItem>
 
-					{organizations && organizations.length > 0 && (
-						<>
+					{filteredOrganizations && filteredOrganizations.length > 0 && (
+						<div className="flex flex-col gap-1">
 							<DropdownMenuSeparator className="my-1" />
-							{organizations.map((org) => (
+							{filteredOrganizations.map((org) => (
 								<DropdownMenuItem
 									className={cn(
 										'flex cursor-pointer items-center gap-3 rounded px-2 py-2 transition-colors',
@@ -200,35 +253,36 @@ export function OrganizationSelector() {
 									{activeOrganization?.id === org.id && (
 										<CheckIcon
 											className="h-4 w-4 text-primary"
-											size={32}
 											weight="duotone"
 										/>
 									)}
 								</DropdownMenuItem>
 							))}
-						</>
+						</div>
+					)}
+
+					{filteredOrganizations.length === 0 && (
+						<div className="px-2 py-2 text-muted-foreground text-xs">
+							No workspaces match “{query}”.
+						</div>
 					)}
 
 					<DropdownMenuSeparator className="my-1" />
 					<DropdownMenuItem
 						className="flex cursor-pointer items-center gap-3 rounded px-2 py-2 transition-colors focus:bg-accent focus:text-accent-foreground"
 						onClick={handleCreateOrganization}
 					>
-						<div className="flex h-6 w-6 items-center justify-center rounded-full bg-muted">
-							<PlusIcon className="h-4 w-4 text-muted-foreground" size={32} />
+						<div className="flex h-6 w-6 items-center justify-center rounded bg-muted">
+							<PlusIcon className="not-dark:text-primary" />
 						</div>
 						<span className="font-medium text-sm">Create Organization</span>
 					</DropdownMenuItem>
 					<DropdownMenuItem
 						className="flex cursor-pointer items-center gap-3 rounded px-2 py-2 transition-colors focus:bg-accent focus:text-accent-foreground"
 						onClick={handleManageOrganizations}
 					>
-						<div className="flex h-6 w-6 items-center justify-center rounded-full bg-muted">
-							<UsersIcon
-								className="h-4 w-4 text-muted-foreground"
-								size={32}
-								weight="duotone"
-							/>
+						<div className="flex h-6 w-6 items-center justify-center rounded bg-muted">
+							<UsersIcon className="not-dark:text-primary" weight="duotone" />
 						</div>
 						<span className="font-medium text-sm">Manage Organizations</span>
 					</DropdownMenuItem>
diff --git a/apps/dashboard/hooks/use-organizations.ts b/apps/dashboard/hooks/use-organizations.ts
@@ -2,6 +2,8 @@ import { authClient } from '@databuddy/auth/client';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
 
+export type OrganizationRole = 'owner' | 'admin' | 'member';
+
 type CreateOrganizationData = {
 	name: string;
 	slug?: string;
@@ -18,19 +20,18 @@ type UpdateOrganizationData = {
 
 type InviteMemberData = {
 	email: string;
-	role: 'owner' | 'admin' | 'member';
+	role: OrganizationRole;
 	organizationId?: string;
 	resend?: boolean;
 };
 
 export type UpdateMemberData = {
 	memberId: string;
-	role: 'owner' | 'admin' | 'member';
+	role: OrganizationRole;
 	organizationId?: string;
 };
 
 const QUERY_KEYS = {
-	organization: (slug: string) => ['organization', slug] as const,
 	organizationMembers: (orgId: string) =>
 		['organizations', orgId, 'members'] as const,
 	organizationInvitations: (orgId: string) =>
@@ -228,13 +229,15 @@ export function useOrganizations() {
 		hasError: !!organizationsError || !!activeOrganizationError,
 
 		createOrganization: createOrganizationMutation.mutate,
+		createOrganizationAsync: createOrganizationMutation.mutateAsync,
 		updateOrganization: updateOrganizationMutation.mutate,
 		updateOrganizationAsync: updateOrganizationMutation.mutateAsync,
 		deleteOrganization: deleteOrganizationMutation.mutate,
 		deleteOrganizationAsync: deleteOrganizationMutation.mutateAsync,
 		setActiveOrganization: setActiveOrganizationMutation.mutate,
 		setActiveOrganizationAsync: setActiveOrganizationMutation.mutateAsync,
 		uploadOrganizationLogo: uploadOrganizationLogoMutation.mutate,
+		uploadOrganizationLogoAsync: uploadOrganizationLogoMutation.mutateAsync,
 
 		isCreatingOrganization: createOrganizationMutation.isPending,
 		isUpdatingOrganization: updateOrganizationMutation.isPending,
@@ -346,8 +349,11 @@ export function useOrganizationMembers(organizationId: string) {
 		refetch,
 
 		inviteMember: inviteMemberMutation.mutate,
+		inviteMemberAsync: inviteMemberMutation.mutateAsync,
 		updateMember: updateMemberMutation.mutate,
+		updateMemberAsync: updateMemberMutation.mutateAsync,
 		removeMember: removeMemberMutation.mutate,
+		removeMemberAsync: removeMemberMutation.mutateAsync,
 
 		isInvitingMember: inviteMemberMutation.isPending,
 		isUpdatingMember: updateMemberMutation.isPending,
@@ -407,6 +413,7 @@ export function useOrganizationInvitations(organizationId: string) {
 		refetch,
 
 		cancelInvitation: cancelInvitationMutation.mutate,
+		cancelInvitationAsync: cancelInvitationMutation.mutateAsync,
 
 		isCancellingInvitation: cancelInvitationMutation.isPending,
 	};
@@ -480,7 +487,9 @@ export function useUserInvitations() {
 		refetch,
 
 		acceptInvitation: acceptInvitationMutation.mutate,
+		acceptInvitationAsync: acceptInvitationMutation.mutateAsync,
 		rejectInvitation: rejectInvitationMutation.mutate,
+		rejectInvitationAsync: rejectInvitationMutation.mutateAsync,
 
 		isAcceptingInvitation: acceptInvitationMutation.isPending,
 		isRejectingInvitation: rejectInvitationMutation.isPending,
