From dc26f199f51dd257b3cec4b42fdc4f51669d14a4 Mon Sep 17 00:00:00 2001
From: Joachim Krieger <joachim.13@gmx.de>
Date: Tue, 6 Jan 2026 16:11:33 +0100
Subject: [PATCH] Refactor button divider to component-based approach

---
 .../components/ui/button-with-dropdown.tsx    | 43 +++++++++++++++++++
 web/src/components/ui/button.tsx              | 12 +++++-
 web/src/main.tsx                              |  7 ---
 3 files changed, 53 insertions(+), 9 deletions(-)
 create mode 100644 web/src/components/ui/button-with-dropdown.tsx

diff --git a/web/src/components/ui/button-with-dropdown.tsx b/web/src/components/ui/button-with-dropdown.tsx
new file mode 100644
index 000000000..2b98f325a
--- /dev/null
+++ b/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 };
\ No newline at end of file
diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx
index 13fc5d825..6c7543b23 100644
--- a/web/src/components/ui/button.tsx
+++ b/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";
 
diff --git a/web/src/main.tsx b/web/src/main.tsx
index b34ab76c1..3b3f525d0 100644
--- a/web/src/main.tsx
+++ b/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}>