fix(mobile): use a native split button for Android merges

apps/mobile/assets/icons/chevron-down.xml

@@ -0,0 +1,4 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp" android:height="24dp" android:viewportWidth="24" android:viewportHeight="24">
+    <path android:fillColor="#FFFFFFFF" android:pathData="M7.41,8.59L12,13.17l4.59,-4.58L18,10l-6,6 -6,-6z" />
+</vector>

apps/mobile/src/components/ui/MenuPopup.android.tsx

@@ -55,7 +55,9 @@ function MenuIcon(props: {
   );
 }
 
-export function MenuPopup(props: MenuPopupProps) {
+export function MenuPopupItems(
+  props: Pick<MenuPopupProps, "menuWidth" | "actions" | "title" | "parent" | "onPress" | "onBack">,
+) {
   const { appearance, themeVariables: colors } = useAppearancePreferences();
   const { scale, menuItemHeight } = useAndroidControlSizing();
   const body = resolveScaledTextRole("body", appearance.baseFontSize);
@@ -64,7 +66,7 @@ export function MenuPopup(props: MenuPopupProps) {
   const muted = colors["--color-foreground-muted"];
   // A fixed native item height clips wrapped labels; a minimum lets each row grow.
   const itemModifiers = [width(props.menuWidth), defaultMinSize({ minHeight: menuItemHeight })];
-  const items = (
+  return (
     <>
       {props.parent ? (
         <DropdownMenuItem onClick={props.onBack} modifiers={itemModifiers}>
@@ -146,6 +148,11 @@ export function MenuPopup(props: MenuPopupProps) {
       ))}
     </>
   );
+}
+
+export function MenuPopup(props: MenuPopupProps) {
+  const { themeVariables: colors } = useAppearancePreferences();
+  const items = <MenuPopupItems {...props} />;
   if (props.inline) {
     return (
       <NativeThemeHost

apps/mobile/src/components/ui/SplitButton.android.tsx

@@ -0,0 +1,145 @@
+import {
+  Box,
+  DropdownMenu,
+  Icon,
+  LoadingIndicator,
+  RNHostView,
+  Row,
+  SplitButtonLayout,
+  Text,
+} from "@expo/ui/jetpack-compose";
+import {
+  defaultMinSize,
+  fillMaxWidth,
+  rotate,
+  semantics,
+  size,
+} from "@expo/ui/jetpack-compose/modifiers";
+import { useState } from "react";
+import { Pressable } from "react-native";
+
+import { useScaledTextRole } from "../../features/settings/appearance/useScaledTextRole";
+import { SymbolView } from "./AppSymbol";
+import { Button } from "./Button";
+import { MenuPopupItems } from "./MenuPopup.android";
+import { NativeThemeHost } from "./NativeThemeHost.android";
+import type { SplitButtonProps } from "./SplitButton.types";
+import { useAndroidControlSizing } from "./useAndroidControlSizing";
+import { useControlTheme } from "./useControlTheme";
+
+export function SplitButton(props: SplitButtonProps) {
+  const { colors } = useControlTheme();
+  const typography = useScaledTextRole("footnote");
+  const { scale, iconSize, mediumIconSize, menuWidth } = useAndroidControlSizing();
+  const [expanded, setExpanded] = useState(false);
+  if (props.actions.length === 0) return <Button {...props} tone="primary" fullWidth />;
+  const enabled = !props.disabled && !props.loading;
+  const menuEnabled = props.actions.some((action) => !action.attributes?.disabled);
+  const buttonColors = {
+    containerColor: colors["--color-primary"],
+    contentColor: colors["--color-primary-foreground"],
+    disabledContainerColor: colors["--color-subtle-strong"],
+    disabledContentColor: colors["--color-foreground-muted"],
+  };
+  // A usable menu beside a disabled action still takes the disabled palette, so the pair reads as one control.
+  const trailingColors = enabled
+    ? buttonColors
+    : {
+        ...buttonColors,
+        containerColor: buttonColors.disabledContainerColor,
+        contentColor: buttonColors.disabledContentColor,
+      };
+  const label = (
+    <Row verticalAlignment="center">
+      {props.loading ? (
+        <>
+          <LoadingIndicator
+            modifiers={[size(mediumIconSize, mediumIconSize)]}
+            color={colors["--color-foreground-muted"]}
+          />
+          <Box modifiers={[size(8 * scale, 1)]} />
+        </>
+      ) : props.icon ? (
+        <>
+          {/* The glyph host consumes touches, so it runs the action itself. */}
+          <RNHostView matchContents modifiers={[size(mediumIconSize, mediumIconSize)]}>
+            <Pressable
+              accessible={false}
+              disabled={!enabled}
+              onPress={props.onPress}
+              importantForAccessibility="no-hide-descendants"
+              style={{ width: mediumIconSize, height: mediumIconSize }}
+            >
+              <SymbolView
+                name={props.icon}
+                size={mediumIconSize}
+                tintColor={enabled ? buttonColors.contentColor : buttonColors.disabledContentColor}
+              />
+            </Pressable>
+          </RNHostView>
+          <Box modifiers={[size(8 * scale, 1)]} />
+        </>
+      ) : null}
+      <Text style={{ ...typography, fontWeight: "500" }}>{props.label}</Text>
+    </Row>
+  );
+  return (
+    <NativeThemeHost
+      matchContents={{ vertical: true }}
+      ignoreSafeAreaKeyboardInsets
+      style={{ width: "100%" }}
+    >
+      <SplitButtonLayout modifiers={[fillMaxWidth()]}>
+        <SplitButtonLayout.LeadingButton
+          enabled={enabled}
+          onClick={props.onPress}
+          colors={buttonColors}
+          modifiers={[
+            fillMaxWidth(),
+            defaultMinSize({ minHeight: 48 }),
+            semantics({ contentDescription: props.accessibilityLabel ?? props.label }),
+          ]}
+        >
+          {label}
+        </SplitButtonLayout.LeadingButton>
+        <SplitButtonLayout.TrailingButton
+          checked={expanded}
+          onCheckedChange={setExpanded}
+          enabled={menuEnabled}
+          colors={trailingColors}
+          modifiers={[
+            defaultMinSize({ minWidth: 48, minHeight: 48 }),
+            semantics({ contentDescription: props.menuTitle }),
+          ]}
+        >
+          <DropdownMenu
+            expanded={expanded && menuEnabled}
+            onDismissRequest={() => setExpanded(false)}
+            color={colors["--color-card-alt"]}
+          >
+            <DropdownMenu.Trigger>
+              <Icon
+                source={require("../../../assets/icons/chevron-down.xml")}
+                size={iconSize}
+                modifiers={[rotate(expanded ? 180 : 0)]}
+              />
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Items>
+              <MenuPopupItems
+                menuWidth={menuWidth}
+                actions={props.actions}
+                title={props.menuTitle}
+                parent={null}
+                onPress={(action) => {
+                  setExpanded(false);
+                  if (action.id !== undefined) props.onPressAction(action.id);
+                }}
+                onBack={() => {}}
+              />
+            </DropdownMenu.Items>
+          </DropdownMenu>
+        </SplitButtonLayout.TrailingButton>
+      </SplitButtonLayout>
+    </NativeThemeHost>
+  );
+}

apps/mobile/src/components/ui/SplitButton.tsx

@@ -0,0 +1,65 @@
+import { Pressable, View } from "react-native";
+import { AppActivityIndicator } from "./AppActivityIndicator";
+import { AppText } from "./AppText";
+import { SymbolView } from "./AppSymbol";
+import { Menu } from "./Menu";
+import type { SplitButtonProps } from "./SplitButton.types";
+
+export function SplitButton(props: SplitButtonProps) {
+  const active = !props.disabled;
+  const menuEnabled = props.actions.some((action) => !action.attributes?.disabled);
+  return (
+    <View
+      className={`flex-row overflow-hidden rounded-xl border-continuous ${active ? "bg-prominent-action" : "bg-subtle-strong"}`}
+    >
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={props.accessibilityLabel ?? props.label}
+        accessibilityState={{ disabled: Boolean(props.disabled), busy: Boolean(props.loading) }}
+        disabled={props.disabled}
+        onPress={props.onPress}
+        className="min-h-11 min-w-0 flex-1 flex-row items-center justify-center gap-2 px-3 py-2 active:opacity-70"
+      >
+        {props.loading ? (
+          <AppActivityIndicator size="small" colorClassName="accent-icon-muted" />
+        ) : props.icon ? (
+          <SymbolView
+            name={props.icon}
+            size={16}
+            tintColorClassName={active ? "accent-prominent-action-foreground" : "accent-icon-muted"}
+          />
+        ) : null}
+        <AppText
+          className={`shrink text-center text-sm font-t3-semibold ${active ? "text-prominent-action-foreground" : "text-foreground-muted"}`}
+        >
+          {props.label}
+        </AppText>
+      </Pressable>
+      {props.actions.length > 0 ? (
+        <View pointerEvents={menuEnabled ? "auto" : "none"}>
+          <Menu
+            title={props.menuTitle}
+            actions={props.actions}
+            onPressAction={({ nativeEvent }) => props.onPressAction(nativeEvent.event)}
+          >
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel={props.menuTitle}
+              accessibilityState={{ disabled: !menuEnabled }}
+              disabled={!menuEnabled}
+              className="min-h-11 w-11 items-center justify-center border-l border-border-subtle"
+            >
+              <SymbolView
+                name="chevron.down"
+                size={13}
+                tintColorClassName={
+                  active ? "accent-prominent-action-foreground" : "accent-icon-muted"
+                }
+              />
+            </Pressable>
+          </Menu>
+        </View>
+      ) : null}
+    </View>
+  );
+}

apps/mobile/src/components/ui/SplitButton.types.ts

@@ -0,0 +1,14 @@
+import type { MenuAction } from "@react-native-menu/menu";
+import type { AppSymbolName } from "./AppSymbol";
+
+export interface SplitButtonProps {
+  readonly label: string;
+  readonly accessibilityLabel?: string;
+  readonly icon?: AppSymbolName;
+  readonly disabled?: boolean;
+  readonly loading?: boolean;
+  readonly onPress: () => void;
+  readonly menuTitle: string;
+  readonly actions: MenuAction[];
+  readonly onPressAction: (id: string) => void;
+}