refactor(mobile): unify sheet header actions

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

@@ -0,0 +1,54 @@
+import { View } from "react-native";
+
+import { AndroidScreenHeader } from "./AndroidScreenHeader";
+import { Button } from "./Button";
+import { IconButton } from "./IconButton";
+import type { SheetCloseButtonProps, SheetHeaderProps } from "./SheetHeader.types";
+
+export function SheetCloseButton(props: SheetCloseButtonProps) {
+  return (
+    <IconButton
+      icon="xmark"
+      accessibilityLabel={props.accessibilityLabel ?? (props.onCancel ? "Cancel" : "Close")}
+      disabled={props.disabled}
+      tintColorClassName="accent-header-foreground"
+      onPress={props.onCancel ?? props.onClose}
+    />
+  );
+}
+
+export function SheetHeader(props: SheetHeaderProps) {
+  const confirmation = props.confirm;
+  const trailing =
+    props.trailing || confirmation ? (
+      <View className="flex-row items-center gap-2">
+        {props.trailing}
+        {confirmation ? (
+          <Button
+            label={confirmation.label}
+            tone="text"
+            loading={confirmation.loading}
+            disabled={confirmation.disabled}
+            onPress={confirmation.onPress}
+          />
+        ) : null}
+      </View>
+    ) : undefined;
+
+  return (
+    <AndroidScreenHeader
+      embedded={props.presentation === "inline"}
+      title={props.title}
+      subtitle={props.subtitle}
+      leading={
+        <SheetCloseButton
+          {...(props.onCancel ? { onCancel: props.onCancel } : { onClose: props.onClose })}
+          accessibilityLabel={props.accessibilityLabel}
+          disabled={props.dismissDisabled}
+        />
+      }
+      trailing={trailing}
+      hideBottomBorder
+    />
+  );
+}

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

@@ -0,0 +1,164 @@
+import { Pressable, View } from "react-native";
+
+import { NativeStackScreenOptions } from "../../native/StackHeader";
+import { AppActivityIndicator } from "./AppActivityIndicator";
+import { AppText } from "./AppText";
+import { SymbolView } from "./AppSymbol";
+import { IconButton } from "./IconButton";
+import { Toolbar } from "./Toolbar";
+import { useControlTheme } from "./useControlTheme";
+import type { SheetCloseButtonProps, SheetHeaderProps } from "./SheetHeader.types";
+
+export function SheetCloseButton(props: SheetCloseButtonProps) {
+  return (
+    <IconButton
+      icon="xmark"
+      accessibilityLabel={props.accessibilityLabel ?? (props.onCancel ? "Cancel" : "Close")}
+      disabled={props.disabled}
+      onPress={props.onCancel ?? props.onClose}
+    />
+  );
+}
+
+export function SheetHeader(props: SheetHeaderProps) {
+  return props.presentation !== "inline" ? (
+    <NativeSheetHeader {...props} />
+  ) : (
+    <InlineSheetHeader {...props} />
+  );
+}
+
+function NativeSheetHeader(props: SheetHeaderProps) {
+  const { colors } = useControlTheme();
+  const onDismiss = props.onCancel ?? props.onClose;
+  const dismissLabel = props.accessibilityLabel ?? (props.onCancel ? "Cancel" : "Close");
+  const confirmation = props.confirm;
+
+  // Toolbar children are parsed as native items, so keep the actual Button
+  // elements here instead of hiding them behind another component.
+  return (
+    <>
+      <NativeStackScreenOptions
+        options={{
+          title: props.title,
+          headerBackVisible: false,
+          unstable_headerSubtitle: props.subtitle,
+        }}
+      />
+      <Toolbar placement="left">
+        <Toolbar.Button
+          icon="xmark"
+          accessibilityLabel={dismissLabel}
+          onPress={onDismiss}
+          disabled={props.dismissDisabled}
+        />
+      </Toolbar>
+      {confirmation || props.trailing ? (
+        <Toolbar placement="right">
+          {props.trailing ? (
+            <Toolbar.Custom>
+              <View>{props.trailing}</View>
+            </Toolbar.Custom>
+          ) : null}
+          {confirmation?.loading ? (
+            <Toolbar.Custom>
+              <View
+                className="size-11 items-center justify-center"
+                accessible
+                accessibilityLabel={confirmation.label}
+                accessibilityState={{ busy: true }}
+              >
+                <AppActivityIndicator colorClassName="accent-prominent-action" />
+              </View>
+            </Toolbar.Custom>
+          ) : confirmation ? (
+            <Toolbar.Button
+              icon="checkmark"
+              variant="prominent"
+              tintColor={colors["--color-prominent-action"]}
+              accessibilityLabel={confirmation.label}
+              disabled={confirmation.disabled}
+              onPress={confirmation.onPress}
+            />
+          ) : null}
+        </Toolbar>
+      ) : null}
+    </>
+  );
+}
+
+function InlineConfirmation({
+  confirmation,
+}: {
+  readonly confirmation: NonNullable<SheetHeaderProps["confirm"]>;
+}) {
+  const confirmDisabled = confirmation.disabled || confirmation.loading;
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={confirmation.label}
+      accessibilityState={{
+        disabled: Boolean(confirmDisabled),
+        busy: Boolean(confirmation.loading),
+      }}
+      disabled={confirmDisabled}
+      onPress={confirmation.onPress}
+      className={
+        confirmDisabled
+          ? "size-11 items-center justify-center rounded-full bg-subtle-strong"
+          : "size-11 items-center justify-center rounded-full bg-prominent-action"
+      }
+    >
+      {confirmation.loading ? (
+        <AppActivityIndicator colorClassName="accent-icon-subtle" />
+      ) : (
+        <SymbolView
+          name="checkmark"
+          size={20}
+          tintColorClassName={
+            confirmDisabled ? "accent-icon-subtle" : "accent-prominent-action-foreground"
+          }
+        />
+      )}
+    </Pressable>
+  );
+}
+
+function InlineSheetHeader(props: SheetHeaderProps) {
+  const close = (
+    <SheetCloseButton
+      {...(props.onCancel ? { onCancel: props.onCancel } : { onClose: props.onClose })}
+      accessibilityLabel={props.accessibilityLabel}
+      disabled={props.dismissDisabled}
+    />
+  );
+  const confirm = props.confirm ? <InlineConfirmation confirmation={props.confirm} /> : null;
+  const trailing =
+    props.trailing || confirm ? (
+      <View className="flex-row items-center gap-2">
+        {props.trailing}
+        {confirm}
+      </View>
+    ) : undefined;
+
+  return (
+    <View className="flex-row items-center gap-3 px-4 pt-3 pb-3">
+      {close}
+      <View className="min-w-0 flex-1 gap-1">
+        <AppText numberOfLines={1} className="text-base font-t3-bold text-foreground">
+          {props.title}
+        </AppText>
+        {props.subtitle ? (
+          <AppText
+            numberOfLines={1}
+            ellipsizeMode="middle"
+            className="text-xs text-foreground-muted"
+          >
+            {props.subtitle}
+          </AppText>
+        ) : null}
+      </View>
+      {trailing}
+    </View>
+  );
+}

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

@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+
+type SheetDismissAction =
+  | { readonly onCancel: () => void; readonly onClose?: never }
+  | { readonly onClose: () => void; readonly onCancel?: never };
+
+type SheetConfirmation = {
+  readonly label: string;
+  readonly onPress: () => void;
+  readonly disabled?: boolean;
+  readonly loading?: boolean;
+};
+
+export type SheetHeaderProps = SheetDismissAction & {
+  readonly title: string;
+  readonly subtitle?: string;
+  readonly accessibilityLabel?: string;
+  readonly dismissDisabled?: boolean;
+  readonly confirm?: SheetConfirmation;
+  readonly presentation?: "native" | "inline";
+  readonly trailing?: ReactNode;
+};
+
+export type SheetCloseButtonProps = SheetDismissAction & {
+  readonly accessibilityLabel?: string;
+  readonly disabled?: boolean;
+};

apps/mobile/src/features/browser/BrowserPreviewRouteScreen.tsx

@@ -1,4 +1,4 @@
-import { Toolbar } from "../../components/ui/Toolbar";
+import { SheetHeader } from "../../components/ui/SheetHeader";
 import { AppActivityIndicator } from "../../components/ui/AppActivityIndicator";
 import * as Dialog from "../../components/ui/Dialog";
 import { useIsFocused, useNavigation, type StaticScreenProps } from "@react-navigation/native";
@@ -159,14 +159,11 @@ function BrowserPreviewScreen({
         }
       />
       {Platform.OS === "ios" ? (
-        <Toolbar placement="left">
-          <Toolbar.Button
-            icon="xmark"
-            accessibilityLabel="Close browser"
-            onPress={onClose}
-            separateBackground
-          />
-        </Toolbar>
+        <SheetHeader
+          title={tab ? browserTabTitle(tab) : "Browser"}
+          onClose={onClose}
+          accessibilityLabel="Close browser"
+        />
       ) : null}
       {tab ? (
         <>

apps/mobile/src/features/cloud/ConnectOnboardingRouteScreen.tsx

@@ -1,5 +1,7 @@
+import { AppActivityIndicator } from "../../components/ui/AppActivityIndicator";
+import { SheetHeader } from "../../components/ui/SheetHeader";
+import { IconButton } from "../../components/ui/IconButton";
 import { Button } from "../../components/ui/Button";
-import { Toolbar } from "../../components/ui/Toolbar";
 import { ScreenScrollView as ScrollView } from "../../components/ui/ScreenScrollView";
 
 import { useAuth } from "@clerk/expo";
@@ -9,7 +11,6 @@ import { Platform, RefreshControl, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { reportAtomCommandResult, settlePromise } from "@t3tools/client-runtime/state/runtime";
-import { AndroidSheetHeader } from "../../components/ui/AndroidScreenHeader";
 import { AppText as Text } from "../../components/ui/AppText";
 import { useRemoteConnections } from "../../state/use-remote-environment-registry";
 import { CloudEnvironmentRows } from "../connection/CloudEnvironmentRows";
@@ -73,25 +74,31 @@ function ConfiguredConnectOnboardingRouteScreen() {
 
   return (
     <View collapsable={false} className="flex-1 bg-sheet">
-      {Platform.OS === "android" ? (
-        <AndroidSheetHeader
-          title="Set up T3 Connect"
-          actions={[
-            {
-              accessibilityLabel: "Refresh environments",
-              disabled: isRefreshing,
-              icon: "arrow.clockwise",
-              loading: isRefreshing,
-              onPress: handleRefresh,
-            },
-            { accessibilityLabel: "Close", icon: "xmark", onPress: handleClose },
-          ]}
-        />
-      ) : (
-        <Toolbar placement="right">
-          <Toolbar.Button icon="xmark" onPress={handleClose} separateBackground />
-        </Toolbar>
-      )}
+      <SheetHeader
+        presentation={Platform.OS === "android" ? "inline" : "native"}
+        title="Set up T3 Connect"
+        onClose={handleClose}
+        trailing={
+          Platform.OS === "android" ? (
+            isRefreshing ? (
+              <View
+                className="size-12 items-center justify-center"
+                accessible
+                accessibilityLabel="Refreshing environments"
+                accessibilityState={{ busy: true }}
+              >
+                <AppActivityIndicator />
+              </View>
+            ) : (
+              <IconButton
+                accessibilityLabel="Refresh environments"
+                icon="arrow.clockwise"
+                onPress={handleRefresh}
+              />
+            )
+          ) : undefined
+        }
+      />
       <ScrollView
         nestedScrollEnabled
         alwaysBounceVertical

apps/mobile/src/features/devices/DevicePreviewRouteScreen.tsx

@@ -1,3 +1,4 @@
+import { SheetCloseButton } from "../../components/ui/SheetHeader";
 import { Button } from "../../components/ui/Button";
 import * as Dialog from "../../components/ui/Dialog";
 import {
@@ -296,11 +297,7 @@ function DevicePreviewScreen({
           ) : null}
           <View className="px-3" style={{ paddingTop: Math.max(insets.top, 12) }}>
             <GlassSurface className="flex-row items-center gap-1 p-1">
-              <ControlPill
-                accessibilityLabel="Close device preview"
-                icon="xmark"
-                onPress={onClose}
-              />
+              <SheetCloseButton accessibilityLabel="Close device preview" onClose={onClose} />
               <AppText numberOfLines={1} className="flex-1 text-center font-t3-medium text-base">
                 {preview?.name ?? "Devices"}
               </AppText>