1 files changed, 55 insertions, 13 deletions

diff --git a/apps/web/src/components/ui/dropdown-menu.tsx b/apps/web/src/components/ui/dropdown-menu.tsx
index d8a9f594..2d6541b8 100644
--- a/apps/web/src/components/ui/dropdown-menu.tsx
+++ b/apps/web/src/components/ui/dropdown-menu.tsx
@@ -20,7 +20,7 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 const dropdownMenuItemVariants = cva(
-	"relative flex cursor-pointer select-none items-center gap-2 rounded-lg px-2.5 py-2 text-sm text-foreground/85 outline-hidden data-[highlighted]:bg-popover-hover data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+	"relative flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-sm text-foreground outline-hidden data-[highlighted]:bg-popover-hover data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
 	{
 		variants: {
 			variant: {
@@ -66,7 +66,7 @@ const DropdownMenuSubContent = React.forwardRef<
 	<DropdownMenuPrimitive.SubContent
 		ref={ref}
 		className={cn(
-			"bg-popover text-popover-foreground z-50 min-w-32 overflow-hidden rounded-2xl border p-2 shadow-lg",
+			"group/menu bg-popover text-popover-foreground z-50 min-w-32 overflow-hidden rounded-2xl border p-2 shadow-lg",
 			className,
 		)}
 		{...props}
@@ -88,7 +88,7 @@ const DropdownMenuContent = React.forwardRef<
 				e.preventDefault();
 			}}
 			className={cn(
-				"bg-popover text-popover-foreground z-50 min-w-32 overflow-hidden rounded-lg border p-2 shadow-lg",
+				"group/menu bg-popover text-popover-foreground z-50 min-w-32 overflow-hidden rounded-lg border p-1.5 shadow-lg",
 				className,
 			)}
 			{...props}
@@ -101,19 +101,61 @@ const DropdownMenuItem = React.forwardRef<
 	React.ElementRef<typeof DropdownMenuPrimitive.Item>,
 	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
 		inset?: boolean;
+		icon?: React.ReactNode;
 		variant?: VariantProps<typeof dropdownMenuItemVariants>["variant"];
 	}
->(({ className, inset, variant = "default", ...props }, ref) => (
-	<DropdownMenuPrimitive.Item
-		ref={ref}
-		className={cn(
-			dropdownMenuItemVariants({ variant }),
-			inset && "pl-8",
+>(
+	(
+		{
 			className,
-		)}
-		{...props}
-	/>
-));
+			inset,
+			icon,
+			variant = "default",
+			children,
+			asChild,
+			...props
+		},
+		ref,
+	) => {
+		const iconSlot = (
+			<span className="hidden size-4 shrink-0 items-center justify-center group-has-[[data-has-icon]]/menu:flex">
+				{icon}
+			</span>
+		);
+
+		const renderedChildren =
+			asChild && React.isValidElement(children) ? (
+				React.cloneElement(
+					children as React.ReactElement<{ children?: React.ReactNode }>,
+					{},
+					iconSlot,
+					(children as React.ReactElement<{ children?: React.ReactNode }>).props
+						.children,
+				)
+			) : (
+				<>
+					{iconSlot}
+					{children}
+				</>
+			);
+
+		return (
+			<DropdownMenuPrimitive.Item
+				ref={ref}
+				asChild={asChild}
+				data-has-icon={icon ? "" : undefined}
+				className={cn(
+					dropdownMenuItemVariants({ variant }),
+					inset && "pl-8",
+					className,
+				)}
+				{...props}
+			>
+				{renderedChildren}
+			</DropdownMenuPrimitive.Item>
+		);
+	},
+);
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 const DropdownMenuCheckboxItem = React.forwardRef<