Refactor button divider to component-based approach

web/src/components/ui/button-with-dropdown.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { Button, type VariantProps } from "./button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  type DropdownMenuContentProps,
+} from "./dropdown-menu";
+
+interface ButtonWithDropdownProps extends VariantProps<typeof Button> {
+  children: React.ReactNode;
+  menuContent: React.ReactNode;
+  dropdownContentProps?: Omit<DropdownMenuContentProps, "children">;
+  className?: string;
+}
+
+const ButtonWithDropdown = React.forwardRef<HTMLButtonElement, ButtonWithDropdownProps>(
+  ({ children, menuContent, variant, size, dropdownContentProps, className, ...props }, ref) => {
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            ref={ref}
+            variant={variant}
+            size={size}
+            className={className}
+            hasIconDivider
+            {...props}
+          >
+            {children}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent {...dropdownContentProps}>
+          {menuContent}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  }
+);
+
+ButtonWithDropdown.displayName = "ButtonWithDropdown";
+
+export { ButtonWithDropdown };

web/src/components/ui/button.tsx

@@ -34,11 +34,19 @@ const Button = React.forwardRef<
   React.ComponentProps<"button"> &
     VariantProps<typeof buttonVariants> & {
       asChild?: boolean;
+      hasIconDivider?: boolean;
     }
->(({ className, variant, size, asChild = false, ...props }, ref) => {
+>(({ className, variant, size, asChild = false, hasIconDivider = false, ...props }, ref) => {
   const Comp = asChild ? Slot : "button";
 
-  return <Comp ref={ref} data-slot="button" className={cn(buttonVariants({ variant, size, className }))} {...props} />;
+  return (
+    <Comp
+      ref={ref}
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }), hasIconDivider && "has-icon-divider")}
+      {...props}
+    />
+  );
 });
 Button.displayName = "Button";
 

web/src/main.tsx

@@ -52,13 +52,6 @@ function AppInitializer({ children }: { children: React.ReactNode }) {
 }
 
 function Main() {
-  useEffect(() => {
-    // Add has-icon-divider class to buttons with dropdown triggers for styling
-    document
-      .querySelectorAll('button[data-slot="button"]')
-      .forEach((btn) => btn.classList.add('has-icon-divider'));
-  }, []);
-
   return (
     <ErrorBoundary>
       <QueryClientProvider client={queryClient}>