chore(react): split button implementation

apps/client/src/stylesheets/theme-next/forms.css

@@ -17,6 +17,10 @@ button.ck.ck-button:is(.ck-button-action, .ck-button-save, .ck-button-cancel, .c
     padding: 4px 16px;
     background: var(--cmd-button-background-color);
     color: var(--cmd-button-text-color);
+
+    &.dropdown-toggle-split {
+        min-width: unset;
+    }
 }
 
 button.btn.btn-primary:hover,

apps/client/src/widgets/react/Button.tsx

@@ -3,6 +3,7 @@ import type { CSSProperties } from "preact/compat";
 import { useMemo } from "preact/hooks";
 import { memo } from "preact/compat";
 import { CommandNames } from "../../components/app_context";
+import Icon from "./Icon";
 
 export interface ButtonProps {
     name?: string;
@@ -66,7 +67,7 @@ const Button = memo(({ name, buttonRef, className, text, onClick, keyboardShortc
             data-trigger-command={triggerCommand}
             {...restProps}
         >
-            {icon && <span className={`bx ${icon}`}></span>}
+            {icon && <Icon icon={`bx ${icon}`} />}
             {text} {shortcutElements}
         </button>
     );
@@ -80,4 +81,28 @@ export function ButtonGroup({ children }: { children: ComponentChildren }) {
     )
 }
 
+export function SplitButton({ text, icon, children, onClick }: {
+    text: string;
+    icon?: string;
+    /** Click handler for the main button component (not the split). */
+    onClick?: () => void;
+    /** The children inside the dropdown of the split. */
+    children: ComponentChildren;
+}) {
+    return (
+        <ButtonGroup>
+            <button type="button" class="btn btn-secondary" onClick={onClick}>
+                {icon && <Icon icon={`bx ${icon}`} />}
+                {text}
+            </button>
+            <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+                <span class="visually-hidden">Toggle Dropdown</span>
+            </button>
+            <ul class="dropdown-menu">
+                {children}
+            </ul>
+        </ButtonGroup>
+    )
+}
+
 export default Button;