Feature/button icon divider to better highlight multiuse

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/index.css

@@ -369,4 +369,37 @@
   .leaflet-popup-tip {
     background-color: var(--background) !important;
   }
+
+  /* ========================================
+   * Button Icon Divider Styles
+   * Adds vertical divider to buttons with dropdown triggers
+   * ======================================== */
+
+  /* Scope to buttons with dropdown menu triggers */
+  button[data-slot="button"] [data-slot="dropdown-menu-trigger"] {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    margin-left: 6px;      /* space before divider */
+    padding-left: 8px;     /* space after divider */
+  }
+
+  /* Vertical divider */
+  button[data-slot="button"] [data-slot="dropdown-menu-trigger"]::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 1px;
+    height: 1.25em;        /* tweak to taste */
+    background-color: currentColor; /* matches text color */
+    opacity: 0.4;          /* subtle */
+    pointer-events: none;
+  }
+
+  /* Ensure scrollbar space is always reserved */
+  html {
+    overflow-y: scroll;
+  }
 }