fix(mobile): sheets close with an X and confirm with a checkmark

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

@@ -1,15 +1,18 @@
-import { Button, HStack, Picker, Popover, Text, VStack } from "@expo/ui/swift-ui";
+import { Button, HStack, Picker, Popover, Spacer, Text, VStack } from "@expo/ui/swift-ui";
 import {
   accessibilityLabel,
+  buttonBorderShape,
   buttonStyle,
   disabled,
   font,
   foregroundStyle,
   frame,
+  labelStyle,
   padding,
   pickerStyle,
   presentationBackground,
   tag,
+  tint,
 } from "@expo/ui/swift-ui/modifiers";
 import { useState } from "react";
 
@@ -71,19 +74,33 @@ export function NumberField(props: NumberFieldProps) {
                 </Text>
               ))}
             </Picker>
-            <HStack spacing={24}>
+            <HStack>
               <Button
                 label="Cancel"
+                systemImage="xmark"
                 onPress={() => setOpen(false)}
-                modifiers={[foregroundStyle(colors["--color-primary-text"])]}
+                modifiers={[
+                  labelStyle("iconOnly"),
+                  buttonStyle("bordered"),
+                  buttonBorderShape("circle"),
+                  tint(colors["--color-foreground"]),
+                ]}
               />
+              <Spacer />
               <Button
                 label="Done"
+                systemImage="checkmark"
                 onPress={() => {
                   setOpen(false);
                   if (!props.disabled && draft !== props.value) props.onValueChange(draft);
                 }}
-                modifiers={[foregroundStyle(colors["--color-primary-text"])]}
+                modifiers={[
+                  labelStyle("iconOnly"),
+                  buttonStyle("borderedProminent"),
+                  buttonBorderShape("circle"),
+                  tint(colors["--color-prominent-action"]),
+                  foregroundStyle(colors["--color-prominent-action-foreground"]),
+                ]}
               />
             </HStack>
           </VStack>

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

@@ -51,10 +51,9 @@ export function Sheet(props: SheetProps) {
               headerRightBarButtonItems={[
                 {
                   type: "button",
-                  title: "Done",
-                  variant: "done",
+                  icon: { name: "xmark", type: "sfSymbol" },
                   accessibilityLabel: `Close ${props.title}`,
-                  identifier: `app-sheet-done-${screenId}`,
+                  identifier: `app-sheet-close-${screenId}`,
                   onPress: close,
                 },
               ]}

apps/mobile/src/features/threads/CustomSnoozeSheet.ios.tsx

@@ -257,7 +257,13 @@ function SnoozePopoverNavigation(props: {
                         />
                       </Toolbar>
                       <Toolbar placement="right">
-                        <Toolbar.Button label="Snooze" onPress={props.onSubmit} />
+                        <Toolbar.Button
+                          accessibilityLabel="Snooze"
+                          icon="checkmark"
+                          variant="prominent"
+                          tintColor={colors["--color-prominent-action"]}
+                          onPress={props.onSubmit}
+                        />
                       </Toolbar>
                       <ScrollView
                         contentInsetAdjustmentBehavior="automatic"

apps/mobile/src/features/threads/NewTaskDraftScreen.tsx

@@ -1830,11 +1830,7 @@ export function NewTaskDraftScreen(props: {
         }}
       />
       <Toolbar placement="left">
-        <Toolbar.Button
-          accessibilityLabel="Cancel new task"
-          label="Cancel"
-          onPress={closeNewTask}
-        />
+        <Toolbar.Button accessibilityLabel="Cancel new task" icon="xmark" onPress={closeNewTask} />
       </Toolbar>
 
       {heroViewport}

apps/mobile/src/features/threads/ThreadArrangementSheet.tsx

@@ -12,6 +12,7 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { AppText as Text } from "../../components/ui/AppText";
 import { SymbolView } from "../../components/ui/AppSymbol";
+import { IconButton } from "../../components/ui/IconButton";
 import { scopedThreadKey } from "../../lib/scopedEntities";
 import { environmentServerConfigsAtom } from "../../state/server";
 import { environmentThreadShells } from "../../state/threads";
@@ -378,13 +379,11 @@ export function ThreadArrangementSheet(props: { onClose: () => void }) {
         >
           <View className="flex-row items-center justify-between gap-3 px-5 py-3">
             <Text className="flex-1 text-xl font-t3-semibold">Arrange threads</Text>
-            <Pressable
-              accessibilityRole="button"
+            <IconButton
+              accessibilityLabel="Close arrange threads"
+              icon="xmark"
               onPress={props.onClose}
-              className="min-h-11 justify-center px-3"
-            >
-              <Text className="text-base text-primary-text">Done</Text>
-            </Pressable>
+            />
           </View>
           <Text className="px-5 pb-3 text-sm text-foreground-muted">
             Drag to reorder, pin, or settle. Changes save when you drop.

apps/mobile/src/features/threads/ThreadSettingsSheet.tsx

@@ -1242,6 +1242,7 @@ function ThreadSettingsModelsScreen() {
   const presentation = useThreadSettingsPickerPresentation();
   const navigation = useNavigation<NativeStackNavigationProp<ThreadSettingsPickerStackParams>>();
   const usesNativeMailSearchToolbar = useNativeMailSearchToolbar();
+  const theme = useUniwindTheme();
   const hasCustomCatalogFilter = session.providerFilter !== null || session.showLegacy;
   const commitAndClose = useCallback(() => {
     if (!session.commitPendingModel()) return;
@@ -1396,14 +1397,16 @@ function ThreadSettingsModelsScreen() {
       <Toolbar placement="left">
         <Toolbar.Button
           accessibilityLabel="Cancel thread settings"
-          label="Cancel"
+          icon="xmark"
           onPress={presentation.onClose}
         />
       </Toolbar>
       <Toolbar placement="right">
         <Toolbar.Button
           accessibilityLabel={session.pendingModel ? "Save thread settings" : "Done"}
-          label={session.pendingModel ? "Save" : "Done"}
+          icon="checkmark"
+          variant="prominent"
+          tintColor={theme["--color-prominent-action"]}
           onPress={commitAndClose}
         />
       </Toolbar>

apps/mobile/src/features/threads/worktree-setup-sheet.android.tsx

@@ -1,8 +1,7 @@
 import { Host, ModalBottomSheet, RNHostView } from "@expo/ui/jetpack-compose";
-import { Pressable, View, useWindowDimensions } from "react-native";
+import { View, useWindowDimensions } from "react-native";
 import { withUniwind } from "uniwind";
 import { AndroidSheetHeader } from "../../components/ui/AndroidScreenHeader";
-import { AppText as Text } from "../../components/ui/AppText";
 import type { WorktreeSetupSheetProps } from "./worktree-setup-sheet";
 
 const NativeBottomSheet = withUniwind(ModalBottomSheet, {
@@ -27,16 +26,9 @@ export function WorktreeSetupSheet({ children, height, onClose }: WorktreeSetupS
           >
             <AndroidSheetHeader
               title="Worktree setup"
-              trailing={
-                <Pressable
-                  accessibilityRole="button"
-                  accessibilityLabel="Close setup details"
-                  onPress={onClose}
-                  className="min-h-11 justify-center px-2"
-                >
-                  <Text className="font-t3-medium text-sm text-foreground">Done</Text>
-                </Pressable>
-              }
+              actions={[
+                { accessibilityLabel: "Close setup details", icon: "xmark", onPress: onClose },
+              ]}
             />
             {children}
           </View>

docs/user/thread-sidebar.md

@@ -85,7 +85,7 @@ spot where the thread will land. Drops into either section keep the position you
 mobile, open a thread's menu and choose **Arrange threads**. Drag a handle within or between
 **Pinned** and **Active** to reorder, pin, or unpin. Drop onto the **Settled** divider to
 settle a thread. The dragged card shows the action before you release it. Expand **Snoozed**
-or **Settled** to drag a parked thread back into either live section. Each drop saves; **Done** returns to the thread list.
+or **Settled** to drag a parked thread back into either live section. Each drop saves; close the sheet to return to the thread list.
 **Move up** and **Move down** are also available in the thread menu. The server
 saves the order, so it survives a refresh and appears on your other connected devices.