refactor(mobile): expose shared icon button and search field APIs

apps/mobile/src/components/AndroidScreenHeader.tsx

@@ -4,7 +4,7 @@ import { ActivityIndicator, View } from "react-native";
 import type { AppSymbolName } from "./AppSymbol";
 import { AppText as Text } from "./AppText";
 import { cn } from "../lib/cn";
-import { MaterialIconButton } from "./MaterialIconButton";
+import { IconButton } from "./IconButton";
 import { AndroidAnchoredMenu } from "./AndroidAnchoredMenu";
 import { splitAndroidHeaderActions } from "./headerMenu.android";
 import { useScaledTextRole } from "../features/settings/appearance/useScaledTextRole";
@@ -28,7 +28,7 @@ export function AndroidHeaderIconButton(props: {
   readonly disabled?: boolean;
   readonly selected?: boolean;
 }) {
-  return <MaterialIconButton {...props} tintColorClassName="accent-header-foreground" />;
+  return <IconButton {...props} tintColorClassName="accent-header-foreground" />;
 }
 
 export function AndroidScreenHeader(props: {
@@ -64,7 +64,7 @@ export function AndroidScreenHeader(props: {
     >
       <View style={{ minHeight: materialToolbarHeight }} className="flex-row items-center gap-1">
         {props.onBack ? (
-          <MaterialIconButton
+          <IconButton
             accessibilityLabel="Navigate up"
             icon="arrow.left"
             tintColorClassName="accent-header-foreground"
@@ -127,7 +127,7 @@ export function AndroidScreenHeader(props: {
             }
           >
             {(open) => (
-              <MaterialIconButton
+              <IconButton
                 accessibilityLabel="More actions"
                 icon="ellipsis"
                 tintColorClassName="accent-header-foreground"

apps/mobile/src/components/ControlPill.tsx

@@ -3,7 +3,7 @@ import { Platform, Pressable, View } from "react-native";
 import { cn } from "../lib/cn";
 import { SymbolView } from "./AppSymbol";
 import { AppText as Text } from "./AppText";
-import { MaterialIconButton } from "./MaterialIconButton";
+import { IconButton } from "./IconButton";
 import { Button } from "./Button";
 import { useAndroidControlSizing } from "./useAndroidControlSizing";
 
@@ -110,7 +110,7 @@ export function ControlPill(props: {
     !props.activateOnPressIn
   ) {
     return (
-      <MaterialIconButton
+      <IconButton
         accessibilityLabel={props.accessibilityLabel}
         icon={props.icon}
         onPress={props.onPress}

apps/mobile/src/components/MaterialIconButton.android.tsx → apps/mobile/src/components/IconButton.android.tsx

@@ -1,27 +1,24 @@
+import type { IconButtonProps } from "./IconButton.types";
 import { NativeThemeHost } from "./NativeThemeHost.android";
-import { FilledIconButton, FilledTonalIconButton, IconButton } from "@expo/ui/jetpack-compose";
+import {
+  FilledIconButton,
+  FilledTonalIconButton,
+  IconButton as ComposeIconButton,
+} from "@expo/ui/jetpack-compose";
 import { size } from "@expo/ui/jetpack-compose/modifiers";
 import { View } from "react-native";
 
 import { useControlTheme } from "./useControlTheme";
 import { useAndroidControlSizing } from "./useAndroidControlSizing";
-import { SymbolView, type AppSymbolName } from "./AppSymbol";
+import { SymbolView } from "./AppSymbol";
 
-export function MaterialIconButton(props: {
-  readonly accessibilityLabel: string;
-  readonly icon: AppSymbolName;
-  readonly onPress?: () => void;
-  readonly disabled?: boolean;
-  readonly selected?: boolean;
-  readonly variant?: "standard" | "primary" | "tonal" | "danger";
-  readonly tintColorClassName?: string;
-}) {
+export function IconButton(props: IconButtonProps) {
   const { colors } = useControlTheme();
   const { iconSize, buttonSize } = useAndroidControlSizing();
   const variant = props.variant ?? "standard";
   const Component =
     variant === "standard"
-      ? IconButton
+      ? ComposeIconButton
       : variant === "tonal"
         ? FilledTonalIconButton
         : FilledIconButton;

apps/mobile/src/components/MaterialIconButton.tsx → apps/mobile/src/components/IconButton.tsx

@@ -1,7 +1,8 @@
+import type { IconButtonProps } from "./IconButton.types";
 import { cn } from "../lib/cn";
 import { Pressable } from "react-native";
 
-import { SymbolView, type AppSymbolName } from "./AppSymbol";
+import { SymbolView } from "./AppSymbol";
 
 const VARIANT_CLASS_NAMES = {
   standard: ["", "accent-foreground"],
@@ -10,15 +11,7 @@ const VARIANT_CLASS_NAMES = {
   tonal: ["rounded-full bg-secondary", "accent-secondary-foreground"],
 } as const;
 
-export function MaterialIconButton(props: {
-  readonly accessibilityLabel: string;
-  readonly icon: AppSymbolName;
-  readonly onPress?: () => void;
-  readonly disabled?: boolean;
-  readonly selected?: boolean;
-  readonly variant?: "standard" | "primary" | "tonal" | "danger";
-  readonly tintColorClassName?: string;
-}) {
+export function IconButton(props: IconButtonProps) {
   const variant = props.variant ?? "standard";
   const [containerClassName, iconTintClassName] = VARIANT_CLASS_NAMES[variant];
   return (

apps/mobile/src/components/IconButton.types.ts

@@ -0,0 +1,11 @@
+import type { AppSymbolName } from "./AppSymbol";
+
+export interface IconButtonProps {
+  readonly accessibilityLabel: string;
+  readonly icon: AppSymbolName;
+  readonly onPress?: () => void;
+  readonly disabled?: boolean;
+  readonly selected?: boolean;
+  readonly variant?: "standard" | "primary" | "tonal" | "danger";
+  readonly tintColorClassName?: string;
+}

apps/mobile/src/components/NumberField.android.tsx

@@ -1,7 +1,7 @@
 import { View } from "react-native";
 
 import { AppText } from "./AppText";
-import { MaterialIconButton } from "./MaterialIconButton";
+import { IconButton } from "./IconButton";
 import type { NumberFieldProps } from "./NumberField";
 
 export function NumberField(props: NumberFieldProps) {
@@ -19,7 +19,7 @@ export function NumberField(props: NumberFieldProps) {
         className="absolute inset-x-0 rounded-full bg-subtle"
         style={{ height: 32 }}
       />
-      <MaterialIconButton
+      <IconButton
         icon="minus"
         accessibilityLabel={`Decrease ${props.label}`}
         disabled={props.disabled || props.value <= props.min}
@@ -33,7 +33,7 @@ export function NumberField(props: NumberFieldProps) {
       >
         {props.value}
       </AppText>
-      <MaterialIconButton
+      <IconButton
         icon="plus"
         accessibilityLabel={`Increase ${props.label}`}
         disabled={props.disabled || props.value >= props.max}

apps/mobile/src/components/ScreenHeader.android.tsx

@@ -15,7 +15,7 @@ import { AndroidScreenHeader } from "./AndroidScreenHeader";
 import { ScreenHeaderButton } from "./ScreenHeaderButton.android";
 import { SymbolView } from "./AppSymbol";
 import { ControlPillMenu } from "./ControlPill";
-import { MaterialSearchField } from "./MaterialSearchField";
+import { SearchField } from "./SearchField";
 import { androidHeaderMenuActions, findHeaderMenuAction } from "./headerMenu.android";
 import type { ScreenHeaderProps } from "./ScreenHeader.types";
 import { useAndroidControlSizing } from "./useAndroidControlSizing";
@@ -208,7 +208,7 @@ export function ScreenHeader(props: ScreenHeaderProps) {
                   icon="arrow.left"
                   onPress={closeSearch}
                 />
-                <MaterialSearchField
+                <SearchField
                   inputRef={inputRef}
                   accessibilityLabel={search.placeholder}
                   clearAccessibilityLabel={search.clearAccessibilityLabel ?? "Clear search"}

apps/mobile/src/components/MaterialSearchField.tsx → apps/mobile/src/components/SearchField.tsx

@@ -4,23 +4,25 @@ import { Pressable, TextInput, type TextInputInstance, View } from "react-native
 import { SymbolView } from "./AppSymbol";
 import { useAndroidControlSizing } from "./useAndroidControlSizing";
 
-export function MaterialSearchField({
-  inputRef,
-  autoFocus = true,
-  accessibilityLabel,
-  clearAccessibilityLabel,
-  placeholder,
-  value,
-  onChangeText,
-}: {
+export interface SearchFieldProps {
   readonly autoFocus?: boolean;
   readonly inputRef: RefObject<TextInputInstance | null>;
   readonly accessibilityLabel: string;
   readonly clearAccessibilityLabel: string;
   readonly placeholder: string;
   readonly value: string;
   readonly onChangeText: (value: string) => void;
-}) {
+}
+
+export function SearchField({
+  inputRef,
+  autoFocus = true,
+  accessibilityLabel,
+  clearAccessibilityLabel,
+  placeholder,
+  value,
+  onChangeText,
+}: SearchFieldProps) {
   const { scale, mediumIconSize } = useAndroidControlSizing();
   return (
     <View

apps/mobile/src/features/connection/ConnectionEnvironmentRow.tsx

@@ -12,7 +12,7 @@ import Animated, { FadeIn, FadeOut, LinearTransition } from "react-native-reanim
 import { AppText as Text } from "../../components/AppText";
 import { EnvironmentMachineSymbol } from "../../components/EnvironmentMachineSymbol";
 import { Button } from "../../components/Button";
-import { MaterialIconButton } from "../../components/MaterialIconButton";
+import { IconButton } from "../../components/IconButton";
 import { ThemedSwitch } from "../../components/ThemedSwitch";
 import { cn } from "../../lib/cn";
 import type { ConnectedEnvironmentSummary } from "../../state/remote-runtime-types";
@@ -195,14 +195,14 @@ export function ConnectionEnvironmentRow(props: {
                   />
                 </View>
               )}
-              <MaterialIconButton
+              <IconButton
                 accessibilityLabel="Reconnect environment"
                 icon="arrow.clockwise"
                 variant="tonal"
                 disabled={!enabled}
                 onPress={() => props.onReconnect(props.environment.environmentId)}
               />
-              <MaterialIconButton
+              <IconButton
                 accessibilityLabel="Remove environment"
                 icon="trash"
                 variant="danger"

apps/mobile/src/features/development/ComponentCatalogScreen.tsx

@@ -12,9 +12,9 @@ import { ListRow } from "../../components/ListRow";
 import { ListSection } from "../../components/ListSection";
 import { ListToggleRow } from "../../components/ListToggleRow";
 import { Button } from "../../components/Button";
-import { MaterialIconButton } from "../../components/MaterialIconButton";
+import { IconButton } from "../../components/IconButton";
 import { MaterialFloatingActionButton } from "../../components/MaterialFloatingActionButton";
-import { MaterialSearchField } from "../../components/MaterialSearchField";
+import { SearchField } from "../../components/SearchField";
 import { LoadingStrip } from "../../components/LoadingStrip";
 import { Notice } from "../../components/Notice";
 import { NumberField } from "../../components/NumberField";
@@ -150,7 +150,7 @@ export function ComponentCatalogScreen() {
               <View className="flex-row flex-wrap gap-2">
                 <Button label="Disabled" disabled onPress={announceAction} />
                 <Button label="Loading" loading onPress={announceAction} />
-                <MaterialIconButton
+                <IconButton
                   accessibilityLabel="Open example sheet"
                   icon="plus"
                   variant="tonal"
@@ -170,7 +170,7 @@ export function ComponentCatalogScreen() {
               onChangeText={setText}
             />
             <View className="flex-row">
-              <MaterialSearchField
+              <SearchField
                 inputRef={searchRef}
                 accessibilityLabel="Search examples"
                 clearAccessibilityLabel="Clear examples search"

apps/mobile/src/features/files/MaterialFilesHeader.tsx

@@ -3,7 +3,7 @@ import { BackHandler, Keyboard, type TextInputInstance, View } from "react-nativ
 
 import { AndroidHeaderIconButton, AndroidScreenHeader } from "../../components/AndroidScreenHeader";
 import { AndroidAnchoredMenu } from "../../components/AndroidAnchoredMenu";
-import { MaterialSearchField } from "../../components/MaterialSearchField";
+import { SearchField } from "../../components/SearchField";
 import { useMaterialToolbarLayout } from "../../components/useMaterialToolbarLayout";
 
 /** Keep Files search in the same header row on compact and expanded layouts. */
@@ -84,7 +84,7 @@ export function MaterialFilesHeader(props: {
               icon="arrow.left"
               onPress={closeSearch}
             />
-            <MaterialSearchField
+            <SearchField
               inputRef={searchRef}
               accessibilityLabel="Search files"
               clearAccessibilityLabel="Clear file search"

apps/mobile/src/features/home/MaterialThreadListToolbar.tsx

@@ -16,7 +16,7 @@ import { CompactBrandTitle } from "../../components/CompactBrandTitle";
 import { MaterialFloatingActionButton } from "../../components/MaterialFloatingActionButton";
 import { AndroidAnchoredMenu } from "../../components/AndroidAnchoredMenu";
 import { ControlPillMenu } from "../../components/ControlPill";
-import { MaterialSearchField } from "../../components/MaterialSearchField";
+import { SearchField } from "../../components/SearchField";
 import { useHardwareKeyboardCommand } from "../keyboard/hardwareKeyboardCommands";
 import { WorkspaceConnectionTitle } from "./WorkspaceConnectionTitle";
 import { useWorkspaceState } from "../../state/workspace";
@@ -86,7 +86,7 @@ export function MaterialThreadListToolbar(props: {
     ? "line.3.horizontal.decrease.circle.fill"
     : "line.3.horizontal.decrease.circle";
   const searchField = (
-    <MaterialSearchField
+    <SearchField
       inputRef={searchRef}
       accessibilityLabel="Search threads"
       clearAccessibilityLabel="Clear search"

apps/mobile/src/features/pull-requests/MaterialPullRequestToolbar.android.tsx

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useRef } from "react";
 import { BackHandler, Keyboard, View, type TextInputInstance } from "react-native";
 import { AndroidHeaderIconButton, AndroidScreenHeader } from "../../components/AndroidScreenHeader";
 import { CompactBrandTitle } from "../../components/CompactBrandTitle";
-import { MaterialSearchField } from "../../components/MaterialSearchField";
+import { SearchField } from "../../components/SearchField";
 import { WorkspaceConnectionTitle } from "../home/WorkspaceConnectionTitle";
 import { useHardwareKeyboardCommand } from "../keyboard/hardwareKeyboardCommands";
 import { useWorkspaceTabs } from "../workspace/WorkspaceTabsContext";
@@ -54,7 +54,7 @@ export function MaterialPullRequestToolbar(props: { readonly onRequestVisibility
       title="Pull requests"
       titleContent={
         searching ? (
-          <MaterialSearchField
+          <SearchField
             inputRef={input}
             accessibilityLabel="Search pull requests"
             clearAccessibilityLabel="Clear search"

apps/mobile/src/features/pull-requests/PullRequestControls.tsx

@@ -8,7 +8,7 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { AppText as Text } from "../../components/AppText";
 import { SymbolView, type AppSymbolName } from "../../components/AppSymbol";
 import { Button } from "../../components/Button";
-import { MaterialIconButton } from "../../components/MaterialIconButton";
+import { IconButton } from "../../components/IconButton";
 import { MaterialFloatingToolbar } from "./MaterialFloatingToolbar";
 import { ControlPillMenu } from "../../components/ControlPillMenu";
 import { NativeHeaderToolbar } from "../../native/StackHeader";
@@ -160,7 +160,7 @@ export function PullRequestActionToolbar(props: {
                 onPressAction={({ nativeEvent }) => agent.select(nativeEvent.event)}
               >
                 <View pointerEvents="none">
-                  <MaterialIconButton
+                  <IconButton
                     icon="sparkles"
                     accessibilityLabel="PR agent actions"
                     disabled={agent.disabled}
@@ -183,11 +183,7 @@ export function PullRequestActionToolbar(props: {
                 )}
               </View>
             ) : null}
-            <MaterialIconButton
-              icon="file.diff"
-              accessibilityLabel="Changed files"
-              onPress={openFiles}
-            />
+            <IconButton icon="file.diff" accessibilityLabel="Changed files" onPress={openFiles} />
           </View>
         </MaterialFloatingToolbar>
       </View>

apps/mobile/src/features/pull-requests/PullRequestFiles.tsx

@@ -9,7 +9,7 @@ import { AppText as Text } from "../../components/AppText";
 import { EmptyState } from "../../components/EmptyState";
 import { ControlPillMenu } from "../../components/ControlPillMenu";
 import { Button } from "../../components/Button";
-import { MaterialIconButton } from "../../components/MaterialIconButton";
+import { IconButton } from "../../components/IconButton";
 import { SymbolView } from "../../components/AppSymbol";
 import { PierreEntryIcon } from "../../components/PierreEntryIcon";
 import { composerPullRequests } from "../../state/pull-requests";
@@ -228,7 +228,7 @@ export function usePullRequestFilesContent(props: {
                 onPressAction={filter.toggle}
               >
                 <View pointerEvents="none">
-                  <MaterialIconButton
+                  <IconButton
                     icon="line.3.horizontal.decrease"
                     accessibilityLabel="Filter review files"
                     selected={filter.hideTestFiles}

apps/mobile/src/features/pull-requests/PullRequestMergeControls.tsx

@@ -8,7 +8,7 @@ import { AppText as Text } from "../../components/AppText";
 import { SymbolView } from "../../components/AppSymbol";
 import { ControlPillMenu } from "../../components/ControlPillMenu";
 import { Button } from "../../components/Button";
-import { MaterialIconButton } from "../../components/MaterialIconButton";
+import { IconButton } from "../../components/IconButton";
 import { mobilePreferencesAtom, updateMobilePreferencesAtom } from "../../state/preferences";
 import { composerPullRequests } from "../../state/pull-requests";
 import { useAtomCommand } from "../../state/use-atom-command";
@@ -242,7 +242,7 @@ export function PullRequestMergeControls(props: {
           >
             {Platform.OS === "android" ? (
               <View pointerEvents="none">
-                <MaterialIconButton
+                <IconButton
                   accessibilityLabel="Merge options"
                   icon="chevron.down"
                   variant="tonal"