Commit e106fe95cc814797cfb3dad6d78c062e96d0060f | the-knife

apps/mobile/modules/t3-markdown-text/android/src/main/java/expo/modules/t3markdowntext/T3MarkdownTextSelectionModule.kt+26

...	@@ -8,6 +8,7 @@ import android.graphics.Canvas	...	@@ -8,6 +8,7 @@ import android.graphics.Canvas
8	import android.graphics.Color	8	import android.graphics.Color
9	import android.graphics.Paint	9	import android.graphics.Paint
10	import android.graphics.Typeface	10	import android.graphics.Typeface
		11	import android.os.Build
11	import android.text.Spannable	12	import android.text.Spannable
12	import android.text.SpannableStringBuilder	13	import android.text.SpannableStringBuilder
13	import android.text.Spanned	14	import android.text.Spanned
...	@@ -164,6 +165,17 @@ private class SanitizingSelectionActionModeCallback(	...	@@ -164,6 +165,17 @@ private class SanitizingSelectionActionModeCallback(
164	}	165	}
165	}	166	}
166		167
		168	internal fun applySelectionHandleColor(textView: TextView, color: Int) {
		169	if (Build.VERSION.SDK_INT < Build.VERSION_CODES.Q) return
		170	textView.textSelectHandle?.mutate()?.apply { setTint(color) }?.let(textView::setTextSelectHandle)
		171	textView.textSelectHandleLeft?.mutate()?.apply {
		172	setTint(color)
		173	}?.let(textView::setTextSelectHandleLeft)
		174	textView.textSelectHandleRight?.mutate()?.apply {
		175	setTint(color)
		176	}?.let(textView::setTextSelectHandleRight)
		177	}
		178
167	class T3MarkdownTextSelectionModule : Module() {	179	class T3MarkdownTextSelectionModule : Module() {
168	private val chipImages = LruCache<String, Map<String, Any>>(128)	180	private val chipImages = LruCache<String, Map<String, Any>>(128)
169		181
...	@@ -183,9 +195,23 @@ class T3MarkdownTextSelectionModule : Module() {	...	@@ -183,9 +195,23 @@ class T3MarkdownTextSelectionModule : Module() {
183	}	195	}
184	}.fontMetricsInt	196	}.fontMetricsInt
185		197
		198	private fun setSelectionHandleColor(reactTag: Int, color: Int) {
		199	val reactContext = appContext.reactContext as? ReactContext ?: return
		200	reactContext.runOnUiQueueThread {
		201	val textView = runCatching {
		202	UIManagerHelper.getUIManagerForReactTag(reactContext, reactTag)?.resolveView(reactTag)
		203	}.getOrNull() as? TextView ?: return@runOnUiQueueThread
		204	applySelectionHandleColor(textView, color)
		205	}
		206	}
		207
186	override fun definition() = ModuleDefinition {	208	override fun definition() = ModuleDefinition {
187	Name("T3MarkdownTextSelection")	209	Name("T3MarkdownTextSelection")
188		210
		211	Function("setSelectionHandleColor") { reactTag: Int, color: Int ->
		212	setSelectionHandleColor(reactTag, color)
		213	}
		214
189	Function("renderContextChip") { payloadJson: String ->	215	Function("renderContextChip") { payloadJson: String ->
190	val resources = appContext.reactContext?.resources ?: return@Function null	216	val resources = appContext.reactContext?.resources ?: return@Function null
191	val metrics = resources.displayMetrics	217	val metrics = resources.displayMetrics

apps/mobile/modules/t3-markdown-text/android/src/test/java/expo/modules/t3markdowntext/MarkdownSelectionColorTest.kt created+67

...	@@ -0,0 +1,67 @@
1	package expo.modules.t3markdowntext
2
3	import android.graphics.Bitmap
4	import android.graphics.Canvas
5	import android.graphics.Color
6	import android.graphics.drawable.ColorDrawable
7	import android.graphics.drawable.Drawable
8	import android.widget.TextView
9	import org.junit.Assert.assertEquals
10	import org.junit.Test
11	import org.junit.runner.RunWith
12	import org.robolectric.RobolectricTestRunner
13	import org.robolectric.RuntimeEnvironment
14	import org.robolectric.annotation.Config
15	import org.robolectric.annotation.GraphicsMode
16
17	@RunWith(RobolectricTestRunner::class)
18	@Config(sdk = [36], manifest = Config.NONE)
19	@GraphicsMode(GraphicsMode.Mode.NATIVE)
20	class MarkdownSelectionColorTest {
21	private fun textView() = TextView(RuntimeEnvironment.getApplication()).apply {
22	setTextSelectHandle(ColorDrawable(Color.WHITE))
23	setTextSelectHandleLeft(ColorDrawable(Color.WHITE))
24	setTextSelectHandleRight(ColorDrawable(Color.WHITE))
25	}
26
27	private fun renderedColor(drawable: Drawable?): Int {
28	requireNotNull(drawable)
29	val bitmap = Bitmap.createBitmap(4, 4, Bitmap.Config.ARGB_8888)
30	drawable.setBounds(0, 0, 4, 4)
31	drawable.draw(Canvas(bitmap))
32	val color = bitmap.getPixel(2, 2)
33	bitmap.recycle()
34	return color
35	}
36
37	@Test
38	fun retintsAllHandlesWhenTheThemeChangesWithoutChangingTheHighlight() {
39	val text = textView()
40	val highlight = 0x52FF0088
41	text.highlightColor = highlight
42
43	for (color in listOf(Color.MAGENTA, Color.GREEN, Color.MAGENTA)) {
44	applySelectionHandleColor(text, color)
45	assertEquals(color, renderedColor(text.textSelectHandle))
46	assertEquals(color, renderedColor(text.textSelectHandleLeft))
47	assertEquals(color, renderedColor(text.textSelectHandleRight))
48	assertEquals(highlight, text.highlightColor)
49	}
50	}
51
52	@Test
53	fun doesNotTintOtherTextViewsSharingDrawableState() {
54	val original = ColorDrawable(Color.WHITE)
55	val first = textView().apply {
56	setTextSelectHandleLeft(original.constantState!!.newDrawable())
57	}
58	val second = textView().apply {
59	setTextSelectHandleLeft(original.constantState!!.newDrawable())
60	}
61
62	applySelectionHandleColor(first, Color.MAGENTA)
63
64	assertEquals(Color.MAGENTA, renderedColor(first.textSelectHandleLeft))
65	assertEquals(Color.WHITE, renderedColor(second.textSelectHandleLeft))
66	}
67	}

apps/mobile/modules/t3-markdown-text/src/MarkdownTextPrimitive.tsx+51-2

...	@@ -1,5 +1,15 @@	...	@@ -1,5 +1,15 @@
1	import React, { type Ref } from "react";	1	import React, { type Ref } from "react";
2	import { Platform, StyleSheet, Text as RNText, type TextProps, type ViewStyle } from "react-native";	2	import {
		3	findNodeHandle,
		4	Platform,
		5	processColor,
		6	StyleSheet,
		7	Text as RNText,
		8	type ColorValue,
		9	type TextProps,
		10	type ViewStyle,
		11	} from "react-native";
		12	import { setMarkdownSelectionHandleColor } from "./T3MarkdownTextSelectionModule";
3	import T3MarkdownTextRunNativeComponent from "./T3MarkdownTextRunNativeComponent";	13	import T3MarkdownTextRunNativeComponent from "./T3MarkdownTextRunNativeComponent";
4	import T3MarkdownTextNativeComponent from "./T3MarkdownTextNativeComponent";	14	import T3MarkdownTextNativeComponent from "./T3MarkdownTextNativeComponent";
5	import { flattenStyles } from "./util";	15	import { flattenStyles } from "./util";
...	@@ -34,6 +44,7 @@ export type ContextMenuActionEvent = {	...	@@ -34,6 +44,7 @@ export type ContextMenuActionEvent = {
34	*/	44	*/
35	export type MarkdownTextPrimitiveProps = Omit<TextProps, "onTextLayout"> & {	45	export type MarkdownTextPrimitiveProps = Omit<TextProps, "onTextLayout"> & {
36	nativeTextRef?: Ref<RNText>;	46	nativeTextRef?: Ref<RNText>;
		47	selectionHandleColor?: ColorValue;
37	uiTextView?: boolean;	48	uiTextView?: boolean;
38	contextMenuConfig?: string;	49	contextMenuConfig?: string;
39	contextClipboardConfig?: string;	50	contextClipboardConfig?: string;
...	@@ -116,7 +127,45 @@ function MarkdownTextPrimitiveInner({ nativeTextRef, ...props }: MarkdownTextPri	...	@@ -116,7 +127,45 @@ function MarkdownTextPrimitiveInner({ nativeTextRef, ...props }: MarkdownTextPri
116	return <MarkdownTextPrimitiveChild {...props} />;	127	return <MarkdownTextPrimitiveChild {...props} />;
117	}	128	}
118		129
119	export function MarkdownTextPrimitive(props: MarkdownTextPrimitiveProps) {	130	function AndroidMarkdownText({
		131	nativeTextRef,
		132	selectionHandleColor,
		133	onLayout,
		134	contextClipboardConfig: _contextClipboardConfig,
		135	...props
		136	}: MarkdownTextPrimitiveProps) {
		137	const textRef = React.useRef<RNText \| null>(null);
		138	React.useImperativeHandle<RNText \| null, RNText \| null>(nativeTextRef, () => textRef.current, []);
		139	const color = processColor(selectionHandleColor);
		140	const applyHandleColor = React.useCallback(() => {
		141	if (!textRef.current \|\| typeof color !== "number") return;
		142	const reactTag = findNodeHandle(textRef.current);
		143	if (reactTag !== null) setMarkdownSelectionHandleColor(reactTag, color);
		144	}, [color]);
		145
		146	// RN's selectionColor only sets the highlight. Retint mounted handles when
		147	// the theme changes, and after layout when the native view first exists.
		148	React.useEffect(applyHandleColor, [applyHandleColor]);
		149
		150	return (
		151	<RNText
		152	ref={textRef}
		153	{...props}
		154	onLayout={(event) => {
		155	applyHandleColor();
		156	onLayout?.(event);
		157	}}
		158	/>
		159	);
		160	}
		161
		162	export function MarkdownTextPrimitive({
		163	selectionHandleColor,
		164	...props
		165	}: MarkdownTextPrimitiveProps) {
		166	if (Platform.OS === "android" && selectionHandleColor !== undefined) {
		167	return <AndroidMarkdownText {...props} selectionHandleColor={selectionHandleColor} />;
		168	}
120	if (Platform.OS !== "ios") {	169	if (Platform.OS !== "ios") {
121	const { nativeTextRef, contextClipboardConfig: _contextClipboardConfig, ...textProps } = props;	170	const { nativeTextRef, contextClipboardConfig: _contextClipboardConfig, ...textProps } = props;
122	return <RNText ref={nativeTextRef} {...textProps} />;	171	return <RNText ref={nativeTextRef} {...textProps} />;

apps/mobile/modules/t3-markdown-text/src/NativeMarkdownBlock.tsx+15-5

 @@ -133,7 +133,13 @@ function HighlightedCodeText(props: {
     }
   }
   return (
-    <MarkdownTextPrimitive uiTextView selectable style={style}>
+    <MarkdownTextPrimitive
+      uiTextView
+      selectable
+      selectionColor={props.textStyle.selectionColor}
+      selectionHandleColor={props.textStyle.selectionHandleColor}
+      style={style}
+    >
       {props.highlighted ? lines : props.content}
     </MarkdownTextPrimitive>
   );
 @@ -174,8 +180,10 @@ function NativeCodeBlock(props: {
           justifyContent: "space-between",
         }}
       >
-        <Text
+        <MarkdownTextPrimitive
           selectable
+          selectionColor={props.textStyle.selectionColor}
+          selectionHandleColor={props.textStyle.selectionHandleColor}
           style={{
             flex: 1,
             color: props.textStyle.mutedColor,
 @@ -184,7 +192,7 @@ function NativeCodeBlock(props: {
           }}
         >
           {languageLabel}
-        </Text>
+        </MarkdownTextPrimitive>
         <CopyTextButton
           accessibilityLabel={`Copy ${languageLabel.toLowerCase()} code`}
           text={content}
 @@ -332,8 +340,10 @@ function NativeMarkdownImage(props: {
         }}
       />
       {props.node.alt ? (
-        <Text
+        <MarkdownTextPrimitive
           selectable
+          selectionColor={props.textStyle.selectionColor}
+          selectionHandleColor={props.textStyle.selectionHandleColor}
           style={{
             color: props.textStyle.mutedColor,
             fontFamily: props.textStyle.fontFamily,
 @@ -342,7 +352,7 @@ function NativeMarkdownImage(props: {
           }}
         >
           {props.node.alt}
-        </Text>
+        </MarkdownTextPrimitive>
       ) : null}
     </View>
   );

apps/mobile/modules/t3-markdown-text/src/NativeMarkdownSelectableText.tsx+2

...	@@ -338,6 +338,8 @@ export function NativeMarkdownSelectableText(props: {	...	@@ -338,6 +338,8 @@ export function NativeMarkdownSelectableText(props: {
338	}	338	}
339	uiTextView	339	uiTextView
340	selectable	340	selectable
		341	selectionColor={props.textStyle.selectionColor}
		342	selectionHandleColor={props.textStyle.selectionHandleColor}
341	style={{	343	style={{
342	flexShrink: 1,	344	flexShrink: 1,
343	minWidth: 0,	345	minWidth: 0,

apps/mobile/modules/t3-markdown-text/src/SelectableMarkdownText.types.ts+2

...	@@ -1,4 +1,6 @@	...	@@ -1,4 +1,6 @@
1	export interface NativeMarkdownTextStyle {	1	export interface NativeMarkdownTextStyle {
		2	readonly selectionColor?: string;
		3	readonly selectionHandleColor?: string;
2	readonly color: string;	4	readonly color: string;
3	readonly strongColor: string;	5	readonly strongColor: string;
4	readonly mutedColor: string;	6	readonly mutedColor: string;

apps/mobile/modules/t3-markdown-text/src/T3MarkdownTextSelectionModule.ts+5

...	@@ -1,6 +1,7 @@	...	@@ -1,6 +1,7 @@
1	import { requireOptionalNativeModule } from "expo";	1	import { requireOptionalNativeModule } from "expo";
2		2
3	interface T3MarkdownTextSelectionNativeModule {	3	interface T3MarkdownTextSelectionNativeModule {
		4	readonly setSelectionHandleColor?: (reactTag: number, color: number) => void;
4	readonly installCopySanitizer: (reactTag: number, contextClipboardConfig: string) => void;	5	readonly installCopySanitizer: (reactTag: number, contextClipboardConfig: string) => void;
5	readonly renderContextChip?: (payloadJson: string) => {	6	readonly renderContextChip?: (payloadJson: string) => {
6	readonly uri: string;	7	readonly uri: string;
...	@@ -20,6 +21,10 @@ export function installMarkdownCopySanitizer(reactTag: number, contextClipboardC	...	@@ -20,6 +21,10 @@ export function installMarkdownCopySanitizer(reactTag: number, contextClipboardC
20	nativeModule?.installCopySanitizer(reactTag, contextClipboardConfig);	21	nativeModule?.installCopySanitizer(reactTag, contextClipboardConfig);
21	}	22	}
22		23
		24	export function setMarkdownSelectionHandleColor(reactTag: number, color: number): void {
		25	nativeModule?.setSelectionHandleColor?.(reactTag, color);
		26	}
		27
23	export function renderAndroidContextChip(payloadJson: string) {	28	export function renderAndroidContextChip(payloadJson: string) {
24	return nativeModule?.renderContextChip?.(payloadJson) ?? null;	29	return nativeModule?.renderContextChip?.(payloadJson) ?? null;
25	}	30	}

apps/mobile/modules/t3-native-controls/android/src/main/java/expo/modules/t3nativecontrols/T3NativeControlsModule.kt+6

 @@ -1,6 +1,7 @@
 package expo.modules.t3nativecontrols
 import android.content.Intent
+import android.text.format.DateFormat
 import androidx.core.content.FileProvider
 import expo.modules.kotlin.Promise
 import expo.modules.kotlin.modules.Module
 @@ -15,6 +16,11 @@ class T3NativeControlsModule : Module() {
   override fun definition() = ModuleDefinition {
     Name("T3NativeControls")
+    Function("is24HourFormat") {
+      val context = appContext.reactContext ?: error("The app is not active.")
+      DateFormat.is24HourFormat(context)
+    }
     AsyncFunction("openFile") { uri: String, mimeType: String, promise: Promise ->
       check(filePreviewPromise == null) { "A document viewer is already open." }
       val activity = appContext.currentActivity ?: error("The app is not active.")

apps/mobile/src/App.tsx+3-7

 @@ -1,8 +1,7 @@
-import { BlurTargetView } from "expo-blur";
 import * as Linking from "expo-linking";
 import * as SplashScreen from "expo-splash-screen";
 import { useEffect } from "react";
-import { StatusBar } from "react-native";
+import { StatusBar, View } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { KeyboardProvider } from "react-native-keyboard-controller";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 @@ -21,10 +20,8 @@ import {
 import { RootStack } from "./Stack";
 import { appAtomRegistry } from "./state/atom-registry";
 import { OverlayPortalHost } from "./components/OverlayPortal";
-import { appBlurTargetRef } from "./lib/appBlurTarget";
 import { shouldHandleAppLink } from "./lib/appLinking";
 import { useMobileNavigationTheme } from "./lib/useMobileNavigationTheme";
 import { SubscriptionUsageCoordinator } from "./widgets/SubscriptionUsageCoordinator";
 import "../global.css";
 @@ -88,14 +85,13 @@ function AppContent() {
                 this, React Navigation defaults to its light theme and every native
                 header (glass buttons, title, materials) is forced light even when
                 the system is in dark mode. */}
-            {/* Blur target for Android dropdown backdrops — see appBlurTarget.ts. */}
+            <View style={{ flex: 1 }}>
-            <BlurTargetView ref={appBlurTargetRef} style={{ flex: 1 }}>
               <IncomingShareProvider>
                 <Navigation linking={appLinking} theme={navigationTheme} />
               </IncomingShareProvider>
               <ConfirmDialogHost />
               <ThreadArrangementHost />
-            </BlurTargetView>
+            </View>
             {/* Anchored-menu overlays render here — in-window, so the
                 keyboard stays up while a dropdown is open. */}
             <OverlayPortalHost />

apps/mobile/src/components/AndroidAnchoredMenu.tsx+36-105

 @@ -6,12 +6,8 @@ import { BackHandler, Pressable, ScrollView, View } from "react-native";
 import { useKeyboardState } from "react-native-keyboard-controller";
 import Animated, { FadeIn } from "react-native-reanimated";
-import { appBlurTargetRef } from "../lib/appBlurTarget";
-import { cn } from "../lib/cn";
-import { type AppSymbolName, SymbolView } from "./AppSymbol";
-import { AppText as Text } from "./AppText";
 import { OverlayPortal } from "./OverlayPortal";
-import { GlassBackdrop } from "./GlassBackdrop";
+import { MaterialMenuPopup } from "./MaterialMenuPopup";
 const MENU_WIDTH = 250;
 const SCREEN_MARGIN = 12;
 @@ -27,6 +23,7 @@ type AnchorSnapshot = {
   readonly y: number;
   readonly width: number;
   readonly height: number;
+  readonly keyboardWasVisible: boolean;
 };
 type OverlayFrame = {
 @@ -53,13 +50,9 @@ export type AndroidAnchoredMenuProps = {
 };
 /**
- * Token-styled anchored dropdown for Android, drop-in for the subset of the
+ * Adapts the app's MenuView actions to Material dropdowns on Android. Editor
- * MenuView contract the app uses (actions with state/subtitle/image/
+ * menus render native Material rows in-window to retain keyboard focus; other
- * attributes, one level of subactions). The native AppCompat PopupMenu caps
+ * menus use the native popup for placement, animation and dismissal.
- * out on theming — stock animation, item metrics, and submenu chrome — so
- * ControlPillMenu renders this instead on Android while iOS keeps the native
- * UIMenu. Styling follows the themed native popup (12dp radius, plain rows,
- * trailing check glyph); submenus drill in under a muted parent-title header.
  */
 export function AndroidAnchoredMenu(props: AndroidAnchoredMenuProps) {
   const [anchor, setAnchor] = useState<AnchorSnapshot | null>(null);
 @@ -89,9 +82,9 @@ export function AndroidAnchoredMenu(props: AndroidAnchoredMenuProps) {
   const open = useCallback(() => {
     anchorRef.current?.measureInWindow((x, y, width, height) => {
-      setAnchor({ x, y, width, height });
+      setAnchor({ x, y, width, height, keyboardWasVisible: keyboardVisible });
     });
-  }, []);
+  }, [keyboardVisible]);
   const measureOverlay = useCallback(() => {
     overlayRef.current?.measureInWindow((x, y, width, height) => {
 @@ -100,18 +93,11 @@ export function AndroidAnchoredMenu(props: AndroidAnchoredMenuProps) {
     });
   }, []);
-  // The dropdown renders in-window (no Modal takes focus), so the hardware
+  // The native popup owns back dismissal. In-window menus need a handler;
-  // back gesture needs explicit handling while it is open. Back steps out of
+  // back returns to the parent submenu before closing the overlay.
-  // a drilled-in submenu one level at a time (mirroring the tappable parent
-  // header) before closing the menu. Under predictive back
-  // (enableOnBackInvokedCallback) this stays correct: back reaches JS
-  // through always-registered OnBackPressedDispatcher callbacks (react-native
-  // core on Android 16+, withAndroidPredictiveBackCompat on 13-15), which
-  // also keeps the system from playing a "leave app" preview while the menu
-  // merely closes.
   const submenuDepth = path.length;
   useEffect(() => {
-    if (anchor === null) {
+    if (anchor === null || !anchor.keyboardWasVisible) {
       return;
     }
     const subscription = BackHandler.addEventListener("hardwareBackPress", () => {
 @@ -212,10 +198,20 @@ export function AndroidAnchoredMenu(props: AndroidAnchoredMenuProps) {
             onLayout={measureOverlay}
           >
             <Pressable accessible={false} className="absolute inset-0" onPress={close} />
-            {!placeable || local === null ? null : (
+            {!placeable || local === null ? null : !anchor.keyboardWasVisible ? (
+              <MaterialMenuPopup
+                anchor={local}
+                actions={levelActions}
+                title={props.title}
+                parent={parent}
+                onPress={onPressItem}
+                onBack={() => setPath((current) => current.slice(0, -1))}
+                onClose={close}
+              />
+            ) : (
               <Animated.View
                 entering={FadeIn.duration(120)}
-                className="absolute w-[250px] overflow-hidden rounded-[12px] border border-border shadow-2xl"
+                className="absolute w-[250px] overflow-hidden rounded-[4px] bg-card-alt shadow-md"
                 style={{
                   left,
                   maxHeight,
 @@ -224,93 +220,28 @@ export function AndroidAnchoredMenu(props: AndroidAnchoredMenuProps) {
                     : { bottom: (rootHeight ?? 0) - local.y + ANCHOR_GAP }),
                 }}
               >
-                <GlassBackdrop blurTarget={appBlurTargetRef} />
+                {/* Compose DropdownMenu takes popup focus in the pinned Expo UI version.
+                    Keep editor menus in-window so opening one preserves the keyboard. */}
                 {/* keyboardShouldPersistTaps: the menu often opens over an
                   active editor; the first item tap must act, not just
                   dismiss the keyboard. */}
                 <ScrollView
+                  contentContainerClassName="py-2"
                   bounces={false}
                   keyboardShouldPersistTaps="always"
                   showsVerticalScrollIndicator={false}
                 >
-                  {parent !== null ? (
+                  <MaterialMenuPopup
-                    // Muted parent title as the submenu header; tapping it
+                    inline
-                    // steps back, but it reads as a label, not a button.
+                    anchor={local}
-                    <Pressable
+                    actions={levelActions}
-                      className="px-3.5 pb-1 pt-2.5"
+                    title={props.title}
-                      onPress={() => setPath((current) => current.slice(0, -1))}
+                    parent={parent}
-                    >
+                    onPress={onPressItem}
-                      <Text className="text-xs font-t3-bold text-foreground-muted">
+                    onBack={() => setPath((current) => current.slice(0, -1))}
-                        {parent.title}
+                    onClose={close}
-                      </Text>
+                  />
-                    </Pressable>
-                  ) : props.title ? (
-                    <>
-                      <View className="px-3.5 py-2">
-                        <Text className="text-center text-xs text-foreground-muted">
-                          {props.title}
-                        </Text>
-                      </View>
-                      <View className="h-px bg-border" />
-                    </>
-                  ) : null}
-                  {levelActions.map((action, index) => {
-                    const destructive = action.attributes?.destructive ?? false;
-                    const disabled = action.attributes?.disabled ?? false;
-                    const hasSubmenu = (action.subactions?.length ?? 0) > 0;
-                    return (
-                      <Pressable
-                        key={action.id ?? `${index}-${action.title}`}
-                        disabled={disabled}
-                        className={cn(
-                          "min-h-11 flex-row items-center gap-2.5 px-3.5 py-2.5 active:bg-subtle",
-                          disabled && "opacity-45",
-                        )}
-                        onPress={() => onPressItem(action)}
-                      >
-                        <View className="flex-1 gap-0.5">
-                          <Text
-                            className={cn(
-                              // Same face as the pill labels that open these menus.
-                              "text-sm font-t3-bold",
-                              destructive && "text-danger-foreground",
-                            )}
-                          >
-                            {action.title}
-                          </Text>
-                          {action.subtitle ? (
-                            <Text className="text-xs leading-snug text-foreground-muted">
-                              {action.subtitle}
-                            </Text>
-                          ) : null}
-                        </View>
-                        {hasSubmenu ? (
-                          <SymbolView
-                            name="chevron.right"
-                            size={13}
-                            tintColorClassName={"accent-icon-subtle"}
-                            type="monochrome"
-                          />
-                        ) : action.state === "on" ? (
-                          <SymbolView
-                            name="checkmark"
-                            size={15}
-                            tintColorClassName={"accent-icon"}
-                            type="monochrome"
-                          />
-                        ) : action.image ? (
-                          <SymbolView
-                            name={action.image as AppSymbolName}
-                            size={15}
-                            tintColorClassName={
-                              destructive ? "accent-danger-foreground" : "accent-icon"
-                            }
-                            type="monochrome"
-                          />
-                        ) : null}
-                      </Pressable>
-                    );
-                  })}
                 </ScrollView>
               </Animated.View>
             )}

apps/mobile/src/components/AndroidScreenHeader.tsx+57-39

 @@ -1,16 +1,21 @@
-import type { ReactNode } from "react";
+import { useState, type ReactNode } from "react";
-import { Pressable, View } from "react-native";
+import { View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { SymbolView, type AppSymbolName } from "./AppSymbol";
+import type { AppSymbolName } from "./AppSymbol";
 import { AppText as Text } from "./AppText";
 import { cn } from "../lib/cn";
+import { MaterialIconButton } from "./MaterialIconButton";
+import { AndroidAnchoredMenu } from "./AndroidAnchoredMenu";
+import { useScaledTextRole } from "../features/settings/appearance/useScaledTextRole";
+import { useMaterialToolbarHeight } from "./useMaterialToolbarHeight";
 export interface AndroidHeaderAction {
   readonly accessibilityLabel: string;
   readonly icon: AppSymbolName;
   readonly onPress: () => void;
   readonly disabled?: boolean;
+  readonly selected?: boolean;
 }
 export function AndroidHeaderIconButton(props: {
 @@ -18,73 +23,62 @@ export function AndroidHeaderIconButton(props: {
   readonly icon: AppSymbolName;
   readonly onPress?: () => void;
   readonly disabled?: boolean;
+  readonly selected?: boolean;
 }) {
-  return (
+  return <MaterialIconButton {...props} variant={props.selected ? "tonal" : "standard"} />;
-    <Pressable
-      accessibilityLabel={props.accessibilityLabel}
-      accessibilityRole="button"
-      disabled={props.disabled}
-      hitSlop={8}
-      onPress={props.onPress}
-      className={cn(
-        "size-11 items-center justify-center rounded-full bg-subtle",
-        props.disabled && "opacity-55",
-      )}
-    >
-      <SymbolView
-        name={props.icon}
-        size={20}
-        tintColorClassName={props.disabled ? "accent-icon-subtle" : "accent-foreground"}
-        type="monochrome"
-      />
-    </Pressable>
-  );
 }
 export function AndroidScreenHeader(props: {
   readonly title: string;
   readonly subtitle?: string | null;
   readonly actions?: ReadonlyArray<AndroidHeaderAction>;
+  readonly leading?: ReactNode;
   readonly trailing?: ReactNode;
   readonly onBack?: () => void;
   readonly embedded?: boolean;
   readonly hideBottomBorder?: boolean;
 }) {
   const insets = useSafeAreaInsets();
+  const titleTypography = useScaledTextRole("title");
+  const subtitleTypography = useScaledTextRole("label");
+  const materialToolbarHeight = useMaterialToolbarHeight();
+  const [headerWidth, setHeaderWidth] = useState(0);
+  const actions = props.actions ?? [];
+  const directCount = actions.length > 2 ? (headerWidth >= 600 ? 3 : 1) : actions.length;
+  const visibleActions = actions.slice(0, directCount);
+  const overflowActions = actions.slice(directCount);
   return (
     <View
-      className="border-b border-header-border bg-header px-3 pb-2.5"
+      onLayout={(event) => setHeaderWidth(event.nativeEvent.layout.width)}
+      className="border-b border-header-border bg-header px-2 pb-2"
       style={{
         paddingTop: props.embedded ? 8 : Math.max(insets.top, 12),
         borderBottomWidth: props.hideBottomBorder ? 0 : undefined,
       }}
     >
-      <View className="min-h-12 flex-row items-center gap-2">
+      <View
+        style={{ minHeight: materialToolbarHeight }}
+        className="min-h-14 flex-row items-center gap-1"
+      >
         {props.onBack ? (
-          <Pressable
+          <MaterialIconButton
             accessibilityLabel="Navigate up"
-            accessibilityRole="button"
+            icon="arrow.left"
-            hitSlop={8}
             onPress={props.onBack}
-            className="-mr-2 size-11 items-center justify-center"
+          />
-          >
-            <SymbolView
-              name="chevron.left"
-              size={24}
-              tintColorClassName={"accent-foreground"}
-              type="monochrome"
-            />
-          </Pressable>
         ) : null}
+        {props.leading}
         <View className={cn("min-w-0 flex-1", !props.onBack && "pl-1")}>
-          <Text numberOfLines={1} className="text-lg font-t3-bold text-foreground">
+          <Text numberOfLines={1} style={titleTypography} className="text-foreground">
             {props.title}
           </Text>
           {props.subtitle ? (
             <Text
               numberOfLines={1}
+              style={subtitleTypography}
               className="mt-px text-[13px] font-t3-medium text-foreground-muted"
             >
               {props.subtitle}
 @@ -92,15 +86,39 @@ export function AndroidScreenHeader(props: {
           ) : null}
         </View>
-        {props.actions?.map((action) => (
+        {visibleActions.map((action) => (
           <AndroidHeaderIconButton
             key={action.accessibilityLabel}
             accessibilityLabel={action.accessibilityLabel}
             disabled={action.disabled}
+            selected={action.selected}
             icon={action.icon}
             onPress={action.onPress}
           />
         ))}
+        {overflowActions.length > 0 ? (
+          <AndroidAnchoredMenu
+            actions={overflowActions.map((action, index) => ({
+              id: String(index),
+              title: action.accessibilityLabel,
+              attributes: {
+                disabled: Boolean(action.disabled),
+                state: action.selected ? "on" : undefined,
+              },
+            }))}
+            onPressAction={({ nativeEvent }) =>
+              overflowActions[Number(nativeEvent.event)]?.onPress()
+            }
+          >
+            {(open) => (
+              <MaterialIconButton
+                accessibilityLabel="More actions"
+                icon="ellipsis"
+                onPress={open}
+              />
+            )}
+          </AndroidAnchoredMenu>
+        ) : null}
         {props.trailing}
       </View>
     </View>

apps/mobile/src/components/AppSymbol.tsx+9

apps/mobile/src/components/AppText.tsx+15-3

 @@ -1,4 +1,5 @@
 import {
+  Platform,
   Text as RNText,
   TextInput as RNTextInput,
   type TextInputProps as RNTextInputProps,
 @@ -14,7 +15,13 @@ export type AppTextProps = RNTextProps & { readonly className?: string };
  * Uses Uniwind className — no manual style parsing.
  */
 export function AppText({ className, ...props }: AppTextProps) {
-  return <RNText className={cn("font-sans text-foreground", className)} {...props} />;
+  return (
+    <RNText
+      className={cn("font-sans text-foreground", className)}
+      selectionColorClassName={Platform.OS === "android" ? "accent-primary/32" : undefined}
+      {...props}
+    />
+  );
 }
 export type AppTextInputProps = Omit<RNTextInputProps, "placeholderTextColor"> & {
 @@ -35,8 +42,13 @@ export function AppTextInput({ className, ref, ...props }: AppTextInputProps) {
         className,
       )}
       placeholderTextColorClassName="accent-placeholder"
-      selectionColorClassName="accent-foreground-secondary"
+      selectionColorClassName={
-      cursorColorClassName="accent-foreground-secondary"
+        Platform.OS === "android" ? "accent-primary/32" : "accent-foreground-secondary"
+      }
+      cursorColorClassName={
+        Platform.OS === "android" ? "accent-primary" : "accent-foreground-secondary"
+      }
+      selectionHandleColorClassName={Platform.OS === "android" ? "accent-primary" : undefined}
       {...props}
     />
   );

apps/mobile/src/components/ConfirmDialogHost.tsx+30-11

 @@ -1,8 +1,9 @@
 import { useCallback, useEffect, useState } from "react";
-import { Modal, Pressable, TextInput, View } from "react-native";
+import { Platform, Modal, Pressable, TextInput, View } from "react-native";
 import { cn } from "../lib/cn";
 import { AppText } from "./AppText";
+import { MaterialConfirmDialog } from "./MaterialConfirmDialog";
 export type ConfirmDialogRequest = {
   readonly title: string;
 @@ -67,17 +68,35 @@ export function ConfirmDialogHost() {
     setPresented(null);
   }, [presented]);
-  const handleConfirm = useCallback(() => {
+  const handleConfirm = useCallback(
-    if (presented?.kind === "confirm") {
+    (nativeInputValue?: string) => {
-      presented.request.onConfirm();
+      if (presented?.kind === "confirm") {
-    } else if (presented?.kind === "text-input") {
+        presented.request.onConfirm();
-      presented.request.onConfirm(inputValue);
+      } else if (presented?.kind === "text-input") {
-    }
+        presented.request.onConfirm(nativeInputValue ?? inputValue);
-    setPresented(null);
+      }
-  }, [inputValue, presented]);
+      setPresented(null);
+    },
+    [inputValue, presented],
+  );
   const confirmDisabled = presented?.kind === "text-input" && inputValue.trim().length === 0;
+  if (Platform.OS === "android")
+    return presented ? (
+      <MaterialConfirmDialog
+        key={`${presented.kind}:${presented.request.title}:${presented.kind === "text-input" ? presented.request.initialValue : ""}`}
+        request={presented.request}
+        inputInitialValue={
+          presented.kind === "text-input" ? presented.request.initialValue : undefined
+        }
+        onInputChange={setInputValue}
+        confirmDisabled={confirmDisabled}
+        onCancel={handleCancel}
+        onConfirm={handleConfirm}
+      />
+    ) : null;
   return (
     <Modal
       visible={presented !== null}
 @@ -102,7 +121,7 @@ export function ConfirmDialogHost() {
                 autoFocus
                 className="mt-4 rounded-xl border border-border bg-screen px-3 py-2.5 text-base text-foreground"
                 onChangeText={setInputValue}
-                onSubmitEditing={confirmDisabled ? undefined : handleConfirm}
+                onSubmitEditing={confirmDisabled ? undefined : () => handleConfirm()}
                 returnKeyType="done"
                 selectTextOnFocus
                 value={inputValue}
 @@ -125,7 +144,7 @@ export function ConfirmDialogHost() {
                   accessibilityRole="button"
                   disabled={confirmDisabled}
                   className="min-h-10 items-center justify-center px-4 active:bg-subtle"
-                  onPress={handleConfirm}
+                  onPress={() => handleConfirm()}
                 >
                   <AppText
                     className={cn(

apps/mobile/src/components/ControlPill.tsx+45-5

...	@@ -19,12 +19,13 @@ import {	...	@@ -19,12 +19,13 @@ import {
19	} from "react-native";	19	} from "react-native";
20	import { withUniwind } from "uniwind";	20	import { withUniwind } from "uniwind";
21	import { useAppearancePreferences } from "../features/settings/appearance/AppearancePreferencesProvider";	21	import { useAppearancePreferences } from "../features/settings/appearance/AppearancePreferencesProvider";
22
23	import { cn } from "../lib/cn";	22	import { cn } from "../lib/cn";
24	import { withMenuActionIconColors } from "../lib/menu-action-colors";	23	import { withMenuActionIconColors } from "../lib/menu-action-colors";
25	import { AndroidAnchoredMenu } from "./AndroidAnchoredMenu";	24	import { AndroidAnchoredMenu } from "./AndroidAnchoredMenu";
26	import { SymbolView } from "./AppSymbol";	25	import { SymbolView } from "./AppSymbol";
27	import { AppText as Text } from "./AppText";	26	import { AppText as Text } from "./AppText";
		27	import { MaterialIconButton } from "./MaterialIconButton";
		28	import { MaterialButton } from "./MaterialButton";
28		29
29	const ThemedMenuView = withUniwind(	30	const ThemedMenuView = withUniwind(
30	function NativeMenuView({	31	function NativeMenuView({
...	@@ -121,6 +122,47 @@ export function ControlPill(props: {	...	@@ -121,6 +122,47 @@ export function ControlPill(props: {
121	: "",	122	: "",
122	);	123	);
123		124
		125	if (
		126	Platform.OS === "android" &&
		127	(variant === "pill" \|\| variant === "primary") &&
		128	props.label &&
		129	props.onPress &&
		130	!props.icon &&
		131	!props.iconNode &&
		132	!props.className &&
		133	!props.activateOnPressIn &&
		134	(!props.accessibilityLabel \|\| props.accessibilityLabel === props.label)
		135	) {
		136	return (
		137	<MaterialButton
		138	label={props.label}
		139	onPress={props.onPress}
		140	disabled={props.disabled}
		141	tone={variant === "primary" ? "primary" : "secondary"}
		142	/>
		143	);
		144	}
		145
		146	if (
		147	Platform.OS === "android" &&
		148	props.accessibilityLabel &&
		149	props.icon &&
		150	!props.iconNode &&
		151	!props.label &&
		152	!props.className &&
		153	!props.activateOnPressIn
		154	) {
		155	return (
		156	<MaterialIconButton
		157	accessibilityLabel={props.accessibilityLabel}
		158	icon={props.icon}
		159	onPress={props.onPress}
		160	disabled={props.disabled}
		161	variant={variant === "primary" ? "primary" : variant === "danger" ? "danger" : "tonal"}
		162	/>
		163	);
		164	}
		165
124	return (	166	return (
125	<Pressable	167	<Pressable
126	accessibilityLabel={props.accessibilityLabel ?? props.label}	168	accessibilityLabel={props.accessibilityLabel ?? props.label}
...	@@ -146,10 +188,8 @@ export function ControlPill(props: {	...	@@ -146,10 +188,8 @@ export function ControlPill(props: {
146	);	188	);
147	}	189	}
148		190
149	// iOS renders the native UIMenu (standard checkmark for `state: "on"`);	191	// iOS renders UIMenu; AndroidAnchoredMenu adapts the same actions to the
150	// Android renders the token-styled AndroidAnchoredMenu, since the native	192	// selected Android appearance and keeps editor menus above the keyboard.
151	// AppCompat popup can't be themed past its stock animation, metrics, and
152	// submenu chrome.
153	export function ControlPillMenu(	193	export function ControlPillMenu(
154	props: Omit<ComponentProps<typeof MenuView>, "children" \| "themeVariant"> &	194	props: Omit<ComponentProps<typeof MenuView>, "children" \| "themeVariant"> &
155	Pick<AccessibilityProps, "accessible" \| "accessibilityLabel" \| "accessibilityRole"> & {	195	Pick<AccessibilityProps, "accessible" \| "accessibilityLabel" \| "accessibilityRole"> & {

apps/mobile/src/components/EmptyState.tsx+8-2

...	@@ -1,4 +1,5 @@	...	@@ -1,4 +1,5 @@
1	import { Pressable, View } from "react-native";	1	import { Pressable, View } from "react-native";
		2	import type { ReactNode } from "react";
2		3
3	import { AppText as Text } from "./AppText";	4	import { AppText as Text } from "./AppText";
4		5
...	@@ -7,6 +8,7 @@ export function EmptyState(props: {	...	@@ -7,6 +8,7 @@ export function EmptyState(props: {
7	readonly detail: string;	8	readonly detail: string;
8	readonly actionLabel?: string;	9	readonly actionLabel?: string;
9	readonly onAction?: () => void;	10	readonly onAction?: () => void;
		11	readonly action?: ReactNode;
10	readonly variant?: "card" \| "plain";	12	readonly variant?: "card" \| "plain";
11	}) {	13	}) {
12	if (props.variant === "plain") {	14	if (props.variant === "plain") {
...	@@ -16,7 +18,9 @@ export function EmptyState(props: {	...	@@ -16,7 +18,9 @@ export function EmptyState(props: {
16	<Text className="mt-2 text-center font-sans text-base leading-normal text-foreground-muted">	18	<Text className="mt-2 text-center font-sans text-base leading-normal text-foreground-muted">
17	{props.detail}	19	{props.detail}
18	</Text>	20	</Text>
19	{props.actionLabel && props.onAction ? (	21	{props.action ? (
		22	<View className="mt-5">{props.action}</View>
		23	) : props.actionLabel && props.onAction ? (
20	<Pressable	24	<Pressable
21	className="mt-5 rounded-full bg-primary px-5 py-3 active:opacity-70"	25	className="mt-5 rounded-full bg-primary px-5 py-3 active:opacity-70"
22	onPress={props.onAction}	26	onPress={props.onAction}
...	@@ -36,7 +40,9 @@ export function EmptyState(props: {	...	@@ -36,7 +40,9 @@ export function EmptyState(props: {
36	<Text className="mt-2 font-sans text-sm leading-relaxed text-foreground-muted">	40	<Text className="mt-2 font-sans text-sm leading-relaxed text-foreground-muted">
37	{props.detail}	41	{props.detail}
38	</Text>	42	</Text>
39	{props.actionLabel && props.onAction ? (	43	{props.action ? (
		44	<View className="mt-4 self-start">{props.action}</View>
		45	) : props.actionLabel && props.onAction ? (
40	<Pressable	46	<Pressable
41	className="mt-4 self-start rounded-full bg-primary px-4 py-2.5 active:opacity-70"	47	className="mt-4 self-start rounded-full bg-primary px-4 py-2.5 active:opacity-70"
42	onPress={props.onAction}	48	onPress={props.onAction}

apps/mobile/src/components/GlassBackdrop.tsx+2-19

 @@ -1,22 +1,13 @@
 import { BlurView } from "expo-blur";
-import { useContext, type RefObject } from "react";
 import { Platform, StyleSheet, View, type ColorValue } from "react-native";
 import { useAppearancePreferences } from "../features/settings/appearance/AppearancePreferencesProvider";
-import { GlassBlurTargetContext } from "../lib/glassBlurTarget";
 import { themeColorWithAlpha } from "../lib/mobileTheme";
 /** Frosted backdrop for containers that clip their children to their shape. */
-export function GlassBackdrop(props: {
+export function GlassBackdrop(props: { readonly fallbackColor?: ColorValue }) {
-  readonly fallbackColor?: ColorValue;
-  readonly blurTarget?: RefObject<View | null>;
-}) {
   const { themeAppearance } = useAppearancePreferences();
-  const inheritedBlurTarget = useContext(GlassBlurTargetContext);
+  const supportsBlur = Platform.OS === "ios";
-  const target = props.blurTarget ?? inheritedBlurTarget;
-  const supportsBlur =
-    Platform.OS === "ios" ||
-    (Platform.OS === "android" && Platform.Version >= 31 && target !== undefined);
   const colorStyle =
     props.fallbackColor === undefined
       ? undefined
 @@ -24,17 +15,9 @@ export function GlassBackdrop(props: {
   return (
     <>
-      {/* Android samples a separate target. An opaque backing prevents any
-          transparent pixels in that sample from exposing the unblurred feed.
-          iOS samples its actual backdrop, so a backing there would hide it. */}
-      {Platform.OS === "android" ? (
-        <View pointerEvents="none" className="absolute inset-0 bg-card" style={colorStyle} />
-      ) : null}
       {supportsBlur ? (
         <BlurView
           pointerEvents="none"
-          blurTarget={target}
-          blurMethod="dimezisBlurViewSdk31Plus"
           intensity={80}
           tint={themeAppearance === "dark" ? "dark" : "default"}
           style={StyleSheet.absoluteFill}

apps/mobile/src/components/GlassSurface.tsx+8-18

 @@ -1,5 +1,5 @@
 import { GlassView, isGlassEffectAPIAvailable } from "expo-glass-effect";
-import type { ReactNode, Ref, RefObject } from "react";
+import type { ReactNode, Ref } from "react";
 import {
   Platform,
   useColorScheme,
 @@ -28,7 +28,6 @@ interface GlassSurfaceProps extends ViewProps {
   readonly chrome?: "default" | "none";
   /** Base color for the frosted tint, or solid fill when blur is unavailable. */
   readonly fallbackColor?: ColorValue;
-  readonly blurTarget?: RefObject<View | null>;
   /** Uniwind styling used only when native Liquid Glass is unavailable. */
   readonly fallbackClassName?: string;
 }
 @@ -41,7 +40,6 @@ export function GlassSurface({
   tintColor,
   tintColorClassName,
   fallbackColor,
-  blurTarget,
   fallbackClassName,
   className,
   style,
 @@ -49,23 +47,15 @@ export function GlassSurface({
 }: GlassSurfaceProps) {
   const isDarkMode = useColorScheme() === "dark";
   const supportsGlass = Platform.OS === "ios" && isGlassEffectAPIAvailable();
+  const hasShadow = chrome !== "none" && Platform.OS !== "android";
   const surfaceStyle: ViewStyle = {
     borderRadius: 32,
     overflow: "hidden",
-    shadowColor: chrome === "none" ? "transparent" : "#000000",
+    shadowColor: hasShadow ? "#000000" : "transparent",
-    shadowOpacity: chrome === "none" ? 0 : isDarkMode ? 0.22 : 0.08,
+    shadowOpacity: hasShadow ? (isDarkMode ? 0.22 : 0.08) : 0,
-    shadowRadius: chrome === "none" ? 0 : 28,
+    shadowRadius: hasShadow ? 28 : 0,
-    shadowOffset:
+    shadowOffset: { width: 0, height: hasShadow ? 14 : 0 },
-      chrome === "none"
+    elevation: hasShadow ? 12 : 0,
-        ? {
-            width: 0,
-            height: 0,
-          }
-        : {
-            width: 0,
-            height: 14,
-          },
-    elevation: chrome === "none" ? 0 : 12,
   };
   if (supportsGlass) {
 @@ -103,7 +93,7 @@ export function GlassSurface({
       )}
       style={[surfaceStyle, style]}
     >
-      <GlassBackdrop blurTarget={blurTarget} fallbackColor={fallbackColor} />
+      <GlassBackdrop fallbackColor={fallbackColor} />
       {children}
     </View>
   );

apps/mobile/src/components/MaterialButton.android.tsx created+94

...	@@ -0,0 +1,94 @@
1	import {
2	Box,
3	Button,
4	CircularProgressIndicator,
5	FilledTonalButton,
6	Host,
7	Row,
8	Text,
9	TextButton,
10	} from "@expo/ui/jetpack-compose";
11	import { defaultMinSize, fillMaxWidth, size } from "@expo/ui/jetpack-compose/modifiers";
12	import { View } from "react-native";
13
14	import { useAppearancePreferences } from "../features/settings/appearance/AppearancePreferencesProvider";
15	import { useScaledTextRole } from "../features/settings/appearance/useScaledTextRole";
16	import type { MaterialButtonProps } from "./MaterialButton";
17
18	export function MaterialButton(props: MaterialButtonProps) {
19	const { themeAppearance, themeVariables: colors } = useAppearancePreferences();
20	const typography = useScaledTextRole("footnote");
21	const tone = props.tone ?? "secondary";
22	const Component =
23	tone === "text" ? TextButton : tone === "secondary" ? FilledTonalButton : Button;
24	const containerColor =
25	tone === "primary"
26	? colors["--color-primary"]
27	: tone === "danger"
28	? colors["--color-danger"]
29	: tone === "text"
30	? "#00000000"
31	: colors["--color-secondary"];
32	const contentColor =
33	tone === "primary"
34	? colors["--color-primary-foreground"]
35	: tone === "danger"
36	? colors["--color-danger-foreground"]
37	: tone === "text"
38	? colors["--color-primary"]
39	: colors["--color-secondary-foreground"];
40	return (
41	<View
42	accessible
43	accessibilityRole="button"
44	accessibilityLabel={props.label}
45	accessibilityState={{
46	disabled: Boolean(props.disabled \|\| props.loading),
47	busy: Boolean(props.loading),
48	}}
49	accessibilityActions={[{ name: "activate" }]}
50	onAccessibilityAction={() => {
51	if (!props.disabled && !props.loading) props.onPress();
52	}}
53	style={props.fullWidth ? { width: "100%" } : { alignSelf: "flex-start" }}
54	>
55	<View importantForAccessibility="no-hide-descendants">
56	<Host
57	matchContents={props.fullWidth ? { vertical: true } : true}
58	colorScheme={themeAppearance}
59	ignoreSafeAreaKeyboardInsets
60	style={props.fullWidth ? { width: "100%" } : { alignSelf: "flex-start" }}
61	>
62	<Component
63	enabled={!props.disabled && !props.loading}
64	onClick={props.onPress}
65	modifiers={[
66	defaultMinSize({ minHeight: 48 }),
67	...(props.fullWidth ? [fillMaxWidth()] : []),
68	]}
69	colors={{
70	containerColor,
71	contentColor,
72	disabledContainerColor: colors["--color-subtle-strong"],
73	disabledContentColor: colors["--color-foreground-muted"],
74	}}
75	>
76	<Row verticalAlignment="center">
77	{props.loading ? (
78	<>
79	<CircularProgressIndicator
80	modifiers={[size(18, 18)]}
81	strokeWidth={2}
82	color={colors["--color-foreground-muted"]}
83	/>
84	<Box modifiers={[size(8, 1)]} />
85	</>
86	) : null}
87	<Text style={{ ...typography, fontWeight: "500" }}>{props.label}</Text>
88	</Row>
89	</Component>
90	</Host>
91	</View>
92	</View>
93	);
94	}

apps/mobile/src/components/MaterialButton.tsx created+24

...	@@ -0,0 +1,24 @@
1	import { Pressable } from "react-native";
2	import { AppText } from "./AppText";
3
4	export interface MaterialButtonProps {
5	readonly label: string;
6	readonly onPress: () => void;
7	readonly disabled?: boolean;
8	readonly loading?: boolean;
9	readonly tone?: "primary" \| "secondary" \| "danger" \| "text";
10	readonly fullWidth?: boolean;
11	}
12
13	export function MaterialButton(props: MaterialButtonProps) {
14	return (
15	<Pressable
16	accessibilityRole="button"
17	disabled={props.disabled}
18	onPress={props.onPress}
19	className="min-h-12 justify-center rounded-full bg-secondary px-6"
20	>
21	<AppText>{props.label}</AppText>
22	</Pressable>
23	);
24	}

apps/mobile/src/components/MaterialConfirmDialog.android.tsx created+96

...	@@ -0,0 +1,96 @@
1	import {
2	AlertDialog,
3	Host,
4	OutlinedTextField,
5	Text,
6	TextButton,
7	useNativeState,
8	} from "@expo/ui/jetpack-compose";
9
10	import { useAppearancePreferences } from "../features/settings/appearance/AppearancePreferencesProvider";
11	import { useScaledTextRole } from "../features/settings/appearance/useScaledTextRole";
12	import type { MaterialConfirmDialogProps } from "./MaterialConfirmDialog";
13
14	export function MaterialConfirmDialog(props: MaterialConfirmDialogProps) {
15	const { themeAppearance, themeVariables: colors } = useAppearancePreferences();
16	const titleTypography = useScaledTextRole("title");
17	const bodyTypography = useScaledTextRole("footnote");
18	const inputTypography = useScaledTextRole("body");
19	const inputState = useNativeState(props.inputInitialValue ?? "");
20	const inputSelection = useNativeState({ start: 0, end: props.inputInitialValue?.length ?? 0 });
21	const confirm = () => {
22	if (props.confirmDisabled) return;
23	const value = props.inputInitialValue === undefined ? undefined : inputState.get();
24	if (value !== undefined && !value.trim()) return;
25	props.onConfirm(value);
26	};
27	return (
28	<Host
29	colorScheme={themeAppearance}
30	ignoreSafeAreaKeyboardInsets
31	style={{ height: 0, width: 0 }}
32	>
33	<AlertDialog
34	onDismissRequest={props.onCancel}
35	tonalElevation={0}
36	colors={{
37	containerColor: colors["--color-card-alt"],
38	titleContentColor: colors["--color-foreground"],
39	textContentColor: colors["--color-foreground-secondary"],
40	}}
41	>
42	<AlertDialog.Title>
43	<Text style={titleTypography}>{props.request.title}</Text>
44	</AlertDialog.Title>
45	{props.inputInitialValue !== undefined ? (
46	<AlertDialog.Text>
47	<OutlinedTextField
48	autoFocus
49	singleLine
50	value={inputState}
51	selection={inputSelection}
52	onValueChange={props.onInputChange}
53	textStyle={inputTypography}
54	keyboardOptions={{ imeAction: "done" }}
55	keyboardActions={{
56	onDone: confirm,
57	}}
58	colors={{
59	focusedTextColor: colors["--color-foreground"],
60	unfocusedTextColor: colors["--color-foreground"],
61	focusedIndicatorColor: colors["--color-primary"],
62	unfocusedIndicatorColor: colors["--color-border"],
63	cursorColor: colors["--color-primary"],
64	}}
65	>
66	<OutlinedTextField.Label>
67	<Text style={bodyTypography}>{props.request.title}</Text>
68	</OutlinedTextField.Label>
69	</OutlinedTextField>
70	</AlertDialog.Text>
71	) : props.request.message ? (
72	<AlertDialog.Text>
73	<Text style={bodyTypography}>{props.request.message}</Text>
74	</AlertDialog.Text>
75	) : null}
76	<AlertDialog.DismissButton>
77	<TextButton onClick={props.onCancel} colors={{ contentColor: colors["--color-primary"] }}>
78	<Text style={bodyTypography}>{props.request.cancelText ?? "Cancel"}</Text>
79	</TextButton>
80	</AlertDialog.DismissButton>
81	<AlertDialog.ConfirmButton>
82	<TextButton
83	onClick={confirm}
84	enabled={!props.confirmDisabled}
85	colors={{
86	contentColor:
87	colors[props.request.destructive ? "--color-danger" : "--color-primary"],
88	}}
89	>
90	<Text style={bodyTypography}>{props.request.confirmText}</Text>
91	</TextButton>
92	</AlertDialog.ConfirmButton>
93	</AlertDialog>
94	</Host>
95	);
96	}

apps/mobile/src/components/MaterialConfirmDialog.tsx created+17

...	@@ -0,0 +1,17 @@
1	import type { ConfirmDialogRequest } from "./ConfirmDialogHost";
2
3	export interface MaterialConfirmDialogProps {
4	readonly request: Pick<
5	ConfirmDialogRequest,
6	"title" \| "message" \| "cancelText" \| "confirmText" \| "destructive"
7	>;
8	readonly inputInitialValue?: string;
9	readonly onInputChange?: (value: string) => void;
10	readonly confirmDisabled?: boolean;
11	readonly onCancel: () => void;
12	readonly onConfirm: (inputValue?: string) => void;
13	}
14
15	export function MaterialConfirmDialog(_props: MaterialConfirmDialogProps) {
16	return null;
17	}

apps/mobile/src/components/MaterialFloatingActionButton.android.tsx created+86

...	@@ -0,0 +1,86 @@
1	import {
2	Box,
3	ExtendedFloatingActionButton,
4	FloatingActionButton,
5	Host,
6	LargeFloatingActionButton,
7	Text,
8	} from "@expo/ui/jetpack-compose";
9	import { size } from "@expo/ui/jetpack-compose/modifiers";
10	import { View, type StyleProp, type ViewStyle } from "react-native";
11	import { useAppearancePreferences } from "../features/settings/appearance/AppearancePreferencesProvider";
12	import { useScaledTextRole } from "../features/settings/appearance/useScaledTextRole";
13	import { SymbolView, type AppSymbolName } from "./AppSymbol";
14
15	export function MaterialFloatingActionButton(props: {
16	readonly onPress: () => void;
17	readonly label: string;
18	readonly icon: AppSymbolName;
19	readonly variant?: "extended" \| "large";
20	readonly expanded?: boolean;
21	readonly tone?: "primary" \| "secondary";
22	readonly className?: string;
23	readonly style?: StyleProp<ViewStyle>;
24	}) {
25	const { themeAppearance, themeVariables: colors } = useAppearancePreferences();
26	const typography = useScaledTextRole("footnote");
27	const primary = props.tone === "primary";
28	const containerColor = colors[primary ? "--color-primary" : "--color-thread-selected"];
29	const contentColor =
30	colors[primary ? "--color-primary-foreground" : "--color-thread-selected-foreground"];
31	const Component =
32	props.variant === "extended"
33	? ExtendedFloatingActionButton
34	: props.variant === "large"
35	? LargeFloatingActionButton
36	: FloatingActionButton;
37	const iconSize = props.variant === "large" ? 36 : 24;
38	return (
39	<View
40	accessible
41	accessibilityRole="button"
42	accessibilityLabel={props.label}
43	accessibilityActions={[{ name: "activate" }]}
44	onAccessibilityAction={props.onPress}
45	className={props.className}
46	style={props.style}
47	>
48	<View importantForAccessibility="no-hide-descendants">
49	<Host matchContents colorScheme={themeAppearance} ignoreSafeAreaKeyboardInsets>
50	<Component
51	containerColor={containerColor}
52	onClick={props.onPress}
53	expanded={props.expanded}
54	>
55	<Component.Icon>
56	<Box modifiers={[size(iconSize, iconSize)]} />
57	</Component.Icon>
58	{props.variant === "extended" ? (
59	<ExtendedFloatingActionButton.Text>
60	<Text color={contentColor} style={{ ...typography, fontWeight: "500" }}>
61	{props.label}
62	</Text>
63	</ExtendedFloatingActionButton.Text>
64	) : null}
65	</Component>
66	</Host>
67	</View>
68	{/* The RN icon stays outside Compose so it cannot intercept native button taps. */}
69	<View
70	pointerEvents="none"
71	className="absolute inset-y-0 justify-center"
72	style={
73	props.variant === "extended" ? { left: 16 } : { left: 0, right: 0, alignItems: "center" }
74	}
75	>
76	<SymbolView
77	name={props.icon}
78	size={iconSize}
79	tintColorClassName={
80	primary ? "accent-primary-foreground" : "accent-thread-selected-foreground"
81	}
82	/>
83	</View>
84	</View>
85	);
86	}

apps/mobile/src/components/MaterialFloatingActionButton.tsx created+46

...	@@ -0,0 +1,46 @@
1	import type { ComponentProps } from "react";
2	import { Pressable } from "react-native";
3	import type { MaterialFloatingActionButton as AndroidMaterialFloatingActionButton } from "./MaterialFloatingActionButton.android";
4	import { AppText } from "./AppText";
5	import { SymbolView } from "./AppSymbol";
6	import { cn } from "../lib/cn";
7
8	export function MaterialFloatingActionButton(
9	props: ComponentProps<typeof AndroidMaterialFloatingActionButton>,
10	) {
11	return (
12	<Pressable
13	accessibilityRole="button"
14	accessibilityLabel={props.label}
15	onPress={props.onPress}
16	className={cn(
17	"min-h-14 min-w-14 flex-row items-center justify-center gap-2 rounded-2xl px-4",
18	props.tone === "primary" ? "bg-primary" : "bg-thread-selected",
19	props.className,
20	)}
21	style={props.style}
22	>
23	<SymbolView
24	name={props.icon}
25	size={24}
26	tintColorClassName={
27	props.tone === "primary"
28	? "accent-primary-foreground"
29	: "accent-thread-selected-foreground"
30	}
31	/>
32	{props.variant === "extended" && props.expanded !== false ? (
33	<AppText
34	className={cn(
35	"text-sm",
36	props.tone === "primary"
37	? "text-primary-foreground"
38	: "text-thread-selected-foreground",
39	)}
40	>
41	{props.label}
42	</AppText>
43	) : null}
44	</Pressable>
45	);
46	}

apps/mobile/src/components/MaterialIconButton.android.tsx created+87

...	@@ -0,0 +1,87 @@
1	import {
2	FilledIconButton,
3	FilledTonalIconButton,
4	Host,
5	IconButton,
6	} from "@expo/ui/jetpack-compose";
7	import { size } from "@expo/ui/jetpack-compose/modifiers";
8	import { View } from "react-native";
9
10	import { useAppearancePreferences } from "../features/settings/appearance/AppearancePreferencesProvider";
11	import { SymbolView, type AppSymbolName } from "./AppSymbol";
12
13	export function MaterialIconButton(props: {
14	readonly accessibilityLabel: string;
15	readonly icon: AppSymbolName;
16	readonly onPress?: () => void;
17	readonly disabled?: boolean;
18	readonly selected?: boolean;
19	readonly variant?: "standard" \| "primary" \| "tonal" \| "danger";
20	}) {
21	const { themeAppearance, themeVariables: colors } = useAppearancePreferences();
22	const variant = props.variant ?? "standard";
23	const Component =
24	variant === "standard"
25	? IconButton
26	: variant === "tonal"
27	? FilledTonalIconButton
28	: FilledIconButton;
29	const containerColor =
30	variant === "primary"
31	? colors["--color-primary"]
32	: variant === "danger"
33	? colors["--color-danger"]
34	: colors["--color-secondary"];
35	const iconTint = props.disabled
36	? "accent-icon-subtle"
37	: variant === "primary"
38	? "accent-primary-foreground"
39	: variant === "danger"
40	? "accent-danger-foreground"
41	: variant === "tonal"
42	? "accent-secondary-foreground"
43	: "accent-foreground";
44	return (
45	<View
46	accessible
47	accessibilityLabel={props.accessibilityLabel}
48	accessibilityRole="button"
49	accessibilityState={{ disabled: Boolean(props.disabled), selected: props.selected }}
50	accessibilityActions={[{ name: "activate" }]}
51	onAccessibilityAction={() => {
52	if (!props.disabled) props.onPress?.();
53	}}
54	style={{ width: 48, height: 48 }}
55	>
56	<View importantForAccessibility="no-hide-descendants">
57	<Host
58	colorScheme={themeAppearance}
59	ignoreSafeAreaKeyboardInsets
60	style={{ width: 48, height: 48 }}
61	>
62	<Component
63	onClick={props.onPress}
64	enabled={!props.disabled}
65	modifiers={[size(48, 48)]}
66	colors={
67	variant === "standard"
68	? undefined
69	: { containerColor, disabledContainerColor: colors["--color-subtle-strong"] }
70	}
71	>
72	{null}
73	</Component>
74	</Host>
75	</View>
76	{/* Keep RN SVG measurement outside Compose; the native button owns touch and ripple. */}
77	<View pointerEvents="none" className="absolute inset-0 items-center justify-center">
78	<SymbolView
79	name={props.icon === "ellipsis" ? { ios: "ellipsis", android: "more_vert" } : props.icon}
80	size={24}
81	tintColorClassName={iconTint}
82	type="monochrome"
83	/>
84	</View>
85	</View>
86	);
87	}

apps/mobile/src/components/MaterialIconButton.tsx created+23

...	@@ -0,0 +1,23 @@
1	import { Pressable } from "react-native";
2
3	import { SymbolView, type AppSymbolName } from "./AppSymbol";
4
5	export function MaterialIconButton(props: {
6	readonly accessibilityLabel: string;
7	readonly icon: AppSymbolName;
8	readonly onPress?: () => void;
9	readonly disabled?: boolean;
10	readonly selected?: boolean;
11	readonly variant?: "standard" \| "primary" \| "tonal" \| "danger";
12	}) {
13	return (
14	<Pressable
15	{...props}
16	accessibilityRole="button"
17	accessibilityState={{ disabled: Boolean(props.disabled), selected: props.selected }}
18	className="size-12 items-center justify-center"
19	>
20	<SymbolView name={props.icon} size={24} tintColorClassName="accent-foreground" />
21	</Pressable>
22	);
23	}

apps/mobile/src/components/MaterialListRow.tsx created+57

...	@@ -0,0 +1,57 @@
1	import type { ComponentProps, ReactNode } from "react";
2	import { Platform, Pressable, View } from "react-native";
3
4	import { useAppearancePreferences } from "../features/settings/appearance/AppearancePreferencesProvider";
5	import { cn } from "../lib/cn";
6	import { AppText } from "./AppText";
7	import { SymbolView } from "./AppSymbol";
8
9	/** Shared geometry for Material navigation and selection lists. Group rows in one card. */
10	export function MaterialListRow({
11	title,
12	subtitle,
13	leading,
14	trailing,
15	className,
16	...props
17	}: Omit<ComponentProps<typeof Pressable>, "children"> & {
18	readonly title: string;
19	readonly subtitle?: string \| null;
20	readonly leading?: ReactNode;
21	readonly trailing?: ReactNode;
22	}) {
23	const { themeVariables } = useAppearancePreferences();
24	return (
25	<Pressable
26	accessibilityRole="button"
27	accessibilityLabel={[title, subtitle].filter(Boolean).join(", ")}
28	android_ripple={{ color: themeVariables["--color-subtle-strong"] }}
29	// Give the scroll view time to claim drags before starting the ripple.
30	unstable_pressDelay={Platform.OS === "android" ? 50 : undefined}
31	{...props}
32	className={cn(
33	"flex-row items-center gap-4 overflow-hidden bg-card px-4 py-3",
34	subtitle ? "min-h-18" : "min-h-14",
35	props.disabled && "opacity-45",
36	className,
37	)}
38	>
39	{leading ? <View className="size-6 items-center justify-center">{leading}</View> : null}
40	<View className="min-w-0 flex-1 gap-1">
41	<AppText className="text-base text-foreground" numberOfLines={2}>
42	{title}
43	</AppText>
44	{subtitle ? (
45	<AppText className="text-sm text-foreground-muted" numberOfLines={2}>
46	{subtitle}
47	</AppText>
48	) : null}
49	</View>
50	{trailing !== undefined ? (
51	trailing
52	) : !props.disabled ? (
53	<SymbolView name="chevron.right" size={16} tintColorClassName="accent-chevron" />
54	) : null}
55	</Pressable>
56	);
57	}

apps/mobile/src/components/MaterialMenuPopup.android.tsx created+153

...	@@ -0,0 +1,153 @@
1	import {
2	Box,
3	Column,
4	DropdownMenu,
5	DropdownMenuItem,
6	Host,
7	RNHostView,
8	Text,
9	} from "@expo/ui/jetpack-compose";
10	import { padding, size, width } from "@expo/ui/jetpack-compose/modifiers";
11	import { View } from "react-native";
12
13	import { useAppearancePreferences } from "../features/settings/appearance/AppearancePreferencesProvider";
14	import type { MaterialMenuPopupProps } from "./MaterialMenuPopup";
15	import { SymbolView, type AppSymbolName } from "./AppSymbol";
16
17	function MenuIcon(props: {
18	readonly name: AppSymbolName;
19	readonly destructive?: boolean;
20	readonly disabled?: boolean;
21	}) {
22	return (
23	<RNHostView matchContents modifiers={[size(24, 24)]}>
24	<View style={{ width: 24, height: 24 }} importantForAccessibility="no-hide-descendants">
25	<SymbolView
26	name={props.name}
27	size={24}
28	type="monochrome"
29	tintColorClassName={
30	props.disabled
31	? "accent-icon-subtle"
32	: props.destructive
33	? "accent-danger-foreground"
34	: "accent-foreground"
35	}
36	/>
37	</View>
38	</RNHostView>
39	);
40	}
41
42	/** Native popup positioned at the original trigger, outside virtualized rows. */
43	export function MaterialMenuPopup(props: MaterialMenuPopupProps) {
44	const { themeAppearance, themeVariables: colors } = useAppearancePreferences();
45	const foreground = colors["--color-foreground"];
46	const muted = colors["--color-foreground-muted"];
47	const items = (
48	<>
49	{props.parent ? (
50	<DropdownMenuItem onClick={props.onBack} modifiers={[width(250)]}>
51	<DropdownMenuItem.LeadingIcon>
52	<MenuIcon name="arrow.left" />
53	</DropdownMenuItem.LeadingIcon>
54	<DropdownMenuItem.Text>
55	<Text color={foreground} style={{ typography: "bodyLarge" }}>
56	{props.parent.title}
57	</Text>
58	</DropdownMenuItem.Text>
59	</DropdownMenuItem>
60	) : props.title ? (
61	<Text color={muted} style={{ typography: "bodySmall" }} modifiers={[padding(16, 8, 16, 8)]}>
62	{props.title}
63	</Text>
64	) : null}
65	{props.actions.map((action, index) => (
66	<DropdownMenuItem
67	key={action.id ?? `${index}-${action.title}`}
68	enabled={!action.attributes?.disabled}
69	modifiers={[width(250)]}
70	elementColors={{
71	textColor: action.attributes?.destructive
72	? colors["--color-danger-foreground"]
73	: foreground,
74	disabledTextColor: muted,
75	}}
76	onClick={() => props.onPress(action)}
77	>
78	<DropdownMenuItem.Text>
79	<Column>
80	<Text
81	style={{ typography: "bodyLarge" }}
82	color={
83	action.attributes?.disabled
84	? muted
85	: action.attributes?.destructive
86	? colors["--color-danger-foreground"]
87	: foreground
88	}
89	>
90	{action.title}
91	</Text>
92	{action.subtitle ? (
93	<Text color={muted} style={{ typography: "bodySmall" }}>
94	{action.subtitle}
95	</Text>
96	) : null}
97	</Column>
98	</DropdownMenuItem.Text>
99	{action.image ? (
100	<DropdownMenuItem.LeadingIcon>
101	<MenuIcon
102	name={action.image as AppSymbolName}
103	destructive={action.attributes?.destructive}
104	disabled={action.attributes?.disabled}
105	/>
106	</DropdownMenuItem.LeadingIcon>
107	) : null}
108	{(action.subactions?.length ?? 0) > 0 ? (
109	<DropdownMenuItem.TrailingIcon>
110	<MenuIcon name="chevron.right" disabled={action.attributes?.disabled} />
111	</DropdownMenuItem.TrailingIcon>
112	) : action.state === "on" ? (
113	<DropdownMenuItem.TrailingIcon>
114	<MenuIcon name="checkmark" disabled={action.attributes?.disabled} />
115	</DropdownMenuItem.TrailingIcon>
116	) : null}
117	</DropdownMenuItem>
118	))}
119	</>
120	);
121	if (props.inline) {
122	return (
123	<Host
124	colorScheme={themeAppearance}
125	ignoreSafeAreaKeyboardInsets
126	matchContents
127	style={{ width: 250 }}
128	>
129	<Column>{items}</Column>
130	</Host>
131	);
132	}
133	return (
134	<Host
135	colorScheme={themeAppearance}
136	ignoreSafeAreaKeyboardInsets
137	style={{
138	position: "absolute",
139	left: props.anchor.x,
140	top: props.anchor.y,
141	width: props.anchor.width,
142	height: props.anchor.height,
143	}}
144	>
145	<DropdownMenu expanded onDismissRequest={props.onClose} color={colors["--color-card-alt"]}>
146	<DropdownMenu.Trigger>
147	<Box modifiers={[size(props.anchor.width, props.anchor.height)]} />
148	</DropdownMenu.Trigger>
149	<DropdownMenu.Items>{items}</DropdownMenu.Items>
150	</DropdownMenu>
151	</Host>
152	);
153	}

apps/mobile/src/components/MaterialMenuPopup.tsx created+22

...	@@ -0,0 +1,22 @@
1	import type { MenuAction } from "@react-native-menu/menu";
2
3	export interface MaterialMenuPopupProps {
4	readonly anchor: {
5	readonly x: number;
6	readonly y: number;
7	readonly width: number;
8	readonly height: number;
9	};
10	readonly actions: readonly MenuAction[];
11	readonly title?: string;
12	readonly parent: MenuAction \| null;
13	readonly onPress: (action: MenuAction) => void;
14	readonly onBack: () => void;
15	readonly onClose: () => void;
16	/** Keep the editor's window focus and keyboard while showing native menu rows. */
17	readonly inline?: boolean;
18	}
19
20	export function MaterialMenuPopup(_props: MaterialMenuPopupProps) {
21	return null;
22	}

apps/mobile/src/components/MaterialNewThreadButton.android.tsx created+17

...	@@ -0,0 +1,17 @@
1	import type { ComponentProps } from "react";
2	import { MaterialFloatingActionButton } from "./MaterialFloatingActionButton.android";
3	import type { MaterialNewThreadButton as SharedMaterialNewThreadButton } from "./MaterialNewThreadButton.shared";
4
5	export function MaterialNewThreadButton(
6	props: ComponentProps<typeof SharedMaterialNewThreadButton>,
7	) {
8	return (
9	<MaterialFloatingActionButton
10	{...props}
11	icon="square.and.pencil"
12	label="New thread"
13	tone="primary"
14	variant={props.extended ? "extended" : "large"}
15	/>
16	);
17	}

apps/mobile/src/components/MaterialNewThreadButton.shared.tsx created+40

...	@@ -0,0 +1,40 @@
1	import { Pressable, type StyleProp, type ViewStyle } from "react-native";
2
3	import { cn } from "../lib/cn";
4	import { AppText } from "./AppText";
5	import { SymbolView } from "./AppSymbol";
6
7	/** Shared compose action for the floating button and empty workspace. */
8	export function MaterialNewThreadButton(props: {
9	readonly onPress: () => void;
10	readonly extended?: boolean;
11	readonly expanded?: boolean;
12	readonly className?: string;
13	readonly style?: StyleProp<ViewStyle>;
14	}) {
15	return (
16	<Pressable
17	accessibilityLabel="New thread"
18	accessibilityRole="button"
19	onPress={props.onPress}
20	className={cn(
21	"items-center justify-center bg-primary shadow-lg active:opacity-70",
22	props.extended
23	? "h-[56px] flex-row gap-[8px] rounded-[16px] px-[16px]"
24	: "size-[80px] rounded-[20px]",
25	props.className,
26	)}
27	style={props.style}
28	>
29	<SymbolView
30	name="square.and.pencil"
31	size={props.extended ? 24 : 28}
32	tintColorClassName="accent-primary-foreground"
33	type="monochrome"
34	/>
35	{props.extended && props.expanded !== false ? (
36	<AppText className="text-[16px] font-t3-medium text-primary-foreground">New thread</AppText>
37	) : null}
38	</Pressable>
39	);
40	}

apps/mobile/src/components/MaterialNewThreadButton.tsx created+1

...	@@ -0,0 +1 @@
1	export { MaterialNewThreadButton } from "./MaterialNewThreadButton.shared";

apps/mobile/src/components/MaterialRadioIndicator.android.tsx created+55

...	@@ -0,0 +1,55 @@
1	import { Host, RadioButton } from "@expo/ui/jetpack-compose";
2	import { size } from "@expo/ui/jetpack-compose/modifiers";
3	import { View } from "react-native";
4
5	import { useAppearancePreferences } from "../features/settings/appearance/AppearancePreferencesProvider";
6
7	/** The enclosing radio row owns selection, touch and accessibility. */
8	export function MaterialRadioIndicator({ selected }: { readonly selected: boolean }) {
9	const { themeAppearance, themeVariables, systemColorsActive } = useAppearancePreferences();
10	// Expo's radio button cannot override colors in the pinned SDK. Custom
11	// themes need their exact accent rather than a generated Material palette.
12	if (!systemColorsActive) {
13	return (
14	<View
15	pointerEvents="none"
16	importantForAccessibility="no-hide-descendants"
17	style={{ width: 24, height: 24, alignItems: "center", justifyContent: "center" }}
18	>
19	<View
20	style={{
21	width: 20,
22	height: 20,
23	borderRadius: 10,
24	borderWidth: 2,
25	borderColor: themeVariables[selected ? "--color-primary" : "--color-foreground-muted"],
26	alignItems: "center",
27	justifyContent: "center",
28	}}
29	>
30	{selected ? (
31	<View
32	style={{
33	width: 10,
34	height: 10,
35	borderRadius: 5,
36	backgroundColor: themeVariables["--color-primary"],
37	}}
38	/>
39	) : null}
40	</View>
41	</View>
42	);
43	}
44	return (
45	<View pointerEvents="none" importantForAccessibility="no-hide-descendants">
46	<Host
47	colorScheme={themeAppearance}
48	ignoreSafeAreaKeyboardInsets
49	style={{ width: 24, height: 24 }}
50	>
51	<RadioButton selected={selected} modifiers={[size(24, 24)]} />
52	</Host>
53	</View>
54	);
55	}

apps/mobile/src/components/MaterialRadioIndicator.tsx created+8

...	@@ -0,0 +1,8 @@
1	import { SymbolView } from "./AppSymbol";
2
3	/** The enclosing radio row owns selection, touch and accessibility. */
4	export function MaterialRadioIndicator({ selected }: { readonly selected: boolean }) {
5	return selected ? (
6	<SymbolView name="checkmark" size={16} tintColorClassName="accent-icon" />
7	) : null;
8	}

apps/mobile/src/components/MaterialScreenContent.tsx created+33

...	@@ -0,0 +1,33 @@
1	import type { ReactNode } from "react";
2	import { Platform, View } from "react-native";
3
4	/** Keeps the header surface visible behind rounded Android content corners. */
5	export function MaterialScreenContent({
6	children,
7	insetHorizontal = false,
8	fitToContents = false,
9	}: {
10	readonly children: ReactNode;
11	/** Match the master-list gutters for secondary panes, not full-width content. */
12	readonly insetHorizontal?: boolean;
13	/** Allow native form sheets to measure their content instead of filling a fixed detent. */
14	readonly fitToContents?: boolean;
15	}) {
16	if (Platform.OS !== "android") return children;
17
18	return (
19	<View className={fitToContents ? "shrink bg-header" : "flex-1 bg-header"}>
20	<View
21	className="overflow-hidden rounded-t-[28px] bg-sheet-solid"
22	style={{
23	flexShrink: 1,
24	flexGrow: fitToContents ? 0 : 1,
25	flexBasis: fitToContents ? "auto" : 0,
26	marginHorizontal: insetHorizontal ? 4 : 0,
27	}}
28	>
29	{children}
30	</View>
31	</View>
32	);
33	}

apps/mobile/src/components/MaterialSegmentedButtons.android.tsx created+37

...	@@ -0,0 +1,37 @@
1	import { SegmentedButton, SingleChoiceSegmentedButtonRow, Text } from "@expo/ui/jetpack-compose";
2	import { defaultMinSize, fillMaxWidth } from "@expo/ui/jetpack-compose/modifiers";
3	import { useAppearancePreferences } from "../features/settings/appearance/AppearancePreferencesProvider";
4	import { useScaledTextRole } from "../features/settings/appearance/useScaledTextRole";
5	import type { SegmentedControlProps } from "./SegmentedControl";
6
7	/** Compose content shared by screen controls and native dialogs, inside their existing Host. */
8	export function MaterialSegmentedButtons<Value extends number \| string>(
9	props: SegmentedControlProps<Value>,
10	) {
11	const { themeVariables: colors } = useAppearancePreferences();
12	const typography = useScaledTextRole("footnote");
13	return (
14	<SingleChoiceSegmentedButtonRow modifiers={[fillMaxWidth()]}>
15	{props.options.map((option) => (
16	<SegmentedButton
17	key={String(option.value)}
18	selected={option.value === props.selected}
19	onClick={() => props.onSelect(option.value)}
20	modifiers={[defaultMinSize({ minHeight: 48 })]}
21	colors={{
22	activeContainerColor: colors["--color-secondary"],
23	activeContentColor: colors["--color-secondary-foreground"],
24	inactiveContainerColor: "transparent",
25	inactiveContentColor: colors["--color-foreground"],
26	activeBorderColor: colors["--color-border"],
27	inactiveBorderColor: colors["--color-border"],
28	}}
29	>
30	<SegmentedButton.Label>
31	<Text style={typography}>{option.label}</Text>
32	</SegmentedButton.Label>
33	</SegmentedButton>
34	))}
35	</SingleChoiceSegmentedButtonRow>
36	);
37	}

apps/mobile/src/components/MaterialSegmentedControl.android.tsx created+40

...	@@ -0,0 +1,40 @@
1	import { Host } from "@expo/ui/jetpack-compose";
2	import { MaterialSegmentedButtons } from "./MaterialSegmentedButtons.android";
3	import { View } from "react-native";
4
5	import { useAppearancePreferences } from "../features/settings/appearance/AppearancePreferencesProvider";
6	import type { SegmentedControlProps } from "./SegmentedControl";
7
8	export function MaterialSegmentedControl<Value extends number \| string>(
9	props: SegmentedControlProps<Value>,
10	) {
11	const { themeAppearance } = useAppearancePreferences();
12	return (
13	<View className={props.className}>
14	<View importantForAccessibility="no-hide-descendants">
15	<Host
16	matchContents={{ vertical: true }}
17	colorScheme={themeAppearance}
18	ignoreSafeAreaKeyboardInsets
19	style={{ width: "100%" }}
20	>
21	<MaterialSegmentedButtons {...props} />
22	</Host>
23	</View>
24	<View pointerEvents="none" className="absolute inset-0 flex-row">
25	{props.options.map((option) => (
26	<View
27	key={String(option.value)}
28	accessible
29	accessibilityRole={props.role ?? "button"}
30	accessibilityLabel={option.accessibilityLabel ?? option.label}
31	accessibilityState={{ selected: option.value === props.selected }}
32	accessibilityActions={[{ name: "activate" }]}
33	onAccessibilityAction={() => props.onSelect(option.value)}
34	className="flex-1"
35	/>
36	))}
37	</View>
38	</View>
39	);
40	}

apps/mobile/src/components/MaterialSegmentedControl.tsx created+7

...	@@ -0,0 +1,7 @@
1	import type { SegmentedControlProps } from "./SegmentedControl";
2
3	export function MaterialSegmentedControl<Value extends number \| string>(
4	_props: SegmentedControlProps<Value>,
5	) {
6	return null;
7	}

apps/mobile/src/components/MaterialSwitch.android.tsx created+49

...	@@ -0,0 +1,49 @@
1	import { Host, Switch as ComposeSwitch } from "@expo/ui/jetpack-compose";
2	import { View } from "react-native";
3	import type { ThemedSwitchProps } from "./ThemedSwitch";
4
5	import { useAppearancePreferences } from "../features/settings/appearance/AppearancePreferencesProvider";
6
7	/** Material's native switch, with the same palette and accessibility contract as our RN controls. */
8	export function MaterialSwitch(props: ThemedSwitchProps) {
9	const { themeAppearance, themeVariables: colors } = useAppearancePreferences();
10	const toggle = () => {
11	if (!props.disabled) props.onValueChange?.(!props.value);
12	};
13
14	return (
15	<View
16	accessible
17	accessibilityLabel={props.accessibilityLabel}
18	accessibilityHint={props.accessibilityHint}
19	accessibilityRole="switch"
20	accessibilityState={{ checked: Boolean(props.value), disabled: Boolean(props.disabled) }}
21	accessibilityActions={[{ name: "activate", label: "Toggle" }]}
22	onAccessibilityAction={toggle}
23	style={props.style}
24	testID={props.testID}
25	>
26	<View importantForAccessibility="no-hide-descendants">
27	<Host
28	colorScheme={themeAppearance}
29	ignoreSafeAreaKeyboardInsets
30	style={{ width: 52, height: 48 }}
31	>
32	<ComposeSwitch
33	value={Boolean(props.value)}
34	enabled={!props.disabled}
35	onCheckedChange={props.onValueChange ?? undefined}
36	colors={{
37	checkedTrackColor: colors["--color-switch-active-track"],
38	checkedThumbColor: colors["--color-switch-active-thumb"],
39	checkedBorderColor: colors["--color-switch-active-track"],
40	uncheckedTrackColor: colors["--color-switch-inactive-track"],
41	uncheckedThumbColor: colors["--color-switch-inactive-thumb"],
42	uncheckedBorderColor: colors["--color-switch-inactive-thumb"],
43	}}
44	/>
45	</Host>
46	</View>
47	</View>
48	);
49	}

apps/mobile/src/components/MaterialSwitch.tsx created+1

...	@@ -0,0 +1 @@
1	export { Switch as MaterialSwitch } from "react-native";

apps/mobile/src/components/ScreenScrollView.tsx created+19

...	@@ -0,0 +1,19 @@
1	import type { ComponentProps } from "react";
2	import { Platform, ScrollView } from "react-native";
3
4	/** Keeps forms and settings readable inside a wide pane while its surface fills the screen. */
5	export function ScreenScrollView(props: ComponentProps<typeof ScrollView>) {
6	return (
7	<ScrollView
8	{...props}
9	contentContainerStyle={[
10	props.contentContainerStyle,
11	Platform.OS === "android" && {
12	width: "100%",
13	maxWidth: 720,
14	alignSelf: "center",
15	},
16	]}
17	/>
18	);
19	}

apps/mobile/src/components/SegmentedControl.tsx+14-5

 @@ -2,8 +2,9 @@ import { Platform, Pressable, View } from "react-native";
 import Animated, { Easing, LinearTransition, ReduceMotion } from "react-native-reanimated";
 import { AppText as Text } from "./AppText";
 import { cn } from "../lib/cn";
+import { MaterialSegmentedControl } from "./MaterialSegmentedControl";
-export function SegmentedControl<Value extends number | string>(props: {
+export interface SegmentedControlProps<Value extends number | string> {
   readonly options: readonly {
     readonly value: Value;
     readonly label: string;
 @@ -11,18 +12,26 @@ export function SegmentedControl<Value extends number | string>(props: {
   }[];
   readonly selected: Value;
   readonly onSelect: (value: Value) => void;
-  /** The tab bar is full height; filters under it are shorter so it stays primary. */
+  /** Compact sizing applies to the non-Material control. */
   readonly size?: "default" | "compact";
   /** "tab" for the view switcher; filters stay plain buttons. */
   readonly role?: "tab" | "button";
   readonly className?: string;
-}) {
+}
+export function SegmentedControl<Value extends number | string>(
+  props: SegmentedControlProps<Value>,
+) {
   const compact = props.size === "compact";
+  if (Platform.OS === "android") {
+    return <MaterialSegmentedControl {...props} />;
+  }
   return (
     <View
       accessible={false}
       className={cn(
-        "flex-row overflow-hidden rounded-full border-continuous bg-card",
+        "flex-row overflow-hidden",
+        "rounded-full border-continuous bg-card",
         props.className,
       )}
     >
 @@ -31,7 +40,7 @@ export function SegmentedControl<Value extends number | string>(props: {
         layout={LinearTransition.duration(200)
           .easing(Easing.out(Easing.cubic))
           .reduceMotion(ReduceMotion.System)}
-        className="absolute bottom-0 top-0 rounded-full bg-subtle-strong"
+        className="absolute inset-y-0 rounded-full bg-subtle-strong"
         style={{
           width: `${100 / props.options.length}%`,
           start: `${

apps/mobile/src/components/ThemedSwitch.tsx+16-52

...	@@ -1,63 +1,27 @@	...	@@ -1,63 +1,27 @@
1	import { Platform, Pressable, Switch, View, type SwitchProps } from "react-native";	1	import { Platform, Switch, type SwitchProps } from "react-native";
2		2
3	import { useAppearancePreferences } from "../features/settings/appearance/AppearancePreferencesProvider";	3	import { MaterialSwitch } from "./MaterialSwitch";
4	import { SymbolView } from "./AppSymbol";
5		4
6	export function ThemedSwitch(props: SwitchProps) {	5	export type ThemedSwitchProps = Pick<
7	const { materialYouStyleLayoutActive } = useAppearancePreferences();	6	SwitchProps,
8	if (materialYouStyleLayoutActive) {	7	\| "accessibilityHint"
9	return (	8	\| "accessibilityLabel"
10	<Pressable	9	\| "disabled"
11	accessibilityHint={props.accessibilityHint}	10	\| "onValueChange"
12	accessibilityLabel={props.accessibilityLabel}	11	\| "style"
13	accessibilityRole="switch"	12	\| "testID"
14	accessibilityState={{ checked: Boolean(props.value), disabled: props.disabled }}	13	\| "value"
15	disabled={props.disabled}	14	>;
16	hitSlop={8}	15
17	onPress={() => props.onValueChange?.(!props.value)}	16	export function ThemedSwitch(props: ThemedSwitchProps) {
18	style={props.style}	17	if (Platform.OS === "android") {
19	testID={props.testID}	18	return <MaterialSwitch {...props} />;
20	className={props.disabled ? "opacity-40" : "active:opacity-70"}
21	>
22	<View
23	className={
24	props.value
25	? "h-8 w-[52px] items-end justify-center rounded-full border-2 border-switch-active-track bg-switch-active-track px-0.5"
26	: "h-8 w-[52px] items-start justify-center rounded-full border-2 border-switch-inactive-thumb bg-switch-inactive-track px-0.5"
27	}
28	>
29	<View
30	className={
31	props.value
32	? "size-6 items-center justify-center rounded-full bg-switch-active-thumb"
33	: "size-6 items-center justify-center rounded-full bg-switch-inactive-thumb"
34	}
35	>
36	<SymbolView
37	name={props.value ? "checkmark" : "xmark"}
38	size={13}
39	tintColorClassName={
40	props.value ? "accent-switch-active-track" : "accent-switch-inactive-track"
41	}
42	type="monochrome"
43	/>
44	</View>
45	</View>
46	</Pressable>
47	);
48	}	19	}
49		20
50	return (	21	return (
51	<Switch	22	<Switch
52	{...props}	23	{...props}
53	ios_backgroundColorClassName="accent-switch-inactive-track"	24	ios_backgroundColorClassName="accent-switch-inactive-track"
54	thumbColorClassName={
55	Platform.OS === "android"
56	? props.value
57	? "accent-switch-active-thumb"
58	: "accent-switch-inactive-thumb"
59	: undefined
60	}
61	trackColorOffClassName="accent-switch-inactive-track"	25	trackColorOffClassName="accent-switch-inactive-track"
62	trackColorOnClassName="accent-switch-active-track"	26	trackColorOnClassName="accent-switch-active-track"
63	/>	27	/>

apps/mobile/src/components/useMaterialToolbarHeight.ts created+11

...	@@ -0,0 +1,11 @@
1	import { useWindowDimensions } from "react-native";
2
3	import { useScaledTextRole } from "../features/settings/appearance/useScaledTextRole";
4
5	/** Reserve the same title/subtitle space in every pane, including icon-only and search headers. */
6	export function useMaterialToolbarHeight() {
7	const title = useScaledTextRole("title");
8	const subtitle = useScaledTextRole("label");
9	const { fontScale } = useWindowDimensions();
10	return Math.ceil(Math.max(56, (title.lineHeight + subtitle.lineHeight) * fontScale + 1));
11	}

apps/mobile/src/features/archive/ArchivedThreadsScreen.tsx+41-37

 @@ -40,6 +40,7 @@ import {
   NATIVE_MAIL_SEARCH_TOOLBAR_SUPPORTED,
 } from "../layout/native-mail-search-toolbar";
 import type { ArchivedThreadGroup, ArchivedThreadSortOrder } from "./archivedThreadList";
+import { SettingsScreenContent } from "../settings/components/SettingsScreen";
 export interface ArchivedThreadsHeaderEnvironment {
   readonly environmentId: EnvironmentId;
 @@ -146,6 +147,7 @@ function ArchivedThreadsHeader(props: {
           className="border-b border-header-border bg-header px-3 pb-2.5"
           style={{
             paddingTop: Math.max(insets.top, 12),
+            borderBottomWidth: 0,
           }}
         >
           <View className="min-h-12 flex-row items-center gap-2">
 @@ -159,7 +161,7 @@ function ArchivedThreadsHeader(props: {
               <SymbolView
                 name="chevron.left"
                 size={24}
-                tintColorClassName={"accent-foreground"}
+                tintColorClassName="accent-foreground"
                 type="monochrome"
               />
             </Pressable>
 @@ -167,7 +169,7 @@ function ArchivedThreadsHeader(props: {
               <SymbolView
                 name="magnifyingglass"
                 size={17}
-                tintColorClassName={"accent-icon"}
+                tintColorClassName="accent-icon"
                 type="monochrome"
               />
               <TextInput
 @@ -197,7 +199,7 @@ function ArchivedThreadsHeader(props: {
                       : "line.3.horizontal.decrease.circle"
                   }
                   size={16}
-                  tintColorClassName={"accent-icon"}
+                  tintColorClassName="accent-icon"
                   type="monochrome"
                 />
               </Pressable>
 @@ -455,7 +457,7 @@ function ArchivedThreadRow(props: {
             <SymbolView
               name="archivebox.fill"
               size={15}
-              tintColorClassName={"accent-icon-subtle"}
+              tintColorClassName="accent-icon-subtle"
               type="monochrome"
             />
           </View>
 @@ -477,7 +479,7 @@ function ArchivedThreadRow(props: {
                 <SymbolView
                   name="arrow.triangle.branch"
                   size={10}
-                  tintColorClassName={"accent-icon-subtle"}
+                  tintColorClassName="accent-icon-subtle"
                   type="monochrome"
                 />
                 <Text
 @@ -615,7 +617,7 @@ export function ArchivedThreadsScreen(props: {
     if (isInitialLoad) {
       return (
         <View className="items-center py-16">
-          <ActivityIndicator colorClassName={"accent-icon"} />
+          <ActivityIndicator colorClassName="accent-icon" />
           <Text className="mt-3 text-sm text-foreground-muted">Loading archive...</Text>
         </View>
       );
 @@ -646,37 +648,39 @@ export function ArchivedThreadsScreen(props: {
         sortOrder={props.sortOrder}
       />
-      <GestureDetector gesture={archiveScrollGesture}>
+      <SettingsScreenContent>
-        <LegendList
+        <GestureDetector gesture={archiveScrollGesture}>
-          className="flex-1"
+          <LegendList
-          contentContainerStyle={{
+            className="flex-1"
-            paddingBottom: 32,
+            contentContainerStyle={{
-            paddingHorizontal: 16,
+              paddingBottom: 32,
-            paddingTop: 4,
+              paddingHorizontal: 16,
-          }}
+              paddingTop: 4,
-          contentInsetAdjustmentBehavior="automatic"
+            }}
-          data={listItems}
+            contentInsetAdjustmentBehavior="automatic"
-          estimatedItemSize={62}
+            data={listItems}
-          getItemType={(item) => item.kind}
+            estimatedItemSize={62}
-          keyboardDismissMode="on-drag"
+            getItemType={(item) => item.kind}
-          keyboardShouldPersistTaps="handled"
+            keyboardDismissMode="on-drag"
-          keyExtractor={(item) => item.key}
+            keyboardShouldPersistTaps="handled"
-          ListEmptyComponent={listEmptyComponent}
+            keyExtractor={(item) => item.key}
-          ListHeaderComponent={
+            ListEmptyComponent={listEmptyComponent}
-            props.error ? <ArchiveError message={props.error} onRetry={props.onRefresh} /> : null
+            ListHeaderComponent={
-          }
+              props.error ? <ArchiveError message={props.error} onRetry={props.onRefresh} /> : null
-          onScrollBeginDrag={() => openSwipeableRef.current?.close()}
+            }
-          refreshControl={
+            onScrollBeginDrag={() => openSwipeableRef.current?.close()}
-            <RefreshControl
+            refreshControl={
-              onRefresh={props.onRefresh}
+              <RefreshControl
-              refreshing={props.isLoading && !isInitialLoad}
+                onRefresh={props.onRefresh}
-              tintColorClassName={String("accent-icon")}
+                refreshing={props.isLoading && !isInitialLoad}
-            />
+                tintColorClassName={String("accent-icon")}
-          }
+              />
-          renderItem={renderListItem}
+            }
-          showsVerticalScrollIndicator={false}
+            renderItem={renderListItem}
-        />
+            showsVerticalScrollIndicator={false}
-      </GestureDetector>
+          />
+        </GestureDetector>
+      </SettingsScreenContent>
     </View>
   );
 }

apps/mobile/src/features/cloud/ConnectOnboardingRouteScreen.tsx+2-1

 @@ -1,8 +1,9 @@
+import { ScreenScrollView as ScrollView } from "../../components/ScreenScrollView";
 import { NativeHeaderToolbar } from "../../native/StackHeader";
 import { useAuth } from "@clerk/expo";
 import { StackActions, useNavigation } from "@react-navigation/native";
 import { useCallback, useEffect, useState } from "react";
-import { Platform, Pressable, RefreshControl, ScrollView, View } from "react-native";
+import { Platform, Pressable, RefreshControl, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { reportAtomCommandResult, settlePromise } from "@t3tools/client-runtime/state/runtime";

apps/mobile/src/features/connection/ConnectionEnvironmentRow.tsx+70-38

 @@ -6,11 +6,13 @@ import { useAtomValue } from "@effect/atom-react";
 import * as Cause from "effect/Cause";
 import { AsyncResult } from "effect/unstable/reactivity";
 import { useCallback, useState } from "react";
-import { Alert, Pressable, View } from "react-native";
+import { Platform, Alert, Pressable, View } from "react-native";
 import Animated, { FadeIn, FadeOut, LinearTransition } from "react-native-reanimated";
 import { AppText as Text, AppTextInput as TextInput } from "../../components/AppText";
 import { EnvironmentMachineSymbol } from "../../components/EnvironmentMachineSymbol";
+import { MaterialButton } from "../../components/MaterialButton";
+import { MaterialIconButton } from "../../components/MaterialIconButton";
 import { ThemedSwitch } from "../../components/ThemedSwitch";
 import { cn } from "../../lib/cn";
 import { copyTextWithHaptic } from "../../lib/copyTextWithHaptic";
 @@ -142,7 +144,7 @@ export function ConnectionEnvironmentRow(props: {
         <SymbolView
           name="chevron.down"
           size={12}
-          tintColorClassName={"accent-icon-subtle"}
+          tintColorClassName="accent-icon-subtle"
           type="monochrome"
           style={{
             transform: [{ rotate: props.expanded ? "180deg" : "0deg" }],
 @@ -193,49 +195,79 @@ export function ConnectionEnvironmentRow(props: {
             </>
           )}
-          <View className="flex-row justify-end gap-2">
+          {Platform.OS === "android" ? (
-            {props.environment.isRelayManaged ? null : (
+            <View className="flex-row items-center justify-end gap-2">
+              {props.environment.isRelayManaged ? null : (
+                <View className="flex-1">
+                  <MaterialButton
+                    label="Save"
+                    tone="primary"
+                    fullWidth
+                    onPress={() => {
+                      void handleSave();
+                    }}
+                  />
+                </View>
+              )}
+              <MaterialIconButton
+                accessibilityLabel="Reconnect environment"
+                icon="arrow.clockwise"
+                variant="tonal"
+                disabled={!enabled}
+                onPress={() => props.onReconnect(props.environment.environmentId)}
+              />
+              <MaterialIconButton
+                accessibilityLabel="Remove environment"
+                icon="trash"
+                variant="danger"
+                onPress={() => props.onRemove(props.environment.environmentId)}
+              />
+            </View>
+          ) : (
+            <View className="flex-row justify-end gap-2">
+              {props.environment.isRelayManaged ? null : (
+                <Pressable
+                  className="min-h-[42px] flex-1 flex-row items-center justify-center gap-1.5 rounded-[14px] bg-primary px-3.5 py-2.5 active:opacity-70"
+                  onPress={handleSave}
+                >
+                  <SymbolView
+                    name="checkmark"
+                    size={13}
+                    tintColorClassName="accent-primary-foreground"
+                    type="monochrome"
+                  />
+                  <Text className="text-xs font-t3-bold tracking-[0.8px] uppercase text-primary-foreground">
+                    Save
+                  </Text>
+                </Pressable>
+              )}
               <Pressable
-                className="min-h-[42px] flex-1 flex-row items-center justify-center gap-1.5 rounded-[14px] bg-primary px-3.5 py-2.5 active:opacity-70"
+                className="h-[42px] w-[42px] items-center justify-center rounded-[14px] border border-input-border bg-input active:opacity-70 disabled:opacity-40"
-                onPress={handleSave}
+                disabled={!enabled}
+                onPress={() => props.onReconnect(props.environment.environmentId)}
               >
                 <SymbolView
-                  name="checkmark"
+                  name="arrow.clockwise"
-                  size={13}
+                  size={14}
-                  tintColorClassName={"accent-primary-foreground"}
+                  tintColorClassName="accent-icon-subtle"
                   type="monochrome"
                 />
-                <Text className="text-xs font-t3-bold tracking-[0.8px] uppercase text-primary-foreground">
-                  Save
-                </Text>
               </Pressable>
-            )}
-            <Pressable
-              className="h-[42px] w-[42px] items-center justify-center rounded-[14px] border border-input-border bg-input active:opacity-70 disabled:opacity-40"
-              disabled={!enabled}
-              onPress={() => props.onReconnect(props.environment.environmentId)}
-            >
-              <SymbolView
-                name="arrow.clockwise"
-                size={14}
-                tintColorClassName={"accent-icon-subtle"}
-                type="monochrome"
-              />
-            </Pressable>
-            <Pressable
+              <Pressable
-              className="h-[42px] w-[42px] items-center justify-center rounded-[14px] border border-danger-border bg-danger active:opacity-70"
+                className="h-[42px] w-[42px] items-center justify-center rounded-[14px] border border-danger-border bg-danger active:opacity-70"
-              onPress={() => props.onRemove(props.environment.environmentId)}
+                onPress={() => props.onRemove(props.environment.environmentId)}
-            >
+              >
-              <SymbolView
+                <SymbolView
-                name="trash"
+                  name="trash"
-                size={14}
+                  size={14}
-                tintColorClassName={"accent-danger-foreground"}
+                  tintColorClassName="accent-danger-foreground"
-                type="monochrome"
+                  type="monochrome"
-              />
+                />
-            </Pressable>
+              </Pressable>
-          </View>
+            </View>
+          )}
         </Animated.View>
       ) : null}
     </Animated.View>

apps/mobile/src/features/connection/ConnectionSheetButton.tsx+12

 @@ -3,6 +3,7 @@ import { Platform, Pressable } from "react-native";
 import { AppText as Text } from "../../components/AppText";
 import { cn } from "../../lib/cn";
+import { MaterialButton } from "../../components/MaterialButton";
 const CARD_SHADOW = Platform.select({
   ios: {
 @@ -32,8 +33,19 @@ export function ConnectionSheetButton(props: {
   readonly disabled?: boolean;
   readonly tone?: "primary" | "secondary" | "danger";
   readonly compact?: boolean;
+  readonly fullWidth?: boolean;
   readonly onPress: () => void;
 }) {
+  if (Platform.OS === "android")
+    return (
+      <MaterialButton
+        label={props.label}
+        disabled={props.disabled}
+        onPress={props.onPress}
+        tone={props.tone}
+        fullWidth={props.fullWidth}
+      />
+    );
   const tone = props.tone ?? "secondary";
   const textColorClassName =

apps/mobile/src/features/connection/ConnectionsNewRouteScreen.tsx+42-40

...	@@ -1,13 +1,18 @@	...	@@ -1,13 +1,18 @@
		1	import { ScreenScrollView as ScrollView } from "../../components/ScreenScrollView";
1	import { CameraView, useCameraPermissions } from "expo-camera";	2	import { CameraView, useCameraPermissions } from "expo-camera";
2	import { NativeHeaderToolbar, NativeStackScreenOptions } from "../../native/StackHeader";	3	import { NativeHeaderToolbar, NativeStackScreenOptions } from "../../native/StackHeader";
3	import { StackActions, useNavigation, type StaticScreenProps } from "@react-navigation/native";	4	import {
		5	StackActions,
		6	useNavigation,
		7	useRoute,
		8	type StaticScreenProps,
		9	} from "@react-navigation/native";
4	import { AsyncResult } from "effect/unstable/reactivity";	10	import { AsyncResult } from "effect/unstable/reactivity";
5	import { useCallback, useEffect, useRef, useState } from "react";	11	import { useCallback, useEffect, useRef, useState } from "react";
6	import { Alert, Linking, Platform, ScrollView, View } from "react-native";	12	import { Alert, Linking, Platform, View } from "react-native";
7	import { useSafeAreaInsets } from "react-native-safe-area-context";	13	import { useSafeAreaInsets } from "react-native-safe-area-context";
8	import { useUniwindTheme } from "../../lib/useUniwindTheme";	14	import { useUniwindTheme } from "../../lib/useUniwindTheme";
9		15	import { SettingsScreen } from "../settings/components/SettingsScreen";
10	import { AndroidScreenHeader } from "../../components/AndroidScreenHeader";
11	import { AppText as Text, AppTextInput as TextInput } from "../../components/AppText";	16	import { AppText as Text, AppTextInput as TextInput } from "../../components/AppText";
12	import { ErrorBanner } from "../../components/ErrorBanner";	17	import { ErrorBanner } from "../../components/ErrorBanner";
13	import { ConnectionSheetButton } from "./ConnectionSheetButton";	18	import { ConnectionSheetButton } from "./ConnectionSheetButton";
...	@@ -30,6 +35,7 @@ export function ConnectionsNewRouteScreen({	...	@@ -30,6 +35,7 @@ export function ConnectionsNewRouteScreen({
30	pairingConnectionError,	35	pairingConnectionError,
31	} = useRemoteConnections();	36	} = useRemoteConnections();
32	const navigation = useNavigation();	37	const navigation = useNavigation();
		38	const routeName = useRoute().name;
33	const params = route.params ?? {};	39	const params = route.params ?? {};
34	// Deep-link prefill exists for development automation only. A production	40	// Deep-link prefill exists for development automation only. A production
35	// link must not arrive with attacker-chosen host and token already filled.	41	// link must not arrive with attacker-chosen host and token already filled.
...	@@ -181,33 +187,27 @@ export function ConnectionsNewRouteScreen({	...	@@ -181,33 +187,27 @@ export function ConnectionsNewRouteScreen({
181	}, [connectAndClose, routePairingUrl, shouldAutoConnect]);	187	}, [connectAndClose, routePairingUrl, shouldAutoConnect]);
182		188
183	return (	189	return (
184	<View collapsable={false} className="flex-1 bg-sheet">	190	<SettingsScreen
		191	formSheet={routeName === "ConnectionsNew"}
		192	title={showScanner ? "Scan QR Code" : "Add Environment"}
		193	actions={[
		194	{
		195	accessibilityLabel: showScanner ? "Close scanner" : "Scan QR code",
		196	icon: showScanner ? "xmark" : "camera",
		197	onPress: () => {
		198	if (showScanner) {
		199	closeScanner();
		200	} else {
		201	void openScanner();
		202	}
		203	},
		204	},
		205	]}
		206	>
185	<NativeStackScreenOptions	207	<NativeStackScreenOptions
186	options={{	208	options={{ title: showScanner ? "Scan QR Code" : "Add Environment" }}
187	// Android renders its own in-screen header below instead of the native bar.
188	...(Platform.OS === "android" ? { headerShown: false } : null),
189	title: showScanner ? "Scan QR Code" : "Add Environment",
190	}}
191	/>	209	/>
192	{Platform.OS === "android" ? (	210	{Platform.OS !== "android" ? (
193	<AndroidScreenHeader
194	title={showScanner ? "Scan QR Code" : "Add Environment"}
195	onBack={() => navigation.goBack()}
196	actions={[
197	{
198	accessibilityLabel: showScanner ? "Close scanner" : "Scan QR code",
199	icon: showScanner ? "xmark" : "camera",
200	onPress: () => {
201	if (showScanner) {
202	closeScanner();
203	} else {
204	void openScanner();
205	}
206	},
207	},
208	]}
209	/>
210	) : (
211	<NativeHeaderToolbar placement="right">	211	<NativeHeaderToolbar placement="right">
212	<NativeHeaderToolbar.Button	212	<NativeHeaderToolbar.Button
213	icon={showScanner ? "xmark" : "qrcode.viewfinder"}	213	icon={showScanner ? "xmark" : "qrcode.viewfinder"}
...	@@ -222,7 +222,7 @@ export function ConnectionsNewRouteScreen({	...	@@ -222,7 +222,7 @@ export function ConnectionsNewRouteScreen({
222	tintColor={headerIconColor}	222	tintColor={headerIconColor}
223	/>	223	/>
224	</NativeHeaderToolbar>	224	</NativeHeaderToolbar>
225	)}	225	) : null}
226		226
227	<ScrollView	227	<ScrollView
228	contentInsetAdjustmentBehavior="automatic"	228	contentInsetAdjustmentBehavior="automatic"
...	@@ -293,19 +293,21 @@ export function ConnectionsNewRouteScreen({	...	@@ -293,19 +293,21 @@ export function ConnectionsNewRouteScreen({
293		293
294	{pairingConnectionError ? <ErrorBanner message={pairingConnectionError} /> : null}	294	{pairingConnectionError ? <ErrorBanner message={pairingConnectionError} /> : null}
295		295
296	<ConnectionSheetButton	296	<View className={Platform.OS === "android" ? "flex-row justify-end" : undefined}>
297	icon="plus"	297	<ConnectionSheetButton
298	label={isSubmitting ? "Pairing..." : "Add environment"}	298	icon="plus"
299	disabled={connectDisabled}	299	label={isSubmitting ? "Pairing..." : "Add environment"}
300	tone="primary"	300	disabled={connectDisabled}
301	onPress={() => {	301	tone="primary"
302	void handleSubmit();	302	onPress={() => {
303	}}	303	void handleSubmit();
304	/>	304	}}
		305	/>
		306	</View>
305	</View>	307	</View>
306	)}	308	)}
307	</View>	309	</View>
308	</ScrollView>	310	</ScrollView>
309	</View>	311	</SettingsScreen>
310	);	312	);
311	}	313	}

apps/mobile/src/features/connection/ConnectionsRouteScreen.tsx+2-1

 @@ -1,9 +1,10 @@
+import { ScreenScrollView as ScrollView } from "../../components/ScreenScrollView";
 import { NativeHeaderToolbar } from "../../native/StackHeader";
 import { useNavigation } from "@react-navigation/native";
 import { SymbolView } from "../../components/AppSymbol";
 import type { EnvironmentId } from "@t3tools/contracts";
 import { useCallback, useState } from "react";
-import { Platform, ScrollView, View } from "react-native";
+import { Platform, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { AndroidScreenHeader } from "../../components/AndroidScreenHeader";

apps/mobile/src/features/diagnostics/SettingsDiagnosticsRouteScreen.tsx+7-5

...	@@ -1,12 +1,14 @@	...	@@ -1,12 +1,14 @@
		1	import { ScreenScrollView as ScrollView } from "../../components/ScreenScrollView";
1	import Constants from "expo-constants";	2	import Constants from "expo-constants";
2	import * as Updates from "expo-updates";	3	import * as Updates from "expo-updates";
3	import { useEffect, useState } from "react";	4	import { useEffect, useState } from "react";
4	import { ActivityIndicator, Platform, Pressable, ScrollView, View } from "react-native";	5	import { ActivityIndicator, Platform, Pressable, View } from "react-native";
5	import { useSafeAreaInsets } from "react-native-safe-area-context";	6	import { useSafeAreaInsets } from "react-native-safe-area-context";
6		7
7	import { SymbolView } from "../../components/AppSymbol";	8	import { SymbolView } from "../../components/AppSymbol";
8	import { AppText as Text } from "../../components/AppText";	9	import { AppText as Text } from "../../components/AppText";
9	import { tryCopyTextWithHaptic } from "../../lib/copyTextWithHaptic";	10	import { tryCopyTextWithHaptic } from "../../lib/copyTextWithHaptic";
		11	import { SettingsScreen } from "../settings/components/SettingsScreen";
10	import { SettingsSection } from "../settings/components/SettingsSection";	12	import { SettingsSection } from "../settings/components/SettingsSection";
11	import {	13	import {
12	formatStartupCrashReport,	14	formatStartupCrashReport,
...	@@ -71,7 +73,7 @@ export function SettingsDiagnosticsRouteScreen() {	...	@@ -71,7 +73,7 @@ export function SettingsDiagnosticsRouteScreen() {
71	};	73	};
72		74
73	return (	75	return (
74	<View collapsable={false} className="flex-1 bg-sheet">	76	<SettingsScreen title="Diagnostics">
75	<ScrollView	77	<ScrollView
76	contentInsetAdjustmentBehavior="automatic"	78	contentInsetAdjustmentBehavior="automatic"
77	contentInset={{ bottom: Math.max(insets.bottom, 18) }}	79	contentInset={{ bottom: Math.max(insets.bottom, 18) }}
...	@@ -115,7 +117,7 @@ export function SettingsDiagnosticsRouteScreen() {	...	@@ -115,7 +117,7 @@ export function SettingsDiagnosticsRouteScreen() {
115	<SymbolView	117	<SymbolView
116	name={copied ? "checkmark" : "doc.on.doc"}	118	name={copied ? "checkmark" : "doc.on.doc"}
117	size={22}	119	size={22}
118	tintColorClassName={"accent-icon"}	120	tintColorClassName="accent-icon"
119	type="monochrome"	121	type="monochrome"
120	weight="regular"	122	weight="regular"
121	/>	123	/>
...	@@ -131,7 +133,7 @@ export function SettingsDiagnosticsRouteScreen() {	...	@@ -131,7 +133,7 @@ export function SettingsDiagnosticsRouteScreen() {
131	</Text>	133	</Text>
132	</View>	134	</View>
133	</ScrollView>	135	</ScrollView>
134	</View>	136	</SettingsScreen>
135	);	137	);
136	}	138	}
137		139
...	@@ -145,7 +147,7 @@ function EmptyState(props: {	...	@@ -145,7 +147,7 @@ function EmptyState(props: {
145	<SymbolView	147	<SymbolView
146	name={props.icon}	148	name={props.icon}
147	size={28}	149	size={28}
148	tintColorClassName={"accent-icon"}	150	tintColorClassName="accent-icon"
149	type="monochrome"	151	type="monochrome"
150	weight="regular"	152	weight="regular"
151	/>	153	/>

apps/mobile/src/features/files/MaterialFilesHeader.tsx created+122

...	@@ -0,0 +1,122 @@
1	import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
2	import { BackHandler, Keyboard, Pressable, TextInput, View } from "react-native";
3	import { useSafeAreaInsets } from "react-native-safe-area-context";
4
5	import { AndroidHeaderIconButton, AndroidScreenHeader } from "../../components/AndroidScreenHeader";
6	import { SymbolView } from "../../components/AppSymbol";
7
8	/** Keep Files search in the same header row on compact and expanded layouts. */
9	export function MaterialFilesHeader(props: {
10	readonly projectName: string;
11	readonly searchQuery: string;
12	readonly onSearchQueryChange: (query: string) => void;
13	readonly onRefresh: () => void;
14	readonly onBack?: () => void;
15	readonly leading?: ReactNode;
16	}) {
17	const insets = useSafeAreaInsets();
18	const searchRef = useRef<TextInput>(null);
19	const [searchOpen, setSearchOpen] = useState(false);
20	const searching = searchOpen \|\| props.searchQuery.length > 0;
21	const { onSearchQueryChange } = props;
22	const closeSearch = useCallback(() => {
23	onSearchQueryChange("");
24	setSearchOpen(false);
25	Keyboard.dismiss();
26	}, [onSearchQueryChange]);
27
28	useEffect(() => {
29	if (!searching) return;
30	const subscription = BackHandler.addEventListener("hardwareBackPress", () => {
31	closeSearch();
32	return true;
33	});
34	return () => subscription.remove();
35	}, [closeSearch, searching]);
36
37	return (
38	<View>
39	{/* Keep the title/subtitle's natural height, including larger text, while searching. */}
40	<View
41	pointerEvents={searching ? "none" : "auto"}
42	accessibilityElementsHidden={searching}
43	importantForAccessibility={searching ? "no-hide-descendants" : "auto"}
44	style={{ opacity: searching ? 0 : 1 }}
45	>
46	<AndroidScreenHeader
47	title="Files"
48	subtitle={props.projectName}
49	hideBottomBorder
50	onBack={props.onBack}
51	leading={props.leading}
52	actions={[
53	{
54	accessibilityLabel: "Search files",
55	icon: "magnifyingglass",
56	onPress: () => setSearchOpen(true),
57	},
58	{
59	accessibilityLabel: "Refresh files",
60	icon: "arrow.clockwise",
61	onPress: props.onRefresh,
62	},
63	]}
64	/>
65	</View>
66	{searching ? (
67	<View
68	className="absolute inset-0 bg-header px-2 pb-2"
69	style={{ paddingTop: Math.max(insets.top, 12) }}
70	>
71	<View className="min-h-14 flex-1 flex-row items-center gap-1">
72	<AndroidHeaderIconButton
73	accessibilityLabel="Close file search"
74	icon="arrow.left"
75	onPress={closeSearch}
76	/>
77	<View className="h-12 min-w-0 flex-1 flex-row items-center gap-2 rounded-full border border-input-border bg-input px-3">
78	<SymbolView
79	name="magnifyingglass"
80	size={18}
81	tintColorClassName="accent-foreground-muted"
82	/>
83	<TextInput
84	ref={searchRef}
85	accessibilityLabel="Search files"
86	autoFocus
87	autoCapitalize="none"
88	autoCorrect={false}
89	returnKeyType="search"
90	placeholder="Search files"
91	placeholderTextColorClassName="accent-placeholder"
92	selectionColorClassName="accent-primary/32"
93	cursorColorClassName="accent-primary"
94	selectionHandleColorClassName="accent-primary"
95	className="min-w-0 flex-1 py-2 font-sans text-base text-foreground"
96	value={props.searchQuery}
97	onChangeText={onSearchQueryChange}
98	/>
99	{props.searchQuery.length > 0 ? (
100	<Pressable
101	accessibilityLabel="Clear file search"
102	accessibilityRole="button"
103	hitSlop={10}
104	onPress={() => {
105	onSearchQueryChange("");
106	searchRef.current?.focus();
107	}}
108	>
109	<SymbolView
110	name="xmark.circle.fill"
111	size={18}
112	tintColorClassName="accent-foreground-muted"
113	/>
114	</Pressable>
115	) : null}
116	</View>
117	</View>
118	</View>
119	) : null}
120	</View>
121	);
122	}

apps/mobile/src/features/files/SourceFileSurface.tsx+6

...	@@ -4,6 +4,7 @@ import type { ComponentType } from "react";	...	@@ -4,6 +4,7 @@ import type { ComponentType } from "react";
4	import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";	4	import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
5	import {	5	import {
6	FlatList,	6	FlatList,
		7	Platform,
7	RefreshControl,	8	RefreshControl,
8	ScrollView,	9	ScrollView,
9	Text as NativeText,	10	Text as NativeText,
...	@@ -73,6 +74,7 @@ const HighlightedSourceLine = memo(function HighlightedSourceLine(props: {	...	@@ -73,6 +74,7 @@ const HighlightedSourceLine = memo(function HighlightedSourceLine(props: {
73	</NativeText>	74	</NativeText>
74	<NativeText	75	<NativeText
75	selectable	76	selectable
		77	selectionColorClassName={Platform.OS === "android" ? "accent-primary/32" : undefined}
76	numberOfLines={props.wordBreak ? undefined : 1}	78	numberOfLines={props.wordBreak ? undefined : 1}
77	className="flex-1 font-normal text-foreground"	79	className="flex-1 font-normal text-foreground"
78	style={{	80	style={{
...	@@ -102,6 +104,9 @@ const HighlightedSourceLine = memo(function HighlightedSourceLine(props: {	...	@@ -102,6 +104,9 @@ const HighlightedSourceLine = memo(function HighlightedSourceLine(props: {
102	<NativeText	104	<NativeText
103	key={`${start}:${token.content.length}:${token.color ?? ""}`}	105	key={`${start}:${token.content.length}:${token.color ?? ""}`}
104	selectable	106	selectable
		107	selectionColorClassName={
		108	Platform.OS === "android" ? "accent-primary/32" : undefined
		109	}
105	style={{	110	style={{
106	color: token.color ?? undefined,	111	color: token.color ?? undefined,
107	fontFamily: REVIEW_MONO_FONT_FAMILY,	112	fontFamily: REVIEW_MONO_FONT_FAMILY,
...	@@ -274,6 +279,7 @@ function JavaScriptSourceFileSurface(props: SourceFileSurfaceProps) {	...	@@ -274,6 +279,7 @@ function JavaScriptSourceFileSurface(props: SourceFileSurfaceProps) {
274	<MarkdownTextPrimitive	279	<MarkdownTextPrimitive
275	uiTextView	280	uiTextView
276	selectable	281	selectable
		282	selectionColorClassName={Platform.OS === "android" ? "accent-primary/32" : undefined}
277	style={{	283	style={{
278	color: foreground,	284	color: foreground,
279	fontFamily: REVIEW_MONO_FONT_FAMILY,	285	fontFamily: REVIEW_MONO_FONT_FAMILY,

apps/mobile/src/features/files/ThreadFilesRouteScreen.tsx+62-82

 @@ -15,8 +15,8 @@ import {
 import { mediaFileReference } from "@t3tools/client-runtime/media-reference";
 import { AndroidHeaderIconButton, AndroidScreenHeader } from "../../components/AndroidScreenHeader";
-import { SymbolView } from "../../components/AppSymbol";
+import { MaterialScreenContent } from "../../components/MaterialScreenContent";
-import { AppText as Text, AppTextInput as TextInput } from "../../components/AppText";
+import { AppText as Text } from "../../components/AppText";
 import { AudioFilePreview } from "../../components/AudioFilePreview";
 import { ControlPillMenu } from "../../components/ControlPill";
 import { EmptyState } from "../../components/EmptyState";
 @@ -43,7 +43,10 @@ import {
   createNativeMailSearchToolbarItem,
   NATIVE_MAIL_SEARCH_TOOLBAR_SUPPORTED,
 } from "../layout/native-mail-search-toolbar";
-import { WorkspaceSidebarToolbar } from "../layout/workspace-sidebar-toolbar";
+import {
+  AndroidWorkspaceSidebarButton,
+  WorkspaceSidebarToolbar,
+} from "../layout/workspace-sidebar-toolbar";
 import { useAppearancePreferences } from "../settings/appearance/AppearancePreferencesProvider";
 import { ThreadRouteScreen } from "../threads/ThreadRouteScreen";
 import { FileMarkdownPreview } from "./FileMarkdownPreview";
 @@ -52,6 +55,7 @@ import { useFileTreeEntries } from "./useFileTreeEntries";
 import { preloadWorkspaceFileContents } from "./preload-workspace-file";
 import { SourceFileSurface } from "./SourceFileSurface";
 import { ThreadFileNavigatorPane } from "./thread-file-navigator-pane";
+import { MaterialFilesHeader } from "./MaterialFilesHeader";
 import { WorkspaceFileImagePreview } from "./WorkspaceFileImagePreview";
 import { WorkspaceFilePreviewError } from "./WorkspaceFilePreviewError";
 import { WorkspaceFileVideoPreview } from "./WorkspaceFileVideoPreview";
 @@ -328,10 +332,9 @@ export function ThreadFilesTreeScreen(props: ThreadFilesRouteScreenProps) {
     useAdaptiveWorkspaceLayout();
   const [searchQuery, setSearchQuery] = useState("");
   const isAndroid = Platform.OS === "android";
-  const { themeAppearance: highlightTheme, materialYouStyleLayoutActive } =
+  const { themeAppearance: highlightTheme } = useAppearancePreferences();
-    useAppearancePreferences();
   const theme = useUniwindTheme();
-  const screenColor = theme["--color-screen"];
+  const headerColor = theme["--color-header"];
   const sheetSurfaceColor = theme["--color-sheet-solid"];
   const { cwd, environmentId, projectName, selectedThread, threadId } = useThreadFilesWorkspace(
     props.route.params,
 @@ -451,7 +454,7 @@ export function ThreadFilesTreeScreen(props: ThreadFilesRouteScreenProps) {
       <NativeStackScreenOptions
         options={{
           contentStyle: {
-            backgroundColor: materialYouStyleLayoutActive ? screenColor : sheetSurfaceColor,
+            backgroundColor: Platform.OS === "android" ? headerColor : sheetSurfaceColor,
           },
           headerShown: !isAndroid,
           unstable_headerSubtitle:
 @@ -484,46 +487,16 @@ export function ThreadFilesTreeScreen(props: ThreadFilesRouteScreenProps) {
       />
       {isAndroid ? (
         <>
-          <AndroidScreenHeader
+          {
-            title="Files"
+            <MaterialFilesHeader
-            subtitle={projectName}
+              projectName={projectName}
-            onBack={handleReturnToThread}
+              leading={<AndroidWorkspaceSidebarButton />}
-            hideBottomBorder={materialYouStyleLayoutActive}
+              searchQuery={searchQuery}
-            actions={[
+              onSearchQueryChange={setSearchQuery}
-              {
+              onRefresh={entriesQuery.refresh}
-                accessibilityLabel: "Refresh files",
+              onBack={handleReturnToThread}
-                icon: "arrow.clockwise",
-                onPress: entriesQuery.refresh,
-              },
-            ]}
-          />
-          <View
-            className={
-              materialYouStyleLayoutActive
-                ? "mx-4 my-2 min-h-12 flex-row items-center gap-2 rounded-full border border-input-border bg-input px-3.5"
-                : "flex-row items-center gap-2 border-b border-border px-3 py-2"
-            }
-          >
-            <SymbolView
-              name="magnifyingglass"
-              size={17}
-              tintColorClassName={"accent-icon-muted"}
-              type="monochrome"
             />
-            <TextInput
+          }
-              accessibilityLabel="Search files"
-              autoCapitalize="none"
-              autoCorrect={false}
-              className={
-                materialYouStyleLayoutActive
-                  ? "min-h-10 flex-1 py-2 text-sm text-foreground"
-                  : "min-h-10 flex-1 rounded-xl py-2 text-sm"
-              }
-              placeholder="Search files"
-              value={searchQuery}
-              onChangeText={setSearchQuery}
-            />
-          </View>
         </>
       ) : (
         <>
 @@ -548,26 +521,28 @@ export function ThreadFilesTreeScreen(props: ThreadFilesRouteScreenProps) {
           )}
         </>
       )}
-      <FileTreeBrowser
+      <MaterialScreenContent insetHorizontal={layout.usesSplitView}>
-        key={JSON.stringify([environmentId, cwd])}
+        <FileTreeBrowser
-        entries={entriesQuery.entries}
+          key={JSON.stringify([environmentId, cwd])}
-        loadedDirectories={entriesQuery.loadedDirectories}
+          entries={entriesQuery.entries}
-        onLoadDirectory={entriesQuery.loadDirectory}
+          loadedDirectories={entriesQuery.loadedDirectories}
-        error={entriesQuery.error}
+          onLoadDirectory={entriesQuery.loadDirectory}
-        isPending={entriesQuery.isPending}
+          error={entriesQuery.error}
-        searchQuery={searchQuery}
+          isPending={entriesQuery.isPending}
-        searchTruncated={entriesQuery.searchTruncated}
+          searchQuery={searchQuery}
-        selectedPath={null}
+          searchTruncated={entriesQuery.searchTruncated}
-        onPreviewFile={handlePreviewFile}
+          selectedPath={null}
-        onRefresh={entriesQuery.refresh}
+          onPreviewFile={handlePreviewFile}
-        onSelectFile={handleSelectFile}
+          onRefresh={entriesQuery.refresh}
-      />
+          onSelectFile={handleSelectFile}
-      <FilesToolbarBottomFade />
+        />
+        <FilesToolbarBottomFade />
+      </MaterialScreenContent>
     </>
   );
-  return materialYouStyleLayoutActive ? (
+  return Platform.OS === "android" ? (
-    <View className="flex-1" style={{ backgroundColor: screenColor }}>
+    <View className="flex-1" style={{ backgroundColor: headerColor }}>
       {content}
     </View>
   ) : (
 @@ -933,6 +908,8 @@ export function ThreadFileScreen(props: ThreadFileRouteScreenProps) {
         <AndroidScreenHeader
           title={basename(relativePath)}
           subtitle={headerSubtitle}
+          leading={<AndroidWorkspaceSidebarButton />}
+          hideBottomBorder
           onBack={handleBack}
           trailing={
             <>
 @@ -942,6 +919,7 @@ export function ThreadFileScreen(props: ThreadFileRouteScreenProps) {
                     panes.auxiliaryPaneVisible ? "Hide file navigator" : "Show file navigator"
                   }
                   icon="sidebar.right"
+                  selected={panes.auxiliaryPaneVisible}
                   onPress={toggleAuxiliaryPane}
                 />
               ) : null}
 @@ -1007,25 +985,27 @@ export function ThreadFileScreen(props: ThreadFileRouteScreenProps) {
             ))}
         </NativeHeaderToolbar.Menu>
       </NativeHeaderToolbar>
-      <FileContent
+      <MaterialScreenContent>
-        key={previewKey}
+        <FileContent
-        activeMode={resolvedActiveMode}
+          key={previewKey}
-        cwd={cwd}
+          activeMode={resolvedActiveMode}
-        environmentId={environmentId}
+          cwd={cwd}
-        previewUri={previewUri}
+          environmentId={environmentId}
-        previewFailure={assetPreview._tag === "Failure" ? assetPreview.reason : null}
+          previewUri={previewUri}
-        onRetryPreview={handleRetryPreview}
+          previewFailure={assetPreview._tag === "Failure" ? assetPreview.reason : null}
-        videoSource={videoSource}
+          onRetryPreview={handleRetryPreview}
-        mediaSource={mediaSource}
+          videoSource={videoSource}
-        resolveVideoUri={assetPreview.refresh}
+          mediaSource={mediaSource}
-        fileContents={fileData?.contents ?? null}
+          resolveVideoUri={assetPreview.refresh}
-        fileError={fileQuery.error}
+          fileContents={fileData?.contents ?? null}
-        initialLine={targetLine}
+          fileError={fileQuery.error}
-        relativePath={relativePath}
+          initialLine={targetLine}
-        threadId={threadId}
+          relativePath={relativePath}
-        truncated={fileData?.truncated ?? false}
+          threadId={threadId}
-        onRefresh={() => fileQuery.refresh()}
+          truncated={fileData?.truncated ?? false}
-      />
+          onRefresh={() => fileQuery.refresh()}
+        />
+      </MaterialScreenContent>
       <FilePreviewModal
         source={fullScreenPreview}
         onRequestClose={() => setFullScreenPreview(null)}

apps/mobile/src/features/files/thread-file-navigator-pane.tsx+59-48

 @@ -1,5 +1,6 @@
 import type { EnvironmentId } from "@t3tools/contracts";
 import { SymbolView } from "../../components/AppSymbol";
+import { MaterialScreenContent } from "../../components/MaterialScreenContent";
 import { useCallback, useMemo, useState, type ComponentProps } from "react";
 import { Platform, Pressable, View, type NativeSyntheticEvent } from "react-native";
 import {
 @@ -11,6 +12,7 @@ import {
 } from "react-native-screens";
 import { AppText as Text, AppTextInput as TextInput } from "../../components/AppText";
+import { MaterialFilesHeader } from "./MaterialFilesHeader";
 import { nativeHeaderScrollEdgeEffects } from "../../native/StackHeader";
 import { useUniwindTheme } from "../../lib/useUniwindTheme";
 import { useAppearancePreferences } from "../settings/appearance/AppearancePreferencesProvider";
 @@ -149,59 +151,68 @@ export function ThreadFileNavigatorPane(props: {
   }
   return (
-    <View className="flex-1 border-l border-border bg-sheet">
+    <View
-      <View className="border-b border-border" style={{ paddingTop: props.headerInset }}>
+      className={
-        <View className="h-12 flex-row items-center gap-2 px-3">
+        Platform.OS === "android" ? "flex-1 bg-header" : "flex-1 border-l border-border bg-sheet"
-          <View className="min-w-0 flex-1">
+      }
-            <Text className="text-sm font-t3-bold text-foreground">Files</Text>
+    >
-            <Text className="text-xs text-foreground-muted" numberOfLines={1}>
+      <View
-              {props.projectName}
+        className={Platform.OS === "android" ? "bg-header" : "border-b border-border"}
-            </Text>
+        style={{ paddingTop: Platform.OS === "android" ? 0 : props.headerInset }}
+      >
+        {Platform.OS === "android" ? (
+          <MaterialFilesHeader
+            projectName={props.projectName}
+            searchQuery={searchQuery}
+            onSearchQueryChange={setSearchQuery}
+            onRefresh={entriesQuery.refresh}
+          />
+        ) : (
+          <View className="h-12 flex-row items-center gap-2 px-3">
+            <View className="min-w-0 flex-1">
+              <Text className="text-sm font-t3-bold text-foreground">Files</Text>
+              <Text className="text-xs text-foreground-muted" numberOfLines={1}>
+                {props.projectName}
+              </Text>
+            </View>
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel="Refresh files"
+              hitSlop={8}
+              className="h-8 w-8 items-center justify-center rounded-full active:bg-subtle"
+              onPress={entriesQuery.refresh}
+            >
+              <SymbolView
+                name="arrow.clockwise"
+                size={14}
+                tintColorClassName="accent-icon-muted"
+                type="monochrome"
+              />
+            </Pressable>
           </View>
-          <Pressable
+        )}
-            accessibilityRole="button"
+        {Platform.OS !== "android" ? (
-            accessibilityLabel="Refresh files"
+          <View className="flex-row items-center gap-2 border-t border-border px-3 py-2">
-            hitSlop={8}
-            className="h-8 w-8 items-center justify-center rounded-full active:bg-subtle"
-            onPress={entriesQuery.refresh}
-          >
             <SymbolView
-              name="arrow.clockwise"
+              name="magnifyingglass"
-              size={14}
+              size={15}
-              tintColorClassName={"accent-icon-muted"}
+              tintColorClassName="accent-icon-muted"
               type="monochrome"
             />
-          </Pressable>
+            <TextInput
-          <Pressable
+              accessibilityLabel="Search files"
-            accessibilityRole="button"
+              autoCapitalize="none"
-            accessibilityLabel="Close files"
+              autoCorrect={false}
-            hitSlop={8}
+              clearButtonMode="while-editing"
-            className="h-8 w-8 items-center justify-center rounded-full active:bg-subtle"
+              className="min-h-10 flex-1 rounded-xl py-2 text-sm"
-            onPress={toggleAuxiliaryPane}
+              placeholder="Search files"
-          >
+              value={searchQuery}
-            <SymbolView name="xmark" size={14} tintColorClassName="accent-icon-muted" />
+              onChangeText={setSearchQuery}
-          </Pressable>
+            />
-        </View>
+          </View>
-        <View className="flex-row items-center gap-2 border-t border-border px-3 py-2">
+        ) : null}
-          <SymbolView
-            name="magnifyingglass"
-            size={15}
-            tintColorClassName={"accent-icon-muted"}
-            type="monochrome"
-          />
-          <TextInput
-            accessibilityLabel="Search files"
-            autoCapitalize="none"
-            autoCorrect={false}
-            clearButtonMode="while-editing"
-            className="min-h-10 flex-1 rounded-xl py-2 text-sm"
-            placeholder="Search files"
-            value={searchQuery}
-            onChangeText={setSearchQuery}
-          />
-        </View>
       </View>
-      {fileTree}
+      <MaterialScreenContent insetHorizontal>{fileTree}</MaterialScreenContent>
     </View>
   );
 }

apps/mobile/src/features/home/AndroidHomeFab.android.tsx created+44

...	@@ -0,0 +1,44 @@
1	import { useCallback, useRef, useState, type ComponentProps } from "react";
2	import { View, type NativeScrollEvent, type NativeSyntheticEvent } from "react-native";
3	import { useSafeAreaInsets } from "react-native-safe-area-context";
4	import { MaterialNewThreadButton } from "../../components/MaterialNewThreadButton";
5	import type { AndroidHomeFabLayout as SharedAndroidHomeFabLayout } from "./AndroidHomeFab.shared";
6	import { useWorkspaceState } from "../../state/workspace";
7	import { MaterialFabScrollContext } from "./MaterialFabScrollContext";
8	import { updateMaterialFabScroll } from "./material-fab-scroll";
9
10	export function AndroidHomeFabLayout(props: ComponentProps<typeof SharedAndroidHomeFabLayout>) {
11	const insets = useSafeAreaInsets();
12	const { state } = useWorkspaceState();
13	const [expanded, setExpanded] = useState(true);
14	const scrollState = useRef({ anchor: 0, expanded: true });
15	const onScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
16	const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;
17	const next = updateMaterialFabScroll(
18	scrollState.current,
19	contentOffset.y,
20	contentSize.height - layoutMeasurement.height,
21	);
22	if (next.expanded !== scrollState.current.expanded) setExpanded(next.expanded);
23	scrollState.current = next;
24	}, []);
25
26	return (
27	<View className="flex-1">
28	<MaterialFabScrollContext value={onScroll}>{props.children}</MaterialFabScrollContext>
29	{state.hasConnections ? (
30	<MaterialNewThreadButton
31	extended
32	expanded={expanded}
33	onPress={props.onStartNewTask}
34	className="absolute right-5"
35	style={{
36	bottom: props.sidebar
37	? Math.max(insets.bottom, 12) + 6
38	: Math.max(insets.bottom, 16) + 16,
39	}}
40	/>
41	) : null}
42	</View>
43	);
44	}

apps/mobile/src/features/home/AndroidHomeFab.shared.tsx created+10

...	@@ -0,0 +1,10 @@
1	import type { ReactNode } from "react";
2
3	/** Other platforms render the list without Android's floating action button. */
4	export function AndroidHomeFabLayout(props: {
5	readonly onStartNewTask: () => void;
6	readonly children: ReactNode;
7	readonly sidebar?: boolean;
8	}) {
9	return <>{props.children}</>;
10	}

apps/mobile/src/features/home/AndroidHomeFab.tsx+1-48

...	@@ -1,48 +1 @@	...	@@ -1,48 +1 @@
1	import type { ReactNode } from "react";	1	export { AndroidHomeFabLayout } from "./AndroidHomeFab.shared";
2	import { Platform, Pressable, View } from "react-native";
3	import { useSafeAreaInsets } from "react-native-safe-area-context";
4
5	import { SymbolView } from "../../components/AppSymbol";
6
7	/**
8	* Android-only wrapper that overlays a bottom-right new-task FAB on a thread
9	* list. Other platforms render children unchanged.
10	*/
11	export function AndroidHomeFabLayout(props: {
12	readonly onStartNewTask: () => void;
13	readonly children: ReactNode;
14	}) {
15	if (Platform.OS !== "android") {
16	return <>{props.children}</>;
17	}
18
19	return <AndroidHomeFab {...props} />;
20	}
21
22	function AndroidHomeFab(props: {
23	readonly onStartNewTask: () => void;
24	readonly children: ReactNode;
25	}) {
26	const insets = useSafeAreaInsets();
27	return (
28	<View className="flex-1">
29	{props.children}
30	<Pressable
31	accessibilityLabel="New task"
32	accessibilityRole="button"
33	onPress={props.onStartNewTask}
34	className="absolute right-5 size-14 items-center justify-center rounded-full bg-primary shadow-lg"
35	style={{
36	bottom: Math.max(insets.bottom, 16) + 16,
37	}}
38	>
39	<SymbolView
40	name="square.and.pencil"
41	size={22}
42	tintColorClassName={"accent-primary-foreground"}
43	type="monochrome"
44	/>
45	</Pressable>
46	</View>
47	);
48	}

apps/mobile/src/features/home/HomeHeader.tsx+12-127

...	@@ -1,18 +1,11 @@	...	@@ -1,18 +1,11 @@
1	import { useAppearancePreferences } from "../settings/appearance/AppearancePreferencesProvider";
2	import type { EnvironmentId, SidebarThreadSortOrder } from "@t3tools/contracts";	1	import type { EnvironmentId, SidebarThreadSortOrder } from "@t3tools/contracts";
3	import type { MenuAction } from "@react-native-menu/menu";	2	import type { MenuAction } from "@react-native-menu/menu";
4	import Constants from "expo-constants";	3
5	import { NativeHeaderToolbar, NativeStackScreenOptions } from "../../native/StackHeader";	4	import { NativeHeaderToolbar, NativeStackScreenOptions } from "../../native/StackHeader";
6	import { useCallback, useMemo, useRef } from "react";	5	import { useCallback, useMemo, useRef } from "react";
7	import { Platform, Pressable, Text as RNText, TextInput, View } from "react-native";	6	import { Platform } from "react-native";
8	import type { SearchBarCommands } from "react-native-screens";	7	import type { SearchBarCommands } from "react-native-screens";
9	import { useSafeAreaInsets } from "react-native-safe-area-context";
10		8
11	import { ControlPillMenu } from "../../components/ControlPill";
12	import { SymbolView } from "../../components/AppSymbol";
13	import { T3Wordmark } from "../../components/T3Wordmark";
14	import { HOME_HORIZONTAL_INSET } from "../../lib/layoutMetrics";
15	import { resolveMobileStageLabel } from "../../lib/mobileBranding";
16	import { useUniwindTheme } from "../../lib/useUniwindTheme";	9	import { useUniwindTheme } from "../../lib/useUniwindTheme";
17	import { useThreadListV2Enabled } from "../threads/use-thread-list-v2-enabled";	10	import { useThreadListV2Enabled } from "../threads/use-thread-list-v2-enabled";
18	import { useHardwareKeyboardCommand } from "../keyboard/hardwareKeyboardCommands";	11	import { useHardwareKeyboardCommand } from "../keyboard/hardwareKeyboardCommands";
...	@@ -22,7 +15,7 @@ import {	...	@@ -22,7 +15,7 @@ import {
22	NATIVE_MAIL_SEARCH_TOOLBAR_SUPPORTED,	15	NATIVE_MAIL_SEARCH_TOOLBAR_SUPPORTED,
23	} from "../layout/native-mail-search-toolbar";	16	} from "../layout/native-mail-search-toolbar";
24	import type { HomeProjectSortOrder } from "./homeThreadList";	17	import type { HomeProjectSortOrder } from "./homeThreadList";
25	import { WorkspaceConnectionTitle } from "./WorkspaceConnectionTitle";	18	import { MaterialThreadListToolbar } from "./MaterialThreadListToolbar";
26	import {	19	import {
27	buildHomeListFilterMenu,	20	buildHomeListFilterMenu,
28	type HomeListFilterMenuEnvironment,	21	type HomeListFilterMenuEnvironment,
...	@@ -67,9 +60,6 @@ function checkedMenuState(checked: boolean) {	...	@@ -67,9 +60,6 @@ function checkedMenuState(checked: boolean) {
67	}	60	}
68		61
69	function AndroidHomeHeader(props: HomeHeaderProps) {	62	function AndroidHomeHeader(props: HomeHeaderProps) {
70	const { materialYouStyleLayoutActive } = useAppearancePreferences();
71	const insets = useSafeAreaInsets();
72	const stageLabel = resolveMobileStageLabel(Constants.expoConfig?.extra?.appVariant);
73	// Thread List v2 lays the list out in fixed creation order, so the	63	// Thread List v2 lays the list out in fixed creation order, so the
74	// sort/group filter controls would be silently ignored — hide them and	64	// sort/group filter controls would be silently ignored — hide them and
75	// key the "customized" icon state off the environment filter alone.	65	// key the "customized" icon state off the environment filter alone.
...	@@ -200,120 +190,15 @@ function AndroidHomeHeader(props: HomeHeaderProps) {	...	@@ -200,120 +190,15 @@ function AndroidHomeHeader(props: HomeHeaderProps) {
200	return (	190	return (
201	<>	191	<>
202	<NativeStackScreenOptions options={{ headerShown: false }} />	192	<NativeStackScreenOptions options={{ headerShown: false }} />
203	<View	193	<MaterialThreadListToolbar
204	className={	194	searchQuery={props.searchQuery}
205	materialYouStyleLayoutActive	195	onSearchQueryChange={props.onSearchQueryChange}
206	? "bg-header pb-3"	196	filterActions={menuActions}
207	: "border-b border-header-border bg-header pb-3"	197	filterCustomized={hasCustomListOptions}
208	}	198	onFilterAction={handleMenuAction}
209	style={{	199	onOpenSettings={props.onOpenSettings}
210	paddingHorizontal: HOME_HORIZONTAL_INSET,	200	onOpenEnvironments={props.onOpenEnvironments}
211	paddingTop: Math.max(insets.top, 12),	201	/>
212	}}
213	>
214	<View className="w-full max-w-[720px] self-center gap-3">
215	<View className="flex-row items-center gap-2.5">
216	{/* Brand slot doubles as the connection status surface: while an
217	environment reconnects, the lockup fades to a status label in
218	place (no layout shift in the list below). */}
219	<WorkspaceConnectionTitle
220	grow
221	onPress={props.onOpenEnvironments}
222	brand={
223	<View className="flex-row items-center gap-2">
224	{/* Mirrors the desktop SidebarBrand: T3 mark + muted "Code". */}
225	<T3Wordmark colorClassName="accent-icon" height={15} />
226	<RNText className="-ml-0.5 text-[21px] font-t3-medium tracking-[-0.5px] text-foreground-muted">
227	Code
228	</RNText>
229	<View className="rounded-full bg-subtle px-2 py-0.75">
230	<RNText className="text-[11px] font-t3-bold tracking-[1.1px] text-foreground-muted uppercase">
231	{stageLabel}
232	</RNText>
233	</View>
234	</View>
235	}
236	/>
237
238	<ControlPillMenu
239	actions={menuActions}
240	isAnchoredToRight
241	onPressAction={handleMenuAction}
242	>
243	<Pressable
244	accessibilityLabel="Filter and sort threads"
245	accessibilityRole="button"
246	className="size-11 items-center justify-center rounded-full bg-subtle"
247	>
248	<SymbolView
249	name={
250	hasCustomListOptions
251	? "line.3.horizontal.decrease.circle.fill"
252	: "line.3.horizontal.decrease.circle"
253	}
254	size={16}
255	tintColorClassName={"accent-icon"}
256	type="monochrome"
257	/>
258	</Pressable>
259	</ControlPillMenu>
260	{/* Built identically to the filter button so the two circles
261	match exactly (ControlPill sizes via Tailwind classes and
262	resolves to a different box). */}
263	<Pressable
264	accessibilityLabel="Open settings"
265	accessibilityRole="button"
266	onPress={props.onOpenSettings}
267	className="size-11 items-center justify-center rounded-full bg-subtle"
268	>
269	<SymbolView
270	name="gearshape"
271	size={18}
272	tintColorClassName={"accent-icon"}
273	type="monochrome"
274	/>
275	</Pressable>
276	</View>
277
278	<View
279	className={
280	materialYouStyleLayoutActive
281	? "min-h-12 flex-row items-center gap-2.5 rounded-full border border-input-border bg-input px-3.5"
282	: "min-h-12 flex-row items-center gap-2.5 rounded-2xl border border-input-border bg-input px-3.5"
283	}
284	>
285	<SymbolView
286	name="magnifyingglass"
287	size={17}
288	tintColorClassName={"accent-foreground-muted"}
289	type="monochrome"
290	/>
291	<TextInput
292	accessibilityLabel="Search threads"
293	autoCapitalize="none"
294	onChangeText={props.onSearchQueryChange}
295	placeholder="Search threads"
296	placeholderTextColorClassName="accent-placeholder"
297	className="flex-1 py-2.5 text-base font-sans text-foreground"
298	value={props.searchQuery}
299	/>
300	{props.searchQuery.length > 0 ? (
301	<Pressable
302	accessibilityLabel="Clear search"
303	hitSlop={10}
304	onPress={() => props.onSearchQueryChange("")}
305	>
306	<SymbolView
307	name="xmark.circle.fill"
308	size={17}
309	tintColorClassName={"accent-foreground-muted"}
310	type="monochrome"
311	/>
312	</Pressable>
313	) : null}
314	</View>
315	</View>
316	</View>
317	</>	202	</>
318	);	203	);
319	}	204	}

apps/mobile/src/features/home/HomeRouteScreen.tsx+23-3

...	@@ -11,7 +11,11 @@ import { useWorkspaceState } from "../../state/workspace";	...	@@ -11,7 +11,11 @@ import { useWorkspaceState } from "../../state/workspace";
11	import { useSavedRemoteConnections } from "../../state/use-remote-environment-registry";	11	import { useSavedRemoteConnections } from "../../state/use-remote-environment-registry";
12	import { useAdaptiveWorkspaceLayout } from "../layout/AdaptiveWorkspaceLayout";	12	import { useAdaptiveWorkspaceLayout } from "../layout/AdaptiveWorkspaceLayout";
13	import { WorkspaceEmptyDetail } from "../layout/WorkspaceEmptyDetail";	13	import { WorkspaceEmptyDetail } from "../layout/WorkspaceEmptyDetail";
14	import { WorkspaceSidebarToolbar } from "../layout/workspace-sidebar-toolbar";	14	import {
		15	AndroidWorkspaceSidebarButton,
		16	WorkspaceSidebarToolbar,
		17	} from "../layout/workspace-sidebar-toolbar";
		18	import { AndroidScreenHeader } from "../../components/AndroidScreenHeader";
15	import { checkForAppUpdateOnLaunch, startAppUpdateForegroundRecheck } from "../updates/app-updates";	19	import { checkForAppUpdateOnLaunch, startAppUpdateForegroundRecheck } from "../updates/app-updates";
16	import { AndroidHomeFabLayout } from "./AndroidHomeFab";	20	import { AndroidHomeFabLayout } from "./AndroidHomeFab";
17	import { HomeScreen } from "./HomeScreen";	21	import { HomeScreen } from "./HomeScreen";
...	@@ -27,7 +31,7 @@ import { getConnectionAwareBrandHeaderOptions } from "./WorkspaceConnectionTitle	...	@@ -27,7 +31,7 @@ import { getConnectionAwareBrandHeaderOptions } from "./WorkspaceConnectionTitle
27		31
28	export function HomeRouteScreen() {	32	export function HomeRouteScreen() {
29	const { width: windowWidth } = useWindowDimensions();	33	const { width: windowWidth } = useWindowDimensions();
30	const { layout } = useAdaptiveWorkspaceLayout();	34	const { layout, panes } = useAdaptiveWorkspaceLayout();
31	const projects = useProjects();	35	const projects = useProjects();
32	const threads = useThreadShells();	36	const threads = useThreadShells();
33	const { environments: workspaceEnvironments, state: catalogState } = useWorkspaceState();	37	const { environments: workspaceEnvironments, state: catalogState } = useWorkspaceState();
...	@@ -126,8 +130,24 @@ export function HomeRouteScreen() {	...	@@ -126,8 +130,24 @@ export function HomeRouteScreen() {
126	/>	130	/>
127	}	131	}
128	/>	132	/>
		133	{Platform.OS === "android" ? (
		134	<AndroidScreenHeader title="Threads" leading={<AndroidWorkspaceSidebarButton />} />
		135	) : null}
129	<WorkspaceEmptyDetail	136	<WorkspaceEmptyDetail
130	onStartNewTask={() => navigation.navigate("NewTaskSheet", { screen: "NewTask" })}	137	onAddConnection={
		138	Platform.OS === "android" && !catalogState.hasConnections
		139	? () =>
		140	navigation.navigate("SettingsSheet", {
		141	screen: "SettingsContent",
		142	params: { screen: "SettingsEnvironmentNew" },
		143	})
		144	: undefined
		145	}
		146	onStartNewTask={
		147	Platform.OS === "android" && panes.primarySidebarVisible
		148	? undefined
		149	: () => navigation.navigate("NewTaskSheet", { screen: "NewTask" })
		150	}
131	/>	151	/>
132	</>	152	</>
133	);	153	);

apps/mobile/src/features/home/HomeScreen.tsx+58-14

 @@ -30,13 +30,13 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { cn } from "../../lib/cn";
 import { AppText as Text } from "../../components/AppText";
 import { EmptyState } from "../../components/EmptyState";
+import { MaterialFloatingActionButton } from "../../components/MaterialFloatingActionButton";
 import type { WorkspaceEnvironment, WorkspaceState } from "../../state/workspaceModel";
 import type { SavedRemoteConnection } from "../../lib/connection";
 import { scopedProjectKey } from "../../lib/scopedEntities";
 import { NATIVE_LIQUID_GLASS_SUPPORTED } from "../../native/native-glass";
 import { mobilePreferencesAtom, updateMobilePreferencesAtom } from "../../state/preferences";
 import { useThreadSearch } from "../../state/queries";
-import { useAppearancePreferences } from "../settings/appearance/AppearancePreferencesProvider";
 import { useThreadJumpShortcuts } from "../keyboard/threadKeyboardShortcuts";
 import { useThreadListV2Enabled } from "../threads/use-thread-list-v2-enabled";
 import { usePendingThreadOrder } from "../../state/thread-order";
 @@ -83,6 +83,7 @@ import {
   type HomeProjectSortOrder,
 } from "./homeThreadList";
 import { SwipeableScrollGateProvider, useSwipeableScrollGate } from "./thread-swipe-actions";
+import { useMaterialFabScroll } from "./MaterialFabScrollContext";
 /* ─── Types ──────────────────────────────────────────────────────────── */
 @@ -219,7 +220,6 @@ function HomeTopContentSpacer() {
 /* ─── Main screen ────────────────────────────────────────────────────── */
 export function HomeScreen(props: HomeScreenProps) {
-  const { materialYouStyleLayoutActive } = useAppearancePreferences();
   const [groupDisplayStates, setGroupDisplayStates] = useState<
     ReadonlyMap<string, HomeGroupDisplayState>
   >(() => new Map());
 @@ -315,7 +315,9 @@ export function HomeScreen(props: HomeScreenProps) {
   const handleScrollBeginDrag = useCallback(() => {
     openSwipeableRef.current?.close();
   }, []);
+  const onMaterialFabScroll = useMaterialFabScroll();
   const { swipeEnabled, scrollGateHandlers } = useSwipeableScrollGate({
+    onScroll: onMaterialFabScroll,
     onScrollBeginDrag: handleScrollBeginDrag,
   });
 @@ -1104,11 +1106,11 @@ export function HomeScreen(props: HomeScreenProps) {
   if (!hasAnyThreads) {
     return (
-      <View className={materialYouStyleLayoutActive ? "flex-1 bg-header" : "flex-1 bg-screen"}>
+      <View className={Platform.OS === "android" ? "flex-1 bg-header" : "flex-1 bg-screen"}>
         <View
           className={cn(
             "flex-1 items-center justify-center bg-screen px-8",
-            materialYouStyleLayoutActive && "overflow-hidden rounded-t-[28px]",
+            Platform.OS === "android" && "overflow-hidden rounded-t-[28px]",
           )}
           style={{
             paddingBottom: Math.max(insets.bottom, 24) + iosBottomToolbarClearance,
 @@ -1121,11 +1123,22 @@ export function HomeScreen(props: HomeScreenProps) {
               detail={emptyState.detail}
               actionLabel={!props.catalogState.hasReadyEnvironment ? "Add environment" : undefined}
               onAction={!props.catalogState.hasReadyEnvironment ? props.onAddConnection : undefined}
+              action={
+                Platform.OS === "android" && !props.catalogState.hasReadyEnvironment ? (
+                  <MaterialFloatingActionButton
+                    label="Add environment"
+                    icon="plus"
+                    variant="extended"
+                    tone="primary"
+                    onPress={props.onAddConnection}
+                  />
+                ) : undefined
+              }
               variant="plain"
             />
             {emptyState.loading ? (
               <View className="mt-4 items-center">
-                <ActivityIndicator colorClassName={"accent-icon-muted"} />
+                <ActivityIndicator colorClassName="accent-icon-muted" />
               </View>
             ) : null}
           </View>
 @@ -1142,41 +1155,72 @@ export function HomeScreen(props: HomeScreenProps) {
   const listEmpty = !hasResults ? (
     hasSearchQuery && threadSearch.isPending ? null : hasSearchQuery ? (
-      <EmptyState title="No results" detail={`No threads matching "${props.searchQuery}".`} />
+      <EmptyState
+        title="No results"
+        detail={`No threads matching "${props.searchQuery}".`}
+        variant={Platform.OS === "android" ? "plain" : undefined}
+      />
     ) : selectedProjectScope !== null ? (
       <EmptyState
         title={`No threads in ${selectedProjectScope.title}`}
         detail="Choose another project or create a new task."
+        variant={Platform.OS === "android" ? "plain" : undefined}
       />
     ) : selectedEnvironmentLabel ? (
       <EmptyState
         title={`No threads in ${selectedEnvironmentLabel}`}
         detail="Choose another environment or create a new task."
+        variant={Platform.OS === "android" ? "plain" : undefined}
       />
     ) : (
-      <EmptyState title="No threads yet" detail="Create a task to start a new coding session." />
+      <EmptyState
+        title="No threads yet"
+        detail="Create a task to start a new coding session."
+        variant={Platform.OS === "android" ? "plain" : undefined}
+      />
     )
   ) : null;
   // Use the v2 project scope for its empty state. Snoozed threads need no
   // special empty state: their shelf header is a list row even while collapsed.
   const v2ListEmpty =
     hasSearchQuery && threadSearch.isPending ? null : hasSearchQuery ? (
-      <EmptyState title="No results" detail={`No threads matching "${props.searchQuery}".`} />
+      <EmptyState
+        title="No results"
+        detail={`No threads matching "${props.searchQuery}".`}
+        variant={Platform.OS === "android" ? "plain" : undefined}
+      />
     ) : v2ScopedProjectGroup !== null ? (
       <EmptyState
         title={`No threads in ${v2ScopedProjectGroup.title}`}
         detail="Choose another project or create a new task."
+        variant={Platform.OS === "android" ? "plain" : undefined}
       />
     ) : (
       listEmpty
     );
+  if (
+    Platform.OS === "android" &&
+    (threadListV2Enabled ? threadListV2Items.length === 0 : listLayout.items.length === 0)
+  ) {
+    return (
+      <View className="flex-1 bg-header">
+        <View
+          className="flex-1 items-center justify-center overflow-hidden rounded-t-[28px] bg-screen px-4"
+          style={{ paddingBottom: insets.bottom }}
+        >
+          {threadListV2Enabled ? v2ListEmpty : listEmpty}
+        </View>
+      </View>
+    );
+  }
   if (threadListV2Enabled) {
     return (
-      <View className={materialYouStyleLayoutActive ? "flex-1 bg-header" : "flex-1 bg-screen"}>
+      <View className={Platform.OS === "android" ? "flex-1 bg-header" : "flex-1 bg-screen"}>
         <View
           className={
-            materialYouStyleLayoutActive
+            Platform.OS === "android"
               ? "flex-1 overflow-hidden rounded-t-[28px] bg-screen"
               : "flex-1 bg-screen"
           }
 @@ -1216,7 +1260,7 @@ export function HomeScreen(props: HomeScreenProps) {
                 paddingBottom:
                   Platform.OS === "ios"
                     ? Math.max(insets.bottom, 24) + 96 + iosBottomToolbarClearance
-                    : Math.max(insets.bottom, 16) + 88,
+                    : Math.max(insets.bottom, 16) + (Platform.OS === "android" ? 148 : 88),
               }}
             />
           </SwipeableScrollGateProvider>
 @@ -1226,10 +1270,10 @@ export function HomeScreen(props: HomeScreenProps) {
   }
   return (
-    <View className={materialYouStyleLayoutActive ? "flex-1 bg-header" : "flex-1 bg-screen"}>
+    <View className={Platform.OS === "android" ? "flex-1 bg-header" : "flex-1 bg-screen"}>
       <View
         className={
-          materialYouStyleLayoutActive
+          Platform.OS === "android"
             ? "flex-1 overflow-hidden rounded-t-[28px] bg-screen"
             : "flex-1 bg-screen"
         }
 @@ -1270,7 +1314,7 @@ export function HomeScreen(props: HomeScreenProps) {
               paddingBottom:
                 Platform.OS === "ios"
                   ? Math.max(insets.bottom, 24) + 24 + iosBottomToolbarClearance
-                  : Math.max(insets.bottom, 16) + 88,
+                  : Math.max(insets.bottom, 16) + (Platform.OS === "android" ? 148 : 88),
             }}
             scrollIndicatorInsets={
               Platform.OS === "ios"

apps/mobile/src/features/home/MaterialFabScrollContext.ts created+10

...	@@ -0,0 +1,10 @@
1	import { createContext, useContext } from "react";
2	import type { NativeScrollEvent, NativeSyntheticEvent } from "react-native";
3
4	export const MaterialFabScrollContext = createContext<
5	((event: NativeSyntheticEvent<NativeScrollEvent>) => void) \| undefined
6	>(undefined);
7
8	export function useMaterialFabScroll() {
9	return useContext(MaterialFabScrollContext);
10	}

apps/mobile/src/features/home/MaterialThreadListToolbar.tsx created+178

...	@@ -0,0 +1,178 @@
1	import { useCallback, useEffect, useRef, useState, type ComponentProps } from "react";
2	import {
3	BackHandler,
4	Keyboard,
5	Pressable,
6	TextInput,
7	View,
8	type LayoutChangeEvent,
9	} from "react-native";
10	import { useSafeAreaInsets } from "react-native-safe-area-context";
11	import type { MenuAction } from "@react-native-menu/menu";
12
13	import { AndroidHeaderIconButton } from "../../components/AndroidScreenHeader";
14	import { CompactBrandTitle } from "../../components/CompactBrandTitle";
15	import { MaterialFloatingActionButton } from "../../components/MaterialFloatingActionButton";
16	import { AndroidAnchoredMenu } from "../../components/AndroidAnchoredMenu";
17	import { ControlPillMenu } from "../../components/ControlPill";
18	import { SymbolView } from "../../components/AppSymbol";
19	import { useHardwareKeyboardCommand } from "../keyboard/hardwareKeyboardCommands";
20	import { WorkspaceConnectionTitle } from "./WorkspaceConnectionTitle";
21	import { useWorkspaceState } from "../../state/workspace";
22	import { useMaterialToolbarHeight } from "../../components/useMaterialToolbarHeight";
23
24	/** One toolbar height for the compact list and expanded sidebar, including search. */
25	export function MaterialThreadListToolbar(props: {
26	readonly searchQuery: string;
27	readonly onSearchQueryChange: (query: string) => void;
28	readonly filterActions: MenuAction[];
29	readonly filterCustomized: boolean;
30	readonly onFilterAction: NonNullable<ComponentProps<typeof ControlPillMenu>["onPressAction"]>;
31	readonly onOpenSettings: () => void;
32	readonly onOpenEnvironments: () => void;
33	readonly sidebar?: boolean;
34	readonly onLayout?: (event: LayoutChangeEvent) => void;
35	readonly onRequestVisibility?: () => void;
36	}) {
37	const insets = useSafeAreaInsets();
38	const toolbarHeight = useMaterialToolbarHeight();
39	const { state } = useWorkspaceState();
40	const { onRequestVisibility, onSearchQueryChange } = props;
41	const searchRef = useRef<TextInput>(null);
42	const [searchOpen, setSearchOpen] = useState(false);
43	const searching = searchOpen \|\| props.searchQuery.length > 0;
44	const openSearch = useCallback(() => {
45	onRequestVisibility?.();
46	setSearchOpen(true);
47	searchRef.current?.focus();
48	return true;
49	}, [onRequestVisibility]);
50	useHardwareKeyboardCommand("focusSearch", openSearch);
51
52	const closeSearch = useCallback(() => {
53	onSearchQueryChange("");
54	setSearchOpen(false);
55	Keyboard.dismiss();
56	}, [onSearchQueryChange]);
57
58	useEffect(() => {
59	if (!searching) return;
60	const subscription = BackHandler.addEventListener("hardwareBackPress", () => {
61	closeSearch();
62	return true;
63	});
64	return () => subscription.remove();
65	}, [closeSearch, searching]);
66
67	const filterIcon = props.filterCustomized
68	? "line.3.horizontal.decrease.circle.fill"
69	: "line.3.horizontal.decrease.circle";
70	const searchField = (
71	<View className="h-12 min-w-0 flex-1 flex-row items-center gap-2 rounded-full border border-input-border bg-input px-3">
72	<SymbolView name="magnifyingglass" size={18} tintColorClassName="accent-foreground-muted" />
73	<TextInput
74	ref={searchRef}
75	accessibilityLabel="Search threads"
76	autoFocus={true}
77	autoCapitalize="none"
78	autoCorrect={false}
79	returnKeyType="search"
80	placeholder="Search"
81	placeholderTextColorClassName="accent-placeholder"
82	selectionColorClassName="accent-primary/32"
83	cursorColorClassName="accent-primary"
84	selectionHandleColorClassName="accent-primary"
85	className="min-w-0 flex-1 py-2 font-sans text-base text-foreground"
86	value={props.searchQuery}
87	onChangeText={onSearchQueryChange}
88	/>
89	{props.searchQuery.length > 0 ? (
90	<Pressable
91	accessibilityLabel="Clear search"
92	accessibilityRole="button"
93	hitSlop={10}
94	onPress={() => {
95	props.onSearchQueryChange("");
96	searchRef.current?.focus();
97	}}
98	>
99	<SymbolView
100	name="xmark.circle.fill"
101	size={18}
102	tintColorClassName="accent-foreground-muted"
103	/>
104	</Pressable>
105	) : null}
106	</View>
107	);
108
109	return (
110	<>
111	<View
112	onLayout={props.onLayout}
113	className={
114	props.sidebar
115	? "absolute inset-x-0 top-0 z-[4] bg-header px-2 pb-2"
116	: "bg-header px-2 pb-2"
117	}
118	style={{ paddingTop: Math.max(insets.top, 12) }}
119	>
120	<View className="flex-row items-center gap-1" style={{ minHeight: toolbarHeight }}>
121	{searching ? (
122	<>
123	<AndroidHeaderIconButton
124	accessibilityLabel="Close search"
125	icon="arrow.left"
126	onPress={closeSearch}
127	/>
128	{searchField}
129	</>
130	) : (
131	<>
132	{/* Match the visible inset of the trailing 48dp icon button. */}
133	<View className="min-w-0 flex-1 pl-4">
134	<WorkspaceConnectionTitle
135	grow
136	onPress={props.onOpenEnvironments}
137	brand={<CompactBrandTitle allowFontScaling={false} />}
138	/>
139	</View>
140	<AndroidHeaderIconButton
141	accessibilityLabel="Search threads"
142	icon="magnifyingglass"
143	onPress={openSearch}
144	/>
145	<AndroidHeaderIconButton
146	accessibilityLabel="Open settings"
147	icon="gearshape"
148	onPress={props.onOpenSettings}
149	/>
150	</>
151	)}
152	</View>
153	</View>
154	{/* Sit 8dp above the 56dp extended New thread FAB. */}
155	{state.hasConnections ? (
156	<View
157	className="absolute right-5 z-[5]"
158	style={{
159	bottom:
160	(props.sidebar ? Math.max(insets.bottom, 12) + 6 : Math.max(insets.bottom, 16) + 16) +
161	56 +
162	8,
163	}}
164	>
165	<AndroidAnchoredMenu actions={props.filterActions} onPressAction={props.onFilterAction}>
166	{(open) => (
167	<MaterialFloatingActionButton
168	label="Filter and sort threads"
169	icon={filterIcon}
170	onPress={open}
171	/>
172	)}
173	</AndroidAnchoredMenu>
174	</View>
175	) : null}
176	</>
177	);
178	}

apps/mobile/src/features/home/material-fab-scroll.test.ts created+40

...	@@ -0,0 +1,40 @@
1	import { describe, expect, it } from "vite-plus/test";
2
3	import { updateMaterialFabScroll, type MaterialFabScrollState } from "./material-fab-scroll";
4
5	describe("Material FAB scroll direction", () => {
6	const initial: MaterialFabScrollState = { anchor: 0, expanded: true };
7
8	it("shrinks scrolling down and expands scrolling up without returning to the top", () => {
9	const collapsed = updateMaterialFabScroll(initial, 80, 500);
10	expect(collapsed.expanded).toBe(false);
11	const lower = updateMaterialFabScroll(collapsed, 180, 500);
12	expect(lower.expanded).toBe(false);
13	expect(updateMaterialFabScroll(lower, 160, 500).expanded).toBe(true);
14	});
15
16	it("accumulates travel but ignores jitter around a direction change", () => {
17	let state = updateMaterialFabScroll(initial, 10, 500);
18	expect(state.expanded).toBe(true);
19	state = updateMaterialFabScroll(state, 14, 500);
20	expect(state.expanded).toBe(false);
21	state = updateMaterialFabScroll(state, 100, 500);
22	state = updateMaterialFabScroll(state, 95, 500);
23	state = updateMaterialFabScroll(state, 98, 500);
24	expect(state.expanded).toBe(false);
25	expect(updateMaterialFabScroll(state, 88, 500).expanded).toBe(true);
26	});
27
28	it("does not expand from bottom bounce or collapse from top bounce", () => {
29	const bottom = updateMaterialFabScroll(initial, 500, 500);
30	const bounce = updateMaterialFabScroll(bottom, 560, 500);
31	expect(updateMaterialFabScroll(bounce, 500, 500).expanded).toBe(false);
32	expect(updateMaterialFabScroll(initial, -50, 500)).toEqual(initial);
33	});
34
35	it("expands near the top and when filtering leaves a non-scrollable list", () => {
36	const collapsed = updateMaterialFabScroll(initial, 80, 500);
37	expect(updateMaterialFabScroll(collapsed, 5, 500).expanded).toBe(true);
38	expect(updateMaterialFabScroll(collapsed, 80, -20)).toEqual(initial);
39	});
40	});

apps/mobile/src/features/home/material-fab-scroll.ts created+17

...	@@ -0,0 +1,17 @@
1	export interface MaterialFabScrollState {
2	readonly anchor: number;
3	readonly expanded: boolean;
4	}
5
6	/** Ignore small direction changes and overscroll; always show the label at the top. */
7	export function updateMaterialFabScroll(
8	state: MaterialFabScrollState,
9	offset: number,
10	maxOffset: number,
11	): MaterialFabScrollState {
12	const y = Math.max(0, Math.min(offset, Math.max(0, maxOffset)));
13	if (y <= 8) return { anchor: y, expanded: true };
14	const anchor = state.expanded ? Math.min(state.anchor, y) : Math.max(state.anchor, y);
15	if (Math.abs(y - anchor) >= 12) return { anchor: y, expanded: !state.expanded };
16	return { anchor, expanded: state.expanded };
17	}

apps/mobile/src/features/layout/AdaptiveWorkspaceLayout.tsx+9-6

...	@@ -22,7 +22,7 @@ import {	...	@@ -22,7 +22,7 @@ import {
22	useState,	22	useState,
23	type ReactNode,	23	type ReactNode,
24	} from "react";	24	} from "react";
25	import { useWindowDimensions, View } from "react-native";	25	import { Platform, useWindowDimensions, View } from "react-native";
26	import Animated, {	26	import Animated, {
27	useAnimatedStyle,	27	useAnimatedStyle,
28	useDerivedValue,	28	useDerivedValue,
...	@@ -56,7 +56,6 @@ import {	...	@@ -56,7 +56,6 @@ import {
56	} from "../keyboard/hardwareKeyboardCommands";	56	} from "../keyboard/hardwareKeyboardCommands";
57	import { AndroidHomeFabLayout } from "../home/AndroidHomeFab";	57	import { AndroidHomeFabLayout } from "../home/AndroidHomeFab";
58	import { HomeListOptionsProvider } from "../home/home-list-options";	58	import { HomeListOptionsProvider } from "../home/home-list-options";
59	import { useAppearancePreferences } from "../settings/appearance/AppearancePreferencesProvider";
60	import { ThreadNavigationSidebar } from "../threads/ThreadNavigationSidebar";	59	import { ThreadNavigationSidebar } from "../threads/ThreadNavigationSidebar";
61	import { WORKSPACE_PANE_TIMING } from "./workspace-pane-animation";	60	import { WORKSPACE_PANE_TIMING } from "./workspace-pane-animation";
62	import { WorkspaceInspectorPane } from "./workspace-inspector-pane";	61	import { WorkspaceInspectorPane } from "./workspace-inspector-pane";
...	@@ -234,7 +233,6 @@ function AdaptiveWorkspaceLayoutContent(	...	@@ -234,7 +233,6 @@ function AdaptiveWorkspaceLayoutContent(
234	},	233	},
235	) {	234	) {
236	const projectGroupingMode = props.projectGroupingMode;	235	const projectGroupingMode = props.projectGroupingMode;
237	const { materialYouStyleLayoutActive } = useAppearancePreferences();
238	const { width, height } = useWindowDimensions();	236	const { width, height } = useWindowDimensions();
239	const pathname = props.pathname;	237	const pathname = props.pathname;
240	const navigation = useNavigation();	238	const navigation = useNavigation();
...	@@ -582,7 +580,7 @@ function AdaptiveWorkspaceLayoutContent(	...	@@ -582,7 +580,7 @@ function AdaptiveWorkspaceLayoutContent(
582	style={sidebarAnimatedStyle}	580	style={sidebarAnimatedStyle}
583	>	581	>
584	<View className="flex-1" style={{ width: layout.listPaneWidth }}>	582	<View className="flex-1" style={{ width: layout.listPaneWidth }}>
585	<AndroidHomeFabLayout onStartNewTask={handleStartNewTask}>	583	<AndroidHomeFabLayout sidebar onStartNewTask={handleStartNewTask}>
586	<ThreadNavigationSidebar	584	<ThreadNavigationSidebar
587	width={layout.listPaneWidth}	585	width={layout.listPaneWidth}
588	visible={panes.primarySidebarVisible}	586	visible={panes.primarySidebarVisible}
...	@@ -602,7 +600,7 @@ function AdaptiveWorkspaceLayoutContent(	...	@@ -602,7 +600,7 @@ function AdaptiveWorkspaceLayoutContent(
602	) : null}	600	) : null}
603	<View	601	<View
604	className={	602	className={
605	materialYouStyleLayoutActive	603	Platform.OS === "android"
606	? "flex-1 overflow-hidden bg-header"	604	? "flex-1 overflow-hidden bg-header"
607	: "flex-1 overflow-hidden bg-screen"	605	: "flex-1 overflow-hidden bg-screen"
608	}	606	}
...	@@ -611,7 +609,12 @@ function AdaptiveWorkspaceLayoutContent(	...	@@ -611,7 +609,12 @@ function AdaptiveWorkspaceLayoutContent(
611	<View	609	<View
612	collapsable={false}	610	collapsable={false}
613	style={	611	style={
614	contentSettledWidth !== null ? { flex: 1, width: contentSettledWidth } : { flex: 1 }	612	contentSettledWidth !== null
		613	? {
		614	flex: 1,
		615	width: contentSettledWidth,
		616	}
		617	: { flex: 1 }
615	}	618	}
616	>	619	>
617	<WorkspaceContentWidthContext	620	<WorkspaceContentWidthContext

apps/mobile/src/features/layout/WorkspaceEmptyDetail.tsx+55-26

 @@ -1,40 +1,69 @@
-import { useAppearancePreferences } from "../settings/appearance/AppearancePreferencesProvider";
 import { SymbolView } from "../../components/AppSymbol";
-import { Pressable, View } from "react-native";
+import { Platform, Pressable, View } from "react-native";
 import { AppText as Text } from "../../components/AppText";
+import { MaterialNewThreadButton } from "../../components/MaterialNewThreadButton";
+import { MaterialFloatingActionButton } from "../../components/MaterialFloatingActionButton";
+import { EmptyState } from "../../components/EmptyState";
-export function WorkspaceEmptyDetail(props: { readonly onStartNewTask?: () => void }) {
+export function WorkspaceEmptyDetail(props: {
-  const { materialYouStyleLayoutActive } = useAppearancePreferences();
+  readonly onStartNewTask?: () => void;
+  readonly onAddConnection?: () => void;
+}) {
   return (
     <View
       className={
-        materialYouStyleLayoutActive
+        Platform.OS === "android"
           ? "flex-1 items-center justify-center px-10"
           : "flex-1 items-center justify-center bg-screen px-10"
       }
     >
-      <View className="max-w-[360px] items-center gap-3">
+      {props.onAddConnection ? (
-        <SymbolView
+        <View className="w-full max-w-[430px]">
-          name="sidebar.left"
+          <EmptyState
-          size={34}
+            title="No environments connected"
-          tintColorClassName={"accent-icon-subtle"}
+            detail="Add an environment to load projects and start coding sessions."
-          type="hierarchical"
+            variant="plain"
-        />
+            action={
-        <Text className="text-center text-xl font-t3-bold">Select a thread</Text>
+              <MaterialFloatingActionButton
-        <Text className="text-center text-base text-foreground-muted">
+                label="Add environment"
-          Choose a thread from the sidebar or start a new task.
+                icon="plus"
-        </Text>
+                variant="extended"
-        {props.onStartNewTask ? (
+                tone="primary"
-          <Pressable
+                onPress={props.onAddConnection}
-            accessibilityRole="button"
+              />
-            className="mt-2 flex-row items-center gap-2 rounded-full bg-primary px-5 py-3 active:opacity-70"
+            }
-            onPress={props.onStartNewTask}
+          />
-          >
+        </View>
-            <Text className="text-base font-t3-bold text-primary-foreground">New Task</Text>
+      ) : (
-          </Pressable>
+        <View className="max-w-[360px] items-center gap-3">
-        ) : null}
+          <SymbolView
-      </View>
+            name="sidebar.left"
+            size={34}
+            tintColorClassName="accent-icon-subtle"
+            type="hierarchical"
+          />
+          <Text className="text-center text-xl font-t3-bold">Select a thread</Text>
+          <Text className="text-center text-base text-foreground-muted">
+            {Platform.OS === "android"
+              ? "Choose a thread from the sidebar or start a new thread."
+              : "Choose a thread from the sidebar or start a new task."}
+          </Text>
+          {props.onStartNewTask ? (
+            Platform.OS === "android" ? (
+              <MaterialNewThreadButton extended className="mt-2" onPress={props.onStartNewTask} />
+            ) : (
+              <Pressable
+                accessibilityRole="button"
+                className="mt-2 flex-row items-center gap-2 rounded-full bg-primary px-5 py-3 active:opacity-70"
+                onPress={props.onStartNewTask}
+              >
+                <Text className="text-base font-t3-bold text-primary-foreground">New Task</Text>
+              </Pressable>
+            )
+          ) : null}
+        </View>
+      )}
     </View>
   );
 }

apps/mobile/src/features/layout/workspace-pane-divider.tsx+2-1

...	@@ -1,5 +1,5 @@	...	@@ -1,5 +1,5 @@
1	import { useCallback, useMemo, useRef, useState } from "react";	1	import { useCallback, useMemo, useRef, useState } from "react";
2	import { Pressable, StyleSheet, View, type AccessibilityActionEvent } from "react-native";	2	import { Platform, Pressable, StyleSheet, View, type AccessibilityActionEvent } from "react-native";
3	import { Gesture, GestureDetector } from "react-native-gesture-handler";	3	import { Gesture, GestureDetector } from "react-native-gesture-handler";
4	import { runOnJS } from "react-native-reanimated";	4	import { runOnJS } from "react-native-reanimated";
5	import { cn } from "../../lib/cn";	5	import { cn } from "../../lib/cn";
...	@@ -79,6 +79,7 @@ export function WorkspacePaneDivider(props: WorkspacePaneDividerProps) {	...	@@ -79,6 +79,7 @@ export function WorkspacePaneDivider(props: WorkspacePaneDividerProps) {
79	className={cn(	79	className={cn(
80	"h-full self-center bg-border opacity-70",	80	"h-full self-center bg-border opacity-70",
81	dragging ? "w-0.5 bg-primary opacity-100" : "w-px",	81	dragging ? "w-0.5 bg-primary opacity-100" : "w-px",
		82	Platform.OS === "android" && !dragging && "opacity-0",
82	)}	83	)}
83	style={[styles.line, dragging && styles.activeLine]}	84	style={[styles.line, dragging && styles.activeLine]}
84	/>	85	/>

apps/mobile/src/features/layout/workspace-sidebar-toolbar.tsx+18

...	@@ -2,8 +2,26 @@ import { NativeHeaderToolbar } from "../../native/StackHeader";	...	@@ -2,8 +2,26 @@ import { NativeHeaderToolbar } from "../../native/StackHeader";
2	import type { ReactNode } from "react";	2	import type { ReactNode } from "react";
3	import { Platform } from "react-native";	3	import { Platform } from "react-native";
4		4
		5	import { AndroidHeaderIconButton } from "../../components/AndroidScreenHeader";
		6
5	import { useAdaptiveWorkspaceLayout } from "./AdaptiveWorkspaceLayout";	7	import { useAdaptiveWorkspaceLayout } from "./AdaptiveWorkspaceLayout";
6		8
		9	export function AndroidWorkspaceSidebarButton() {
		10	const { layout, panes, togglePrimarySidebar } = useAdaptiveWorkspaceLayout();
		11	if (Platform.OS !== "android" \|\| !layout.usesSplitView) return null;
		12
		13	return (
		14	<AndroidHeaderIconButton
		15	accessibilityLabel={
		16	panes.primarySidebarVisible ? "Hide thread sidebar" : "Show thread sidebar"
		17	}
		18	icon="sidebar.left"
		19	selected={panes.primarySidebarVisible}
		20	onPress={togglePrimarySidebar}
		21	/>
		22	);
		23	}
		24
7	export function WorkspaceSidebarToolbar(	25	export function WorkspaceSidebarToolbar(
8	props: {	26	props: {
9	readonly children?: ReactNode;	27	readonly children?: ReactNode;

apps/mobile/src/features/projects/AddProjectScreen.tsx+71-28

 @@ -1,3 +1,7 @@
+import { MaterialListRow } from "../../components/MaterialListRow";
+import { SettingsScreen } from "../settings/components/SettingsScreen";
+import { ScreenScrollView as ScrollView } from "../../components/ScreenScrollView";
+import { MaterialButton } from "../../components/MaterialButton";
 import {
   addProjectRemoteSourceLabel,
   addProjectRemoteSourcePathHint,
 @@ -41,14 +45,13 @@ import {
 import { CommonActions, StackActions, useNavigation } from "@react-navigation/native";
 import { SymbolView } from "../../components/AppSymbol";
 import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
-import { ActivityIndicator, Alert, Pressable, ScrollView, View } from "react-native";
+import { Platform, ActivityIndicator, Alert, Pressable, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import * as Arr from "effect/Array";
 import * as Cause from "effect/Cause";
 import * as Order from "effect/Order";
 import { AsyncResult } from "effect/unstable/reactivity";
 import { cn } from "../../lib/cn";
 import { useProjects, useServerConfigs, waitForProject } from "../../state/entities";
 import { filesystemEnvironment } from "../../state/filesystem";
 import { projectEnvironment } from "../../state/projects";
 @@ -123,13 +126,19 @@ function sourceFromParam(value: string | string[] | undefined): AddProjectRemote
 function SectionTitle(props: { readonly children: string }) {
   return (
-    <Text className="px-1 text-2xs font-t3-bold tracking-[0.7px] uppercase text-foreground-muted">
+    <Text
+      className={
+        Platform.OS === "android"
+          ? "px-4 text-sm font-t3-medium text-primary"
+          : "px-1 text-2xs font-t3-bold tracking-[0.7px] uppercase text-foreground-muted"
+      }
+    >
       {props.children}
     </Text>
   );
 }
-function AddProjectShell(props: { readonly children: ReactNode }) {
+function AddProjectShell(props: { readonly children: ReactNode; readonly title: string }) {
   const insets = useSafeAreaInsets();
   return (
 @@ -138,25 +147,35 @@ function AddProjectShell(props: { readonly children: ReactNode }) {
     // scroll-view frame correction mistakes this full-height wrapper for a
     // "header" sibling, coercing the ScrollView to zero height (blank sheet
     // as soon as the sheet re-lays-out, e.g. when the keyboard opens).
-    <View collapsable={false} className="flex-1 bg-sheet">
+    <SettingsScreen title={props.title}>
       <ScrollView
         keyboardShouldPersistTaps="handled"
         contentInsetAdjustmentBehavior="automatic"
         contentContainerStyle={{
-          paddingHorizontal: 20,
+          paddingHorizontal: Platform.OS === "android" ? 16 : 20,
           paddingTop: 16,
           paddingBottom: Math.max(insets.bottom, 18) + 18,
-          gap: 10,
+          gap: Platform.OS === "android" ? 16 : 10,
         }}
       >
         {props.children}
       </ScrollView>
-    </View>
+    </SettingsScreen>
   );
 }
 function ListSection(props: { readonly children: ReactNode }) {
-  return <View className="overflow-hidden rounded-[24px] bg-card">{props.children}</View>;
+  return (
+    <View
+      className={
+        Platform.OS === "android"
+          ? "overflow-hidden rounded-[28px] bg-card"
+          : "overflow-hidden rounded-[24px] bg-card"
+      }
+    >
+      {props.children}
+    </View>
+  );
 }
 function ListRow(props: {
 @@ -169,6 +188,20 @@ function ListRow(props: {
   readonly right?: ReactNode;
   readonly onPress?: () => void;
 }) {
+  if (Platform.OS === "android") {
+    return (
+      <MaterialListRow
+        title={props.title}
+        subtitle={props.subtitle}
+        leading={props.icon}
+        trailing={props.right}
+        disabled={props.disabled}
+        onPress={props.onPress}
+        accessibilityRole={props.selected !== undefined ? "radio" : "button"}
+        accessibilityState={props.selected !== undefined ? { checked: props.selected } : undefined}
+      />
+    );
+  }
   return (
     <Pressable
       disabled={props.disabled}
 @@ -203,7 +236,7 @@ function ListRow(props: {
           <SymbolView
             name="chevron.right"
             size={13}
-            tintColorClassName={"accent-chevron"}
+            tintColorClassName="accent-chevron"
             type="monochrome"
           />
         ) : null}
 @@ -218,6 +251,7 @@ function PrimaryActionButton(props: {
   readonly loading?: boolean;
   readonly onPress: () => void;
 }) {
+  if (Platform.OS === "android") return <MaterialButton {...props} tone="primary" fullWidth />;
   return (
     <Pressable
       disabled={props.disabled}
 @@ -435,9 +469,18 @@ function SourceControlRow(props: {
       : `Clone ${addProjectRemoteSourceLabel(props.source)} ${props.hint}`;
   const icon =
     props.source === "url" ? (
-      <SymbolView name="link" size={17} tintColorClassName={"accent-icon"} type="monochrome" />
+      <SymbolView
+        name="link"
+        size={Platform.OS === "android" ? 24 : 17}
+        tintColorClassName="accent-icon"
+        type="monochrome"
+      />
     ) : (
-      <SourceControlIcon kind={props.source} size={18} colorClassName="accent-icon" />
+      <SourceControlIcon
+        kind={props.source}
+        size={Platform.OS === "android" ? 24 : 18}
+        colorClassName="accent-icon"
+      />
     );
   if (!props.ready) {
 @@ -482,7 +525,7 @@ export function AddProjectSourceScreen() {
   );
   return (
-    <AddProjectShell>
+    <AddProjectShell title="Add project">
       {selectedEnvironment === null ? <EmptyEnvironmentState /> : null}
       {environmentOptions.length > 1 ? (
 @@ -495,7 +538,7 @@ export function AddProjectSourceScreen() {
                 title={environment.label}
                 subtitle={
                   canCreateProjectInEnvironment(environment.connectionState)
-                    ? environment.environmentId
+                    ? undefined
                     : connectionStatusText({
                         phase: environment.connectionState,
                         error: environment.connectionError,
 @@ -505,7 +548,7 @@ export function AddProjectSourceScreen() {
                 icon={
                   <EnvironmentMachineSymbol
                     kind={environment.machine}
-                    size={17}
+                    size={Platform.OS === "android" ? 24 : 17}
                     tintColorClassName="accent-icon"
                   />
                 }
 @@ -516,8 +559,8 @@ export function AddProjectSourceScreen() {
                   environment.environmentId === selectedEnvironment?.environmentId ? (
                     <SymbolView
                       name="checkmark"
-                      size={14}
+                      size={Platform.OS === "android" ? 20 : 14}
-                      tintColorClassName={"accent-icon"}
+                      tintColorClassName="accent-icon"
                       type="monochrome"
                     />
                   ) : null
 @@ -538,8 +581,8 @@ export function AddProjectSourceScreen() {
               icon={
                 <SymbolView
                   name="folder.badge.plus"
-                  size={17}
+                  size={Platform.OS === "android" ? 24 : 17}
-                  tintColorClassName={"accent-icon"}
+                  tintColorClassName="accent-icon"
                   type="monochrome"
                 />
               }
 @@ -570,7 +613,7 @@ export function AddProjectSourceScreen() {
             )}
           </ListSection>
           {discoveryState.isPending ? (
-            <ActivityIndicator colorClassName={"accent-icon-muted"} />
+            <ActivityIndicator colorClassName="accent-icon-muted" />
           ) : null}
         </>
       ) : null}
 @@ -723,7 +766,7 @@ export function AddProjectRepositoryScreen(props: {
   }, [environment, isSubmitting, lookupRepositoryQuery, repositoryInput, navigation, source]);
   return (
-    <AddProjectShell>
+    <AddProjectShell title={source === "url" ? "Git URL" : addProjectRemoteSourceLabel(source)}>
       {error ? <ErrorBanner message={error} /> : null}
       {environment ? (
         <>
 @@ -800,7 +843,7 @@ function FolderBrowser(props: {
       <ListSection>
         {browseState.isPending && browseState.data === null ? (
           <View className="items-center py-5">
-            <ActivityIndicator colorClassName={"accent-icon-muted"} />
+            <ActivityIndicator colorClassName="accent-icon-muted" />
           </View>
         ) : null}
         {browsePath.canBrowseUp ? (
 @@ -809,8 +852,8 @@ function FolderBrowser(props: {
             icon={
               <SymbolView
                 name="arrow.turn.left.up"
-                size={17}
+                size={Platform.OS === "android" ? 24 : 17}
-                tintColorClassName={"accent-icon-muted"}
+                tintColorClassName="accent-icon-muted"
                 type="monochrome"
               />
             }
 @@ -832,8 +875,8 @@ function FolderBrowser(props: {
             icon={
               <SymbolView
                 name="folder"
-                size={17}
+                size={Platform.OS === "android" ? 24 : 17}
-                tintColorClassName={"accent-icon-muted"}
+                tintColorClassName="accent-icon-muted"
                 type="monochrome"
               />
             }
 @@ -882,7 +925,7 @@ export function AddProjectLocalFolderScreen(props: { readonly environmentId?: st
   }, [createProject, environment, isBrowseNavigating, isSubmitting, pathInput]);
   return (
-    <AddProjectShell>
+    <AddProjectShell title="Local folder">
       {error ? <ErrorBanner message={error} /> : null}
       {environment ? (
         <>
 @@ -1025,7 +1068,7 @@ export function AddProjectDestinationScreen(props: {
   ]);
   return (
-    <AddProjectShell>
+    <AddProjectShell title="Clone destination">
       {error ? <ErrorBanner message={error} /> : null}
       {repositoryTitle ? (
         <View className="rounded-[24px] bg-card px-4 py-3">

apps/mobile/src/features/review/ReviewSheet.tsx+250-165

 @@ -35,6 +35,8 @@ import { AppText as Text } from "../../components/AppText";
 import { SymbolView } from "../../components/AppSymbol";
 import { AndroidHeaderIconButton, AndroidScreenHeader } from "../../components/AndroidScreenHeader";
 import { ControlPillMenu } from "../../components/ControlPill";
+import { MaterialScreenContent } from "../../components/MaterialScreenContent";
+import { cn } from "../../lib/cn";
 import { environmentCatalog } from "../../connection/catalog";
 import { useEnvironmentPresentation } from "../../state/presentation";
 import { useAtomCommand } from "../../state/use-atom-command";
 @@ -54,7 +56,10 @@ import { useSelectedThreadGitState } from "../../state/use-selected-thread-git-s
 import { useSelectedThreadWorktree } from "../../state/use-selected-thread-worktree";
 import { useThreadSelection } from "../../state/use-thread-selection";
 import { vcsEnvironment } from "../../state/vcs";
-import { WorkspaceSidebarToolbar } from "../layout/workspace-sidebar-toolbar";
+import {
+  AndroidWorkspaceSidebarButton,
+  WorkspaceSidebarToolbar,
+} from "../layout/workspace-sidebar-toolbar";
 import { ThreadGitMenu } from "../threads/ThreadGitControls";
 import { useReviewCacheForThread } from "./reviewState";
 import {
 @@ -81,7 +86,12 @@ const SHOWCASE_ENABLED = process.env.EXPO_PUBLIC_SHOWCASE === "1";
 const ReviewNotice = memo(function ReviewNotice(props: { readonly notice: string }) {
   return (
-    <View className="border-b border-warning-border bg-warning px-4 py-3">
+    <View
+      className={cn(
+        "bg-warning px-4 py-3",
+        Platform.OS === "android" ? "m-2 rounded-[20px]" : "border-b border-warning-border",
+      )}
+    >
       <Text className="text-xs font-t3-bold uppercase text-warning-foreground">Partial diff</Text>
       <Text className="text-xs leading-normal text-warning-foreground">{props.notice}</Text>
     </View>
 @@ -103,7 +113,7 @@ function ReviewSelectionActionBar(props: {
       <SymbolView
         name={props.onOpenComment ? "text.bubble" : "line.3.horizontal.decrease.circle"}
         size={16}
-        tintColorClassName={"accent-primary-foreground"}
+        tintColorClassName="accent-primary-foreground"
         type="monochrome"
       />
       <Text className="text-base font-t3-bold text-primary-foreground">{props.title}</Text>
 @@ -143,7 +153,7 @@ function ReviewSelectionActionBar(props: {
         <SymbolView
           name="xmark"
           size={16}
-          tintColorClassName={"accent-primary-foreground"}
+          tintColorClassName="accent-primary-foreground"
           type="monochrome"
         />
       </Pressable>
 @@ -174,9 +184,14 @@ const ReviewFileNavigatorRow = memo(function ReviewFileNavigatorRow(props: {
       accessibilityRole="button"
       accessibilityState={{ selected }}
       className={
-        selected
+        Platform.OS === "android"
-          ? "mt-1 min-h-12 justify-center rounded-xl bg-subtle-strong px-3 py-2"
+          ? cn(
-          : "mt-1 min-h-12 justify-center rounded-xl px-3 py-2 active:bg-subtle"
+              "mt-1 min-h-12 justify-center rounded-[20px] px-3 py-2 active:bg-subtle",
+              selected && "bg-thread-selected",
+            )
+          : selected
+            ? "mt-1 min-h-12 justify-center rounded-xl bg-subtle-strong px-3 py-2"
+            : "mt-1 min-h-12 justify-center rounded-xl px-3 py-2 active:bg-subtle"
       }
       onPress={handlePress}
     >
 @@ -323,16 +338,28 @@ function ReviewFileNavigator({
   }
   return (
-    <View className="flex-1 border-l border-border bg-sheet">
+    <View
-      <View className="border-b border-border" style={{ paddingTop: headerInset }}>
+      className={
-        <View className="px-4 py-3">
+        Platform.OS === "android" ? "flex-1 bg-header" : "flex-1 border-l border-border bg-sheet"
-          <Text className="text-sm font-t3-bold text-foreground">Changed files</Text>
+      }
-          <Text className="text-xs text-foreground-muted">
+    >
-            {files.length} {files.length === 1 ? "file" : "files"}
+      {Platform.OS === "android" ? (
-          </Text>
+        <AndroidScreenHeader
+          title="Changed files"
+          subtitle={`${files.length} ${files.length === 1 ? "file" : "files"}`}
+          hideBottomBorder
+        />
+      ) : (
+        <View className="border-b border-border" style={{ paddingTop: headerInset }}>
+          <View className="px-4 py-3">
+            <Text className="text-sm font-t3-bold text-foreground">Changed files</Text>
+            <Text className="text-xs text-foreground-muted">
+              {files.length} {files.length === 1 ? "file" : "files"}
+            </Text>
+          </View>
         </View>
-      </View>
+      )}
-      {fileList}
+      <MaterialScreenContent insetHorizontal>{fileList}</MaterialScreenContent>
     </View>
   );
 }
 @@ -632,23 +659,21 @@ export function ReviewSheet(props: ReviewSheetProps) {
     parsedDiff.kind === "files" &&
     NativeReviewDiffView !== null;
   useRegisterWorkspaceInspector(showChangedFilesPane ? renderInspector : undefined);
-  // Raw fallback renders the patch inline with no inspector content, so the
+  // A toggle needs registered content; loading, errors and raw patches have no navigator pane.
-  // pane toggle would open an empty column — hide it in exactly that case.
+  const showChangedFilesToggle = panes.supportsAuxiliaryPane && showChangedFilesPane;
-  const showChangedFilesToggle =
-    panes.supportsAuxiliaryPane &&
-    !(
-      !showConnectionNotice &&
-      selectedSection !== null &&
-      parsedDiff.kind === "files" &&
-      NativeReviewDiffView === null
-    );
   const listHeader = useMemo(() => {
     const children: ReactElement[] = [];
     if (error) {
       children.push(
-        <View key="review-error" className="border-b border-border bg-card px-4 py-3">
+        <View
+          key="review-error"
+          className={cn(
+            "bg-card px-4 py-3",
+            Platform.OS === "android" ? "m-2 rounded-[20px]" : "border-b border-border",
+          )}
+        >
           <Text className="text-sm font-t3-bold text-foreground">Review unavailable</Text>
           <Text className="text-xs leading-normal text-foreground-muted">{error}</Text>
         </View>,
 @@ -699,21 +724,35 @@ export function ReviewSheet(props: ReviewSheetProps) {
       {isAndroid ? (
         <AndroidScreenHeader
           title="Review changes"
+          leading={<AndroidWorkspaceSidebarButton />}
+          hideBottomBorder
           subtitle={androidHeaderSubtitle || "Select a diff"}
           onBack={handleReturnToThread}
           trailing={
-            showSectionToolbar ? (
+            <>
-              <ControlPillMenu
+              {showChangedFilesToggle ? (
-                actions={androidSectionMenuActions}
-                isAnchoredToRight
-                onPressAction={handleAndroidSectionMenuAction}
-              >
                 <AndroidHeaderIconButton
-                  accessibilityLabel="Select review diff"
+                  accessibilityLabel={
-                  icon="ellipsis.circle"
+                    panes.auxiliaryPaneVisible ? "Hide changed files" : "Show changed files"
+                  }
+                  icon="sidebar.right"
+                  selected={panes.auxiliaryPaneVisible}
+                  onPress={toggleAuxiliaryPane}
                 />
-              </ControlPillMenu>
+              ) : null}
-            ) : null
+              {showSectionToolbar ? (
+                <ControlPillMenu
+                  actions={androidSectionMenuActions}
+                  isAnchoredToRight
+                  onPressAction={handleAndroidSectionMenuAction}
+                >
+                  <AndroidHeaderIconButton
+                    accessibilityLabel="Select review diff"
+                    icon="ellipsis.circle"
+                  />
+                </ControlPillMenu>
+              ) : null}
+            </>
           }
         />
       ) : null}
 @@ -805,141 +844,187 @@ export function ReviewSheet(props: ReviewSheetProps) {
         </NativeHeaderToolbar>
       ) : null}
-      <View className="flex-1 bg-sheet">
+      <MaterialScreenContent>
-        {showConnectionNotice ? (
+        <View className={Platform.OS === "android" ? "flex-1 bg-sheet-solid" : "flex-1 bg-sheet"}>
-          <View className="flex-1" style={{ paddingTop: topContentInset }}>
+          {showConnectionNotice ? (
-            <EnvironmentConnectionNotice
+            <View className="flex-1" style={{ paddingTop: topContentInset }}>
-              environmentLabel={environment.presentation?.entry.target.label ?? "Environment"}
+              <EnvironmentConnectionNotice
-              connection={
+                environmentLabel={environment.presentation?.entry.target.label ?? "Environment"}
-                environment.presentation?.connection ?? {
+                connection={
-                  phase: "available",
+                  environment.presentation?.connection ?? {
-                  error: null,
+                    phase: "available",
-                  traceId: null,
+                    error: null,
+                    traceId: null,
+                  }
                 }
-              }
+                resourceName="review"
-              resourceName="review"
+                onRetry={handleRetryEnvironment}
-              onRetry={handleRetryEnvironment}
+              />
-            />
+            </View>
-          </View>
+          ) : selectedSection && parsedDiff.kind === "files" && NativeReviewDiffView ? (
-        ) : selectedSection && parsedDiff.kind === "files" && NativeReviewDiffView ? (
-          <View
-            className="flex-1"
-            style={{
-              backgroundColor: nativeBridge.theme.background,
-            }}
-          >
             <View
-              className="min-w-0 flex-1"
+              className="flex-1"
-              style={{ paddingTop: topContentInset + REVIEW_HEADER_SPACING }}
+              style={{
+                backgroundColor: nativeBridge.theme.background,
+              }}
             >
-              {listHeader}
+              <View
-              <View className="min-w-0 flex-1" collapsable={false}>
+                className="min-w-0 flex-1"
-                <NativeReviewDiffView
+                style={{ paddingTop: topContentInset + REVIEW_HEADER_SPACING }}
-                  collapsable={false}
+              >
-                  testID="review-native-diff-view"
+                {listHeader}
-                  refreshing={isPullRefreshing || isSelectedSectionPending || areFilePatchesPending}
+                <View className="min-w-0 flex-1" collapsable={false}>
-                  onPullToRefresh={() => void handlePullToRefresh()}
+                  <NativeReviewDiffView
-                  style={StyleSheet.absoluteFill}
+                    collapsable={false}
-                  appearanceScheme={selectedTheme}
+                    testID="review-native-diff-view"
-                  collapsedFileIdsJson={nativeBridge.collapsedFileIdsJson}
+                    refreshing={
-                  collapsedCommentIdsJson={nativeBridge.collapsedCommentIdsJson}
+                      isPullRefreshing || isSelectedSectionPending || areFilePatchesPending
-                  contentResetKey={`${reviewCache.threadKey}:${selectedSection.id}`}
+                    }
-                  contentWidth={NATIVE_REVIEW_DIFF_CONTENT_WIDTH}
+                    onPullToRefresh={() => void handlePullToRefresh()}
-                  nativeViewRef={nativeReviewDiffViewRef}
+                    style={StyleSheet.absoluteFill}
-                  rowHeight={nativeReviewDiffStyle.rowHeight}
+                    appearanceScheme={selectedTheme}
-                  rowsJson={nativeBridge.rowsJson}
+                    collapsedFileIdsJson={nativeBridge.collapsedFileIdsJson}
-                  selectedRowIdsJson={nativeBridge.selectedRowIdsJson}
+                    collapsedCommentIdsJson={nativeBridge.collapsedCommentIdsJson}
-                  styleJson={nativeBridge.styleJson}
+                    contentResetKey={`${reviewCache.threadKey}:${selectedSection.id}`}
-                  themeJson={nativeBridge.themeJson}
+                    contentWidth={NATIVE_REVIEW_DIFF_CONTENT_WIDTH}
-                  tokensPatchJson={nativeBridge.tokensPatchJson}
+                    nativeViewRef={nativeReviewDiffViewRef}
-                  tokensResetKey={nativeBridge.tokensResetKey}
+                    rowHeight={nativeReviewDiffStyle.rowHeight}
-                  viewedFileIdsJson={nativeBridge.viewedFileIdsJson}
+                    rowsJson={nativeBridge.rowsJson}
-                  onDebug={handleNativeDebug}
+                    selectedRowIdsJson={nativeBridge.selectedRowIdsJson}
-                  onPressLine={commentSelection.onPressLine}
+                    styleJson={nativeBridge.styleJson}
-                  onVisibleFileChange={handleVisibleFileChange}
+                    themeJson={nativeBridge.themeJson}
-                  onToggleComment={nativeBridge.onToggleComment}
+                    tokensPatchJson={nativeBridge.tokensPatchJson}
-                  onToggleFile={handleNativeToggleFile}
+                    tokensResetKey={nativeBridge.tokensResetKey}
-                  onToggleViewedFile={handleNativeToggleViewedFile}
+                    viewedFileIdsJson={nativeBridge.viewedFileIdsJson}
-                />
+                    onDebug={handleNativeDebug}
+                    onPressLine={commentSelection.onPressLine}
+                    onVisibleFileChange={handleVisibleFileChange}
+                    onToggleComment={nativeBridge.onToggleComment}
+                    onToggleFile={handleNativeToggleFile}
+                    onToggleViewedFile={handleNativeToggleViewedFile}
+                  />
+                </View>
               </View>
             </View>
-          </View>
+          ) : (
-        ) : (
+            <ScrollView
-          <ScrollView
+              contentContainerStyle={
-            contentInsetAdjustmentBehavior="never"
+                Platform.OS === "android" && (parsedDiff.kind === "empty" || !selectedSection)
-            contentInset={{ top: topContentInset, bottom: Math.max(insets.bottom, 18) + 18 }}
+                  ? { flexGrow: 1, justifyContent: "center" }
-            contentOffset={{ x: 0, y: -topContentInset }}
+                  : undefined
-            scrollIndicatorInsets={{
+              }
-              top: topContentInset,
+              contentInsetAdjustmentBehavior="never"
-              bottom: Math.max(insets.bottom, 18) + 18,
+              contentInset={{ top: topContentInset, bottom: Math.max(insets.bottom, 18) + 18 }}
-            }}
+              contentOffset={{ x: 0, y: -topContentInset }}
-            showsVerticalScrollIndicator={false}
+              scrollIndicatorInsets={{
-            className="flex-1"
+                top: topContentInset,
-            refreshControl={
+                bottom: Math.max(insets.bottom, 18) + 18,
-              // The native diff surface owns pull-to-refresh via onPullToRefresh;
+              }}
-              // the raw fallback (and empty states) need an explicit control —
+              showsVerticalScrollIndicator={false}
-              // iOS has no other refresh affordance here (the explicit
+              className="flex-1"
-              // "Refresh current diff" menu is Android-only).
+              refreshControl={
-              <RefreshControl
+                // The native diff surface owns pull-to-refresh via onPullToRefresh;
-                refreshing={isPullRefreshing || isSelectedSectionPending || areFilePatchesPending}
+                // the raw fallback (and empty states) need an explicit control —
-                onRefresh={() => void handlePullToRefresh()}
+                // iOS has no other refresh affordance here (the explicit
-              />
+                // "Refresh current diff" menu is Android-only).
-            }
+                <RefreshControl
-          >
+                  refreshing={isPullRefreshing || isSelectedSectionPending || areFilePatchesPending}
-            {listHeader}
+                  onRefresh={() => void handlePullToRefresh()}
-            {!selectedSection ? (
+                />
-              <View className="border-b border-border bg-card px-4 py-5">
+              }
-                <Text className="text-sm font-t3-bold text-foreground">No review diffs</Text>
+            >
-                <Text className="text-xs leading-normal text-foreground-muted">
+              {listHeader}
-                  This thread has no ready turn diffs and the worktree diff is empty.
+              {!selectedSection ? (
-                </Text>
+                <View
-              </View>
+                  className={
-            ) : selectedSection.isLoading && selectedSection.diff === null ? (
+                    Platform.OS === "android"
-              <View className="items-center gap-3 border-b border-border bg-card px-4 py-6">
+                      ? "items-center px-6 py-5"
-                <ActivityIndicator size="small" />
+                      : "border-b border-border bg-card px-4 py-5"
-                <Text className="text-xs text-foreground-muted">Loading diff…</Text>
+                  }
-              </View>
+                >
-            ) : parsedDiff.kind === "empty" ? (
+                  <Text className="text-sm font-t3-bold text-foreground">No review diffs</Text>
-              <View className="border-b border-border bg-card px-4 py-5">
+                  <Text
-                <Text className="text-sm font-t3-bold text-foreground">No changes</Text>
+                    className={cn(
-                <Text className="text-xs leading-normal text-foreground-muted">
+                      "text-xs leading-normal text-foreground-muted",
-                  {selectedSection.subtitle ?? "This diff is empty."}
+                      Platform.OS === "android" && "mt-2 text-center",
-                </Text>
+                    )}
-              </View>
+                  >
-            ) : parsedDiff.kind === "raw" ? (
+                    This thread has no ready turn diffs and the worktree diff is empty.
-              <View className="gap-3 border-b border-border bg-card px-4 py-4">
-                <Text className="text-xs leading-normal text-foreground-muted">
-                  {parsedDiff.reason}
-                </Text>
-                <ScrollView horizontal showsHorizontalScrollIndicator={false} bounces={false}>
-                  <Text selectable className="font-mono text-xs leading-relaxed text-foreground">
-                    {parsedDiff.text}
                   </Text>
-                </ScrollView>
+                </View>
-              </View>
+              ) : selectedSection.isLoading && selectedSection.diff === null ? (
-            ) : parsedDiff.kind === "files" ? (
+                <View
-              // The native diff surface could not be resolved on this binary;
+                  className={cn(
-              // degrade to the raw patch instead of crashing the app.
+                    "items-center gap-3 px-4 py-6",
-              <View className="gap-3 border-b border-border bg-card px-4 py-4">
+                    Platform.OS !== "android" && "border-b border-border bg-card",
-                <Text className="text-xs leading-normal text-foreground-muted">
+                  )}
-                  Native diff view unavailable. Showing the raw patch.
+                >
-                </Text>
+                  <ActivityIndicator size="small" />
-                <ScrollView horizontal showsHorizontalScrollIndicator={false} bounces={false}>
+                  <Text className="text-xs text-foreground-muted">Loading diff…</Text>
-                  <Text selectable className="font-mono text-xs leading-relaxed text-foreground">
+                </View>
-                    {selectedSection?.diff ?? ""}
+              ) : parsedDiff.kind === "empty" ? (
+                <View
+                  className={
+                    Platform.OS === "android"
+                      ? "items-center px-6 py-5"
+                      : "border-b border-border bg-card px-4 py-5"
+                  }
+                >
+                  <Text className="text-sm font-t3-bold text-foreground">No changes</Text>
+                  <Text
+                    className={cn(
+                      "text-xs leading-normal text-foreground-muted",
+                      Platform.OS === "android" && "mt-2 text-center",
+                    )}
+                  >
+                    {selectedSection.subtitle ?? "This diff is empty."}
                   </Text>
-                </ScrollView>
+                </View>
-              </View>
+              ) : parsedDiff.kind === "raw" ? (
-            ) : null}
+                <View
-          </ScrollView>
+                  className={cn(
-        )}
+                    "gap-3 bg-card px-4 py-4",
-        <ReviewSelectionActionBar
+                    Platform.OS === "android" ? "m-2 rounded-[20px]" : "border-b border-border",
-          bottomInset={insets.bottom}
+                  )}
-          title={commentSelection.selectionAction?.title ?? null}
+                >
-          onOpenComment={commentSelection.selectionAction?.onOpenComment ?? null}
+                  <Text className="text-xs leading-normal text-foreground-muted">
-          onClear={commentSelection.clearSelection}
+                    {parsedDiff.reason}
-        />
+                  </Text>
-      </View>
+                  <ScrollView horizontal showsHorizontalScrollIndicator={false} bounces={false}>
+                    <Text selectable className="font-mono text-xs leading-relaxed text-foreground">
+                      {parsedDiff.text}
+                    </Text>
+                  </ScrollView>
+                </View>
+              ) : parsedDiff.kind === "files" ? (
+                // The native diff surface could not be resolved on this binary;
+                // degrade to the raw patch instead of crashing the app.
+                <View
+                  className={cn(
+                    "gap-3 bg-card px-4 py-4",
+                    Platform.OS === "android" ? "m-2 rounded-[20px]" : "border-b border-border",
+                  )}
+                >
+                  <Text className="text-xs leading-normal text-foreground-muted">
+                    Native diff view unavailable. Showing the raw patch.
+                  </Text>
+                  <ScrollView horizontal showsHorizontalScrollIndicator={false} bounces={false}>
+                    <Text selectable className="font-mono text-xs leading-relaxed text-foreground">
+                      {selectedSection?.diff ?? ""}
+                    </Text>
+                  </ScrollView>
+                </View>
+              ) : null}
+            </ScrollView>
+          )}
+          <ReviewSelectionActionBar
+            bottomInset={insets.bottom}
+            title={commentSelection.selectionAction?.title ?? null}
+            onOpenComment={commentSelection.selectionAction?.onOpenComment ?? null}
+            onClear={commentSelection.clearSelection}
+          />
+        </View>
+      </MaterialScreenContent>
     </>
   );
 }

apps/mobile/src/features/review/nativeReviewDiffAdapter.test.ts+25

...	@@ -255,6 +255,31 @@ describe("createNativeReviewDiffTheme", () => {	...	@@ -255,6 +255,31 @@ describe("createNativeReviewDiffTheme", () => {
255	}	255	}
256	});	256	});
257		257
		258	it.each(["light", "dark"] as const)(
		259	"preserves Material You RGBA hex channels and composites alpha in %s",
		260	(appearance) => {
		261	const variables = {
		262	...appTheme("material-you", appearance),
		263	"--color-screen": "#101214FF",
		264	"--color-sheet": "#20222480",
		265	"--color-md-code-text": "#E3E2E6FF",
		266	"--color-foreground-muted": "#C7C5D080",
		267	"--color-border": "#44464F80",
		268	"--color-primary": "#A8C7FAFF",
		269	};
		270	const theme = createNativeReviewDiffTheme(appearance, "material-you", variables);
		271	expect(theme.background).toBe("#181a1c");
		272	expect(theme.headerBackground).toBe(theme.background);
		273	expect(theme.text).toBe("#e3e2e6");
		274	expect(theme.mutedText).toBe("#707076");
		275	expect(theme.border).toBe("#2e3036");
		276	expect(theme.hunkText).toBe("#a8c7fa");
		277	for (const color of Object.values(theme)) {
		278	expect(color).toMatch(/^#[\da-f]{6}$/i);
		279	}
		280	},
		281	);
		282
258	it("uses the selected app palette for native code surfaces", () => {	283	it("uses the selected app palette for native code surfaces", () => {
259	const standard = createNativeReviewDiffTheme("dark", "t3-code", appTheme("t3-code", "dark"));	284	const standard = createNativeReviewDiffTheme("dark", "t3-code", appTheme("t3-code", "dark"));
260	const iris = createNativeReviewDiffTheme("dark", "iris", appTheme("iris", "dark"));	285	const iris = createNativeReviewDiffTheme("dark", "iris", appTheme("iris", "dark"));

apps/mobile/src/features/review/nativeReviewDiffAdapter.ts+14-6

 @@ -19,7 +19,7 @@ import type { ReviewInlineComment } from "./reviewCommentSelection";
 const NATIVE_REVIEW_MAX_WORD_DIFF_RANGE_COUNT = 4;
 const NATIVE_REVIEW_MAX_WORD_DIFF_COVERAGE = 0.45;
-const NATIVE_HEX_COLOR = /^#([\da-f]{2})([\da-f]{2})([\da-f]{2})$/i;
+const NATIVE_HEX_COLOR = /^#([\da-f]{2})([\da-f]{2})([\da-f]{2})([\da-f]{2})?$/i;
 const NATIVE_RGBA_COLOR =
   /^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?\s*\)$/;
 @@ -44,15 +44,19 @@ export function buildNativeReviewSnippetRows(
 function opaqueNativeHexColor(color: string, background: string): string {
   const hex = NATIVE_HEX_COLOR.exec(color);
-  if (hex) return color;
+  if (hex && !hex[4]) return color;
   const rgba = NATIVE_RGBA_COLOR.exec(color);
   const backgroundHex = NATIVE_HEX_COLOR.exec(background);
-  if (!rgba || !backgroundHex) return background;
+  if ((!hex && !rgba) || !backgroundHex) return background;
-  const alpha = rgba[4] === undefined ? 1 : Math.min(1, Math.max(0, Number(rgba[4])));
+  const alpha = hex
+    ? Number.parseInt(hex[4] ?? "ff", 16) / 255
+    : rgba?.[4] === undefined
+      ? 1
+      : Math.min(1, Math.max(0, Number(rgba[4])));
   const channels = [1, 2, 3].map((index) => {
-    const foreground = Number(rgba[index]);
+    const foreground = hex ? Number.parseInt(hex[index] ?? "0", 16) : Number(rgba?.[index]);
     const behind = Number.parseInt(backgroundHex[index] ?? "0", 16);
     return Math.round(foreground * alpha + behind * (1 - alpha));
   });
 @@ -169,7 +173,11 @@ export function createNativeReviewDiffTheme(
   // Swift expects #RRGGBB/#RRGGBBAA while Android expects #RRGGBB/#AARRGGBB.
   // Flatten translucent app tokens onto the code surface so both native
   // implementations receive the one unambiguous shared format.
-  const background = opaqueNativeHexColor(appTheme["--color-sheet"], appTheme["--color-screen"]);
+  const screen = opaqueNativeHexColor(
+    appTheme["--color-screen"],
+    scheme === "dark" ? "#000000" : "#ffffff",
+  );
+  const background = opaqueNativeHexColor(appTheme["--color-sheet"], screen);
   const nativeColor = (color: string) => opaqueNativeHexColor(color, background);
   if (scheme === "dark") {

apps/mobile/src/features/settings/SettingsAppearanceRouteScreen.tsx+4-13

 @@ -1,26 +1,17 @@
-import { useNavigation } from "@react-navigation/native";
+import { ScreenScrollView as ScrollView } from "../../components/ScreenScrollView";
-import { Platform, ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { AndroidScreenHeader } from "../../components/AndroidScreenHeader";
+import { SettingsScreen } from "./components/SettingsScreen";
-import { NativeStackScreenOptions } from "../../native/StackHeader";
 import { CodeAppearanceSection } from "./appearance/sections/CodeAppearanceSection";
 import { TerminalAppearanceSection } from "./appearance/sections/TerminalAppearanceSection";
 import { TextAppearanceSection } from "./appearance/sections/TextAppearanceSection";
 import { ThemeAppearanceSection } from "./appearance/sections/ThemeAppearanceSection";
 export function SettingsAppearanceRouteScreen() {
-  const navigation = useNavigation();
   const insets = useSafeAreaInsets();
   return (
-    <View collapsable={false} className="flex-1 bg-sheet">
+    <SettingsScreen title="Appearance">
-      {Platform.OS === "android" ? (
-        <>
-          <NativeStackScreenOptions options={{ headerShown: false }} />
-          <AndroidScreenHeader title="Appearance" onBack={() => navigation.goBack()} />
-        </>
-      ) : null}
       <ScrollView
         contentInsetAdjustmentBehavior="automatic"
         showsVerticalScrollIndicator={false}
 @@ -35,6 +26,6 @@ export function SettingsAppearanceRouteScreen() {
         <TerminalAppearanceSection />
         <CodeAppearanceSection />
       </ScrollView>
-    </View>
+    </SettingsScreen>
   );
 }

apps/mobile/src/features/settings/SettingsClientStorageRouteScreen.tsx+9-9

...	@@ -1,8 +1,9 @@	...	@@ -1,8 +1,9 @@
		1	import { ScreenScrollView as ScrollView } from "../../components/ScreenScrollView";
1	import { useAtomSet, useAtomValue } from "@effect/atom-react";	2	import { useAtomSet, useAtomValue } from "@effect/atom-react";
2	import { type EnvironmentMachineKind, resolveEnvironmentMachineKind } from "@t3tools/contracts";	3	import { type EnvironmentMachineKind, resolveEnvironmentMachineKind } from "@t3tools/contracts";
3	import { AsyncResult } from "effect/unstable/reactivity";	4	import { AsyncResult } from "effect/unstable/reactivity";
4	import { useMemo } from "react";	5	import { useMemo } from "react";
5	import { ActivityIndicator, Alert, Pressable, ScrollView, View } from "react-native";	6	import { ActivityIndicator, Alert, Pressable, View } from "react-native";
6	import { useSafeAreaInsets } from "react-native-safe-area-context";	7	import { useSafeAreaInsets } from "react-native-safe-area-context";
7		8
8	import { AppText as Text } from "../../components/AppText";	9	import { AppText as Text } from "../../components/AppText";
...	@@ -16,6 +17,7 @@ import {	...	@@ -16,6 +17,7 @@ import {
16	import { useServerConfigs } from "../../state/entities";	17	import { useServerConfigs } from "../../state/entities";
17	import { useSavedRemoteConnections } from "../../state/use-remote-environment-registry";	18	import { useSavedRemoteConnections } from "../../state/use-remote-environment-registry";
18	import { SettingsSection } from "./components/SettingsSection";	19	import { SettingsSection } from "./components/SettingsSection";
		20	import { SettingsScreen } from "./components/SettingsScreen";
19		21
20	export function SettingsClientStorageRouteScreen() {	22	export function SettingsClientStorageRouteScreen() {
21	const insets = useSafeAreaInsets();	23	const insets = useSafeAreaInsets();
...	@@ -71,7 +73,7 @@ export function SettingsClientStorageRouteScreen() {	...	@@ -71,7 +73,7 @@ export function SettingsClientStorageRouteScreen() {
71	};	73	};
72		74
73	return (	75	return (
74	<View collapsable={false} className="flex-1 bg-sheet">	76	<SettingsScreen title="Client Storage">
75	<ScrollView	77	<ScrollView
76	contentInsetAdjustmentBehavior="automatic"	78	contentInsetAdjustmentBehavior="automatic"
77	contentInset={{ bottom: Math.max(insets.bottom, 18) }}	79	contentInset={{ bottom: Math.max(insets.bottom, 18) }}
...	@@ -85,7 +87,7 @@ export function SettingsClientStorageRouteScreen() {	...	@@ -85,7 +87,7 @@ export function SettingsClientStorageRouteScreen() {
85	<SymbolView	87	<SymbolView
86	name="exclamationmark.triangle"	88	name="exclamationmark.triangle"
87	size={28}	89	size={28}
88	tintColorClassName={"accent-danger-foreground"}	90	tintColorClassName="accent-danger-foreground"
89	type="monochrome"	91	type="monochrome"
90	weight="regular"	92	weight="regular"
91	/>	93	/>
...	@@ -123,7 +125,7 @@ export function SettingsClientStorageRouteScreen() {	...	@@ -123,7 +125,7 @@ export function SettingsClientStorageRouteScreen() {
123	<SymbolView	125	<SymbolView
124	name="checkmark.circle"	126	name="checkmark.circle"
125	size={28}	127	size={28}
126	tintColorClassName={"accent-icon"}	128	tintColorClassName="accent-icon"
127	type="monochrome"	129	type="monochrome"
128	weight="regular"	130	weight="regular"
129	/>	131	/>
...	@@ -146,16 +148,14 @@ export function SettingsClientStorageRouteScreen() {	...	@@ -146,16 +148,14 @@ export function SettingsClientStorageRouteScreen() {
146	<SymbolView	148	<SymbolView
147	name="trash"	149	name="trash"
148	size={22}	150	size={22}
149	tintColorClassName={"accent-danger-foreground"}	151	tintColorClassName="accent-danger-foreground"
150	type="monochrome"	152	type="monochrome"
151	weight="regular"	153	weight="regular"
152	/>	154	/>
153	<Text className="flex-1 text-lg tabular-nums text-danger-foreground">	155	<Text className="flex-1 text-lg tabular-nums text-danger-foreground">
154	{summary ? `Clear ${formatBytes(summary.payloadBytes)}` : "Clear caches"}	156	{summary ? `Clear ${formatBytes(summary.payloadBytes)}` : "Clear caches"}
155	</Text>	157	</Text>
156	{isClearing ? (	158	{isClearing ? <ActivityIndicator colorClassName="accent-danger-foreground" /> : null}
157	<ActivityIndicator colorClassName={"accent-danger-foreground"} />
158	) : null}
159	</Pressable>	159	</Pressable>
160	</SettingsSection>	160	</SettingsSection>
161	<Text className="px-2 text-sm leading-normal text-foreground-muted">	161	<Text className="px-2 text-sm leading-normal text-foreground-muted">
...	@@ -169,7 +169,7 @@ export function SettingsClientStorageRouteScreen() {	...	@@ -169,7 +169,7 @@ export function SettingsClientStorageRouteScreen() {
169	) : null}	169	) : null}
170	</View>	170	</View>
171	</ScrollView>	171	</ScrollView>
172	</View>	172	</SettingsScreen>
173	);	173	);
174	}	174	}
175		175

apps/mobile/src/features/settings/SettingsEnvironmentsRouteScreen.tsx+21-27

 @@ -1,13 +1,14 @@
-import { NativeHeaderToolbar, NativeStackScreenOptions } from "../../native/StackHeader";
+import { ScreenScrollView as ScrollView } from "../../components/ScreenScrollView";
+import { NativeHeaderToolbar } from "../../native/StackHeader";
 import { useNavigation } from "@react-navigation/native";
 import { SymbolView } from "../../components/AppSymbol";
 import type { EnvironmentId } from "@t3tools/contracts";
 import { useCallback, useState } from "react";
-import { Platform, ScrollView, View } from "react-native";
+import { Platform, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { AppText as Text } from "../../components/AppText";
-import { AndroidScreenHeader } from "../../components/AndroidScreenHeader";
+import { SettingsScreen } from "./components/SettingsScreen";
 import { CloudEnvironmentRows } from "../connection/CloudEnvironmentRows";
 import { ConnectionEnvironmentRow } from "../connection/ConnectionEnvironmentRow";
 import { GitHubRoutingSettings } from "../connection/GitHubRoutingSettings";
 @@ -79,28 +80,21 @@ export function SettingsEnvironmentsRouteScreen() {
   );
   return (
-    <View collapsable={false} className="flex-1 bg-sheet">
+    <SettingsScreen
-      {Platform.OS === "android" ? (
+      title="Environments"
-        <>
+      actions={[
-          {/* Android renders its own in-screen header instead of the native bar. */}
+        {
-          <NativeStackScreenOptions options={{ headerShown: false }} />
+          accessibilityLabel: "Add environment",
-          <AndroidScreenHeader
+          icon: "plus",
-            title="Environments"
+          onPress: () =>
-            onBack={() => navigation.goBack()}
+            navigation.navigate("SettingsSheet", {
-            actions={[
+              screen: "SettingsContent",
-              {
+              params: { screen: "SettingsEnvironmentNew" },
-                accessibilityLabel: "Add environment",
+            }),
-                icon: "plus",
+        },
-                onPress: () =>
+      ]}
-                  navigation.navigate("SettingsSheet", {
+    >
-                    screen: "SettingsContent",
+      {Platform.OS !== "android" ? (
-                    params: { screen: "SettingsEnvironmentNew" },
-                  }),
-              },
-            ]}
-          />
-        </>
-      ) : (
         <NativeHeaderToolbar placement="right">
           <NativeHeaderToolbar.Button
             icon="plus"
 @@ -114,7 +108,7 @@ export function SettingsEnvironmentsRouteScreen() {
             tintColor={headerIconColor}
           />
         </NativeHeaderToolbar>
-      )}
+      ) : null}
       <ScrollView
         contentInsetAdjustmentBehavior="automatic"
         showsVerticalScrollIndicator={false}
 @@ -177,6 +171,6 @@ export function SettingsEnvironmentsRouteScreen() {
         />
         <GitHubRoutingSettings />
       </ScrollView>
-    </View>
+    </SettingsScreen>
   );
 }

apps/mobile/src/features/settings/SettingsOpenSourceLicensesRouteScreen.tsx+13-35

...	@@ -1,3 +1,4 @@	...	@@ -1,3 +1,4 @@
		1	import { ScreenScrollView as ScrollView } from "../../components/ScreenScrollView";
1	import { LegendList } from "@legendapp/list/react-native";	2	import { LegendList } from "@legendapp/list/react-native";
2	import { type StaticScreenProps, useNavigation } from "@react-navigation/native";	3	import { type StaticScreenProps, useNavigation } from "@react-navigation/native";
3	import {	4	import {
...	@@ -8,18 +9,19 @@ import {	...	@@ -8,18 +9,19 @@ import {
8	type ThirdPartyLicenseEntry,	9	type ThirdPartyLicenseEntry,
9	} from "@t3tools/shared/thirdPartyLicenses";	10	} from "@t3tools/shared/thirdPartyLicenses";
10	import { useCallback, useMemo, useState } from "react";	11	import { useCallback, useMemo, useState } from "react";
11	import { Linking, Platform, Pressable, ScrollView, View } from "react-native";	12	import { Linking, Platform, Pressable, View } from "react-native";
12	import { useSafeAreaInsets } from "react-native-safe-area-context";	13	import { useSafeAreaInsets } from "react-native-safe-area-context";
13		14
14	import { AndroidScreenHeader } from "../../components/AndroidScreenHeader";
15	import { SymbolView } from "../../components/AppSymbol";	15	import { SymbolView } from "../../components/AppSymbol";
16	import { AppText as Text, AppTextInput as TextInput } from "../../components/AppText";	16	import { AppText as Text, AppTextInput as TextInput } from "../../components/AppText";
		17	import { SettingsScreen } from "./components/SettingsScreen";
17	import { NativeHeaderToolbar, NativeStackScreenOptions } from "../../native/StackHeader";	18	import { NativeHeaderToolbar, NativeStackScreenOptions } from "../../native/StackHeader";
18	import {	19	import {
19	createNativeMailSearchToolbarItem,	20	createNativeMailSearchToolbarItem,
20	NATIVE_MAIL_SEARCH_TOOLBAR_CONTENT_INSET,	21	NATIVE_MAIL_SEARCH_TOOLBAR_CONTENT_INSET,
21	NATIVE_MAIL_SEARCH_TOOLBAR_SUPPORTED,	22	NATIVE_MAIL_SEARCH_TOOLBAR_SUPPORTED,
22	} from "../layout/native-mail-search-toolbar";	23	} from "../layout/native-mail-search-toolbar";
		24
23	import { getMobileThirdPartyLicenses } from "./mobileThirdPartyLicenses";	25	import { getMobileThirdPartyLicenses } from "./mobileThirdPartyLicenses";
24		26
25	function useMobileThirdPartyLicenses() {	27	function useMobileThirdPartyLicenses() {
...	@@ -97,24 +99,18 @@ export function SettingsOpenSourceLicensesRouteScreen() {	...	@@ -97,24 +99,18 @@ export function SettingsOpenSourceLicensesRouteScreen() {
97		99
98	if (!manifest) {	100	if (!manifest) {
99	return (	101	return (
100	<View collapsable={false} className="flex-1 bg-sheet">	102	<SettingsScreen title="Open source licenses">
101	{Platform.OS === "android" ? (
102	<>
103	<NativeStackScreenOptions options={{ headerShown: false }} />
104	<AndroidScreenHeader title="Open source licenses" onBack={() => navigation.goBack()} />
105	</>
106	) : null}
107	<View className="flex-1 items-center justify-center px-6">	103	<View className="flex-1 items-center justify-center px-6">
108	<Text className="text-center text-base text-foreground-muted">	104	<Text className="text-center text-base text-foreground-muted">
109	License notices are unavailable in this build.	105	License notices are unavailable in this build.
110	</Text>	106	</Text>
111	</View>	107	</View>
112	</View>	108	</SettingsScreen>
113	);	109	);
114	}	110	}
115		111
116	return (	112	return (
117	<View collapsable={false} className="flex-1 bg-sheet">	113	<SettingsScreen title="Open source licenses">
118	{Platform.OS === "ios" ? (	114	{Platform.OS === "ios" ? (
119	<NativeStackScreenOptions	115	<NativeStackScreenOptions
120	options={{	116	options={{
...	@@ -148,12 +144,7 @@ export function SettingsOpenSourceLicensesRouteScreen() {	...	@@ -148,12 +144,7 @@ export function SettingsOpenSourceLicensesRouteScreen() {
148	<NativeHeaderToolbar.SearchBarSlot />	144	<NativeHeaderToolbar.SearchBarSlot />
149	</NativeHeaderToolbar>	145	</NativeHeaderToolbar>
150	) : null}	146	) : null}
151	{Platform.OS === "android" ? (	147
152	<>
153	<NativeStackScreenOptions options={{ headerShown: false }} />
154	<AndroidScreenHeader title="Open source licenses" onBack={() => navigation.goBack()} />
155	</>
156	) : null}
157	<LegendList	148	<LegendList
158	className="flex-1"	149	className="flex-1"
159	contentContainerStyle={{	150	contentContainerStyle={{
...	@@ -195,14 +186,13 @@ export function SettingsOpenSourceLicensesRouteScreen() {	...	@@ -195,14 +186,13 @@ export function SettingsOpenSourceLicensesRouteScreen() {
195	renderItem={renderItem}	186	renderItem={renderItem}
196	showsVerticalScrollIndicator={false}	187	showsVerticalScrollIndicator={false}
197	/>	188	/>
198	</View>	189	</SettingsScreen>
199	);	190	);
200	}	191	}
201		192
202	type LicenseDetailProps = StaticScreenProps<{ readonly entryKey: string }>;	193	type LicenseDetailProps = StaticScreenProps<{ readonly entryKey: string }>;
203		194
204	export function SettingsOpenSourceLicenseRouteScreen({ route }: LicenseDetailProps) {	195	export function SettingsOpenSourceLicenseRouteScreen({ route }: LicenseDetailProps) {
205	const navigation = useNavigation();
206	const insets = useSafeAreaInsets();	196	const insets = useSafeAreaInsets();
207	const manifest = useMobileThirdPartyLicenses();	197	const manifest = useMobileThirdPartyLicenses();
208	const entry = manifest	198	const entry = manifest
...	@@ -212,30 +202,18 @@ export function SettingsOpenSourceLicenseRouteScreen({ route }: LicenseDetailPro	...	@@ -212,30 +202,18 @@ export function SettingsOpenSourceLicenseRouteScreen({ route }: LicenseDetailPro
212		202
213	if (!entry) {	203	if (!entry) {
214	return (	204	return (
215	<View collapsable={false} className="flex-1 bg-sheet">	205	<SettingsScreen title="License notice">
216	{Platform.OS === "android" ? (
217	<>
218	<NativeStackScreenOptions options={{ headerShown: false }} />
219	<AndroidScreenHeader title="License notice" onBack={() => navigation.goBack()} />
220	</>
221	) : null}
222	<View className="flex-1 items-center justify-center px-6">	206	<View className="flex-1 items-center justify-center px-6">
223	<Text className="text-center text-base text-foreground-muted">	207	<Text className="text-center text-base text-foreground-muted">
224	This license notice is unavailable.	208	This license notice is unavailable.
225	</Text>	209	</Text>
226	</View>	210	</View>
227	</View>	211	</SettingsScreen>
228	);	212	);
229	}	213	}
230		214
231	return (	215	return (
232	<View collapsable={false} className="flex-1 bg-sheet">	216	<SettingsScreen title="License notice">
233	{Platform.OS === "android" ? (
234	<>
235	<NativeStackScreenOptions options={{ headerShown: false }} />
236	<AndroidScreenHeader title="License notice" onBack={() => navigation.goBack()} />
237	</>
238	) : null}
239	<ScrollView	217	<ScrollView
240	className="flex-1"	218	className="flex-1"
241	contentInsetAdjustmentBehavior="automatic"	219	contentInsetAdjustmentBehavior="automatic"
...	@@ -275,6 +253,6 @@ export function SettingsOpenSourceLicenseRouteScreen({ route }: LicenseDetailPro	...	@@ -275,6 +253,6 @@ export function SettingsOpenSourceLicenseRouteScreen({ route }: LicenseDetailPro
275	</Text>	253	</Text>
276	</View>	254	</View>
277	</ScrollView>	255	</ScrollView>
278	</View>	256	</SettingsScreen>
279	);	257	);
280	}	258	}

apps/mobile/src/features/settings/SettingsProjectGroupingRouteScreen.tsx+5-13

 @@ -1,14 +1,13 @@
+import { ScreenScrollView as ScrollView } from "../../components/ScreenScrollView";
 import { useAtomSet, useAtomValue } from "@effect/atom-react";
-import { useNavigation } from "@react-navigation/native";
 import type { SidebarProjectGroupingMode } from "@t3tools/contracts";
 import { AsyncResult } from "effect/unstable/reactivity";
-import { Platform, Pressable, ScrollView, View } from "react-native";
+import { Pressable, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { AndroidScreenHeader } from "../../components/AndroidScreenHeader";
 import { AppText as Text } from "../../components/AppText";
 import { SymbolView } from "../../components/AppSymbol";
-import { NativeStackScreenOptions } from "../../native/StackHeader";
+import { SettingsScreen } from "./components/SettingsScreen";
 import {
   mobileProjectGroupingModePatch,
   resolveMobileProjectGroupingSettings,
 @@ -39,7 +38,6 @@ const GROUPING_OPTIONS: ReadonlyArray<{
 ];
 export function SettingsProjectGroupingRouteScreen() {
-  const navigation = useNavigation();
   const insets = useSafeAreaInsets();
   const preferencesResult = useAtomValue(mobilePreferencesAtom);
   const savePreferences = useAtomSet(updateMobilePreferencesAtom);
 @@ -49,13 +47,7 @@ export function SettingsProjectGroupingRouteScreen() {
     : null;
   return (
-    <View collapsable={false} className="flex-1 bg-sheet">
+    <SettingsScreen title="Project Grouping">
-      {Platform.OS === "android" ? (
-        <>
-          <NativeStackScreenOptions options={{ headerShown: false }} />
-          <AndroidScreenHeader title="Project Grouping" onBack={() => navigation.goBack()} />
-        </>
-      ) : null}
       <ScrollView
         contentInsetAdjustmentBehavior="automatic"
         showsVerticalScrollIndicator={false}
 @@ -99,6 +91,6 @@ export function SettingsProjectGroupingRouteScreen() {
           ))}
         </SettingsSection>
       </ScrollView>
-    </View>
+    </SettingsScreen>
   );
 }

apps/mobile/src/features/settings/SettingsRouteScreen.tsx+48-58

 @@ -1,3 +1,5 @@
+import { AutoSettleDaysField } from "./components/AutoSettleDaysField";
+import { ScreenScrollView as ScrollView } from "../../components/ScreenScrollView";
 import { useAuth, useUser } from "@clerk/expo";
 import { useAtomSet, useAtomValue } from "@effect/atom-react";
 import Constants from "expo-constants";
 @@ -8,7 +10,7 @@ import { SymbolView } from "../../components/AppSymbol";
 import * as Effect from "effect/Effect";
 import { AsyncResult } from "effect/unstable/reactivity";
 import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { Alert, Linking, Platform, Pressable, ScrollView, View } from "react-native";
+import { Alert, Linking, Platform, Pressable, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
 @@ -18,8 +20,7 @@ import {
   settlePromise,
   squashAtomCommandFailure,
 } from "@t3tools/client-runtime/state/runtime";
-import { AndroidScreenHeader } from "../../components/AndroidScreenHeader";
+import { AppText as Text } from "../../components/AppText";
-import { AppText as Text, AppTextInput as TextInput } from "../../components/AppText";
 import { supportsAgentAwarenessPush } from "../agent-awareness/capabilities";
 import {
   openAndroidLiveUpdateSettings,
 @@ -37,15 +38,12 @@ import { hasCloudPublicConfig, resolveRelayClerkTokenOptions } from "../cloud/pu
 import { withNativeGlassHeaderItem } from "../layout/native-glass-header-items";
 import { WorkspaceSidebarToolbar } from "../layout/workspace-sidebar-toolbar";
 import { runtime } from "../../lib/runtime";
+import { cn } from "../../lib/cn";
 import { mobilePreferencesAtom, updateMobilePreferencesAtom } from "../../state/preferences";
 import { serverEnvironment } from "../../state/server";
 import { useAtomCommand } from "../../state/use-atom-command";
 import { useEnvironments } from "../../state/environments";
-import {
+import { DEFAULT_SERVER_SETTINGS } from "@t3tools/contracts";
-  DEFAULT_SERVER_SETTINGS,
-  MAX_SIDEBAR_AUTO_SETTLE_AFTER_DAYS,
-  MIN_SIDEBAR_AUTO_SETTLE_AFTER_DAYS,
-} from "@t3tools/contracts";
 import { supportsSharedSettingsSync } from "@t3tools/client-runtime/state/shared-settings";
 import { useThreadListV2Enabled } from "../threads/use-thread-list-v2-enabled";
 import {
 @@ -58,6 +56,7 @@ import { useSavedRemoteConnections } from "../../state/use-remote-environment-re
 import { SettingsRow } from "./components/SettingsRow";
 import { SettingsSection } from "./components/SettingsSection";
 import { SettingsSwitchRow } from "./components/SettingsSwitchRow";
+import { SettingsScreen } from "./components/SettingsScreen";
 import { resolveAgentAwarenessPlatformPresentation } from "./SettingsRouteScreen.logic";
 import { planAutoSettleSettingsSync, type AutoSettleSettings } from "./autoSettleSettingsSync";
 @@ -79,17 +78,16 @@ function useDeviceRegistered(): boolean {
 export function SettingsRouteScreen() {
   const navigation = useNavigation();
+  const content = hasCloudPublicConfig() ? (
+    <ConfiguredSettingsRouteScreen />
+  ) : (
+    <LocalSettingsRouteScreen />
+  );
   return (
     <>
       <WorkspaceSidebarToolbar />
-      {Platform.OS === "android" ? (
+      {Platform.OS !== "android" ? (
-        <>
-          {/* Android renders its own in-screen header instead of the native bar. */}
-          <NativeStackScreenOptions options={{ headerShown: false }} />
-          <AndroidScreenHeader title="Settings" onBack={() => navigation.goBack()} />
-        </>
-      ) : (
         <NativeStackScreenOptions
           options={{
             unstable_headerRightItems:
 @@ -107,8 +105,12 @@ export function SettingsRouteScreen() {
                 : undefined,
           }}
         />
+      ) : null}
+      {Platform.OS === "android" ? (
+        <SettingsScreen title="Settings">{content}</SettingsScreen>
+      ) : (
+        content
       )}
-      {hasCloudPublicConfig() ? <ConfiguredSettingsRouteScreen /> : <LocalSettingsRouteScreen />}
     </>
   );
 }
 @@ -134,6 +136,7 @@ function LocalSettingsRouteScreen() {
             icon="desktopcomputer"
             label="Environments"
             value={`${environmentCount}`}
+            valuePosition="trailing"
             target="SettingsEnvironments"
           />
         </SettingsSection>
 @@ -516,6 +519,7 @@ function ConfiguredSettingsRouteScreen() {
             icon="desktopcomputer"
             label="Environments"
             value={`${environmentCount}`}
+            valuePosition="trailing"
             target="SettingsEnvironments"
           />
           <SettingsSwitchRow
 @@ -616,6 +620,7 @@ const AUTO_SETTLE_DEFAULT_DAYS = DEFAULT_SERVER_SETTINGS.sidebarAutoSettleAfterD
  */
 function AutoSettleSettingsRows() {
   const { environments } = useEnvironments();
+  const [pendingWrites, setPendingWrites] = useState(0);
   const updateSettings = useAtomCommand(serverEnvironment.updateSettings, {
     label: "server settings update",
     reportFailure: true,
 @@ -625,16 +630,17 @@ function AutoSettleSettingsRows() {
   const reference = syncTargets[0] ?? null;
   const referenceSettings = reference?.serverConfig?.settings ?? null;
-  const [daysDraft, setDaysDraft] = useState<string | null>(null);
   if (reference === null || referenceSettings === null) {
     return null;
   }
   const writeToAll = (patch: Partial<AutoSettleSettings>) => {
-    for (const environment of syncTargets) {
+    setPendingWrites((count) => count + 1);
-      void updateSettings({ environmentId: environment.environmentId, input: { patch } });
+    void Promise.allSettled(
-    }
+      syncTargets.map((environment) =>
+        updateSettings({ environmentId: environment.environmentId, input: { patch } }),
+      ),
+    ).finally(() => setPendingWrites((count) => count - 1));
   };
   const { patch: autoSettlePatch, mismatches } = planAutoSettleSettingsSync(
 @@ -647,21 +653,6 @@ function AutoSettleSettingsRows() {
   );
   const afterDays = referenceSettings.sidebarAutoSettleAfterDays;
-  const commitDays = () => {
-    const draft = (daysDraft ?? "").trim();
-    setDaysDraft(null);
-    // Whole-string check so "3.5" and "3days" are rejected instead of
-    // silently becoming 3 on every eligible sync target.
-    const parsed = /^\d+$/.test(draft) ? Number(draft) : Number.NaN;
-    if (
-      Number.isInteger(parsed) &&
-      parsed >= MIN_SIDEBAR_AUTO_SETTLE_AFTER_DAYS &&
-      parsed <= MAX_SIDEBAR_AUTO_SETTLE_AFTER_DAYS &&
-      parsed !== afterDays
-    ) {
-      writeToAll({ sidebarAutoSettleAfterDays: parsed });
-    }
-  };
   return (
     <>
 @@ -674,28 +665,34 @@ function AutoSettleSettingsRows() {
       <SettingsSwitchRow
         icon="clock"
         label="Auto-settle inactive threads"
-        subtitle={afterDays === null ? undefined : `After ${afterDays} days without activity`}
         value={afterDays !== null}
         onValueChange={(value) =>
           writeToAll({ sidebarAutoSettleAfterDays: value ? AUTO_SETTLE_DEFAULT_DAYS : null })
         }
       />
       {afterDays !== null ? (
-        <View className="flex-row items-center gap-4 border-t border-border-subtle p-4">
+        <View
-          <Text className="flex-1 text-lg text-foreground">Days before auto-settle</Text>
+          className={cn(
-          <TextInput
+            "flex-row items-center gap-4 px-4",
-            className="min-h-10 w-20 rounded-xl px-3 py-2 text-center text-base"
+            Platform.OS === "android" ? "min-h-14 py-3" : "py-4",
-            keyboardType="number-pad"
+          )}
-            returnKeyType="done"
+        >
-            value={daysDraft ?? String(afterDays)}
+          <View style={{ width: Platform.OS === "android" ? 24 : 22 }} />
-            onChangeText={setDaysDraft}
+          <Text
-            onBlur={commitDays}
+            className={cn(
-            onSubmitEditing={commitDays}
+              "flex-1 text-foreground",
-            accessibilityLabel="Days before auto-settle"
+              Platform.OS === "android" ? "text-base" : "text-lg",
+            )}
+          >
+            Inactive days
+          </Text>
+          <AutoSettleDaysField
+            value={afterDays}
+            onValueChange={(value) => writeToAll({ sidebarAutoSettleAfterDays: value })}
           />
         </View>
       ) : null}
-      {mismatches.length > 0 ? (
+      {pendingWrites === 0 && mismatches.length > 0 ? (
         <View className="flex-row items-center gap-4 border-t border-border-subtle p-4">
           <View className="min-w-0 flex-1">
             <Text className="text-lg text-foreground">Auto-settle defaults differ</Text>
 @@ -705,14 +702,7 @@ function AutoSettleSettingsRows() {
           </View>
           <Pressable
             accessibilityRole="button"
-            onPress={() => {
+            onPress={() => writeToAll(autoSettlePatch)}
-              for (const mismatch of mismatches) {
-                void updateSettings({
-                  environmentId: mismatch.environmentId,
-                  input: { patch: autoSettlePatch },
-                });
-              }
-            }}
             className="rounded-full bg-subtle px-4 py-2 active:opacity-70"
           >
             <Text className="text-base font-t3-medium text-foreground">
 @@ -831,7 +821,7 @@ function AppSettingsSection() {
       <SymbolView
         name="info.circle"
         size={22}
-        tintColorClassName={"accent-icon"}
+        tintColorClassName="accent-icon"
         type="monochrome"
         weight="regular"
       />

apps/mobile/src/features/settings/appearance/AppearancePreferencesProvider.tsx+1-19

 @@ -51,9 +51,6 @@ interface AppearancePreferencesContextValue {
   readonly themeIds: MobileThemeIds;
   readonly themeMode: MobileThemeMode;
   readonly themeAppearance: MobileThemeAppearance;
-  readonly materialYouStyleLayoutEnabled: boolean;
-  readonly materialYouStyleLayoutActive: boolean;
-  readonly setMaterialYouStyleLayoutEnabled: (value: boolean) => void;
   readonly systemColorsAvailable: boolean;
   readonly systemColorsActive: boolean;
   readonly themeVariables: MobileThemeVariables;
 @@ -97,8 +94,6 @@ export function AppearancePreferencesProvider(props: { readonly children: ReactN
     [resolvedThemeIds.dark, resolvedThemeIds.light],
   );
   const themeId = themeIds[themeAppearance];
-  const materialYouStyleLayoutEnabled = storedPreferences?.materialYouStyleLayoutEnabled ?? false;
-  const materialYouStyleLayoutActive = Platform.OS === "android" && materialYouStyleLayoutEnabled;
   const systemColorsActive = themeId === "material-you" && isSystemColorsAvailable;
   const [systemColorPalettes, setSystemColorPalettes] = useState(readSystemColorPalettes);
   useEffect(() => {
 @@ -120,7 +115,7 @@ export function AppearancePreferencesProvider(props: { readonly children: ReactN
   }, []);
   const themeVariablesByAppearance = useMemo(() => {
     const resolve = (appearance: MobileThemeAppearance) => {
-      const base = getMobileThemeRuntimeVariables(themeIds[appearance], appearance);
+      const base = getMobileThemeRuntimeVariables(themeIds[appearance], appearance, Platform.OS);
       return themeIds[appearance] === "material-you" && systemColorPalettes
         ? materialYouPaletteToMobileThemeVariables(
             systemColorPalettes[appearance],
 @@ -247,13 +242,6 @@ export function AppearancePreferencesProvider(props: { readonly children: ReactN
     [runtimeState, syncThemeRuntime, updateThemePreferences],
   );
-  const setMaterialYouStyleLayoutEnabled = useCallback(
-    (value: boolean) => {
-      updatePreferences({ materialYouStyleLayoutEnabled: value });
-    },
-    [updatePreferences],
-  );
   const setBaseFontSize = useCallback(
     (value: number) => {
       const current = appliedRuntimeStateRef.current ?? runtimeState;
 @@ -293,9 +281,6 @@ export function AppearancePreferencesProvider(props: { readonly children: ReactN
       themeAppearance,
       systemColorsAvailable: isSystemColorsAvailable,
       systemColorsActive,
-      materialYouStyleLayoutEnabled,
-      materialYouStyleLayoutActive,
-      setMaterialYouStyleLayoutEnabled,
       themeVariables,
       themeVariablesByAppearance,
       systemColorPalettes,
 @@ -315,9 +300,6 @@ export function AppearancePreferencesProvider(props: { readonly children: ReactN
       themeMode,
       themeAppearance,
       systemColorsActive,
-      materialYouStyleLayoutEnabled,
-      materialYouStyleLayoutActive,
-      setMaterialYouStyleLayoutEnabled,
       themeVariables,
       themeVariablesByAppearance,
       systemColorPalettes,

apps/mobile/src/features/settings/appearance/components/FontSizeSliderRow.android.tsx created+81

...	@@ -0,0 +1,81 @@
1	import { Host, Slider } from "@expo/ui/jetpack-compose";
2	import { fillMaxWidth } from "@expo/ui/jetpack-compose/modifiers";
3	import * as Haptics from "expo-haptics";
4	import { useRef, type ComponentProps } from "react";
5	import { View } from "react-native";
6
7	import { AppText as Text } from "../../../../components/AppText";
8	import { SymbolView } from "../../../../components/AppSymbol";
9	import { useAppearancePreferences } from "../AppearancePreferencesProvider";
10	import type { FontSizeSliderRow as SharedFontSizeSliderRow } from "./FontSizeSliderRow.shared";
11
12	export function FontSizeSliderRow(props: ComponentProps<typeof SharedFontSizeSliderRow>) {
13	const {
14	themeAppearance,
15	systemColorsActive,
16	themeVariables: colors,
17	} = useAppearancePreferences();
18	const draft = useRef(props.value);
19	const commit = (value: number) => {
20	if (props.disabled) return;
21	const next = Math.min(
22	props.max,
23	Math.max(props.min, props.min + Math.round((value - props.min) / props.step) * props.step),
24	);
25	if (next === props.value) return;
26	void Haptics.selectionAsync().catch(() => undefined);
27	props.onChange(next);
28	};
29	return (
30	<View className={props.disabled ? "gap-2 p-4 opacity-45" : "gap-2 p-4"}>
31	<View className="flex-row items-center gap-4">
32	<SymbolView name={props.icon} size={24} tintColorClassName="accent-icon" />
33	<Text className="min-w-0 flex-1 text-base">{props.label}</Text>
34	<Text className="text-sm text-foreground-muted">{props.valueLabel}</Text>
35	</View>
36	<View
37	accessible
38	accessibilityLabel={props.label}
39	accessibilityRole="adjustable"
40	accessibilityState={{ disabled: Boolean(props.disabled) }}
41	accessibilityValue={{
42	min: props.min,
43	max: props.max,
44	now: props.value,
45	text: props.valueLabel,
46	}}
47	accessibilityActions={[{ name: "increment" }, { name: "decrement" }]}
48	onAccessibilityAction={({ nativeEvent }) => {
49	if (nativeEvent.actionName === "increment") commit(props.value + props.step);
50	else if (nativeEvent.actionName === "decrement") commit(props.value - props.step);
51	}}
52	>
53	<View importantForAccessibility="no-hide-descendants">
54	<Host
55	colorScheme={themeAppearance}
56	seedColor={systemColorsActive ? undefined : colors["--color-primary"]}
57	style={{ height: 48, width: "100%" }}
58	>
59	<Slider
60	min={props.min}
61	max={props.max}
62	value={props.value}
63	steps={Math.max(0, Math.round((props.max - props.min) / props.step) - 1)}
64	enabled={!props.disabled}
65	modifiers={[fillMaxWidth()]}
66	colors={{
67	thumbColor: colors["--color-primary"],
68	activeTrackColor: colors["--color-primary"],
69	inactiveTrackColor: colors["--color-secondary"],
70	}}
71	onValueChange={(value) => {
72	draft.current = value;
73	}}
74	onValueChangeFinished={() => commit(draft.current)}
75	/>
76	</Host>
77	</View>
78	</View>
79	</View>
80	);
81	}

apps/mobile/src/features/settings/appearance/components/FontSizeSliderRow.shared.tsx created+211

...	@@ -0,0 +1,211 @@
1	import * as Haptics from "expo-haptics";
2	import { SymbolView } from "../../../../components/AppSymbol";
3	import { useCallback, useEffect, useMemo, useRef } from "react";
4	import { View, type AccessibilityActionEvent } from "react-native";
5	import { Gesture, GestureDetector } from "react-native-gesture-handler";
6	import Animated, {
7	runOnJS,
8	useAnimatedStyle,
9	useSharedValue,
10	withTiming,
11	} from "react-native-reanimated";
12	import type { ComponentProps } from "react";
13
14	import { AppText as Text } from "../../../../components/AppText";
15
16	type SymbolName = ComponentProps<typeof SymbolView>["name"];
17
18	const THUMB_SIZE = 26;
19	const TRACK_HEIGHT = 4;
20	const SNAP_ANIMATION = { duration: 120 } as const;
21
22	function clampFraction(value: number): number {
23	"worklet";
24	return Math.min(1, Math.max(0, value));
25	}
26
27	export function FontSizeSliderRow(props: {
28	readonly disabled?: boolean;
29	readonly icon: SymbolName;
30	readonly label: string;
31	readonly valueLabel: string;
32	readonly min: number;
33	readonly max: number;
34	readonly step: number;
35	readonly value: number;
36	readonly onChange: (value: number) => void;
37	}) {
38	const latest = useRef(props);
39	latest.current = props;
40
41	const { min, max, step, value, disabled } = props;
42	const fraction = (value - min) / (max - min);
43
44	const progress = useSharedValue(clampFraction(fraction));
45	const trackWidth = useSharedValue(0);
46	const dragging = useSharedValue(false);
47
48	useEffect(() => {
49	if (!dragging.value) {
50	progress.value = withTiming(clampFraction(fraction), SNAP_ANIMATION);
51	}
52	}, [dragging, fraction, progress]);
53
54	const commit = useCallback((next: number) => {
55	const current = latest.current;
56	if (current.disabled \|\| next === current.value) {
57	return;
58	}
59	Haptics.selectionAsync().catch(() => undefined);
60	current.onChange(next);
61	}, []);
62
63	const gesture = useMemo(() => {
64	const snapValue = (raw: number): number => {
65	"worklet";
66	const stepped = Math.round((raw - min) / step) * step + min;
67	return Math.min(max, Math.max(min, stepped));
68	};
69	const fractionAt = (x: number): number => {
70	"worklet";
71	const usable = trackWidth.value - THUMB_SIZE;
72	if (usable <= 0) {
73	return 0;
74	}
75	return clampFraction((x - THUMB_SIZE / 2) / usable);
76	};
77	const valueAtFraction = (f: number): number => {
78	"worklet";
79	return snapValue(min + f * (max - min));
80	};
81	const fractionOfValue = (v: number): number => {
82	"worklet";
83	return clampFraction((v - min) / (max - min));
84	};
85
86	const pan = Gesture.Pan()
87	.enabled(!disabled)
88	.activeOffsetX([-8, 8])
89	.failOffsetY([-12, 12])
90	.onUpdate((event) => {
91	dragging.value = true;
92	const f = fractionAt(event.x);
93	progress.value = f;
94	})
95	.onFinalize((_event, success) => {
96	if (!dragging.value) {
97	return;
98	}
99	dragging.value = false;
100	if (!success) {
101	progress.value = withTiming(fractionOfValue(value), SNAP_ANIMATION);
102	return;
103	}
104	const next = valueAtFraction(progress.value);
105	progress.value = withTiming(fractionOfValue(next), SNAP_ANIMATION);
106	runOnJS(commit)(next);
107	});
108
109	const tap = Gesture.Tap()
110	.enabled(!disabled)
111	.onEnd((event) => {
112	const next = valueAtFraction(fractionAt(event.x));
113	progress.value = withTiming(fractionOfValue(next), SNAP_ANIMATION);
114	runOnJS(commit)(next);
115	});
116
117	return Gesture.Race(pan, tap);
118	}, [commit, disabled, dragging, max, min, progress, step, trackWidth, value]);
119
120	const fillStyle = useAnimatedStyle(() => ({
121	width: THUMB_SIZE / 2 + progress.value * Math.max(0, trackWidth.value - THUMB_SIZE),
122	}));
123	const thumbStyle = useAnimatedStyle(() => ({
124	transform: [{ translateX: progress.value * Math.max(0, trackWidth.value - THUMB_SIZE) }],
125	}));
126
127	const handleAccessibilityAction = (event: AccessibilityActionEvent) => {
128	if (event.nativeEvent.actionName === "increment") {
129	commit(Math.min(max, value + step));
130	} else if (event.nativeEvent.actionName === "decrement") {
131	commit(Math.max(min, value - step));
132	}
133	};
134
135	return (
136	<View className={disabled ? "gap-1 p-4 opacity-[0.45]" : "gap-1 p-4"}>
137	<View className="flex-row items-center gap-4">
138	<SymbolView
139	name={props.icon}
140	size={22}
141	tintColorClassName={"accent-icon"}
142	type="monochrome"
143	weight="regular"
144	/>
145	<Text className="flex-1 text-lg text-foreground">{props.label}</Text>
146	<Text className="text-base font-t3-medium text-foreground-muted">{props.valueLabel}</Text>
147	</View>
148	<View className="flex-row items-center gap-3">
149	<SymbolView
150	name="textformat.size.smaller"
151	size={15}
152	tintColorClassName={"accent-icon-muted"}
153	type="monochrome"
154	weight="regular"
155	/>
156	<GestureDetector gesture={gesture}>
157	<View
158	accessible
159	accessibilityActions={[
160	{ name: "increment", label: `Increase ${props.label}` },
161	{ name: "decrement", label: `Decrease ${props.label}` },
162	]}
163	accessibilityLabel={props.label}
164	accessibilityRole="adjustable"
165	accessibilityState={{ disabled: Boolean(disabled) }}
166	accessibilityValue={{ min, max, now: value, text: props.valueLabel }}
167	className="h-11 flex-1 justify-center"
168	onAccessibilityAction={handleAccessibilityAction}
169	onLayout={(event) => {
170	trackWidth.value = event.nativeEvent.layout.width;
171	}}
172	>
173	<View
174	className="w-full rounded-full bg-secondary-border"
175	style={{ height: TRACK_HEIGHT }}
176	>
177	<Animated.View
178	className="absolute inset-y-0 left-0 rounded-full bg-primary"
179	style={fillStyle}
180	/>
181	</View>
182	<Animated.View
183	className="absolute left-0 rounded-full border-border bg-primary-foreground"
184	style={[
185	{
186	borderWidth: 1,
187	height: THUMB_SIZE,
188	marginTop: -THUMB_SIZE / 2,
189	shadowColor: "#000000",
190	shadowOffset: { height: 2, width: 0 },
191	shadowOpacity: 0.18,
192	shadowRadius: 3,
193	top: "50%",
194	width: THUMB_SIZE,
195	},
196	thumbStyle,
197	]}
198	/>
199	</View>
200	</GestureDetector>
201	<SymbolView
202	name="textformat.size.larger"
203	size={22}
204	tintColorClassName={"accent-icon-muted"}
205	type="monochrome"
206	weight="regular"
207	/>
208	</View>
209	</View>
210	);
211	}

apps/mobile/src/features/settings/appearance/components/FontSizeSliderRow.tsx+1-210

...	@@ -1,210 +1 @@	...	@@ -1,210 +1 @@
1	import * as Haptics from "expo-haptics";	1	export { FontSizeSliderRow } from "./FontSizeSliderRow.shared";
2	import { SymbolView } from "../../../../components/AppSymbol";
3	import { useCallback, useEffect, useMemo, useRef } from "react";
4	import { View, type AccessibilityActionEvent } from "react-native";
5	import { Gesture, GestureDetector } from "react-native-gesture-handler";
6	import Animated, {
7	runOnJS,
8	useAnimatedStyle,
9	useSharedValue,
10	withTiming,
11	} from "react-native-reanimated";
12	import type { ComponentProps } from "react";
13
14	import { AppText as Text } from "../../../../components/AppText";
15
16	type SymbolName = ComponentProps<typeof SymbolView>["name"];
17
18	const THUMB_SIZE = 26;
19	const TRACK_HEIGHT = 4;
20	const SNAP_ANIMATION = { duration: 120 } as const;
21
22	function clampFraction(value: number): number {
23	"worklet";
24	return Math.min(1, Math.max(0, value));
25	}
26
27	export function FontSizeSliderRow(props: {
28	readonly disabled?: boolean;
29	readonly icon: SymbolName;
30	readonly label: string;
31	readonly valueLabel: string;
32	readonly min: number;
33	readonly max: number;
34	readonly step: number;
35	readonly value: number;
36	readonly onChange: (value: number) => void;
37	}) {
38	const latest = useRef(props);
39	latest.current = props;
40
41	const { min, max, step, value, disabled } = props;
42	const fraction = (value - min) / (max - min);
43
44	const progress = useSharedValue(clampFraction(fraction));
45	const trackWidth = useSharedValue(0);
46	const dragging = useSharedValue(false);
47
48	useEffect(() => {
49	if (!dragging.value) {
50	progress.value = withTiming(clampFraction(fraction), SNAP_ANIMATION);
51	}
52	}, [dragging, fraction, progress]);
53
54	const commit = useCallback((next: number) => {
55	const current = latest.current;
56	if (next === current.value) {
57	return;
58	}
59	Haptics.selectionAsync().catch(() => undefined);
60	current.onChange(next);
61	}, []);
62
63	const gesture = useMemo(() => {
64	const snapValue = (raw: number): number => {
65	"worklet";
66	const stepped = Math.round((raw - min) / step) * step + min;
67	return Math.min(max, Math.max(min, stepped));
68	};
69	const fractionAt = (x: number): number => {
70	"worklet";
71	const usable = trackWidth.value - THUMB_SIZE;
72	if (usable <= 0) {
73	return 0;
74	}
75	return clampFraction((x - THUMB_SIZE / 2) / usable);
76	};
77	const valueAtFraction = (f: number): number => {
78	"worklet";
79	return snapValue(min + f * (max - min));
80	};
81	const fractionOfValue = (v: number): number => {
82	"worklet";
83	return clampFraction((v - min) / (max - min));
84	};
85
86	const pan = Gesture.Pan()
87	.enabled(!disabled)
88	.activeOffsetX([-8, 8])
89	.failOffsetY([-12, 12])
90	.onUpdate((event) => {
91	dragging.value = true;
92	const f = fractionAt(event.x);
93	progress.value = f;
94	})
95	.onFinalize((_event, success) => {
96	if (!dragging.value) {
97	return;
98	}
99	dragging.value = false;
100	if (!success) {
101	progress.value = withTiming(fractionOfValue(value), SNAP_ANIMATION);
102	return;
103	}
104	const next = valueAtFraction(progress.value);
105	progress.value = withTiming(fractionOfValue(next), SNAP_ANIMATION);
106	runOnJS(commit)(next);
107	});
108
109	const tap = Gesture.Tap()
110	.enabled(!disabled)
111	.onEnd((event) => {
112	const next = valueAtFraction(fractionAt(event.x));
113	progress.value = withTiming(fractionOfValue(next), SNAP_ANIMATION);
114	runOnJS(commit)(next);
115	});
116
117	return Gesture.Race(pan, tap);
118	}, [commit, disabled, dragging, max, min, progress, step, trackWidth, value]);
119
120	const fillStyle = useAnimatedStyle(() => ({
121	width: THUMB_SIZE / 2 + progress.value * Math.max(0, trackWidth.value - THUMB_SIZE),
122	}));
123	const thumbStyle = useAnimatedStyle(() => ({
124	transform: [{ translateX: progress.value * Math.max(0, trackWidth.value - THUMB_SIZE) }],
125	}));
126
127	const handleAccessibilityAction = (event: AccessibilityActionEvent) => {
128	if (event.nativeEvent.actionName === "increment") {
129	commit(Math.min(max, value + step));
130	} else if (event.nativeEvent.actionName === "decrement") {
131	commit(Math.max(min, value - step));
132	}
133	};
134
135	return (
136	<View className={disabled ? "gap-1 p-4 opacity-[0.45]" : "gap-1 p-4"}>
137	<View className="flex-row items-center gap-4">
138	<SymbolView
139	name={props.icon}
140	size={22}
141	tintColorClassName={"accent-icon"}
142	type="monochrome"
143	weight="regular"
144	/>
145	<Text className="flex-1 text-lg text-foreground">{props.label}</Text>
146	<Text className="text-base font-t3-medium text-foreground-muted">{props.valueLabel}</Text>
147	</View>
148	<View className="flex-row items-center gap-3">
149	<SymbolView
150	name="textformat.size.smaller"
151	size={15}
152	tintColorClassName={"accent-icon-muted"}
153	type="monochrome"
154	weight="regular"
155	/>
156	<GestureDetector gesture={gesture}>
157	<View
158	accessible
159	accessibilityActions={[
160	{ name: "increment", label: `Increase ${props.label}` },
161	{ name: "decrement", label: `Decrease ${props.label}` },
162	]}
163	accessibilityLabel={props.label}
164	accessibilityRole="adjustable"
165	accessibilityValue={{ min, max, now: value, text: props.valueLabel }}
166	className="h-11 flex-1 justify-center"
167	onAccessibilityAction={handleAccessibilityAction}
168	onLayout={(event) => {
169	trackWidth.value = event.nativeEvent.layout.width;
170	}}
171	>
172	<View
173	className="w-full rounded-full bg-secondary-border"
174	style={{ height: TRACK_HEIGHT }}
175	>
176	<Animated.View
177	className="absolute inset-y-0 left-0 rounded-full bg-primary"
178	style={fillStyle}
179	/>
180	</View>
181	<Animated.View
182	className="absolute left-0 rounded-full border-border bg-primary-foreground"
183	style={[
184	{
185	borderWidth: 1,
186	height: THUMB_SIZE,
187	marginTop: -THUMB_SIZE / 2,
188	shadowColor: "#000000",
189	shadowOffset: { height: 2, width: 0 },
190	shadowOpacity: 0.18,
191	shadowRadius: 3,
192	top: "50%",
193	width: THUMB_SIZE,
194	},
195	thumbStyle,
196	]}
197	/>
198	</View>
199	</GestureDetector>
200	<SymbolView
201	name="textformat.size.larger"
202	size={22}
203	tintColorClassName={"accent-icon-muted"}
204	type="monochrome"
205	weight="regular"
206	/>
207	</View>
208	</View>
209	);
210	}

apps/mobile/src/features/settings/appearance/sections/ThemeAppearanceSection.tsx+1-18

 @@ -1,5 +1,5 @@
 import { memo, useId } from "react";
-import { Platform, Pressable, View } from "react-native";
+import { Pressable, View } from "react-native";
 import Svg, { Circle, Defs, RadialGradient, Stop } from "react-native-svg";
 import { ScopedTheme, ScopedVariables } from "uniwind";
 @@ -19,9 +19,6 @@ import { getMobileUniwindThemeName } from "../../../../lib/mobileThemeRuntime";
 import { cn } from "../../../../lib/cn";
 import { useAppearancePreferences } from "../AppearancePreferencesProvider";
-import { SettingsSection } from "../../components/SettingsSection";
-import { SettingsSwitchRow } from "../../components/SettingsSwitchRow";
 const APPEARANCE_MODES: ReadonlyArray<{
   readonly id: MobileThemeMode;
   readonly label: string;
 @@ -293,25 +290,11 @@ export function ThemeAppearanceSection() {
     setThemeMode,
     themeIds,
     themeMode,
-    materialYouStyleLayoutEnabled,
-    setMaterialYouStyleLayoutEnabled,
     systemColorsAvailable,
   } = useAppearancePreferences();
   return (
     <View className="gap-6">
-      {Platform.OS === "android" ? (
-        <SettingsSection card title="Android">
-          <SettingsSwitchRow
-            disabled={!isReady}
-            icon="square.grid.2x2"
-            label="Material You Layout"
-            onValueChange={setMaterialYouStyleLayoutEnabled}
-            subtitle="Use Material You surfaces, shapes, and component styling."
-            value={materialYouStyleLayoutEnabled}
-          />
-        </SettingsSection>
-      ) : null}
       <View className="gap-2">
         <SectionLabel>Color scheme</SectionLabel>
         <View accessibilityRole="radiogroup" className="flex-row gap-2">

apps/mobile/src/features/settings/components/AutoSettleDaysField.android.tsx created+50

...	@@ -0,0 +1,50 @@
1	import {
2	MAX_SIDEBAR_AUTO_SETTLE_AFTER_DAYS,
3	MIN_SIDEBAR_AUTO_SETTLE_AFTER_DAYS,
4	} from "@t3tools/contracts";
5	import { View } from "react-native";
6
7	import { AppText } from "../../../components/AppText";
8	import { MaterialIconButton } from "../../../components/MaterialIconButton";
9	import type { AutoSettleDaysFieldProps } from "./AutoSettleDaysField";
10
11	export function AutoSettleDaysField(props: AutoSettleDaysFieldProps) {
12	const adjust = (amount: number) => {
13	const next = Math.max(
14	MIN_SIDEBAR_AUTO_SETTLE_AFTER_DAYS,
15	Math.min(MAX_SIDEBAR_AUTO_SETTLE_AFTER_DAYS, props.value + amount),
16	);
17	if (next !== props.value) props.onValueChange(next);
18	};
19
20	return (
21	<View className="shrink-0 flex-row items-center">
22	{/* Match the 32dp switch track while retaining 48dp button touch targets. */}
23	<View
24	pointerEvents="none"
25	className="absolute inset-x-0 rounded-full bg-subtle"
26	style={{ height: 32 }}
27	/>
28	<MaterialIconButton
29	icon="minus"
30	accessibilityLabel="Decrease days before auto-settle"
31	disabled={props.value <= MIN_SIDEBAR_AUTO_SETTLE_AFTER_DAYS}
32	onPress={() => adjust(-1)}
33	/>
34	<AppText
35	className="min-w-8 text-center text-base"
36	style={{ fontVariant: ["tabular-nums"] }}
37	accessibilityLabel={`${props.value} ${props.value === 1 ? "day" : "days"} before auto-settle`}
38	accessibilityLiveRegion="polite"
39	>
40	{props.value}
41	</AppText>
42	<MaterialIconButton
43	icon="plus"
44	accessibilityLabel="Increase days before auto-settle"
45	disabled={props.value >= MAX_SIDEBAR_AUTO_SETTLE_AFTER_DAYS}
46	onPress={() => adjust(1)}
47	/>
48	</View>
49	);
50	}

apps/mobile/src/features/settings/components/AutoSettleDaysField.ios.tsx created+94

...	@@ -0,0 +1,94 @@
1	import { Button, Host, HStack, Picker, Popover, Text, VStack } from "@expo/ui/swift-ui";
2	import {
3	accessibilityLabel,
4	buttonStyle,
5	font,
6	foregroundStyle,
7	frame,
8	padding,
9	pickerStyle,
10	presentationBackground,
11	tag,
12	} from "@expo/ui/swift-ui/modifiers";
13	import {
14	MAX_SIDEBAR_AUTO_SETTLE_AFTER_DAYS,
15	MIN_SIDEBAR_AUTO_SETTLE_AFTER_DAYS,
16	} from "@t3tools/contracts";
17	import { useState } from "react";
18
19	import { useAppearancePreferences } from "../appearance/AppearancePreferencesProvider";
20	import type { AutoSettleDaysFieldProps } from "./AutoSettleDaysField";
21
22	const days = Array.from(
23	{ length: MAX_SIDEBAR_AUTO_SETTLE_AFTER_DAYS - MIN_SIDEBAR_AUTO_SETTLE_AFTER_DAYS + 1 },
24	(_, index) => MIN_SIDEBAR_AUTO_SETTLE_AFTER_DAYS + index,
25	);
26
27	export function AutoSettleDaysField(props: AutoSettleDaysFieldProps) {
28	const { themeAppearance, themeVariables: colors, appearance } = useAppearancePreferences();
29	const [open, setOpen] = useState(false);
30	const [draft, setDraft] = useState(props.value);
31	return (
32	<Host matchContents colorScheme={themeAppearance} seedColor={colors["--color-primary"]}>
33	<Popover isPresented={open} onIsPresentedChange={setOpen}>
34	<Popover.Trigger>
35	<Button
36	onPress={() => {
37	setDraft(props.value);
38	setOpen(true);
39	}}
40	modifiers={[
41	buttonStyle("bordered"),
42	accessibilityLabel(`Days before auto-settle: ${props.value}`),
43	frame({ minWidth: 64, minHeight: 44 }),
44	foregroundStyle(colors["--color-primary"]),
45	font({ size: appearance.baseFontSize }),
46	]}
47	>
48	<Text>{String(props.value)}</Text>
49	</Button>
50	</Popover.Trigger>
51	<Popover.Content>
52	<VStack
53	modifiers={[
54	padding({ all: 12 }),
55	frame({ width: 240 }),
56	presentationBackground(colors["--color-sheet-solid"]),
57	]}
58	>
59	<Picker
60	label="Days before auto-settle"
61	selection={draft}
62	onSelectionChange={setDraft}
63	modifiers={[pickerStyle("wheel"), frame({ height: 180 })]}
64	>
65	{days.map((value) => (
66	<Text
67	key={value}
68	modifiers={[tag(value), foregroundStyle(colors["--color-foreground"])]}
69	>
70	{`${value} ${value === 1 ? "day" : "days"}`}
71	</Text>
72	))}
73	</Picker>
74	<HStack spacing={24}>
75	<Button
76	label="Cancel"
77	onPress={() => setOpen(false)}
78	modifiers={[foregroundStyle(colors["--color-primary"])]}
79	/>
80	<Button
81	label="Done"
82	onPress={() => {
83	setOpen(false);
84	if (draft !== props.value) props.onValueChange(draft);
85	}}
86	modifiers={[foregroundStyle(colors["--color-primary"])]}
87	/>
88	</HStack>
89	</VStack>
90	</Popover.Content>
91	</Popover>
92	</Host>
93	);
94	}

apps/mobile/src/features/settings/components/AutoSettleDaysField.tsx created+42

...	@@ -0,0 +1,42 @@
1	import { useState } from "react";
2	import {
3	MAX_SIDEBAR_AUTO_SETTLE_AFTER_DAYS,
4	MIN_SIDEBAR_AUTO_SETTLE_AFTER_DAYS,
5	} from "@t3tools/contracts";
6
7	import { AppTextInput } from "../../../components/AppText";
8
9	export interface AutoSettleDaysFieldProps {
10	readonly value: number;
11	readonly onValueChange: (value: number) => void;
12	}
13
14	export function AutoSettleDaysField(props: AutoSettleDaysFieldProps) {
15	const [draft, setDraft] = useState<string \| null>(null);
16	const commit = () => {
17	const text = (draft ?? "").trim();
18	setDraft(null);
19	// Validate the whole input; decimals and trailing text must not become whole days.
20	const parsed = /^\d+$/.test(text) ? Number(text) : Number.NaN;
21	if (
22	Number.isInteger(parsed) &&
23	parsed >= MIN_SIDEBAR_AUTO_SETTLE_AFTER_DAYS &&
24	parsed <= MAX_SIDEBAR_AUTO_SETTLE_AFTER_DAYS &&
25	parsed !== props.value
26	) {
27	props.onValueChange(parsed);
28	}
29	};
30	return (
31	<AppTextInput
32	className="min-h-10 w-20 rounded-xl px-3 py-2 text-center text-base"
33	keyboardType="number-pad"
34	returnKeyType="done"
35	value={draft ?? String(props.value)}
36	onChangeText={setDraft}
37	onBlur={commit}
38	onSubmitEditing={commit}
39	accessibilityLabel="Days before auto-settle"
40	/>
41	);
42	}

apps/mobile/src/features/settings/components/SettingsRow.tsx+65-26

 @@ -1,11 +1,12 @@
+import { MaterialListRow } from "../../../components/MaterialListRow";
 import { useNavigation } from "@react-navigation/native";
 import type { ComponentProps } from "react";
-import { Pressable, View } from "react-native";
+import { Platform, Pressable, View } from "react-native";
 import { SymbolView } from "../../../components/AppSymbol";
 import { AppText as Text } from "../../../components/AppText";
 import type { SettingsLegalDocumentTarget, SettingsSheetTarget } from "./settings-sheet-targets";
+import { cn } from "../../../lib/cn";
 type SymbolName = ComponentProps<typeof SymbolView>["name"];
 @@ -14,44 +15,77 @@ export function SettingsRow(props: {
   readonly icon: SymbolName;
   readonly label: string;
   readonly value?: string;
+  readonly valuePosition?: "below" | "trailing";
   readonly target?: SettingsSheetTarget;
   readonly fullScreenTarget?: SettingsLegalDocumentTarget;
   readonly onPress?: () => void;
 }) {
   const navigation = useNavigation();
+  if (Platform.OS === "android") {
+    return (
+      <MaterialListRow
+        title={props.label}
+        subtitle={props.valuePosition === "trailing" ? undefined : props.value}
+        accessibilityLabel={[props.label, props.value].filter(Boolean).join(", ")}
+        trailing={
+          props.valuePosition === "trailing" && props.value ? (
+            <View className="flex-row items-center gap-3">
+              <Text className="text-sm text-foreground-muted">{props.value}</Text>
+              <SymbolView name="chevron.right" size={16} tintColorClassName="accent-chevron" />
+            </View>
+          ) : undefined
+        }
+        disabled={props.disabled}
+        leading={
+          <SymbolView
+            name={props.icon}
+            size={24}
+            tintColorClassName="accent-icon"
+            type="monochrome"
+            weight="regular"
+          />
+        }
+        onPress={() => {
+          if (props.target)
+            navigation.navigate("SettingsSheet", {
+              screen: "SettingsContent",
+              params: { screen: props.target },
+            });
+          else if (props.fullScreenTarget) navigation.navigate(props.fullScreenTarget);
+          else props.onPress?.();
+        }}
+      />
+    );
+  }
   const content = (
-    <View
+    <View className={cn("flex-row items-center gap-4 p-4", props.disabled && "opacity-[0.45]")}>
-      className={
-        props.disabled
-          ? "flex-row items-center gap-4 p-4 opacity-[0.45]"
-          : "flex-row items-center gap-4 p-4"
-      }
-    >
       <SymbolView
         name={props.icon}
         size={22}
-        tintColorClassName={"accent-icon"}
+        tintColorClassName="accent-icon"
         type="monochrome"
         weight="regular"
       />
-      <Text className="shrink-0 text-lg text-foreground" numberOfLines={1}>
+      <>
-        {props.label}
+        <Text className="shrink-0 text-lg text-foreground" numberOfLines={1}>
-      </Text>
+          {props.label}
-      <View className="min-w-0 flex-1 items-end">
+        </Text>
-        {props.value ? (
+        <View className="min-w-0 flex-1 items-end">
-          <Text
+          {props.value ? (
-            className="max-w-[180px] text-right text-base text-foreground-muted"
+            <Text
-            ellipsizeMode="middle"
+              className="max-w-[180px] text-right text-base text-foreground-muted"
-            numberOfLines={1}
+              ellipsizeMode="middle"
-          >
+              numberOfLines={1}
-            {props.value}
+            >
-          </Text>
+              {props.value}
-        ) : null}
+            </Text>
-      </View>
+          ) : null}
+        </View>
+      </>
       <SymbolView
         name="chevron.right"
         size={16}
-        tintColorClassName={"accent-chevron"}
+        tintColorClassName="accent-chevron"
         type="monochrome"
         weight="semibold"
       />
 @@ -92,7 +126,12 @@ export function SettingsRow(props: {
   }
   return (
-    <Pressable accessibilityRole="button" disabled={props.disabled} onPress={props.onPress}>
+    <Pressable
+      accessibilityLabel={props.label}
+      accessibilityRole="button"
+      disabled={props.disabled}
+      onPress={props.onPress}
+    >
       {content}
     </Pressable>
   );

apps/mobile/src/features/settings/components/SettingsScreen.tsx created+43

...	@@ -0,0 +1,43 @@
1	import { useNavigation } from "@react-navigation/native";
2	import type { ComponentProps, ReactNode } from "react";
3	import { Platform, View } from "react-native";
4
5	import { AndroidScreenHeader } from "../../../components/AndroidScreenHeader";
6	import { MaterialScreenContent as SettingsScreenContent } from "../../../components/MaterialScreenContent";
7	import { NativeStackScreenOptions } from "../../../native/StackHeader";
8	import { AndroidWorkspaceSidebarButton } from "../../layout/workspace-sidebar-toolbar";
9
10	export { SettingsScreenContent };
11
12	export function SettingsScreen(
13	props: Pick<ComponentProps<typeof AndroidScreenHeader>, "title" \| "actions" \| "trailing"> & {
14	readonly children: ReactNode;
15	/** A native form sheet already owns its rounded outer frame. */
16	readonly formSheet?: boolean;
17	},
18	) {
19	const navigation = useNavigation();
20
21	return (
22	<View collapsable={false} className="flex-1 bg-sheet">
23	{Platform.OS === "android" ? (
24	<>
25	<NativeStackScreenOptions options={{ headerShown: false }} />
26	<AndroidScreenHeader
27	title={props.title}
28	leading={props.formSheet ? undefined : <AndroidWorkspaceSidebarButton />}
29	actions={props.actions}
30	trailing={props.trailing}
31	onBack={() => navigation.goBack()}
32	hideBottomBorder={!props.formSheet}
33	/>
34	</>
35	) : null}
36	{props.formSheet ? (
37	props.children
38	) : (
39	<SettingsScreenContent>{props.children}</SettingsScreenContent>
40	)}
41	</View>
42	);
43	}

apps/mobile/src/features/settings/components/SettingsSection.tsx+15-5

 @@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { View } from "react-native";
+import { Platform, View } from "react-native";
 import { AppText as Text } from "../../../components/AppText";
 @@ -12,13 +12,23 @@ export function SettingsSection(props: {
   return (
     <View className="gap-2">
       {props.title ? (
-        <Text className="px-2 text-sm font-t3-medium text-foreground-muted">{props.title}</Text>
+        <Text
+          className={
+            Platform.OS === "android"
+              ? "px-4 text-sm font-t3-medium text-primary"
+              : "px-2 text-sm font-t3-medium text-foreground-muted"
+          }
+        >
+          {props.title}
+        </Text>
       ) : null}
       <View
         className={
-          props.card
+          Platform.OS === "android"
-            ? "overflow-hidden rounded-[24px] border-continuous bg-card"
+            ? "overflow-hidden rounded-[28px] bg-card"
-            : "overflow-hidden rounded-[24px] border-continuous bg-card android:bg-transparent"
+            : props.card
+              ? "overflow-hidden rounded-[24px] border-continuous bg-card"
+              : "overflow-hidden rounded-[24px] border-continuous bg-card android:bg-transparent"
         }
       >
         {props.children}

apps/mobile/src/features/settings/components/SettingsSwitchRow.tsx+18-10

 @@ -1,5 +1,6 @@
+import { cn } from "../../../lib/cn";
 import type { ComponentProps } from "react";
-import { View } from "react-native";
+import { Platform, View } from "react-native";
 import { SymbolView } from "../../../components/AppSymbol";
 import { AppText as Text } from "../../../components/AppText";
 @@ -17,21 +18,28 @@ export function SettingsSwitchRow(props: {
 }) {
   return (
     <View
-      className={
+      className={cn(
-        props.disabled
+        "flex-row items-center gap-4",
-          ? "flex-row items-center gap-4 p-4 opacity-[0.45]"
+        Platform.OS === "android" ? "min-h-14 px-4 py-3" : "p-4",
-          : "flex-row items-center gap-4 p-4"
+        Platform.OS === "android" && props.subtitle && "min-h-18",
-      }
+        props.disabled && "opacity-[0.45]",
+      )}
     >
       <SymbolView
         name={props.icon}
-        size={22}
+        size={Platform.OS === "android" ? 24 : 22}
-        tintColorClassName={"accent-icon"}
+        tintColorClassName="accent-icon"
         type="monochrome"
         weight="regular"
       />
-      <View className="min-w-0 flex-1">
+      <View className={cn("min-w-0 flex-1", Platform.OS === "android" && "gap-1")}>
-        <Text className="text-lg text-foreground">{props.label}</Text>
+        <Text
+          className={
+            Platform.OS === "android" ? "text-base text-foreground" : "text-lg text-foreground"
+          }
+        >
+          {props.label}
+        </Text>
         {props.subtitle ? (
           <Text className="text-sm text-foreground-muted">{props.subtitle}</Text>
         ) : null}

apps/mobile/src/features/terminal/ThreadTerminalRouteScreen.tsx+184-158

...	@@ -1,4 +1,3 @@	...	@@ -1,4 +1,3 @@
1	import { BlurTargetView } from "expo-blur";
2	import { DEFAULT_TERMINAL_ID, EnvironmentId, ThreadId } from "@t3tools/contracts";	1	import { DEFAULT_TERMINAL_ID, EnvironmentId, ThreadId } from "@t3tools/contracts";
3	import { type KnownTerminalSession } from "@t3tools/client-runtime/state/terminal";	2	import { type KnownTerminalSession } from "@t3tools/client-runtime/state/terminal";
4	import type { MenuAction } from "@react-native-menu/menu";	3	import type { MenuAction } from "@react-native-menu/menu";
...	@@ -7,6 +6,7 @@ import { NativeHeaderToolbar, NativeStackScreenOptions } from "../../native/Stac	...	@@ -7,6 +6,7 @@ import { NativeHeaderToolbar, NativeStackScreenOptions } from "../../native/Stac
7	import { StackActions, useNavigation, type StaticScreenProps } from "@react-navigation/native";	6	import { StackActions, useNavigation, type StaticScreenProps } from "@react-navigation/native";
8	import { useCallback, useEffect, useMemo, useRef, useState } from "react";	7	import { useCallback, useEffect, useMemo, useRef, useState } from "react";
9	import { Alert, Platform, Pressable, View } from "react-native";	8	import { Alert, Platform, Pressable, View } from "react-native";
		9	import { useSafeAreaInsets } from "react-native-safe-area-context";
10	import { AppText as Text } from "../../components/AppText";	10	import { AppText as Text } from "../../components/AppText";
11	import { TerminalContextSheet } from "./TerminalContextSheet";	11	import { TerminalContextSheet } from "./TerminalContextSheet";
12	import { hasNativeTerminalSurface } from "./nativeTerminalModule";	12	import { hasNativeTerminalSurface } from "./nativeTerminalModule";
...	@@ -29,6 +29,9 @@ import { ControlPillMenu } from "../../components/ControlPill";	...	@@ -29,6 +29,9 @@ import { ControlPillMenu } from "../../components/ControlPill";
29	import { EmptyState } from "../../components/EmptyState";	29	import { EmptyState } from "../../components/EmptyState";
30	import { GlassSurface } from "../../components/GlassSurface";	30	import { GlassSurface } from "../../components/GlassSurface";
31	import { LoadingScreen } from "../../components/LoadingScreen";	31	import { LoadingScreen } from "../../components/LoadingScreen";
		32	import { MaterialScreenContent } from "../../components/MaterialScreenContent";
		33	import { MaterialButton } from "../../components/MaterialButton";
		34	import { MaterialIconButton } from "../../components/MaterialIconButton";
32	import { environmentCatalog } from "../../connection/catalog";	35	import { environmentCatalog } from "../../connection/catalog";
33	import { useEnvironmentPresentation } from "../../state/presentation";	36	import { useEnvironmentPresentation } from "../../state/presentation";
34	import { terminalEnvironment } from "../../state/terminal";	37	import { terminalEnvironment } from "../../state/terminal";
...	@@ -50,6 +53,7 @@ import { useThreadSelection } from "../../state/use-thread-selection";	...	@@ -50,6 +53,7 @@ import { useThreadSelection } from "../../state/use-thread-selection";
50	import { useSelectedThreadDetail } from "../../state/use-thread-detail";	53	import { useSelectedThreadDetail } from "../../state/use-thread-detail";
51	import { EnvironmentConnectionNotice } from "../connection/EnvironmentConnectionNotice";	54	import { EnvironmentConnectionNotice } from "../connection/EnvironmentConnectionNotice";
52	import { useAdaptiveWorkspaceLayout } from "../layout/AdaptiveWorkspaceLayout";	55	import { useAdaptiveWorkspaceLayout } from "../layout/AdaptiveWorkspaceLayout";
		56	import { AndroidWorkspaceSidebarButton } from "../layout/workspace-sidebar-toolbar";
53	import { TerminalSurface } from "./NativeTerminalSurface";	57	import { TerminalSurface } from "./NativeTerminalSurface";
54	import { getMobileTerminalTheme } from "./terminalTheme";	58	import { getMobileTerminalTheme } from "./terminalTheme";
55	import { terminalDebugLog } from "./terminalDebugLog";	59	import { terminalDebugLog } from "./terminalDebugLog";
...	@@ -158,7 +162,7 @@ type ThreadTerminalRouteScreenProps = StaticScreenProps<{	...	@@ -158,7 +162,7 @@ type ThreadTerminalRouteScreenProps = StaticScreenProps<{
158	}>;	162	}>;
159		163
160	export function ThreadTerminalRouteScreen(props: ThreadTerminalRouteScreenProps) {	164	export function ThreadTerminalRouteScreen(props: ThreadTerminalRouteScreenProps) {
161	const terminalBlurTarget = useRef<View>(null);	165	const insets = useSafeAreaInsets();
162	const navigation = useNavigation();	166	const navigation = useNavigation();
163	const writeTerminal = useAtomCommand(terminalEnvironment.write, "terminal write");	167	const writeTerminal = useAtomCommand(terminalEnvironment.write, "terminal write");
164	const resizeTerminal = useAtomCommand(terminalEnvironment.resize, "terminal resize");	168	const resizeTerminal = useAtomCommand(terminalEnvironment.resize, "terminal resize");
...	@@ -190,6 +194,7 @@ export function ThreadTerminalRouteScreen(props: ThreadTerminalRouteScreenProps)	...	@@ -190,6 +194,7 @@ export function ThreadTerminalRouteScreen(props: ThreadTerminalRouteScreenProps)
190	themeAppearance: appearanceScheme,	194	themeAppearance: appearanceScheme,
191	themeId,	195	themeId,
192	setTerminalFontSize,	196	setTerminalFontSize,
		197	themeVariables,
193	} = useAppearancePreferences();	198	} = useAppearancePreferences();
194	const fontSize = appearance.terminalFontSize;	199	const fontSize = appearance.terminalFontSize;
195	const cachedRouteGridSize =	200	const cachedRouteGridSize =
...	@@ -515,6 +520,12 @@ export function ThreadTerminalRouteScreen(props: ThreadTerminalRouteScreenProps)	...	@@ -515,6 +520,12 @@ export function ThreadTerminalRouteScreen(props: ThreadTerminalRouteScreenProps)
515	isVisible: state.isVisible,	520	isVisible: state.isVisible,
516	}));	521	}));
517	const isAccessoryVisible = keyboardState.isVisible && !isAccessoryDismissed;	522	const isAccessoryVisible = keyboardState.isVisible && !isAccessoryDismissed;
		523	// Android's terminal owns an EditText; turning off autoFocus also clears its native focus.
		524	const terminalAutoFocus =
		525	Platform.OS === "android"
		526	? !isAccessoryDismissed &&
		527	(!SHOWCASE_ENABLED \|\| keyboardFocusRequest > 0 \|\| keyboardState.isVisible)
		528	: !SHOWCASE_ENABLED;
518	const terminalBottomInset =	529	const terminalBottomInset =
519	(keyboardState.isVisible ? keyboardState.height : 0) +	530	(keyboardState.isVisible ? keyboardState.height : 0) +
520	(isAccessoryVisible ? TERMINAL_ACCESSORY_HEIGHT : 0);	531	(isAccessoryVisible ? TERMINAL_ACCESSORY_HEIGHT : 0);
...	@@ -1103,6 +1114,7 @@ export function ThreadTerminalRouteScreen(props: ThreadTerminalRouteScreenProps)	...	@@ -1103,6 +1114,7 @@ export function ThreadTerminalRouteScreen(props: ThreadTerminalRouteScreenProps)
1103	}, []);	1114	}, []);
1104		1115
1105	const handleShowKeyboard = useCallback(() => {	1116	const handleShowKeyboard = useCallback(() => {
		1117	setIsAccessoryDismissed(false);
1106	setKeyboardFocusRequest((current) => current + 1);	1118	setKeyboardFocusRequest((current) => current + 1);
1107	}, []);	1119	}, []);
1108	const handleRetryEnvironment = useCallback(() => {	1120	const handleRetryEnvironment = useCallback(() => {
...	@@ -1175,22 +1187,10 @@ export function ThreadTerminalRouteScreen(props: ThreadTerminalRouteScreenProps)	...	@@ -1175,22 +1187,10 @@ export function ThreadTerminalRouteScreen(props: ThreadTerminalRouteScreenProps)
1175	<AndroidScreenHeader	1187	<AndroidScreenHeader
1176	title="Terminal"	1188	title="Terminal"
1177	subtitle={headerSubtitle}	1189	subtitle={headerSubtitle}
		1190	leading={<AndroidWorkspaceSidebarButton />}
1178	onBack={handleCloseTerminal}	1191	onBack={handleCloseTerminal}
1179	trailing={	1192	trailing={
1180	<>	1193	<>
1181	{layout.usesSplitView ? (
1182	<AndroidHeaderIconButton
1183	accessibilityLabel={
1184	panes.primarySidebarVisible ? "Maximize terminal" : "Show threads"
1185	}
1186	icon={
1187	panes.primarySidebarVisible
1188	? "arrow.up.left.and.arrow.down.right"
1189	: "sidebar.left"
1190	}
1191	onPress={togglePrimarySidebar}
1192	/>
1193	) : null}
1194	{isEnvironmentReady ? (	1194	{isEnvironmentReady ? (
1195	<ControlPillMenu	1195	<ControlPillMenu
1196	actions={androidTerminalMenuActions}	1196	actions={androidTerminalMenuActions}
...	@@ -1280,162 +1280,188 @@ export function ThreadTerminalRouteScreen(props: ThreadTerminalRouteScreenProps)	...	@@ -1280,162 +1280,188 @@ export function ThreadTerminalRouteScreen(props: ThreadTerminalRouteScreenProps)
1280	</NativeHeaderToolbar>	1280	</NativeHeaderToolbar>
1281	) : null}	1281	) : null}
1282		1282
1283	<View className="flex-1" style={{ backgroundColor: terminalTheme.background }}>	1283	<MaterialScreenContent>
1284	{!isEnvironmentReady ? (	1284	<View
1285	<EnvironmentConnectionNotice	1285	className="flex-1"
1286	environmentLabel={	1286	style={{
1287	environment.presentation?.entry.target.label ??	1287	backgroundColor:
1288	selectedEnvironmentConnection?.environmentLabel ??	1288	Platform.OS === "android"
1289	"Environment"	1289	? themeVariables["--color-card-alt"]
1290	}	1290	: terminalTheme.background,
1291	connection={	1291	paddingBottom:
1292	environment.presentation?.connection ?? {	1292	Platform.OS === "android" && !keyboardState.isVisible ? insets.bottom : 0,
1293	phase: "available",	1293	}}
1294	error: null,	1294	>
1295	traceId: null,	1295	{!isEnvironmentReady ? (
		1296	<EnvironmentConnectionNotice
		1297	environmentLabel={
		1298	environment.presentation?.entry.target.label ??
		1299	selectedEnvironmentConnection?.environmentLabel ??
		1300	"Environment"
1296	}	1301	}
1297	}	1302	connection={
1298	resourceName="terminal"	1303	environment.presentation?.connection ?? {
1299	onRetry={handleRetryEnvironment}	1304	phase: "available",
1300	/>	1305	error: null,
1301	) : (	1306	traceId: null,
1302	<>	1307	}
1303	<BlurTargetView	1308	}
1304	ref={terminalBlurTarget}	1309	resourceName="terminal"
1305	style={{	1310	onRetry={handleRetryEnvironment}
1306	flex: 1,	1311	/>
1307	paddingBottom: terminalBottomInset,	1312	) : (
1308	}}	1313	<>
1309	>
1310	<View	1314	<View
1311	pointerEvents="none"
1312	style={{	1315	style={{
1313	position: "absolute",	1316	flex: 1,
1314	inset: 0,	1317	paddingBottom: terminalBottomInset,
1315	backgroundColor: terminalTheme.background,
1316	}}
1317	/>
1318	<TerminalSurface
1319	autoFocus={!SHOWCASE_ENABLED}
1320	buffer={terminalSurfaceBuffer}
1321	fontSize={fontSize}
1322	isRunning={isRunning}
1323	keyboardFocusRequest={keyboardFocusRequest}
1324	captureRequest={captureRequest}
1325	onCapture={(text) => {
1326	if (text.trim()) setCapturedOutput(text);
1327	else Alert.alert("No terminal output", "There is no visible output to attach.");
1328	}}	1318	}}
1329	onInput={handleInput}
1330	onResize={handleResize}
1331	style={{ flex: 1 }}
1332	terminalKey={terminalKey}
1333	theme={terminalTheme}
1334	/>
1335	</BlurTargetView>
1336
1337	{selectedThread && hasNativeTerminalSurface() ? (
1338	<Pressable
1339	accessibilityRole="button"
1340	onPress={() => {
1341	KeyboardController.dismiss();
1342	setCaptureRequest((value) => value + 1);
1343	}}
1344	className="px-4 py-2"
1345	>
1346	<Text style={{ color: terminalTheme.foreground }}>Attach visible output</Text>
1347	</Pressable>
1348	) : null}
1349	{isAccessoryVisible ? (
1350	<KeyboardStickyView
1351	style={{ position: "absolute", bottom: 0, left: 0, right: 0 }}
1352	offset={{ closed: 0, opened: 0 }}
1353	>	1319	>
1354	<View	1320	<View
1355	className="border-t"	1321	pointerEvents="none"
1356	style={{	1322	style={{
		1323	position: "absolute",
		1324	inset: 0,
1357	backgroundColor: terminalTheme.background,	1325	backgroundColor: terminalTheme.background,
1358	borderTopColor: terminalTheme.border,
1359	minHeight: TERMINAL_ACCESSORY_HEIGHT,
1360	}}	1326	}}
1361	>	1327	/>
1362	<ComposerToolbarRow paddingBottom={4} paddingHorizontal={8} paddingTop={4}>	1328	<TerminalSurface
1363	<ComposerToolbarScroller	1329	autoFocus={terminalAutoFocus}
1364	contentPaddingRight={2}	1330	buffer={terminalSurfaceBuffer}
1365	fadeOpaque={terminalTheme.background}	1331	fontSize={fontSize}
1366	fadeTransparent={`${terminalTheme.background}00`}	1332	isRunning={isRunning}
1367	>	1333	keyboardFocusRequest={keyboardFocusRequest}
1368	{terminalToolbarActions.map((action) => {	1334	captureRequest={captureRequest}
1369	const active =	1335	onCapture={(text) => {
1370	action.kind === "modifier" && pendingModifier === action.modifier;	1336	if (text.trim()) setCapturedOutput(text);
1371		1337	else Alert.alert("No terminal output", "There is no visible output to attach.");
1372	return (	1338	}}
1373	<ComposerToolbarButton	1339	onInput={handleInput}
1374	key={action.key}	1340	onResize={handleResize}
1375	active={active}	1341	style={{ flex: 1 }}
1376	label={action.label}	1342	terminalKey={terminalKey}
1377	maxWidth={120}	1343	theme={terminalTheme}
1378	minWidth={action.label.length > 1 ? 56 : 44}	1344	/>
1379	onPress={() => handleToolbarActionPress(action)}	1345	</View>
1380	showChevron={false}	1346
1381	textTransform={	1347	{Platform.OS === "android" && !keyboardState.isVisible ? (
1382	action.kind === "modifier" \|\| action.kind === "clear"	1348	<View className="min-h-14 flex-row items-center gap-2 bg-card-alt px-2">
1383	? "uppercase"	1349	{selectedThread && hasNativeTerminalSurface() ? (
1384	: "none"	1350	<MaterialButton
1385	}	1351	label="Attach output"
1386	/>	1352	tone="text"
1387	);	1353	onPress={() => setCaptureRequest((value) => value + 1)}
1388	})}
1389	</ComposerToolbarScroller>
1390	<ComposerToolbarButton
1391	accessibilityLabel="Dismiss keyboard"
1392	icon={{ ios: "keyboard.chevron.compact.down", android: "keyboard_hide" }}
1393	onPress={handleDismissKeyboard}
1394	showChevron={false}
1395	/>	1354	/>
1396	</ComposerToolbarRow>	1355	) : null}
		1356	<View className="flex-1" />
		1357	<MaterialIconButton
		1358	accessibilityLabel="Show keyboard"
		1359	icon="keyboard"
		1360	onPress={handleShowKeyboard}
		1361	/>
1397	</View>	1362	</View>
1398	</KeyboardStickyView>	1363	) : Platform.OS !== "android" && selectedThread && hasNativeTerminalSurface() ? (
1399	) : !keyboardState.isVisible ? (	1364	<Pressable
1400	<Pressable	1365	accessibilityRole="button"
1401	accessibilityLabel="Show keyboard"	1366	onPress={() => {
1402	accessibilityRole="button"	1367	KeyboardController.dismiss();
1403	onPress={handleShowKeyboard}	1368	setCaptureRequest((value) => value + 1);
1404	style={({ pressed }) => ({
1405	bottom: 16,
1406	borderRadius: 28,
1407	opacity: pressed ? 0.72 : 1,
1408	position: "absolute",
1409	right: 16,
1410	})}
1411	>
1412	<GlassSurface
1413	chrome="none"
1414	blurTarget={terminalBlurTarget}
1415	fallbackColor={terminalTheme.background}
1416	glassEffectStyle="regular"
1417	tintColor="transparent"
1418	style={{
1419	alignItems: "center",
1420	borderRadius: 24,
1421	height: 48,
1422	justifyContent: "center",
1423	width: 48,
1424	}}	1369	}}
1425	pointerEvents="none"	1370	className="px-4 py-2"
1426	>	1371	>
1427	<SymbolView	1372	<Text style={{ color: terminalTheme.foreground }}>Attach visible output</Text>
1428	name={{ ios: "keyboard", android: "keyboard" }}	1373	</Pressable>
1429	size={20}	1374	) : null}
1430	tintColor={terminalTheme.foreground}	1375	{isAccessoryVisible ? (
1431	type="monochrome"	1376	<KeyboardStickyView
1432	/>	1377	style={{ position: "absolute", bottom: 0, left: 0, right: 0 }}
1433	</GlassSurface>	1378	offset={{ closed: 0, opened: 0 }}
1434	</Pressable>	1379	>
1435	) : null}	1380	<View
1436	</>	1381	className="border-t"
1437	)}	1382	style={{
1438	</View>	1383	backgroundColor: terminalTheme.background,
		1384	borderTopColor: terminalTheme.border,
		1385	minHeight: TERMINAL_ACCESSORY_HEIGHT,
		1386	}}
		1387	>
		1388	<ComposerToolbarRow paddingBottom={4} paddingHorizontal={8} paddingTop={4}>
		1389	<ComposerToolbarScroller
		1390	contentPaddingRight={2}
		1391	fadeOpaque={terminalTheme.background}
		1392	fadeTransparent={`${terminalTheme.background}00`}
		1393	>
		1394	{terminalToolbarActions.map((action) => {
		1395	const active =
		1396	action.kind === "modifier" && pendingModifier === action.modifier;
		1397
		1398	return (
		1399	<ComposerToolbarButton
		1400	key={action.key}
		1401	active={active}
		1402	label={action.label}
		1403	maxWidth={120}
		1404	minWidth={action.label.length > 1 ? 56 : 44}
		1405	onPress={() => handleToolbarActionPress(action)}
		1406	showChevron={false}
		1407	textTransform={
		1408	action.kind === "modifier" \|\| action.kind === "clear"
		1409	? "uppercase"
		1410	: "none"
		1411	}
		1412	/>
		1413	);
		1414	})}
		1415	</ComposerToolbarScroller>
		1416	<ComposerToolbarButton
		1417	accessibilityLabel="Dismiss keyboard"
		1418	icon={{ ios: "keyboard.chevron.compact.down", android: "keyboard_hide" }}
		1419	onPress={handleDismissKeyboard}
		1420	showChevron={false}
		1421	/>
		1422	</ComposerToolbarRow>
		1423	</View>
		1424	</KeyboardStickyView>
		1425	) : !keyboardState.isVisible && Platform.OS !== "android" ? (
		1426	<Pressable
		1427	accessibilityLabel="Show keyboard"
		1428	accessibilityRole="button"
		1429	onPress={handleShowKeyboard}
		1430	style={({ pressed }) => ({
		1431	bottom: 16,
		1432	borderRadius: 28,
		1433	opacity: pressed ? 0.72 : 1,
		1434	position: "absolute",
		1435	right: 16,
		1436	})}
		1437	>
		1438	<GlassSurface
		1439	chrome="none"
		1440	fallbackColor={terminalTheme.background}
		1441	glassEffectStyle="regular"
		1442	tintColor="transparent"
		1443	style={{
		1444	alignItems: "center",
		1445	borderRadius: 24,
		1446	height: 48,
		1447	justifyContent: "center",
		1448	width: 48,
		1449	}}
		1450	pointerEvents="none"
		1451	>
		1452	<SymbolView
		1453	name={{ ios: "keyboard", android: "keyboard" }}
		1454	size={20}
		1455	tintColor={terminalTheme.foreground}
		1456	type="monochrome"
		1457	/>
		1458	</GlassSurface>
		1459	</Pressable>
		1460	) : null}
		1461	</>
		1462	)}
		1463	</View>
		1464	</MaterialScreenContent>
1439	</>	1465	</>
1440	);	1466	);
1441	}	1467	}

apps/mobile/src/features/threads/CustomSnoozeSheet.android.tsx created+287

...	@@ -0,0 +1,287 @@
1	import { MaterialSegmentedButtons } from "../../components/MaterialSegmentedButtons.android";
2	import {
3	BasicAlertDialog,
4	Button,
5	Column,
6	DateTimePicker,
7	Host,
8	FilledTonalIconButton,
9	Row,
10	Shape,
11	Surface,
12	Text,
13	TextButton,
14	} from "@expo/ui/jetpack-compose";
15	import {
16	padding,
17	size,
18	width,
19	fillMaxWidth,
20	testID,
21	verticalScroll,
22	} from "@expo/ui/jetpack-compose/modifiers";
23	import {
24	localSnoozeDate,
25	localSnoozeTime,
26	resolveCustomSnooze,
27	type CustomSnoozeInput,
28	} from "@t3tools/client-runtime/state/thread-settled";
29	import { requireNativeModule } from "expo";
30	import { useEffect, useState } from "react";
31	import { AppState, useWindowDimensions } from "react-native";
32
33	import { OverlayPortal } from "../../components/OverlayPortal";
34	import { useAppearancePreferences } from "../settings/appearance/AppearancePreferencesProvider";
35	import { useScaledTextRole } from "../settings/appearance/useScaledTextRole";
36	import type { CustomSnoozeSheet as SharedCustomSnoozeSheet } from "./CustomSnoozeSheet.shared";
37	import {
38	applySnoozePickerDate,
39	applySnoozePickerTime,
40	snoozeDateToPickerDate,
41	} from "./customSnoozeDate";
42
43	type Props = Parameters<typeof SharedCustomSnoozeSheet>[0];
44
45	const roundedCorner = Shape.RoundedCorner;
46
47	const modes = [
48	{ value: "date", label: "Date and time" },
49	{ value: "duration", label: "Duration" },
50	] as const;
51	const units = [
52	{ value: "minutes", label: "Minutes" },
53	{ value: "hours", label: "Hours" },
54	{ value: "days", label: "Days" },
55	] as const;
56
57	function systemUses24HourClock() {
58	return requireNativeModule<{ is24HourFormat(): boolean }>("T3NativeControls").is24HourFormat();
59	}
60
61	export function CustomSnoozeSheet(props: Props) {
62	const { themeAppearance, themeVariables: colors } = useAppearancePreferences();
63	const [is24Hour, setIs24Hour] = useState(systemUses24HourClock);
64	useEffect(() => {
65	const subscription = AppState.addEventListener("change", (state) => {
66	if (state === "active") setIs24Hour(systemUses24HourClock());
67	});
68	return () => subscription.remove();
69	}, []);
70	const titleTypography = useScaledTextRole("title");
71	const bodyTypography = useScaledTextRole("footnote");
72	const { width: windowWidth } = useWindowDimensions();
73	const [mode, setMode] = useState<CustomSnoozeInput["mode"]>("date");
74	const [date, setDate] = useState(() => new Date(Date.now() + 3_600_000));
75	const [picker, setPicker] = useState<"date" \| "time">("date");
76	const [amount, setAmount] = useState(2);
77	const [unit, setUnit] = useState<"minutes" \| "hours" \| "days">("hours");
78	const [error, setError] = useState<string \| null>(null);
79	const submit = () => {
80	const input: CustomSnoozeInput =
81	mode === "date"
82	? { mode, date: localSnoozeDate(date), time: localSnoozeTime(date) }
83	: { mode, amount: String(amount), unit };
84	const snoozedUntil = resolveCustomSnooze(input, new Date());
85	if (!snoozedUntil) {
86	setError(
87	mode === "date" ? "Choose a date and time in the future." : "Enter a positive duration.",
88	);
89	return;
90	}
91	props.onSnooze(snoozedUntil);
92	props.onClose();
93	};
94	const pickerColors = {
95	containerColor: colors["--color-card-alt"],
96	titleContentColor: colors["--color-foreground-secondary"],
97	headlineContentColor: colors["--color-foreground"],
98	weekdayContentColor: colors["--color-foreground-secondary"],
99	subheadContentColor: colors["--color-foreground"],
100	navigationContentColor: colors["--color-foreground"],
101	yearContentColor: colors["--color-foreground"],
102	dayContentColor: colors["--color-foreground"],
103	currentYearContentColor: colors["--color-primary"],
104	selectedYearContainerColor: colors["--color-primary"],
105	selectedYearContentColor: colors["--color-primary-foreground"],
106	selectedDayContainerColor: colors["--color-primary"],
107	selectedDayContentColor: colors["--color-primary-foreground"],
108	todayContentColor: colors["--color-primary"],
109	todayDateBorderColor: colors["--color-primary"],
110	dividerColor: colors["--color-border"],
111	clockDialColor: colors["--color-secondary"],
112	clockDialSelectedContentColor: colors["--color-primary-foreground"],
113	clockDialUnselectedContentColor: colors["--color-secondary-foreground"],
114	selectorColor: colors["--color-primary"],
115	periodSelectorSelectedContainerColor: colors["--color-secondary"],
116	periodSelectorSelectedContentColor: colors["--color-secondary-foreground"],
117	periodSelectorUnselectedContentColor: colors["--color-foreground"],
118	timeSelectorSelectedContainerColor: colors["--color-secondary"],
119	timeSelectorSelectedContentColor: colors["--color-secondary-foreground"],
120	timeSelectorUnselectedContainerColor: colors["--color-card"],
121	timeSelectorUnselectedContentColor: colors["--color-foreground"],
122	};
123	return (
124	// Recycled thread rows can detach a zero-sized native dialog host.
125	<OverlayPortal>
126	<Host colorScheme={themeAppearance} style={{ height: 0, width: 0 }}>
127	<BasicAlertDialog
128	onDismissRequest={props.onClose}
129	properties={{ usePlatformDefaultWidth: false }}
130	modifiers={[width(Math.min(360, windowWidth - 32))]}
131	>
132	<Surface
133	color={colors["--color-card-alt"]}
134	contentColor={colors["--color-foreground"]}
135	shape={roundedCorner({
136	cornerRadii: { topStart: 28, topEnd: 28, bottomStart: 28, bottomEnd: 28 },
137	})}
138	>
139	<Column modifiers={[fillMaxWidth(), verticalScroll()]}>
140	<Column
141	verticalArrangement={{ spacedBy: 16 }}
142	modifiers={[fillMaxWidth(), padding(24, 24, 24, 16)]}
143	>
144	<Text style={titleTypography}>Custom snooze</Text>
145	<MaterialSegmentedButtons
146	options={modes}
147	selected={mode}
148	onSelect={(value) => {
149	setMode(value);
150	setError(null);
151	}}
152	/>
153	{mode === "date" ? (
154	<MaterialSegmentedButtons
155	options={[
156	{
157	value: "date",
158	label: date.toLocaleDateString([], { month: "short", day: "numeric" }),
159	},
160	{
161	value: "time",
162	label: date.toLocaleTimeString([], {
163	hour: "numeric",
164	minute: "2-digit",
165	hourCycle: is24Hour ? "h23" : "h12",
166	}),
167	},
168	]}
169	selected={picker}
170	onSelect={setPicker}
171	/>
172	) : null}
173	</Column>
174	{mode === "date" ? (
175	<Column horizontalAlignment="center" modifiers={[fillMaxWidth()]}>
176	<SnoozeDateTimePicker
177	key={picker}
178	date={date}
179	picker={picker}
180	is24Hour={is24Hour}
181	colors={pickerColors}
182	onChange={(selected) => {
183	setDate((current) =>
184	picker === "date"
185	? applySnoozePickerDate(current, selected)
186	: applySnoozePickerTime(current, selected),
187	);
188	setError(null);
189	}}
190	/>
191	</Column>
192	) : (
193	<Column
194	verticalArrangement={{ spacedBy: 16 }}
195	modifiers={[fillMaxWidth(), padding(24, 8, 24, 16)]}
196	>
197	<Row
198	horizontalArrangement="spaceEvenly"
199	verticalAlignment="center"
200	modifiers={[fillMaxWidth()]}
201	>
202	<FilledTonalIconButton
203	enabled={amount > 1}
204	onClick={() => setAmount((current) => Math.max(1, current - 1))}
205	colors={{
206	containerColor: colors["--color-secondary"],
207	contentColor: colors["--color-secondary-foreground"],
208	}}
209	modifiers={[size(48, 48), testID("snooze-decrease-duration")]}
210	>
211	<Text style={titleTypography}>−</Text>
212	</FilledTonalIconButton>
213	<Text style={titleTypography} modifiers={[testID("snooze-duration")]}>
214	{String(amount)}
215	</Text>
216	<FilledTonalIconButton
217	enabled={amount < 99}
218	onClick={() => setAmount((current) => Math.min(99, current + 1))}
219	colors={{
220	containerColor: colors["--color-secondary"],
221	contentColor: colors["--color-secondary-foreground"],
222	}}
223	modifiers={[size(48, 48), testID("snooze-increase-duration")]}
224	>
225	<Text style={titleTypography}>+</Text>
226	</FilledTonalIconButton>
227	</Row>
228	<MaterialSegmentedButtons options={units} selected={unit} onSelect={setUnit} />
229	</Column>
230	)}
231	<Column
232	verticalArrangement={{ spacedBy: 16 }}
233	modifiers={[fillMaxWidth(), padding(24, 8, 24, 24)]}
234	>
235	{error ? (
236	<Text style={bodyTypography} color={colors["--color-danger-foreground"]}>
237	{error}
238	</Text>
239	) : null}
240	<Row horizontalArrangement="end" modifiers={[fillMaxWidth()]}>
241	<TextButton
242	onClick={props.onClose}
243	colors={{ contentColor: colors["--color-primary"] }}
244	>
245	<Text style={bodyTypography}>Cancel</Text>
246	</TextButton>
247	<Button
248	onClick={submit}
249	colors={{
250	containerColor: colors["--color-primary"],
251	contentColor: colors["--color-primary-foreground"],
252	}}
253	>
254	<Text style={bodyTypography}>Snooze</Text>
255	</Button>
256	</Row>
257	</Column>
258	</Column>
259	</Surface>
260	</BasicAlertDialog>
261	</Host>
262	</OverlayPortal>
263	);
264	}
265
266	function SnoozeDateTimePicker(props: {
267	readonly date: Date;
268	readonly picker: "date" \| "time";
269	readonly is24Hour: boolean;
270	readonly colors: React.ComponentProps<typeof DateTimePicker>["elementColors"];
271	readonly onChange: (date: Date) => void;
272	}) {
273	// Changing initialDate resets Compose's picker state, including its active clock dial.
274	const [initialDate] = useState(() =>
275	props.picker === "date" ? snoozeDateToPickerDate(props.date) : props.date.toISOString(),
276	);
277	return (
278	<DateTimePicker
279	initialDate={initialDate}
280	displayedComponents={props.picker === "date" ? "date" : "hourAndMinute"}
281	is24Hour={props.is24Hour}
282	showVariantToggle={false}
283	elementColors={props.colors}
284	onDateSelected={props.onChange}
285	/>
286	);
287	}

apps/mobile/src/features/threads/CustomSnoozeSheet.ios.tsx+154-192

...	@@ -3,7 +3,6 @@ import {	...	@@ -3,7 +3,6 @@ import {
3	DatePicker,	3	DatePicker,
4	Host,	4	Host,
5	HStack,	5	HStack,
6	Menu,
7	Picker,	6	Picker,
8	Popover,	7	Popover,
9	Spacer,	8	Spacer,
...	@@ -11,16 +10,20 @@ import {	...	@@ -11,16 +10,20 @@ import {
11	VStack,	10	VStack,
12	} from "@expo/ui/swift-ui";	11	} from "@expo/ui/swift-ui";
13	import {	12	import {
14	background,	13	accessibilityAddTraits,
		14	accessibilityHidden,
		15	buttonBorderShape,
15	buttonStyle,	16	buttonStyle,
16	datePickerStyle,	17	clipped,
		18	controlSize,
17	font,	19	font,
		20	datePickerStyle,
18	foregroundStyle,	21	foregroundStyle,
19	frame,	22	frame,
		23	labelsHidden,
		24	labelStyle,
20	padding,	25	padding,
21	pickerStyle,	26	pickerStyle,
22	presentationBackground,
23	shapes,
24	tag,	27	tag,
25	} from "@expo/ui/swift-ui/modifiers";	28	} from "@expo/ui/swift-ui/modifiers";
26	import {	29	import {
...	@@ -30,9 +33,8 @@ import {	...	@@ -30,9 +33,8 @@ import {
30	type CustomSnoozeInput,	33	type CustomSnoozeInput,
31	} from "@t3tools/client-runtime/state/thread-settled";	34	} from "@t3tools/client-runtime/state/thread-settled";
32	import { useState } from "react";	35	import { useState } from "react";
33	import { Modal, Pressable, ScrollView, View } from "react-native";	36	import { useWindowDimensions } from "react-native";
34	import { AppText } from "../../components/AppText";	37	import { NATIVE_LIQUID_GLASS_SUPPORTED } from "../../native/native-glass";
35	import { SegmentedControl } from "../../components/SegmentedControl";
36	import { useAppearancePreferences } from "../settings/appearance/AppearancePreferencesProvider";	38	import { useAppearancePreferences } from "../settings/appearance/AppearancePreferencesProvider";
37		39
38	const durationAmounts = Array.from({ length: 99 }, (_, index) => index + 1);	40	const durationAmounts = Array.from({ length: 99 }, (_, index) => index + 1);
...	@@ -50,13 +52,13 @@ export function CustomSnoozeSheet(props: {	...	@@ -50,13 +52,13 @@ export function CustomSnoozeSheet(props: {
50	readonly onClose: () => void;	52	readonly onClose: () => void;
51	readonly onSnooze: (snoozedUntil: string) => void;	53	readonly onSnooze: (snoozedUntil: string) => void;
52	}) {	54	}) {
		55	const { width } = useWindowDimensions();
53	const [mode, setMode] = useState<CustomSnoozeInput["mode"]>("date");	56	const [mode, setMode] = useState<CustomSnoozeInput["mode"]>("date");
54	const [date, setDate] = useState(() => new Date(Date.now() + 3_600_000));	57	const [date, setDate] = useState(() => new Date(Date.now() + 3_600_000));
55	const [amount, setAmount] = useState(2);	58	const [amount, setAmount] = useState(2);
56	const [amountOpen, setAmountOpen] = useState(false);
57	const [unit, setUnit] = useState<"minutes" \| "hours" \| "days">("hours");	59	const [unit, setUnit] = useState<"minutes" \| "hours" \| "days">("hours");
58	const [error, setError] = useState<string \| null>(null);	60	const [error, setError] = useState<string \| null>(null);
59	const { themeVariables: colors, themeAppearance, appearance } = useAppearancePreferences();	61	const { themeVariables: colors, themeAppearance } = useAppearancePreferences();
60	const updateDate = (value: Date) => {	62	const updateDate = (value: Date) => {
61	setDate(value);	63	setDate(value);
62	setError(null);	64	setError(null);
...	@@ -79,190 +81,150 @@ export function CustomSnoozeSheet(props: {	...	@@ -79,190 +81,150 @@ export function CustomSnoozeSheet(props: {
79	};	81	};
80		82
81	return (	83	return (
82	<Modal visible transparent animationType="fade" onRequestClose={props.onClose}>	84	<Host
83	<View className="flex-1 items-center justify-center bg-black/40 px-6">	85	style={{ position: "absolute", top: 0, right: 0, bottom: 0, left: 0 }}
84	<ScrollView	86	colorScheme={themeAppearance}
85	className="max-h-[80%] w-full max-w-sm grow-0 rounded-3xl border border-border bg-sheet-solid"	87	seedColor={colors["--color-primary"]}
86	contentContainerStyle={{ padding: 20, gap: 16 }}	88	>
87	>	89	<Popover
88	<View className="flex-row items-center justify-between gap-2">	90	isPresented
89	<Pressable accessibilityRole="button" onPress={props.onClose} hitSlop={10}>	91	onIsPresentedChange={(presented) => {
90	<AppText className="text-base">Cancel</AppText>	92	if (!presented) props.onClose();
91	</Pressable>	93	}}
92	<AppText accessibilityRole="header" className="text-base font-t3-semibold">	94	>
93	Custom snooze	95	<Popover.Trigger>
94	</AppText>	96	<Spacer
95	<Pressable accessibilityRole="button" onPress={submit} hitSlop={10}>	97	modifiers={[frame({ maxWidth: Infinity, maxHeight: Infinity }), accessibilityHidden()]}
96	<AppText className="text-base text-primary">Snooze</AppText>
97	</Pressable>
98	</View>
99	<SegmentedControl
100	options={modes}
101	selected={mode}
102	onSelect={(value) => {
103	setMode(value);
104	setError(null);
105	}}
106	role="tab"
107	/>	98	/>
108	<Host	99	</Popover.Trigger>
109	matchContents={{ vertical: true }}	100	<Popover.Content>
110	style={{ width: "100%" }}	101	<VStack
111	colorScheme={themeAppearance}	102	spacing={16}
112	seedColor={colors["--color-primary"]}	103	modifiers={[padding({ all: 16 }), frame({ width: Math.min(360, width - 32) })]}
113	>	104	>
114	<HStack	105	<HStack spacing={12}>
115	spacing={6}	106	<Button
116	modifiers={[	107	label="Cancel"
117	frame({ minHeight: 44 }),	108	systemImage="xmark"
118	foregroundStyle(colors["--color-foreground"]),	109	role="cancel"
119	font({ size: appearance.baseFontSize }),	110	onPress={props.onClose}
120	]}	111	modifiers={[
121	>	112	labelStyle("iconOnly"),
122	<Text>{mode === "date" ? "Until" : "Snooze for"}</Text>	113	buttonStyle(NATIVE_LIQUID_GLASS_SUPPORTED ? "glass" : "bordered"),
123	<Spacer />	114	buttonBorderShape("circle"),
124	{mode === "date" ? (	115	controlSize("large"),
125	<>	116	]}
126	<SnoozeDateField date={date} component="date" onChange={updateDate} />	117	/>
127	<SnoozeDateField date={date} component="hourAndMinute" onChange={updateDate} />	118	<Text
128	</>	119	modifiers={[
129	) : (	120	font({ textStyle: "headline" }),
130	<>	121	frame({ maxWidth: Infinity, alignment: "leading" }),
131	<Popover isPresented={amountOpen} onIsPresentedChange={setAmountOpen}>	122	accessibilityAddTraits(["isHeader"]),
132	<Popover.Trigger>	123	]}
133	<Button	124	>
134	onPress={() => setAmountOpen(true)}	125	Custom snooze
135	modifiers={[buttonStyle("plain")]}	126	</Text>
136	>	127	<Button
137	<FieldLabel label={String(amount)} />	128	label="Snooze"
138	</Button>	129	onPress={submit}
139	</Popover.Trigger>	130	modifiers={[
140	<Popover.Content>	131	buttonStyle(
141	<VStack	132	NATIVE_LIQUID_GLASS_SUPPORTED ? "glassProminent" : "borderedProminent",
142	modifiers={[	133	),
143	padding({ all: 12 }),	134	controlSize("large"),
144	frame({ width: 180 }),	135	]}
145	presentationBackground(colors["--color-sheet-solid"]),	136	/>
146	]}
147	>
148	<Picker
149	label="Duration"
150	selection={amount}
151	onSelectionChange={(value: number) => {
152	setAmount(value);
153	setError(null);
154	}}
155	modifiers={[pickerStyle("wheel"), frame({ height: 160 })]}
156	>
157	{durationAmounts.map((value) => (
158	<Text
159	key={value}
160	modifiers={[
161	tag(value),
162	foregroundStyle(colors["--color-foreground"]),
163	]}
164	>
165	{String(value)}
166	</Text>
167	))}
168	</Picker>
169	<Button
170	label="Done"
171	onPress={() => setAmountOpen(false)}
172	modifiers={[foregroundStyle(colors["--color-primary"])]}
173	/>
174	</VStack>
175	</Popover.Content>
176	</Popover>
177	<Menu
178	label={
179	<FieldLabel
180	label={unit === "minutes" ? "Minutes" : unit === "hours" ? "Hours" : "Days"}
181	/>
182	}
183	>
184	{units.map((option) => (
185	<Button
186	key={option.value}
187	label={option.label}
188	onPress={() => {
189	setUnit(option.value);
190	setError(null);
191	}}
192	/>
193	))}
194	</Menu>
195	</>
196	)}
197	</HStack>	137	</HStack>
198	</Host>	138	<Picker
199	{error && <AppText className="text-sm text-danger-foreground">{error}</AppText>}	139	label="Snooze mode"
200	</ScrollView>	140	selection={mode}
201	</View>	141	onSelectionChange={(value: CustomSnoozeInput["mode"]) => {
202	</Modal>	142	setMode(value);
203	);	143	setError(null);
204	}	144	}}
205		145	modifiers={[pickerStyle("segmented")]}
206	function FieldLabel(props: { readonly label: string }) {	146	>
207	const { themeVariables: colors } = useAppearancePreferences();	147	{modes.map((option) => (
208	return (	148	<Text key={option.value} modifiers={[tag(option.value)]}>
209	<Text	149	{option.label}
210	modifiers={[	150	</Text>
211	padding({ horizontal: 12, vertical: 8 }),	151	))}
212	foregroundStyle(colors["--color-foreground"]),	152	</Picker>
213	background(colors["--color-card"], shapes.capsule()),	153	{mode === "date" ? (
214	]}	154	<DatePicker
215	>	155	title="Snooze until"
216	{props.label}	156	selection={date}
217	</Text>	157	displayedComponents={["date", "hourAndMinute"]}
218	);	158	onDateChange={updateDate}
219	}	159	modifiers={[
220		160	datePickerStyle("wheel"),
221	function SnoozeDateField(props: {	161	labelsHidden(),
222	readonly date: Date;	162	frame({ maxWidth: Infinity, height: 180 }),
223	readonly component: "date" \| "hourAndMinute";	163	]}
224	readonly onChange: (date: Date) => void;	164	/>
225	}) {	165	) : (
226	const [open, setOpen] = useState(false);	166	<HStack spacing={0}>
227	const { themeVariables: colors } = useAppearancePreferences();	167	<Picker
228	return (	168	label="Duration amount"
229	<Popover isPresented={open} onIsPresentedChange={setOpen}>	169	selection={amount}
230	<Popover.Trigger>	170	onSelectionChange={(value: number) => {
231	<Button onPress={() => setOpen(true)} modifiers={[buttonStyle("plain")]}>	171	setAmount(value);
232	<FieldLabel	172	setError(null);
233	label={	173	}}
234	props.component === "date"	174	modifiers={[
235	? props.date.toLocaleDateString(undefined, {	175	pickerStyle("wheel"),
236	month: "short",	176	labelsHidden(),
237	day: "numeric",	177	frame({ minWidth: 0, maxWidth: Infinity, height: 180 }),
238	year: "numeric",	178	clipped(),
239	})	179	]}
240	: props.date.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" })	180	>
241	}	181	{durationAmounts.map((value) => (
242	/>	182	<Text
243	</Button>	183	key={value}
244	</Popover.Trigger>	184	modifiers={[tag(value), foregroundStyle(colors["--color-foreground"])]}
245	<Popover.Content>	185	>
246	<VStack	186	{String(value)}
247	modifiers={[	187	</Text>
248	padding({ all: 12 }),	188	))}
249	frame({ width: props.component === "date" ? 340 : 300 }),	189	</Picker>
250	presentationBackground(colors["--color-sheet-solid"]),	190	<Picker
251	]}	191	label="Duration unit"
252	>	192	selection={unit}
253	<DatePicker	193	onSelectionChange={(value: typeof unit) => {
254	selection={props.date}	194	setUnit(value);
255	displayedComponents={[props.component]}	195	setError(null);
256	onDateChange={props.onChange}	196	}}
257	modifiers={[datePickerStyle(props.component === "date" ? "graphical" : "wheel")]}	197	modifiers={[
258	/>	198	pickerStyle("wheel"),
259	<Button	199	labelsHidden(),
260	label="Done"	200	frame({ minWidth: 0, maxWidth: Infinity, height: 180 }),
261	onPress={() => setOpen(false)}	201	clipped(),
262	modifiers={[foregroundStyle(colors["--color-primary"])]}	202	]}
263	/>	203	>
264	</VStack>	204	{units.map((option) => (
265	</Popover.Content>	205	<Text
266	</Popover>	206	key={option.value}
		207	modifiers={[tag(option.value), foregroundStyle(colors["--color-foreground"])]}
		208	>
		209	{option.label}
		210	</Text>
		211	))}
		212	</Picker>
		213	</HStack>
		214	)}
		215	{error ? (
		216	<Text
		217	modifiers={[
		218	font({ textStyle: "footnote" }),
		219	foregroundStyle(colors["--color-danger-foreground"]),
		220	]}
		221	>
		222	{error}
		223	</Text>
		224	) : null}
		225	</VStack>
		226	</Popover.Content>
		227	</Popover>
		228	</Host>
267	);	229	);
268	}	230	}

apps/mobile/src/features/threads/CustomSnoozeSheet.shared.tsx created+181

...	@@ -0,0 +1,181 @@
1	import { DateTimePicker } from "@expo/ui/community/datetime-picker";
2	import {
3	localSnoozeDate,
4	localSnoozeTime,
5	resolveCustomSnooze,
6	type CustomSnoozeInput,
7	} from "@t3tools/client-runtime/state/thread-settled";
8	import { useState } from "react";
9	import {
10	KeyboardAvoidingView,
11	Modal,
12	Platform,
13	Pressable,
14	ScrollView,
15	TextInput,
16	View,
17	} from "react-native";
18	import { AppText } from "../../components/AppText";
19	import { SegmentedControl } from "../../components/SegmentedControl";
20
21	export function CustomSnoozeSheet(props: {
22	readonly onClose: () => void;
23	readonly onSnooze: (snoozedUntil: string) => void;
24	}) {
25	const [mode, setMode] = useState<CustomSnoozeInput["mode"]>("date");
26	const [date, setDate] = useState(() => new Date(Date.now() + 3_600_000));
27	const [picker, setPicker] = useState<"date" \| "time" \| null>(null);
28	const [amount, setAmount] = useState("2");
29	const [unit, setUnit] = useState<"minutes" \| "hours" \| "days">("hours");
30	const [error, setError] = useState<string \| null>(null);
31	return (
32	<Modal visible transparent animationType="fade" onRequestClose={props.onClose}>
33	<KeyboardAvoidingView
34	className="flex-1 items-center justify-center bg-black/40 px-6"
35	behavior={Platform.OS === "ios" ? "padding" : undefined}
36	>
37	<ScrollView
38	className="max-h-[80%] w-full max-w-md grow-0 rounded-3xl bg-screen"
39	keyboardShouldPersistTaps="handled"
40	contentInsetAdjustmentBehavior="automatic"
41	contentContainerStyle={{ padding: 24, paddingBottom: 24, gap: 20 }}
42	>
43	<AppText accessibilityRole="header" className="text-xl font-t3-semibold">
44	Custom snooze
45	</AppText>
46	<AppText className="text-base text-foreground-secondary">
47	Choose when snoozed threads return to your inbox.
48	</AppText>
49	<SegmentedControl
50	options={
51	[
52	{ value: "date", label: "Date and time" },
53	{ value: "duration", label: "Duration" },
54	] as const
55	}
56	selected={mode}
57	onSelect={(value) => {
58	setMode(value);
59	setPicker(null);
60	setError(null);
61	}}
62	role="tab"
63	/>
64	{mode === "date" ? (
65	<View className="gap-3">
66	{(["date", "time"] as const).map((value) => (
67	<Pressable
68	key={value}
69	accessibilityRole="button"
70	accessibilityLabel={value === "date" ? "Choose date" : "Choose time"}
71	className="min-h-12 flex-row items-center justify-between rounded-xl bg-subtle px-3"
72	onPress={() => setPicker(value)}
73	>
74	<AppText>{value === "date" ? "Date" : "Time"}</AppText>
75	<AppText>
76	{value === "date"
77	? date.toLocaleDateString()
78	: date.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" })}
79	</AppText>
80	</Pressable>
81	))}
82	{picker && (
83	<DateTimePicker
84	value={date}
85	mode={picker}
86	display={Platform.OS === "ios" ? "spinner" : "default"}
87	onDismiss={() => setPicker(null)}
88	onValueChange={(_, selected) => {
89	const next = new Date(date);
90	if (picker === "date")
91	next.setFullYear(
92	selected.getFullYear(),
93	selected.getMonth(),
94	selected.getDate(),
95	);
96	else next.setHours(selected.getHours(), selected.getMinutes(), 0, 0);
97	setDate(next);
98	setError(null);
99	}}
100	/>
101	)}
102	</View>
103	) : (
104	<View className="gap-3">
105	<AppText>Snooze for</AppText>
106	<TextInput
107	accessibilityLabel="Duration"
108	className="min-h-12 rounded-xl bg-subtle px-3 text-base text-foreground"
109	keyboardType="decimal-pad"
110	value={amount}
111	onChangeText={(value) => {
112	setAmount(value);
113	setError(null);
114	}}
115	/>
116	<View className="flex-row gap-2">
117	{(["minutes", "hours", "days"] as const).map((value) => (
118	<Pressable
119	key={value}
120	accessibilityRole="radio"
121	accessibilityState={{ checked: unit === value }}
122	className={
123	unit === value
124	? "min-h-12 flex-1 items-center justify-center rounded-xl bg-subtle"
125	: "min-h-12 flex-1 items-center justify-center rounded-xl"
126	}
127	onPress={() => {
128	setUnit(value);
129	setError(null);
130	}}
131	>
132	<AppText>
133	{value === "minutes" ? "Minutes" : value === "hours" ? "Hours" : "Days"}
134	</AppText>
135	</Pressable>
136	))}
137	</View>
138	</View>
139	)}
140	{error && (
141	<AppText accessibilityRole="alert" className="text-danger-foreground">
142	{error}
143	</AppText>
144	)}
145	<View className="flex-row justify-end gap-3">
146	<Pressable
147	accessibilityRole="button"
148	className="min-h-12 justify-center px-3"
149	onPress={props.onClose}
150	>
151	<AppText>Cancel</AppText>
152	</Pressable>
153	<Pressable
154	accessibilityRole="button"
155	className="min-h-12 justify-center rounded-xl bg-primary px-3"
156	onPress={() => {
157	const input: CustomSnoozeInput =
158	mode === "date"
159	? { mode, date: localSnoozeDate(date), time: localSnoozeTime(date) }
160	: { mode, amount: amount.replace(",", "."), unit };
161	const snoozedUntil = resolveCustomSnooze(input, new Date());
162	if (!snoozedUntil) {
163	setError(
164	mode === "date"
165	? "Choose a date and time in the future."
166	: "Enter a positive duration.",
167	);
168	return;
169	}
170	props.onSnooze(snoozedUntil);
171	props.onClose();
172	}}
173	>
174	<AppText className="text-primary-foreground">Snooze</AppText>
175	</Pressable>
176	</View>
177	</ScrollView>
178	</KeyboardAvoidingView>
179	</Modal>
180	);
181	}

apps/mobile/src/features/threads/CustomSnoozeSheet.tsx+1-182

...	@@ -1,182 +1 @@	...	@@ -1,182 +1 @@
1	import { DateTimePicker } from "@expo/ui/community/datetime-picker";	1	export { CustomSnoozeSheet } from "./CustomSnoozeSheet.shared";
2	import {
3	localSnoozeDate,
4	localSnoozeTime,
5	resolveCustomSnooze,
6	type CustomSnoozeInput,
7	} from "@t3tools/client-runtime/state/thread-settled";
8	import { useState } from "react";
9	import {
10	KeyboardAvoidingView,
11	Modal,
12	Platform,
13	Pressable,
14	ScrollView,
15	TextInput,
16	View,
17	} from "react-native";
18	import { AppText } from "../../components/AppText";
19	import { SegmentedControl } from "../../components/SegmentedControl";
20
21	export function CustomSnoozeSheet(props: {
22	readonly onClose: () => void;
23	readonly onSnooze: (snoozedUntil: string) => void;
24	}) {
25	const [mode, setMode] = useState<CustomSnoozeInput["mode"]>("date");
26	const [date, setDate] = useState(() => new Date(Date.now() + 3_600_000));
27	const [picker, setPicker] = useState<"date" \| "time" \| null>(null);
28	const [amount, setAmount] = useState("2");
29	const [unit, setUnit] = useState<"minutes" \| "hours" \| "days">("hours");
30	const [error, setError] = useState<string \| null>(null);
31	return (
32	<Modal visible transparent animationType="fade" onRequestClose={props.onClose}>
33	<KeyboardAvoidingView
34	className="flex-1 items-center justify-center bg-black/40 px-6"
35	behavior={Platform.OS === "ios" ? "padding" : undefined}
36	>
37	<ScrollView
38	className="max-h-[80%] w-full max-w-md grow-0 rounded-3xl bg-screen"
39	keyboardShouldPersistTaps="handled"
40	contentInsetAdjustmentBehavior="automatic"
41	contentContainerStyle={{ padding: 24, paddingBottom: 24, gap: 20 }}
42	>
43	<AppText accessibilityRole="header" className="text-xl font-t3-semibold">
44	Custom snooze
45	</AppText>
46	<AppText className="text-base text-foreground-secondary">
47	Choose when snoozed threads return to your inbox.
48	</AppText>
49	<SegmentedControl
50	options={
51	[
52	{ value: "date", label: "Date and time" },
53	{ value: "duration", label: "Duration" },
54	] as const
55	}
56	selected={mode}
57	onSelect={(value) => {
58	setMode(value);
59	setPicker(null);
60	setError(null);
61	}}
62	role="tab"
63	/>
64	{mode === "date" ? (
65	<View className="gap-3">
66	{(["date", "time"] as const).map((value) => (
67	<Pressable
68	key={value}
69	accessibilityRole="button"
70	accessibilityLabel={value === "date" ? "Choose date" : "Choose time"}
71	className="min-h-12 flex-row items-center justify-between rounded-xl bg-subtle px-3"
72	onPress={() => setPicker(value)}
73	>
74	<AppText>{value === "date" ? "Date" : "Time"}</AppText>
75	<AppText>
76	{value === "date"
77	? date.toLocaleDateString()
78	: date.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" })}
79	</AppText>
80	</Pressable>
81	))}
82	{picker && (
83	<DateTimePicker
84	value={date}
85	mode={picker}
86	display={Platform.OS === "ios" ? "spinner" : "default"}
87	onDismiss={() => setPicker(null)}
88	onValueChange={(_, selected) => {
89	const next = new Date(date);
90	if (picker === "date")
91	next.setFullYear(
92	selected.getFullYear(),
93	selected.getMonth(),
94	selected.getDate(),
95	);
96	else next.setHours(selected.getHours(), selected.getMinutes(), 0, 0);
97	setDate(next);
98	setError(null);
99	if (Platform.OS === "android") setPicker(null);
100	}}
101	/>
102	)}
103	</View>
104	) : (
105	<View className="gap-3">
106	<AppText>Snooze for</AppText>
107	<TextInput
108	accessibilityLabel="Duration"
109	className="min-h-12 rounded-xl bg-subtle px-3 text-base text-foreground"
110	keyboardType="decimal-pad"
111	value={amount}
112	onChangeText={(value) => {
113	setAmount(value);
114	setError(null);
115	}}
116	/>
117	<View className="flex-row gap-2">
118	{(["minutes", "hours", "days"] as const).map((value) => (
119	<Pressable
120	key={value}
121	accessibilityRole="radio"
122	accessibilityState={{ checked: unit === value }}
123	className={
124	unit === value
125	? "min-h-12 flex-1 items-center justify-center rounded-xl bg-subtle"
126	: "min-h-12 flex-1 items-center justify-center rounded-xl"
127	}
128	onPress={() => {
129	setUnit(value);
130	setError(null);
131	}}
132	>
133	<AppText>
134	{value === "minutes" ? "Minutes" : value === "hours" ? "Hours" : "Days"}
135	</AppText>
136	</Pressable>
137	))}
138	</View>
139	</View>
140	)}
141	{error && (
142	<AppText accessibilityRole="alert" className="text-danger-foreground">
143	{error}
144	</AppText>
145	)}
146	<View className="flex-row justify-end gap-3">
147	<Pressable
148	accessibilityRole="button"
149	className="min-h-12 justify-center px-3"
150	onPress={props.onClose}
151	>
152	<AppText>Cancel</AppText>
153	</Pressable>
154	<Pressable
155	accessibilityRole="button"
156	className="min-h-12 justify-center rounded-xl bg-primary px-3"
157	onPress={() => {
158	const input: CustomSnoozeInput =
159	mode === "date"
160	? { mode, date: localSnoozeDate(date), time: localSnoozeTime(date) }
161	: { mode, amount: amount.replace(",", "."), unit };
162	const snoozedUntil = resolveCustomSnooze(input, new Date());
163	if (!snoozedUntil) {
164	setError(
165	mode === "date"
166	? "Choose a date and time in the future."
167	: "Enter a positive duration.",
168	);
169	return;
170	}
171	props.onSnooze(snoozedUntil);
172	props.onClose();
173	}}
174	>
175	<AppText className="text-primary-foreground">Snooze</AppText>
176	</Pressable>
177	</View>
178	</ScrollView>
179	</KeyboardAvoidingView>
180	</Modal>
181	);
182	}

apps/mobile/src/features/threads/NewTaskContextPickerScreens.tsx+122-51

 @@ -1,3 +1,4 @@
+import { MaterialListRow } from "../../components/MaterialListRow";
 import type { VcsRef } from "@t3tools/client-runtime/state/vcs";
 import { resolveEnvironmentMachineKind } from "@t3tools/contracts";
 import { LegendList } from "@legendapp/list/react-native";
 @@ -20,6 +21,7 @@ import {
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { AndroidScreenHeader } from "../../components/AndroidScreenHeader";
+import { MaterialScreenContent } from "../../components/MaterialScreenContent";
 import { SymbolView } from "../../components/AppSymbol";
 import { AppText as Text } from "../../components/AppText";
 import { EnvironmentMachineSymbol } from "../../components/EnvironmentMachineSymbol";
 @@ -46,6 +48,34 @@ function SelectionRow(props: {
   readonly subtitle?: string;
   readonly title: string;
 }) {
+  if (Platform.OS === "android") {
+    return (
+      <MaterialListRow
+        title={props.title}
+        subtitle={props.subtitle}
+        leading={
+          props.icon === "arrow.triangle.branch" ? (
+            <SymbolView
+              name="arrow.triangle.branch"
+              size={24}
+              tintColorClassName="accent-icon-muted"
+            />
+          ) : (
+            props.icon
+          )
+        }
+        trailing={
+          props.selected ? (
+            <SymbolView name="checkmark" size={20} tintColorClassName="accent-primary" />
+          ) : null
+        }
+        accessibilityRole="radio"
+        accessibilityState={{ checked: props.selected }}
+        disabled={props.disabled}
+        onPress={props.onPress}
+      />
+    );
+  }
   return (
     <Pressable
       accessibilityLabel={[props.title, props.subtitle].filter(Boolean).join(", ")}
 @@ -63,7 +93,7 @@ function SelectionRow(props: {
         <SymbolView
           name="arrow.triangle.branch"
           size={17}
-          tintColorClassName={"accent-icon-muted"}
+          tintColorClassName="accent-icon-muted"
           type="monochrome"
         />
       ) : (
 @@ -83,7 +113,7 @@ function SelectionRow(props: {
         <SymbolView
           name="checkmark"
           size={16}
-          tintColorClassName={"accent-icon"}
+          tintColorClassName="accent-icon"
           type="monochrome"
           weight="semibold"
         />
 @@ -99,7 +129,13 @@ function ToggleRow(props: {
 }) {
   return (
     <View className="min-h-14 flex-row items-center gap-3 bg-card px-4 py-3">
-      <Text className="min-w-0 flex-1 text-base font-t3-medium text-foreground" numberOfLines={1}>
+      <Text
+        className={cn(
+          "min-w-0 flex-1 text-base text-foreground",
+          Platform.OS !== "android" && "font-t3-medium",
+        )}
+        numberOfLines={1}
+      >
         {props.title}
       </Text>
       <ThemedSwitch
 @@ -125,8 +161,14 @@ function BranchSelectionRow(props: {
   return (
     <View
       className={cn(
-        props.isFirst && "overflow-hidden rounded-t-2xl",
+        props.isFirst &&
-        props.isLast && "overflow-hidden rounded-b-2xl",
+          (Platform.OS === "android"
+            ? "overflow-hidden rounded-t-[28px]"
+            : "overflow-hidden rounded-t-2xl"),
+        props.isLast &&
+          (Platform.OS === "android"
+            ? "overflow-hidden rounded-b-[28px]"
+            : "overflow-hidden rounded-b-2xl"),
       )}
     >
       <SelectionRow
 @@ -143,7 +185,17 @@ function BranchSelectionRow(props: {
 }
 function PickerSurface(props: { readonly children: ReactNode }) {
-  return <View className="overflow-hidden rounded-2xl bg-card">{props.children}</View>;
+  return (
+    <View
+      className={
+        Platform.OS === "android"
+          ? "overflow-hidden rounded-[28px] bg-card"
+          : "overflow-hidden rounded-2xl bg-card"
+      }
+    >
+      {props.children}
+    </View>
+  );
 }
 export function NewTaskEnvironmentPickerRouteScreen() {
 @@ -161,42 +213,48 @@ export function NewTaskEnvironmentPickerRouteScreen() {
         }}
       />
       {Platform.OS === "android" ? (
-        <AndroidScreenHeader title="Environment" onBack={() => navigation.goBack()} />
+        <AndroidScreenHeader
+          title="Environment"
+          hideBottomBorder
+          onBack={() => navigation.goBack()}
+        />
       ) : null}
-      <ScrollView
+      <MaterialScreenContent>
-        contentInsetAdjustmentBehavior="automatic"
+        <ScrollView
-        contentContainerStyle={{
+          contentInsetAdjustmentBehavior="automatic"
-          paddingBottom: Math.max(insets.bottom, 16) + 16,
+          contentContainerStyle={{
-          paddingHorizontal: 16,
+            paddingBottom: Math.max(insets.bottom, 16) + 16,
-          paddingTop: 16,
+            paddingHorizontal: 16,
-        }}
+            paddingTop: 16,
-        showsVerticalScrollIndicator={false}
+          }}
-      >
+          showsVerticalScrollIndicator={false}
-        <PickerSurface>
+        >
-          {flow.environments.map((environment, index) => (
+          <PickerSurface>
-            <SelectionRow
+            {flow.environments.map((environment, index) => (
-              key={String(environment.environmentId)}
+              <SelectionRow
-              icon={
+                key={String(environment.environmentId)}
-                <EnvironmentMachineSymbol
+                icon={
-                  kind={resolveEnvironmentMachineKind(
+                  <EnvironmentMachineSymbol
-                    serverConfigs.get(environment.environmentId) ?? null,
+                    kind={resolveEnvironmentMachineKind(
-                  )}
+                      serverConfigs.get(environment.environmentId) ?? null,
-                  size={17}
+                    )}
-                  tintColorClassName="accent-icon-muted"
+                    size={Platform.OS === "android" ? 24 : 17}
-                />
+                    tintColorClassName="accent-icon-muted"
-              }
+                  />
-              isLast={index === flow.environments.length - 1}
+                }
-              onPress={() => {
+                isLast={index === flow.environments.length - 1}
-                void Haptics.selectionAsync();
+                onPress={() => {
-                flow.selectEnvironment(environment.environmentId);
+                  void Haptics.selectionAsync();
-                navigation.goBack();
+                  flow.selectEnvironment(environment.environmentId);
-              }}
+                  navigation.goBack();
-              selected={flow.selectedEnvironmentId === environment.environmentId}
+                }}
-              title={environment.environmentLabel}
+                selected={flow.selectedEnvironmentId === environment.environmentId}
-            />
+                title={environment.environmentLabel}
-          ))}
+              />
-        </PickerSurface>
+            ))}
-      </ScrollView>
+          </PickerSurface>
+        </ScrollView>
+      </MaterialScreenContent>
     </View>
   );
 }
 @@ -225,7 +283,7 @@ export function NewTaskBranchPickerRouteScreen() {
           ? 16
           : Math.max(insets.bottom, 16) + 16,
       paddingHorizontal: 16,
-      paddingTop: 12,
+      paddingTop: 16,
     }),
     [insets.bottom, usesNativeMailSearchToolbar],
   );
 @@ -327,7 +385,12 @@ export function NewTaskBranchPickerRouteScreen() {
   const branchListHeader =
     flow.workspaceMode === "worktree" ? (
-      <View className="mb-3 overflow-hidden rounded-2xl">
+      <View
+        className={cn(
+          "mb-3 overflow-hidden",
+          Platform.OS === "android" ? "rounded-[28px]" : "rounded-2xl",
+        )}
+      >
         <ToggleRow
           onValueChange={flow.setStartFromOrigin}
           title="Start from origin"
 @@ -339,9 +402,9 @@ export function NewTaskBranchPickerRouteScreen() {
   const branchContent =
     flow.filteredBranches.length === 0 ? (
       <ScrollView
-        className="flex-1 bg-sheet"
+        className={Platform.OS === "android" ? "flex-1 bg-sheet-solid" : "flex-1 bg-sheet"}
         contentInsetAdjustmentBehavior="automatic"
-        contentContainerStyle={{ flexGrow: 1, paddingHorizontal: 16, paddingTop: 12 }}
+        contentContainerStyle={{ flexGrow: 1, paddingHorizontal: 16, paddingTop: 16 }}
         scrollEnabled={false}
         showsVerticalScrollIndicator={false}
       >
 @@ -380,7 +443,7 @@ export function NewTaskBranchPickerRouteScreen() {
         alwaysBounceVertical={false}
         automaticallyAdjustsScrollIndicatorInsets
         automaticallyAdjustKeyboardInsets={Platform.OS === "ios"}
-        className="flex-1 bg-sheet"
+        className={Platform.OS === "android" ? "flex-1 bg-sheet-solid" : "flex-1 bg-sheet"}
         contentInsetAdjustmentBehavior="automatic"
         contentContainerStyle={branchListContentStyle}
         data={flow.filteredBranches}
 @@ -408,19 +471,27 @@ export function NewTaskBranchPickerRouteScreen() {
     return (
       <View className="flex-1 bg-sheet" collapsable={false}>
         <NativeStackScreenOptions options={{ headerShown: false }} />
-        <AndroidScreenHeader title={screenTitle} onBack={() => navigation.goBack()} />
+        <AndroidScreenHeader
-        <View className="px-4 pb-2 pt-3">
+          title={screenTitle}
+          hideBottomBorder
+          onBack={() => navigation.goBack()}
+        />
+        <View className="bg-header px-4 pb-3 pt-1">
           <TextInput
             autoCapitalize="none"
             autoCorrect={false}
-            className="h-11 rounded-xl bg-card px-4 font-sans text-base text-foreground"
+            accessibilityLabel="Find a branch"
+            className="h-12 rounded-full border border-input-border bg-input px-4 font-sans text-base text-foreground"
+            selectionColorClassName="accent-primary/32"
+            cursorColorClassName="accent-primary"
+            selectionHandleColorClassName="accent-primary"
             onChangeText={flow.setBranchQuery}
             placeholder="Find a branch"
-            placeholderTextColorClassName={"accent-placeholder"}
+            placeholderTextColorClassName="accent-placeholder"
             value={flow.branchQuery}
           />
         </View>
-        {branchContent}
+        <MaterialScreenContent>{branchContent}</MaterialScreenContent>
       </View>
     );
   }

apps/mobile/src/features/threads/NewTaskDraftScreen.tsx+25-16

 @@ -27,12 +27,10 @@ import Animated from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useUniwindTheme } from "../../lib/useUniwindTheme";
 import { useFontFamily } from "../../lib/useFontFamily";
 import {
   PROVIDER_SEND_TURN_MAX_ATTACHMENTS,
   PROVIDER_SEND_TURN_MAX_INPUT_CHARS,
   resolveEnvironmentMachineKind,
-  type EnvironmentId,
 } from "@t3tools/contracts";
 import {
 @@ -51,6 +49,7 @@ import {
   ComposerToolbarRow,
 } from "../../components/ComposerToolbar";
 import { AndroidScreenHeader } from "../../components/AndroidScreenHeader";
+import { MaterialScreenContent } from "../../components/MaterialScreenContent";
 import { ComposerAttachmentButton } from "../../components/ComposerAttachmentButton";
 import { ComposerAttachmentStrip } from "../../components/ComposerAttachmentStrip";
 import { composerStripAttachments } from "../../lib/composerImages";
 @@ -81,7 +80,6 @@ import {
   useThreadSettingsSheetPresentation,
   type NavigationWithFinishTransitioning,
 } from "./use-thread-settings-sheet-presentation";
 import { makeTurnCommandMetadata } from "../../lib/commandMetadata";
 import {
   convertPastedImagesToAttachments,
 @@ -140,7 +138,7 @@ function NewTaskWorkspaceIcon(props: {
       <SymbolView
         name="folder"
         size={16}
-        tintColorClassName={"accent-icon-muted"}
+        tintColorClassName="accent-icon-muted"
         type="monochrome"
       />
     );
 @@ -151,14 +149,14 @@ function NewTaskWorkspaceIcon(props: {
       <SymbolView
         name="folder"
         size={16}
-        tintColorClassName={"accent-icon-muted"}
+        tintColorClassName="accent-icon-muted"
         type="monochrome"
       />
       <View className="absolute -right-1 -bottom-1">
         <SymbolView
           name="arrow.triangle.branch"
           size={9}
-          tintColorClassName={"accent-icon-muted"}
+          tintColorClassName="accent-icon-muted"
           type="monochrome"
         />
       </View>
 @@ -1322,7 +1320,11 @@ export function NewTaskDraftScreen(props: {
         {Platform.OS === "android" ? (
           <>
             <NativeStackScreenOptions options={{ headerShown: false }} />
-            <AndroidScreenHeader title="New Thread" onBack={() => navigation.goBack()} />
+            <AndroidScreenHeader
+              title="New thread"
+              hideBottomBorder
+              onBack={() => navigation.goBack()}
+            />
           </>
         ) : (
           <NativeStackScreenOptions options={{ title: "Loading task" }} />
 @@ -1540,7 +1542,12 @@ export function NewTaskDraftScreen(props: {
   );
   const composerDock = (
-    <View className="bg-sheet px-[12px] pt-1" style={{ paddingBottom: controlsBottomPadding }}>
+    <View
+      className={
+        Platform.OS === "android" ? "bg-sheet-solid px-[12px] pt-1" : "bg-sheet px-[12px] pt-1"
+      }
+      style={{ paddingBottom: controlsBottomPadding }}
+    >
       {!voiceInput.isBusy &&
       composerMenu.trigger &&
       (composerMenu.items.length > 0 || composerMenu.trigger.kind === "pull-request") ? (
 @@ -1754,15 +1761,17 @@ export function NewTaskDraftScreen(props: {
     return (
       <View className="flex-1 bg-sheet" collapsable={false}>
         <NativeStackScreenOptions options={{ headerShown: false }} />
-        <AndroidScreenHeader title="New task" onBack={closeNewTask} />
+        <AndroidScreenHeader title="New thread" hideBottomBorder onBack={closeNewTask} />
-        {heroViewport}
+        <MaterialScreenContent>
+          {heroViewport}
-        <KeyboardStickyView
+          <KeyboardStickyView
-          style={{ position: "absolute", bottom: 0, left: 0, right: 0 }}
+            style={{ position: "absolute", bottom: 0, left: 0, right: 0 }}
-          offset={{ closed: 0, opened: keyboardOpenedOffset }}
+            offset={{ closed: 0, opened: keyboardOpenedOffset }}
-        >
+          >
-          {composerDock}
+            {composerDock}
-        </KeyboardStickyView>
+          </KeyboardStickyView>
+        </MaterialScreenContent>
       </View>
     );
   }

apps/mobile/src/features/threads/NewTaskRouteScreen.tsx+154-91

...	@@ -1,3 +1,4 @@	...	@@ -1,3 +1,4 @@
		1	import { MaterialListRow } from "../../components/MaterialListRow";
1	import { NativeHeaderToolbar, NativeStackScreenOptions } from "../../native/StackHeader";	2	import { NativeHeaderToolbar, NativeStackScreenOptions } from "../../native/StackHeader";
2	import {	3	import {
3	StackActions,	4	StackActions,
...	@@ -8,11 +9,13 @@ import {	...	@@ -8,11 +9,13 @@ import {
8	import { SymbolView } from "../../components/AppSymbol";	9	import { SymbolView } from "../../components/AppSymbol";
9	import type { EnvironmentProject } from "@t3tools/client-runtime/state/shell";	10	import type { EnvironmentProject } from "@t3tools/client-runtime/state/shell";
10	import { useEffect, useRef } from "react";	11	import { useEffect, useRef } from "react";
11	import { ActivityIndicator, Alert, Platform, Pressable, ScrollView, View } from "react-native";	12	import { ActivityIndicator, Alert, Platform, Pressable, View } from "react-native";
12	import { useSafeAreaInsets } from "react-native-safe-area-context";	13	import { useSafeAreaInsets } from "react-native-safe-area-context";
13	import { cn } from "../../lib/cn";	14	import { cn } from "../../lib/cn";
14
15	import { AndroidScreenHeader } from "../../components/AndroidScreenHeader";	15	import { AndroidScreenHeader } from "../../components/AndroidScreenHeader";
		16	import { MaterialScreenContent } from "../../components/MaterialScreenContent";
		17	import { MaterialButton } from "../../components/MaterialButton";
		18	import { ScreenScrollView as ScrollView } from "../../components/ScreenScrollView";
16	import { AppText as Text } from "../../components/AppText";	19	import { AppText as Text } from "../../components/AppText";
17	import { ProjectFavicon } from "../../components/ProjectFavicon";	20	import { ProjectFavicon } from "../../components/ProjectFavicon";
18	import { useProjects } from "../../state/entities";	21	import { useProjects } from "../../state/entities";
...	@@ -183,8 +186,9 @@ export function NewTaskRouteScreen({ route }: StaticScreenProps<NewTaskRoutePara	...	@@ -183,8 +186,9 @@ export function NewTaskRouteScreen({ route }: StaticScreenProps<NewTaskRoutePara
183	<NativeStackScreenOptions options={{ headerShown: false }} />	186	<NativeStackScreenOptions options={{ headerShown: false }} />
184	<AndroidScreenHeader	187	<AndroidScreenHeader
185	title={screenTitle}	188	title={screenTitle}
		189	hideBottomBorder
186	subtitle={incomingShareSubtitle}	190	subtitle={incomingShareSubtitle}
187	onBack={layout.usesSplitView ? () => navigation.goBack() : undefined}	191	onBack={() => navigation.goBack()}
188	actions={	192	actions={
189	catalogState.hasReadyEnvironment	193	catalogState.hasReadyEnvironment
190	? [	194	? [
...	@@ -226,97 +230,156 @@ export function NewTaskRouteScreen({ route }: StaticScreenProps<NewTaskRoutePara	...	@@ -226,97 +230,156 @@ export function NewTaskRouteScreen({ route }: StaticScreenProps<NewTaskRoutePara
226	</>	230	</>
227	)}	231	)}
228		232
229	<ScrollView	233	<MaterialScreenContent>
230	contentInsetAdjustmentBehavior="automatic"	234	<ScrollView
231	showsVerticalScrollIndicator={false}	235	contentInsetAdjustmentBehavior="automatic"
232	className="flex-1"	236	showsVerticalScrollIndicator={false}
233	contentContainerStyle={{	237	className="flex-1"
234	gap: 12,	238	contentContainerStyle={{
235	paddingBottom: Math.max(insets.bottom, 18) + 18,	239	gap: Platform.OS === "android" ? 8 : 12,
236	paddingHorizontal: 20,	240	paddingBottom: Math.max(insets.bottom, 18) + 18,
237	paddingTop: 8,	241	paddingHorizontal: Platform.OS === "android" ? 16 : 20,
238	}}	242	paddingTop: Platform.OS === "android" ? 16 : 8,
239	>	243	...(Platform.OS === "android" && projectScopes.length === 0
240	{projectScopes.length === 0 ? (	244	? { flexGrow: 1, justifyContent: "center" as const }
241	<View collapsable={false} className="items-center gap-3 rounded-[24px] bg-card px-6 py-8">	245	: {}),
242	{projectEmptyState.loading ? (	246	}}
243	<ActivityIndicator colorClassName={"accent-icon-muted"} />	247	>
244	) : null}	248	{projectScopes.length === 0 ? (
245	<Text className="text-center text-lg font-t3-bold text-foreground">	249	<View
246	{projectEmptyState.title}	250	collapsable={false}
247	</Text>	251	className={cn(
248	<Text className="text-center text-sm leading-normal text-foreground-muted">	252	"items-center gap-3 px-6 py-8",
249	{projectEmptyState.detail}	253	Platform.OS !== "android" && "rounded-[24px] bg-card",
250	</Text>	254	)}
251	{!catalogState.hasReadyEnvironment ? (	255	>
252	<Pressable	256	{projectEmptyState.loading ? (
253	className="mt-1 rounded-full bg-primary px-4 py-2.5 active:opacity-70"	257	<ActivityIndicator colorClassName="accent-icon-muted" />
254	onPress={() => navigation.navigate("ConnectionsNew")}	258	) : null}
255	>	259	<Text className="text-center text-lg font-t3-bold text-foreground">
256	<Text className="text-sm font-t3-bold text-primary-foreground">	260	{projectEmptyState.title}
257	Add environment	261	</Text>
258	</Text>	262	<Text className="text-center text-sm leading-normal text-foreground-muted">
259	</Pressable>	263	{projectEmptyState.detail}
260	) : (	264	</Text>
261	<Pressable	265	{Platform.OS === "android" ? (
262	className="mt-1 rounded-full bg-primary px-4 py-2.5 active:opacity-70"	266	<MaterialButton
263	onPress={() => navigation.dispatch(StackActions.push("AddProject"))}	267	label={catalogState.hasReadyEnvironment ? "Add new project" : "Add environment"}
264	>	268	tone="primary"
265	<Text className="text-sm font-t3-bold text-primary-foreground">	269	onPress={() =>
266	Add new project	270	catalogState.hasReadyEnvironment
267	</Text>	271	? navigation.dispatch(StackActions.push("AddProject"))
268	</Pressable>	272	: navigation.navigate("ConnectionsNew")
269	)}	273	}
270	</View>	274	/>
271	) : (	275	) : !catalogState.hasReadyEnvironment ? (
272	<View collapsable={false} className="overflow-hidden rounded-[24px] bg-card">	276	<Pressable
273	{projectScopes.map((scope, scopeIndex) => {	277	className="mt-1 rounded-full bg-primary px-4 py-2.5 active:opacity-70"
274	const hasMultipleProjects = scope.projects.length > 1;	278	onPress={() => navigation.navigate("ConnectionsNew")}
275	const selectionTarget = getProjectScopeSelectionTarget(scope, selectedEnvironmentId);
276	return (
277	<View
278	key={scope.key}
279	className={cn(scopeIndex > 0 && "border-t border-border-subtle")}
280	>	279	>
281	<Pressable	280	<Text className="text-sm font-t3-bold text-primary-foreground">
282	disabled={reservedDestinationProject !== null}	281	Add environment
283	onPress={() => void selectProject(selectionTarget)}	282	</Text>
284	className="flex-row items-center gap-3 bg-card px-4 py-3.5"	283	</Pressable>
285	>	284	) : (
286	<View className="h-7 w-7 items-center justify-center">	285	<Pressable
287	<ProjectFavicon	286	className="mt-1 rounded-full bg-primary px-4 py-2.5 active:opacity-70"
288	environmentId={scope.representative.environmentId}	287	onPress={() => navigation.dispatch(StackActions.push("AddProject"))}
289	faviconPath={scope.representative.faviconPath}	288	>
290	size={20}	289	<Text className="text-sm font-t3-bold text-primary-foreground">
291	projectTitle={scope.title}	290	Add new project
292	workspaceRoot={scope.representative.workspaceRoot}	291	</Text>
293	/>	292	</Pressable>
294	</View>	293	)}
295	<View className="min-w-0 flex-1">	294	</View>
296	<Text className="text-base leading-snug font-t3-bold">{scope.title}</Text>	295	) : (
297	<Text	296	<View
298	className="text-xs leading-snug text-foreground-muted"	297	collapsable={false}
299	ellipsizeMode="middle"	298	className={
300	numberOfLines={1}	299	Platform.OS === "android"
301	>	300	? "overflow-hidden rounded-[28px] bg-card"
302	{hasMultipleProjects	301	: "overflow-hidden rounded-[24px] bg-card"
		302	}
		303	>
		304	{projectScopes.map((scope, scopeIndex) => {
		305	const hasMultipleProjects = scope.projects.length > 1;
		306	const selectionTarget = getProjectScopeSelectionTarget(
		307	scope,
		308	selectedEnvironmentId,
		309	);
		310	if (Platform.OS === "android") {
		311	return (
		312	<MaterialListRow
		313	key={scope.key}
		314	title={scope.title}
		315	subtitle={
		316	hasMultipleProjects
303	? `${scope.projects.length} workspaces`	317	? `${scope.projects.length} workspaces`
304	: selectionTarget.workspaceRoot}	318	: selectionTarget.workspaceRoot
305	</Text>	319	}
306	</View>	320	disabled={reservedDestinationProject !== null}
307	<SymbolView	321	onPress={() => void selectProject(selectionTarget)}
308	name="chevron.right"	322	leading={
309	size={14}	323	<ProjectFavicon
310	tintColorClassName={"accent-chevron"}	324	environmentId={scope.representative.environmentId}
311	type="monochrome"	325	faviconPath={scope.representative.faviconPath}
		326	size={24}
		327	projectTitle={scope.title}
		328	workspaceRoot={scope.representative.workspaceRoot}
		329	/>
		330	}
312	/>	331	/>
313	</Pressable>	332	);
314	</View>	333	}
315	);	334	return (
316	})}	335	<View
317	</View>	336	key={scope.key}
318	)}	337	className={cn(scopeIndex > 0 && "border-t border-border-subtle")}
319	</ScrollView>	338	>
		339	<Pressable
		340	accessibilityRole="button"
		341	accessibilityLabel={scope.title}
		342	disabled={reservedDestinationProject !== null}
		343	onPress={() => void selectProject(selectionTarget)}
		344	className="flex-row items-center gap-3 bg-card px-4 py-3.5"
		345	>
		346	<View className="h-7 w-7 items-center justify-center">
		347	<ProjectFavicon
		348	environmentId={scope.representative.environmentId}
		349	faviconPath={scope.representative.faviconPath}
		350	size={20}
		351	projectTitle={scope.title}
		352	workspaceRoot={scope.representative.workspaceRoot}
		353	/>
		354	</View>
		355	<View className="min-w-0 flex-1">
		356	<Text className={cn("text-base leading-snug", "font-t3-bold")}>
		357	{scope.title}
		358	</Text>
		359	<Text
		360	className="text-xs leading-snug text-foreground-muted"
		361	ellipsizeMode="middle"
		362	numberOfLines={1}
		363	>
		364	{hasMultipleProjects
		365	? `${scope.projects.length} workspaces`
		366	: selectionTarget.workspaceRoot}
		367	</Text>
		368	</View>
		369	<SymbolView
		370	name="chevron.right"
		371	size={14}
		372	tintColorClassName="accent-chevron"
		373	type="monochrome"
		374	/>
		375	</Pressable>
		376	</View>
		377	);
		378	})}
		379	</View>
		380	)}
		381	</ScrollView>
		382	</MaterialScreenContent>
320	</View>	383	</View>
321	);	384	);
322	}	385	}

apps/mobile/src/features/threads/ThreadComposer.tsx+8-12

 @@ -49,6 +49,7 @@ import Animated, {
   withTiming,
 } from "react-native-reanimated";
 import { useUniwindTheme } from "../../lib/useUniwindTheme";
+import { themeColorWithAlpha } from "../../lib/mobileTheme";
 import { armAgentAwarenessLiveActivityForLocalWork } from "../agent-awareness/remoteRegistration";
 import { scopedThreadKey } from "../../lib/scopedEntities";
 import {
 @@ -208,7 +209,6 @@ export function ComposerSurface(props: {
   /** Morphs between the compact and expanded composer layouts. */
   readonly animateLayout?: boolean;
 }) {
-  const { materialYouStyleLayoutActive } = useAppearancePreferences();
   const colors = useUniwindTheme();
   const targetBorderRadius =
     typeof props.style.borderRadius === "number" ? props.style.borderRadius : 0;
 @@ -232,27 +232,23 @@ export function ComposerSurface(props: {
   return (
     <Animated.View
       className={
-        materialYouStyleLayoutActive
+        Platform.OS === "android" ? undefined : "shadow-[0_6px_28px] shadow-adaptive-black-a15-a35"
-          ? undefined
-          : "shadow-[0_6px_28px] shadow-adaptive-black-a15-a35"
       }
       layout={layoutTransition}
       style={[
         animatedShapeStyle,
         {
           overflow: "hidden",
-          // Android versions before 9 do not support outset box shadows.
-          elevation: Platform.OS === "android" && Platform.Version < 28 ? 10 : undefined,
         },
       ]}
     >
       <AnimatedGlassSurface
         chrome="none"
         fallbackColor={
-          materialYouStyleLayoutActive ? colors["--color-composer-surface"] : colors["--color-card"]
+          Platform.OS === "android" ? colors["--color-composer-surface"] : colors["--color-card"]
         }
         fallbackClassName={
-          materialYouStyleLayoutActive ? "border border-composer-border" : "border border-border"
+          Platform.OS === "android" ? "border border-composer-border" : "border border-border"
         }
         glassEffectStyle="regular"
         // The composer is a passive material containing interactive controls.
 @@ -277,8 +273,7 @@ export function ComposerSurface(props: {
 export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposerProps) {
   const project = useProject(scopeProjectRef(props.environmentId, props.selectedThread.projectId));
-  const { materialYouStyleLayoutActive, themeVariables: materialTheme } =
+  const { themeVariables: materialTheme } = useAppearancePreferences();
-    useAppearancePreferences();
   const composerPanel = materialTheme["--color-composer-panel"];
   const navigation = useNavigation();
   const foregroundColor = useUniwindTheme()["--color-foreground"];
 @@ -627,7 +622,8 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
       style={{
         paddingTop: isExpanded ? 8 : 6,
         paddingBottom: (props.bottomInset ?? 0) + (isExpanded ? 8 : 6),
-        backgroundColor: materialYouStyleLayoutActive ? composerPanel : undefined,
+        backgroundColor:
+          Platform.OS === "android" ? themeColorWithAlpha(composerPanel, 1) : undefined,
       }}
     >
       {/* The backdrop gradient lives on a plain View: Reanimated's Animated.View
 @@ -635,7 +631,7 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
           strip fully transparent and the feed text legible through the composer. */}
       <View
         className={
-          materialYouStyleLayoutActive
+          Platform.OS === "android"
             ? "hidden"
             : "absolute inset-0 bg-linear-to-b from-screen/0 via-screen/60 to-screen/90"
         }

apps/mobile/src/features/threads/ThreadDetailScreen.tsx+40-47

...	@@ -27,8 +27,6 @@ import type {	...	@@ -27,8 +27,6 @@ import type {
27	UserInputQuestion,	27	UserInputQuestion,
28	} from "@t3tools/contracts";	28	} from "@t3tools/contracts";
29	import * as Haptics from "expo-haptics";	29	import * as Haptics from "expo-haptics";
30	import { BlurTargetView } from "expo-blur";
31	import { GlassBlurTargetContext } from "../../lib/glassBlurTarget";
32	import {	30	import {
33	memo,	31	memo,
34	useCallback,	32	useCallback,
...	@@ -65,7 +63,6 @@ import Animated, {	...	@@ -65,7 +63,6 @@ import Animated, {
65	} from "react-native-reanimated";	63	} from "react-native-reanimated";
66	import { useSafeAreaInsets } from "react-native-safe-area-context";	64	import { useSafeAreaInsets } from "react-native-safe-area-context";
67	import { useWorkspaceContentWidth } from "../layout/workspace-content-width";	65	import { useWorkspaceContentWidth } from "../layout/workspace-content-width";
68
69	import { useAppearancePreferences } from "../settings/appearance/AppearancePreferencesProvider";	66	import { useAppearancePreferences } from "../settings/appearance/AppearancePreferencesProvider";
70	import { collectProviderUsageLimits } from "@t3tools/shared/usageLimits";	67	import { collectProviderUsageLimits } from "@t3tools/shared/usageLimits";
71	import type { ComposerEditorHandle } from "../../components/ComposerEditor";	68	import type { ComposerEditorHandle } from "../../components/ComposerEditor";
...	@@ -819,7 +816,7 @@ export const ThreadDetailScreen = memo(function ThreadDetailScreen(props: Thread	...	@@ -819,7 +816,7 @@ export const ThreadDetailScreen = memo(function ThreadDetailScreen(props: Thread
819	}, [freeze, scrollMessageToEnd]);	816	}, [freeze, scrollMessageToEnd]);
820		817
821	const showScrollToEndButton = contentPresentationKind === "ready" && !endFollowEnabled;	818	const showScrollToEndButton = contentPresentationKind === "ready" && !endFollowEnabled;
822	const { themeAppearance, materialYouStyleLayoutActive } = useAppearancePreferences();	819	const { themeAppearance } = useAppearancePreferences();
823	const isDarkMode = themeAppearance === "dark";	820	const isDarkMode = themeAppearance === "dark";
824		821
825	const handleFeedTouchStart = useCallback((event: GestureResponderEvent) => {	822	const handleFeedTouchStart = useCallback((event: GestureResponderEvent) => {
...	@@ -851,13 +848,11 @@ export const ThreadDetailScreen = memo(function ThreadDetailScreen(props: Thread	...	@@ -851,13 +848,11 @@ export const ThreadDetailScreen = memo(function ThreadDetailScreen(props: Thread
851	const handleFeedTouchCancel = useCallback(() => {	848	const handleFeedTouchCancel = useCallback(() => {
852	feedTouchStartRef.current = null;	849	feedTouchStartRef.current = null;
853	}, []);	850	}, []);
854	const feedBlurTarget = useRef<View>(null);
855		851
856	return (	852	return (
857	<View className="flex-1">	853	<View className="flex-1">
858	{showContent ? (	854	{showContent ? (
859	<BlurTargetView	855	<View
860	ref={feedBlurTarget}
861	style={{ flex: 1 }}	856	style={{ flex: 1 }}
862	onTouchStart={handleFeedTouchStart}	857	onTouchStart={handleFeedTouchStart}
863	onTouchMove={handleFeedTouchMove}	858	onTouchMove={handleFeedTouchMove}
...	@@ -867,7 +862,7 @@ export const ThreadDetailScreen = memo(function ThreadDetailScreen(props: Thread	...	@@ -867,7 +862,7 @@ export const ThreadDetailScreen = memo(function ThreadDetailScreen(props: Thread
867	<View	862	<View
868	pointerEvents="none"	863	pointerEvents="none"
869	className={	864	className={
870	materialYouStyleLayoutActive	865	Platform.OS === "android"
871	? "absolute inset-0 bg-thread-canvas"	866	? "absolute inset-0 bg-thread-canvas"
872	: "absolute inset-0 bg-screen"	867	: "absolute inset-0 bg-screen"
873	}	868	}
...	@@ -903,7 +898,7 @@ export const ThreadDetailScreen = memo(function ThreadDetailScreen(props: Thread	...	@@ -903,7 +898,7 @@ export const ThreadDetailScreen = memo(function ThreadDetailScreen(props: Thread
903	onUseArtifactTemplate={handleUseArtifactTemplate}	898	onUseArtifactTemplate={handleUseArtifactTemplate}
904	loadEarlier={props.loadEarlier ?? null}	899	loadEarlier={props.loadEarlier ?? null}
905	/>	900	/>
906	</BlurTargetView>	901	</View>
907	) : (	902	) : (
908	<View className="flex-1" />	903	<View className="flex-1" />
909	)}	904	)}
...	@@ -1025,44 +1020,42 @@ export const ThreadDetailScreen = memo(function ThreadDetailScreen(props: Thread	...	@@ -1025,44 +1020,42 @@ export const ThreadDetailScreen = memo(function ThreadDetailScreen(props: Thread
1025	: undefined	1020	: undefined
1026	}	1021	}
1027	>	1022	>
1028	<GlassBlurTargetContext value={feedBlurTarget}>	1023	<ThreadComposer
1029	<ThreadComposer	1024	editorRef={composerEditorRef}
1030	editorRef={composerEditorRef}	1025	draftMessage={props.draftMessage}
1031	draftMessage={props.draftMessage}	1026	draftAttachments={props.draftAttachments}
1032	draftAttachments={props.draftAttachments}	1027	placeholder="Ask the repo agent, or run a command…"
1033	placeholder="Ask the repo agent, or run a command…"	1028	contentMaxWidth={contentMaxWidth}
1034	contentMaxWidth={contentMaxWidth}	1029	connectionState={props.connectionStateLabel}
1035	connectionState={props.connectionStateLabel}	1030	environmentLabel={props.environmentLabel}
1036	environmentLabel={props.environmentLabel}	1031	selectedThread={props.selectedThread}
1037	selectedThread={props.selectedThread}	1032	hasCompactableConversation={hasCompactableConversation && !props.isCompacting}
1038	hasCompactableConversation={hasCompactableConversation && !props.isCompacting}	1033	serverConfig={props.serverConfig}
1039	serverConfig={props.serverConfig}	1034	queueCount={props.selectedThreadQueueCount}
1040	queueCount={props.selectedThreadQueueCount}	1035	environmentId={props.environmentId}
1041	environmentId={props.environmentId}	1036	projectCwd={props.threadCwd ?? props.projectWorkspaceRoot}
1042	projectCwd={props.threadCwd ?? props.projectWorkspaceRoot}	1037	// Follow-ups typed during setup wait in the draft: queueing
1043	// Follow-ups typed during setup wait in the draft: queueing	1038	// them against a thread id the server may still reject
1044	// them against a thread id the server may still reject	1039	// would strand them in the outbox.
1045	// would strand them in the outbox.	1040	sendBlockedReason={
1046	sendBlockedReason={	1041	props.creationState?.kind === "preparing" ? "Starting the task…" : null
1047	props.creationState?.kind === "preparing" ? "Starting the task…" : null	1042	}
1048	}	1043	bottomInset={composerBottomInset}
1049	bottomInset={composerBottomInset}	1044	onChangeDraftMessage={props.onChangeDraftMessage}
1050	onChangeDraftMessage={props.onChangeDraftMessage}	1045	onPickDraftMedia={props.onPickDraftMedia}
1051	onPickDraftMedia={props.onPickDraftMedia}	1046	onPickDraftFiles={props.onPickDraftFiles}
1052	onPickDraftFiles={props.onPickDraftFiles}	1047	onNativePasteImages={props.onNativePasteImages}
1053	onNativePasteImages={props.onNativePasteImages}	1048	onNativePasteText={props.onNativePasteText}
1054	onNativePasteText={props.onNativePasteText}	1049	onRemoveDraftImage={props.onRemoveDraftImage}
1055	onRemoveDraftImage={props.onRemoveDraftImage}	1050	onStopThread={props.onStopThread}
1056	onStopThread={props.onStopThread}	1051	onSendMessage={handleSendMessage}
1057	onSendMessage={handleSendMessage}	1052	onShowUsageLimits={showUsageLimits}
1058	onShowUsageLimits={showUsageLimits}	1053	onUpdateModelSelection={props.onUpdateThreadModelSelection}
1059	onUpdateModelSelection={props.onUpdateThreadModelSelection}	1054	onUpdateRuntimeMode={props.onUpdateThreadRuntimeMode}
1060	onUpdateRuntimeMode={props.onUpdateThreadRuntimeMode}	1055	onUpdateInteractionMode={props.onUpdateThreadInteractionMode}
1061	onUpdateInteractionMode={props.onUpdateThreadInteractionMode}	1056	onExpandedChange={setComposerExpanded}
1062	onExpandedChange={setComposerExpanded}	1057	onEditorFocusChange={handleComposerFocusChange}
1063	onEditorFocusChange={handleComposerFocusChange}	1058	/>
1064	/>
1065	</GlassBlurTargetContext>
1066	</View>	1059	</View>
1067	</View>	1060	</View>
1068	</Animated.View>	1061	</Animated.View>

apps/mobile/src/features/threads/ThreadFeed.tsx+1

...	@@ -880,6 +880,7 @@ function MarkdownCodeBlock(props: {	...	@@ -880,6 +880,7 @@ function MarkdownCodeBlock(props: {
880	>	880	>
881	<NativeText	881	<NativeText
882	selectable	882	selectable
		883	selectionColorClassName={Platform.OS === "android" ? "accent-primary/32" : undefined}
883	className="font-mono"	884	className="font-mono"
884	style={{	885	style={{
885	color: props.textColor,	886	color: props.textColor,

apps/mobile/src/features/threads/ThreadNavigationSidebar.tsx+146-126

 @@ -65,6 +65,9 @@ import {
   WorkspaceConnectionTitle,
 } from "../home/WorkspaceConnectionTitle";
 import { SidebarHeaderActions } from "./sidebar-header-actions";
+import { MaterialThreadListToolbar } from "../home/MaterialThreadListToolbar";
+import { useMaterialToolbarHeight } from "../../components/useMaterialToolbarHeight";
+import { useMaterialFabScroll } from "../home/MaterialFabScrollContext";
 import { SidebarFilterButton } from "./sidebar-filter-button";
 import { createSidebarHeaderItems } from "./sidebar-native-header-items";
 import { SidebarNavigationShell } from "./sidebar-navigation-shell";
 @@ -147,10 +150,8 @@ function NativeSidebarContainer(props: ThreadNavigationSidebarProps) {
 function ThreadNavigationSidebarPane(
   props: ThreadNavigationSidebarProps & { readonly nativeChrome: boolean },
 ) {
-  const { materialYouStyleLayoutActive, themeVariables: materialTheme } =
+  const { themeVariables: materialTheme } = useAppearancePreferences();
-    useAppearancePreferences();
   const screenColor = materialTheme["--color-screen"];
-  const mutedColor = materialTheme["--color-foreground-muted"];
   const insets = useSafeAreaInsets();
   const projects = useProjects();
 @@ -747,13 +748,18 @@ function ThreadNavigationSidebarPane(
   );
   const [measuredHeaderHeight, setMeasuredHeaderHeight] = useState<number | null>(null);
+  const materialToolbarHeight = useMaterialToolbarHeight();
   // The sticky header (title row, search field, optional connection status)
   // is measured so the list inset always matches its real height — no
   // hardcoded per-variant constants.
-  const stickyHeaderHeight = measuredHeaderHeight ?? insets.top + SIDEBAR_STICKY_HEADER_HEIGHT;
+  const stickyHeaderHeight =
+    measuredHeaderHeight ??
+    (Platform.OS === "android"
+      ? Math.max(insets.top, 12) + materialToolbarHeight + 8
+      : insets.top + SIDEBAR_STICKY_HEADER_HEIGHT);
   const topListInset = stickyHeaderHeight + 6;
   const handleStickyHeaderLayout = useCallback((event: LayoutChangeEvent) => {
-    const nextHeight = Math.round(event.nativeEvent.layout.height);
+    const nextHeight = event.nativeEvent.layout.height;
     setMeasuredHeaderHeight((current) => (current === nextHeight ? current : nextHeight));
   }, []);
   const handleSwipeableWillOpen = useCallback((methods: SwipeableMethods) => {
 @@ -777,7 +783,9 @@ function ThreadNavigationSidebarPane(
   const handleScrollBeginDrag = useCallback(() => {
     openSwipeableRef.current?.close();
   }, []);
+  const onMaterialFabScroll = useMaterialFabScroll();
   const { swipeEnabled, scrollGateHandlers } = useSwipeableScrollGate({
+    onScroll: onMaterialFabScroll,
     onScrollBeginDrag: handleScrollBeginDrag,
   });
   // Project shells load after the first rows draw, so the maps they feed have
 @@ -850,6 +858,7 @@ function ThreadNavigationSidebarPane(
     [],
   );
   const focusSearch = useCallback(() => {
+    if (Platform.OS === "android") return false;
     const focus = () => {
       if (props.nativeChrome) {
         searchBarRef.current?.focus();
 @@ -925,7 +934,7 @@ function ThreadNavigationSidebarPane(
                 }),
               )}
               searchQuery={props.searchQuery}
-              pane={materialYouStyleLayoutActive ? "screen" : "sidebar"}
+              pane={Platform.OS === "android" ? "screen" : "sidebar"}
               selected={
                 scopedThreadKey(thread.environmentId, thread.id) === props.selectedThreadKey
               }
 @@ -966,7 +975,7 @@ function ThreadNavigationSidebarPane(
               disabled={!shelfPreferencesLoaded}
               expanded={item.expanded}
               onToggle={toggleSnoozedShelf}
-              pane={materialYouStyleLayoutActive ? "screen" : "sidebar"}
+              pane={Platform.OS === "android" ? "screen" : "sidebar"}
             />
           );
         case "v2-settled-shelf":
 @@ -976,7 +985,7 @@ function ThreadNavigationSidebarPane(
               disabled={!shelfPreferencesLoaded}
               expanded={item.expanded}
               onToggle={toggleSettledShelf}
-              pane={materialYouStyleLayoutActive ? "screen" : "sidebar"}
+              pane={Platform.OS === "android" ? "screen" : "sidebar"}
             />
           );
         case "v2-show-more":
 @@ -996,7 +1005,7 @@ function ThreadNavigationSidebarPane(
         case "header":
           return (
             <ThreadListGroupHeader
-              variant={materialYouStyleLayoutActive ? "compact" : "sidebar"}
+              variant={Platform.OS === "android" ? "compact" : "sidebar"}
               collapsed={item.collapsed}
               isFirst={item.isFirst}
               groupKey={item.group.key}
 @@ -1014,7 +1023,7 @@ function ThreadNavigationSidebarPane(
         case "pending-task":
           return (
             <PendingTaskListRow
-              variant={materialYouStyleLayoutActive ? "compact" : "sidebar"}
+              variant={Platform.OS === "android" ? "compact" : "sidebar"}
               pendingTask={item.pendingTask}
               environmentLabel={
                 savedConnectionsById[item.pendingTask.environmentId]?.environmentLabel ?? null
 @@ -1064,7 +1073,7 @@ function ThreadNavigationSidebarPane(
         case "show-more":
           return (
             <ThreadListShowMoreRow
-              variant={materialYouStyleLayoutActive ? "compact" : "sidebar"}
+              variant={Platform.OS === "android" ? "compact" : "sidebar"}
               hiddenCount={item.hiddenCount}
               canShowLess={item.canShowLess}
               groupKey={item.groupKey}
 @@ -1074,7 +1083,6 @@ function ThreadNavigationSidebarPane(
       }
     },
     [
-      materialYouStyleLayoutActive,
       archiveThread,
       activeReorderEnvironmentIds,
       threadMovePlanners,
 @@ -1166,16 +1174,24 @@ function ThreadNavigationSidebarPane(
   // Snoozed threads need no special case: the shelf header is a list row
   // even while collapsed.
   const listEmpty = (
-    <Text className="px-2 py-4 text-sm text-foreground-muted">
+    <Text
+      className={
+        Platform.OS === "android"
+          ? "px-4 py-4 text-center text-sm text-foreground-muted"
+          : "px-2 py-4 text-sm text-foreground-muted"
+      }
+    >
       {catalogState.isLoadingConnections
         ? "Loading threads…"
-        : props.searchQuery.trim().length > 0
+        : Platform.OS === "android" && !catalogState.hasConnections
-          ? threadSearch.isPending
+          ? "No environments connected"
-            ? "Searching thread messages…"
+          : props.searchQuery.trim().length > 0
-            : "No matching threads"
+            ? threadSearch.isPending
-          : selectedProjectScope !== null
+              ? "Searching thread messages…"
-            ? `No threads in ${selectedProjectScope.title}`
+              : "No matching threads"
-            : "No threads yet"}
+            : selectedProjectScope !== null
+              ? `No threads in ${selectedProjectScope.title}`
+              : "No threads yet"}
     </Text>
   );
 @@ -1232,7 +1248,7 @@ function ThreadNavigationSidebarPane(
                 }
                 contentContainerStyle={[
                   styles.threadListContent,
-                  materialYouStyleLayoutActive ? { paddingHorizontal: 0 } : null,
+                  Platform.OS === "android" ? { paddingHorizontal: 0 } : null,
                   {
                     paddingBottom: Math.max(insets.bottom, 16) + 16,
                     paddingTop: 6,
 @@ -1257,15 +1273,18 @@ function ThreadNavigationSidebarPane(
   return (
     <View
       testID="thread-navigation-sidebar"
-      className="flex-1 border-r border-border bg-drawer"
+      className={
+        Platform.OS === "android" ? "flex-1 bg-header" : "flex-1 border-r border-border bg-drawer"
+      }
       style={{ width: props.width }}
     >
       <View
         className="flex-1"
         style={
-          materialYouStyleLayoutActive
+          Platform.OS === "android"
             ? {
                 marginTop: stickyHeaderHeight,
+                marginHorizontal: 4,
                 paddingBottom: insets.bottom,
                 backgroundColor: screenColor,
                 borderTopLeftRadius: 28,
 @@ -1275,116 +1294,117 @@ function ThreadNavigationSidebarPane(
             : { paddingBottom: insets.bottom }
         }
       >
-        <SwipeableScrollGateProvider enabled={swipeEnabled}>
+        {Platform.OS === "android" && listItems.length === 0 ? (
-          <GestureDetector gesture={sidebarScrollGesture}>
+          <View className="flex-1 items-center justify-center">{listEmpty}</View>
-            <LegendList
+        ) : (
-              data={listItems}
+          <SwipeableScrollGateProvider enabled={swipeEnabled}>
-              drawDistance={500}
+            <GestureDetector gesture={sidebarScrollGesture}>
-              estimatedItemSize={64}
+              <LegendList
-              extraData={listExtraData}
+                data={listItems}
-              getItemType={(item) => item.type}
+                drawDistance={500}
-              itemsAreEqual={sidebarItemsAreEqual}
+                estimatedItemSize={64}
-              keyExtractor={(item) => item.key}
+                extraData={listExtraData}
-              renderItem={renderListItem}
+                getItemType={(item) => item.type}
-              contentContainerStyle={[
+                itemsAreEqual={sidebarItemsAreEqual}
-                styles.threadListContent,
+                keyExtractor={(item) => item.key}
-                materialYouStyleLayoutActive ? { paddingHorizontal: 0 } : null,
+                renderItem={renderListItem}
-                {
+                contentContainerStyle={[
-                  paddingBottom:
+                  styles.threadListContent,
-                    Platform.OS === "android"
+                  Platform.OS === "android" ? { paddingHorizontal: 0 } : null,
-                      ? Math.max(insets.bottom, 16) + 88 - insets.bottom
+                  {
-                      : 16 + insets.bottom,
+                    paddingBottom:
-                  paddingTop: materialYouStyleLayoutActive ? 6 : topListInset,
+                      Platform.OS === "android"
-                },
+                        ? Math.max(insets.bottom, 16) + 148 - insets.bottom
-              ]}
+                        : 16 + insets.bottom,
-              keyboardDismissMode="on-drag"
+                    paddingTop: Platform.OS === "android" ? 6 : topListInset,
-              keyboardShouldPersistTaps="handled"
+                  },
-              {...scrollGateHandlers}
+                ]}
-              recycleItems
+                keyboardDismissMode="on-drag"
-              scrollEventThrottle={16}
+                keyboardShouldPersistTaps="handled"
-              showsVerticalScrollIndicator={false}
+                {...scrollGateHandlers}
-              style={styles.threadList}
+                recycleItems
-              ListEmptyComponent={listEmpty}
+                scrollEventThrottle={16}
-            />
+                showsVerticalScrollIndicator={false}
-          </GestureDetector>
+                style={styles.threadList}
-        </SwipeableScrollGateProvider>
+                ListEmptyComponent={listEmpty}
+              />
+            </GestureDetector>
+          </SwipeableScrollGateProvider>
+        )}
       </View>
-      <View
+      {Platform.OS === "android" ? (
-        className="absolute inset-x-0 top-0 z-[4] bg-drawer"
+        <MaterialThreadListToolbar
-        collapsable={false}
+          sidebar
-        onLayout={handleStickyHeaderLayout}
+          onLayout={handleStickyHeaderLayout}
-        pointerEvents="auto"
+          searchQuery={props.searchQuery}
-        style={{ paddingTop: insets.top }}
+          onSearchQueryChange={props.onSearchQueryChange}
-      >
+          filterActions={listMenuActions}
-        <View className="h-[50px] flex-row items-end gap-0.5 pr-2 pl-5">
+          filterCustomized={filterCustomized}
-          {/* Title slot doubles as the connection status surface: while an
+          onFilterAction={handleListMenuAction}
+          onOpenSettings={props.onOpenSettings}
+          onOpenEnvironments={props.onOpenEnvironmentSettings}
+          onRequestVisibility={props.onRequestVisibility}
+        />
+      ) : (
+        <View
+          className="absolute inset-x-0 top-0 z-[4] bg-drawer"
+          collapsable={false}
+          onLayout={handleStickyHeaderLayout}
+          pointerEvents="auto"
+          style={{ paddingTop: insets.top }}
+        >
+          <View className="h-[50px] flex-row items-end gap-0.5 pr-2 pl-5">
+            {/* Title slot doubles as the connection status surface: while an
               environment reconnects, the brand fades to a status label in
               place (no layout shift in the list below). */}
-          <WorkspaceConnectionTitle
+            <WorkspaceConnectionTitle
-            grow
+              grow
-            onPress={props.onOpenEnvironmentSettings}
+              onPress={props.onOpenEnvironmentSettings}
-            size="pageTitle"
+              size="pageTitle"
-            brand={
+              brand={
-              <View className="h-11 flex-1 justify-center">
+                <View className="h-11 flex-1 justify-center">
-                <CompactBrandTitle allowFontScaling={false} />
+                  <CompactBrandTitle allowFontScaling={false} />
-              </View>
+                </View>
-            }
+              }
-          />
+            />
-          <View className="flex-row items-center gap-2.5">
+            <View className="flex-row items-center gap-2.5">
-            <ControlPillMenu actions={listMenuActions} onPressAction={handleListMenuAction}>
+              <ControlPillMenu actions={listMenuActions} onPressAction={handleListMenuAction}>
-              <SidebarFilterButton accessibilityLabel="Filter and sort threads" icon={filterIcon} />
+                <SidebarFilterButton
-            </ControlPillMenu>
+                  accessibilityLabel="Filter and sort threads"
-            <SidebarHeaderActions onOpenSettings={props.onOpenSettings} />
+                  icon={filterIcon}
+                />
+              </ControlPillMenu>
+              <SidebarHeaderActions onOpenSettings={props.onOpenSettings} />
+            </View>
           </View>
-        </View>
-        <View
+          <View className="mx-4 mt-[9px] h-[38px] flex-row items-center gap-1.5 rounded-xl bg-sidebar-search pr-2.5 pl-[11px]">
-          className={
+            <SymbolView
-            materialYouStyleLayoutActive
+              name="magnifyingglass"
-              ? "mx-4 mt-[9px] min-h-12 flex-row items-center gap-2.5 rounded-full border border-input-border bg-input px-3.5"
+              size={15}
-              : "mx-4 mt-[9px] h-[38px] flex-row items-center gap-1.5 rounded-xl bg-sidebar-search pr-2.5 pl-[11px]"
+              tintColorClassName="accent-foreground-muted"
-          }
+              type="monochrome"
-        >
+            />
-          <SymbolView
+            <TextInput
-            name="magnifyingglass"
+              ref={searchInputRef}
-            size={15}
+              accessibilityLabel="Search threads"
-            tintColorClassName={"accent-foreground-muted"}
+              autoCapitalize="none"
-            type="monochrome"
+              autoCorrect={false}
-          />
+              clearButtonMode="while-editing"
-          <TextInput
+              onChangeText={props.onSearchQueryChange}
-            ref={searchInputRef}
+              placeholder="Search"
-            accessibilityLabel="Search threads"
+              placeholderTextColorClassName="accent-placeholder"
-            autoCapitalize="none"
+              selectionColorClassName={undefined}
-            autoCorrect={false}
+              cursorColorClassName={undefined}
-            clearButtonMode={materialYouStyleLayoutActive ? "never" : "while-editing"}
+              selectionHandleColorClassName={undefined}
-            onChangeText={props.onSearchQueryChange}
+              returnKeyType="search"
-            placeholder="Search"
+              className="h-[34px] flex-1 px-0 py-0 font-sans text-base text-foreground"
-            placeholderTextColorClassName={"accent-placeholder"}
+              value={props.searchQuery}
-            returnKeyType="search"
+            />
-            className={
+          </View>
-              materialYouStyleLayoutActive
-                ? "flex-1 px-0 py-2.5 font-sans text-base text-foreground"
-                : "h-[34px] flex-1 px-0 py-0 font-sans text-base text-foreground"
-            }
-            value={props.searchQuery}
-          />
-          {materialYouStyleLayoutActive && props.searchQuery.length > 0 ? (
-            <Pressable
-              accessibilityLabel="Clear search"
-              hitSlop={10}
-              onPress={() => props.onSearchQueryChange("")}
-            >
-              <SymbolView
-                name="xmark.circle.fill"
-                size={17}
-                tintColor={mutedColor}
-                type="monochrome"
-              />
-            </Pressable>
-          ) : null}
         </View>
-      </View>
+      )}
     </View>
   );
 }

apps/mobile/src/features/threads/ThreadRouteScreen.tsx+29-21

 @@ -32,17 +32,17 @@ import { recoverFailedThreadDraft } from "../../state/recover-failed-thread-draf
 import { useEnvironmentQuery } from "../../state/query";
 import { dismissGitActionResult, useGitActionProgress } from "../../state/use-vcs-action-state";
 import { vcsEnvironment } from "../../state/vcs";
 import { EmptyState } from "../../components/EmptyState";
 import {
+  AndroidHeaderIconButton,
   AndroidScreenHeader,
   type AndroidHeaderAction,
 } from "../../components/AndroidScreenHeader";
+import { AndroidWorkspaceSidebarButton } from "../layout/workspace-sidebar-toolbar";
 import { LoadingScreen } from "../../components/LoadingScreen";
 import { scopedThreadKey } from "../../lib/scopedEntities";
 import { NATIVE_LIQUID_GLASS_SUPPORTED } from "../../native/native-glass";
 import { connectionTone } from "../connection/connectionTone";
 import {
   useRemoteConnections,
   useRemoteConnectionStatus,
 @@ -225,7 +225,7 @@ function ThreadRouteContent(
     readonly selectedThreadDetailState: ReturnType<typeof useSelectedThreadDetailState>;
   },
 ) {
-  const { materialYouStyleLayoutActive, themeVariables } = useAppearancePreferences();
+  const { themeVariables } = useAppearancePreferences();
   const headerColor = themeVariables["--color-header"];
   const {
     fileInspector,
 @@ -746,10 +746,12 @@ function ThreadRouteContent(
       });
     }
     if (selectedThreadCwd !== null) {
+      const filesVisible = inspectorMode === "files" && panes.auxiliaryPaneVisible;
       actions.push({
-        accessibilityLabel: "Open files",
+        accessibilityLabel: filesVisible ? "Close files" : "Open files",
+        selected: filesVisible,
         icon: "folder",
-        onPress: handleOpenFilesInspector,
+        onPress: filesVisible ? toggleAuxiliaryPane : handleOpenFilesInspector,
       });
     }
     if (selectedThreadProject?.workspaceRoot) {
 @@ -764,20 +766,14 @@ function ThreadRouteContent(
       icon: "point.topleft.down.curvedto.point.bottomright.up",
       onPress: handleOpenGitInspector,
     });
-    if (fileInspector.supported && selectedThreadCwd !== null) {
-      actions.push({
-        accessibilityLabel: "Toggle inspector",
-        icon: "sidebar.right",
-        onPress: handleToggleInspector,
-      });
-    }
     return actions;
   }, [
-    fileInspector.supported,
+    inspectorMode,
+    panes.auxiliaryPaneVisible,
     handleOpenFilesInspector,
     handleOpenTerminal,
     handleOpenGitInspector,
-    handleToggleInspector,
+    toggleAuxiliaryPane,
     props.onReturnToThread,
     selectedThreadCwd,
     selectedThreadProject?.workspaceRoot,
 @@ -891,13 +887,12 @@ function ThreadRouteContent(
       <GitActionProgressOverlay progress={gitActionProgress} onDismiss={dismissGitActionResult} />
       <View
-        className={materialYouStyleLayoutActive ? "flex-1 bg-thread-canvas" : "flex-1 bg-screen"}
+        className={Platform.OS === "android" ? "flex-1 bg-thread-canvas" : "flex-1 bg-screen"}
         style={
-          materialYouStyleLayoutActive
+          Platform.OS === "android"
             ? {
                 borderTopLeftRadius: 28,
                 borderTopRightRadius: 28,
-                marginRight: layout.usesSplitView ? 8 : 0,
                 overflow: "hidden",
               }
             : undefined
 @@ -996,9 +991,7 @@ function ThreadRouteContent(
               : undefined,
           unstable_headerSubtitle: usesNativeHeaderGlass ? headerSubtitle : undefined,
           contentStyle:
-            Platform.OS === "android" && materialYouStyleLayoutActive
+            Platform.OS === "android" && true ? { backgroundColor: headerColor } : undefined,
-              ? { backgroundColor: headerColor }
-              : undefined,
         }}
       />
 @@ -1006,6 +999,21 @@ function ThreadRouteContent(
         <AndroidScreenHeader
           title={selectedThread.title}
           subtitle={headerSubtitle}
+          leading={<AndroidWorkspaceSidebarButton />}
+          trailing={
+            fileInspector.supported && selectedThreadCwd !== null ? (
+              <AndroidHeaderIconButton
+                accessibilityLabel={
+                  inspectorMode !== null && panes.auxiliaryPaneVisible
+                    ? "Hide inspector"
+                    : "Show inspector"
+                }
+                icon="sidebar.right"
+                selected={inspectorMode !== null && panes.auxiliaryPaneVisible}
+                onPress={handleToggleInspector}
+              />
+            ) : null
+          }
           onBack={
             layout.usesSplitView
               ? undefined
 @@ -1017,7 +1025,7 @@ function ThreadRouteContent(
                 }
           }
           actions={androidHeaderActions}
-          hideBottomBorder={materialYouStyleLayoutActive}
+          hideBottomBorder
         />
       ) : null}

apps/mobile/src/features/threads/ThreadSettingsSheet.tsx+98-41

 @@ -36,6 +36,9 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { SymbolView } from "../../components/AppSymbol";
 import { AppText as Text } from "../../components/AppText";
 import { AndroidScreenHeader } from "../../components/AndroidScreenHeader";
+import { MaterialButton } from "../../components/MaterialButton";
+import { MaterialIconButton } from "../../components/MaterialIconButton";
+import { MaterialRadioIndicator } from "../../components/MaterialRadioIndicator";
 import { ProviderIcon } from "../../components/ProviderIcon";
 import { ThemedSwitch } from "../../components/ThemedSwitch";
 import { cn } from "../../lib/cn";
 @@ -52,7 +55,7 @@ import { NATIVE_LIQUID_GLASS_SUPPORTED } from "../../native/native-glass";
 import { serverEnvironment } from "../../state/server";
 import { useAtomCommand } from "../../state/use-atom-command";
 import { useNewTaskFlow } from "./new-task-flow-provider";
-import { useAppearancePreferences } from "../settings/appearance/AppearancePreferencesProvider";
+import { MaterialScreenContent } from "../../components/MaterialScreenContent";
 import {
   createProviderCatalogRefreshRunner,
   providerCatalogRefreshError,
 @@ -105,8 +108,7 @@ function ModelRow(props: {
   readonly isFirst: boolean;
   readonly isLast: boolean;
 }) {
-  const { materialYouStyleLayoutActive } = useAppearancePreferences();
+  const selectedMaterialRow = Platform.OS === "android" && props.selected;
-  const selectedMaterialRow = materialYouStyleLayoutActive && props.selected;
   return (
     <Pressable
       accessibilityLabel={[props.option.label, props.option.subtitle].filter(Boolean).join(", ")}
 @@ -117,6 +119,7 @@ function ModelRow(props: {
       }}
       disabled={props.option.isUnavailable}
       onPress={props.onPress}
+      style={Platform.OS === "android" ? { minHeight: 56, paddingVertical: 12 } : undefined}
       className={cn(
         "mx-4 min-h-11 flex-row items-center gap-2 bg-card px-4 py-2 active:bg-subtle",
         selectedMaterialRow && "bg-thread-selected",
 @@ -124,11 +127,12 @@ function ModelRow(props: {
         props.isLast ? "rounded-b-2xl" : "border-b border-border-subtle",
       )}
     >
+      {Platform.OS === "android" ? <MaterialRadioIndicator selected={props.selected} /> : null}
       <View className="min-w-0 flex-1">
         <View className="flex-row items-center gap-2">
           <Text
             className="min-w-0 shrink text-base font-t3-medium text-foreground"
-            numberOfLines={1}
+            numberOfLines={Platform.OS === "android" ? 2 : 1}
           >
             {props.option.label}
           </Text>
 @@ -147,16 +151,19 @@ function ModelRow(props: {
           ) : null}
         </View>
         {props.option.subtitle ? (
-          <Text className="text-xs text-foreground-muted" numberOfLines={1}>
+          <Text
+            className="text-xs text-foreground-muted"
+            numberOfLines={Platform.OS === "android" ? 2 : 1}
+          >
             {props.option.subtitle}
           </Text>
         ) : null}
       </View>
-      {props.selected ? (
+      {props.selected && Platform.OS !== "android" ? (
         <SymbolView
           name="checkmark"
           size={16}
-          tintColorClassName={"accent-icon"}
+          tintColorClassName="accent-icon"
           type="monochrome"
           weight="semibold"
         />
 @@ -189,7 +196,7 @@ function ProviderHeader(props: {
           <SymbolView
             name={props.collapsed ? "chevron.down" : "chevron.up"}
             size={12}
-            tintColorClassName={"accent-icon-subtle"}
+            tintColorClassName="accent-icon-subtle"
             type="monochrome"
           />
         </>
 @@ -205,6 +212,7 @@ function ProviderHeader(props: {
         accessibilityState={{ expanded: !props.collapsed }}
         className="mx-4 mt-1 min-h-11 flex-row items-center gap-2 rounded-xl px-1 pt-2 active:opacity-60"
         onPress={props.onToggle}
+        style={Platform.OS === "android" ? { minHeight: 48 } : undefined}
       >
         {content}
       </Pressable>
 @@ -229,6 +237,7 @@ function DisclosureRow(props: {
     <Pressable
       accessibilityRole="button"
       onPress={props.onPress}
+      style={Platform.OS === "android" ? { minHeight: 56 } : undefined}
       className={cn(
         "min-h-11 flex-row items-center gap-2 bg-card px-4 py-2 active:bg-subtle",
         !props.isLast && "border-b border-border-subtle",
 @@ -244,7 +253,7 @@ function DisclosureRow(props: {
       <SymbolView
         name="chevron.right"
         size={12}
-        tintColorClassName={"accent-icon-subtle"}
+        tintColorClassName="accent-icon-subtle"
         type="monochrome"
       />
     </Pressable>
 @@ -265,22 +274,24 @@ function ChoiceRow(props: {
       accessibilityRole="radio"
       accessibilityState={{ checked: props.selected }}
       onPress={props.onPress}
+      style={Platform.OS === "android" ? { minHeight: 56 } : undefined}
       className={cn(
         "min-h-14 flex-row items-center gap-3 bg-card px-4 py-3 active:bg-subtle",
         !props.isLast && "border-b border-border-subtle",
       )}
     >
+      {Platform.OS === "android" ? <MaterialRadioIndicator selected={props.selected} /> : null}
       <View className="min-w-0 flex-1 gap-0.5">
         <Text className="text-base font-t3-medium text-foreground">{props.label}</Text>
         {props.description ? (
           <Text className="text-sm leading-5 text-foreground-muted">{props.description}</Text>
         ) : null}
       </View>
-      {props.selected ? (
+      {props.selected && Platform.OS !== "android" ? (
         <SymbolView
           name="checkmark"
           size={16}
-          tintColorClassName={"accent-icon"}
+          tintColorClassName="accent-icon"
           type="monochrome"
           weight="semibold"
         />
 @@ -853,10 +864,15 @@ function ThreadSettingsMainContent(props: {
     <AnimatedLegendList
       automaticallyAdjustsScrollIndicatorInsets
       className="flex-1 bg-sheet"
+      style={
+        Platform.OS === "android"
+          ? { width: "100%", maxWidth: 720, alignSelf: "center" }
+          : undefined
+      }
       contentContainerStyle={{ paddingTop: 4 }}
       contentInsetAdjustmentBehavior={usesTransparentNativeHeader ? "never" : "automatic"}
       data={listItems}
-      estimatedItemSize={48}
+      estimatedItemSize={Platform.OS === "android" ? 56 : 48}
       extraData={animationsReady}
       getItemType={(item) => item.kind}
       itemLayoutAnimation={THREAD_SETTINGS_CATALOG_LAYOUT_TRANSITION}
 @@ -869,16 +885,39 @@ function ThreadSettingsMainContent(props: {
           {usesTransparentNativeHeader ? <View style={{ height: nativeHeaderHeight }} /> : null}
           {Platform.OS === "android" ? (
             <View className="px-4 pb-2 pt-3">
-              <TextInput
+              <View
-                accessibilityLabel="Find a model"
+                className="flex-row items-center rounded-full bg-input px-2"
-                autoCapitalize="none"
+                style={{ minHeight: 56 }}
-                autoCorrect={false}
+              >
-                className="h-11 rounded-xl bg-card px-4 text-base text-foreground"
+                <View pointerEvents="none" className="px-2">
-                onChangeText={session.setSearchQuery}
+                  <SymbolView
-                placeholder="Find a model"
+                    name="magnifyingglass"
-                placeholderTextColorClassName="accent-placeholder"
+                    size={24}
-                value={session.searchQuery}
+                    tintColorClassName="accent-icon-subtle"
-              />
+                  />
+                </View>
+                <TextInput
+                  accessibilityLabel="Find a model"
+                  autoCapitalize="none"
+                  autoCorrect={false}
+                  className="min-w-0 flex-1 px-2 py-0 text-base text-foreground"
+                  style={{ minHeight: 56, includeFontPadding: false, textAlignVertical: "center" }}
+                  onChangeText={session.setSearchQuery}
+                  placeholder="Find a model"
+                  placeholderTextColorClassName="accent-placeholder"
+                  selectionColorClassName="accent-primary/32"
+                  cursorColorClassName="accent-primary"
+                  selectionHandleColorClassName="accent-primary"
+                  value={session.searchQuery}
+                />
+                {session.searchQuery.length > 0 ? (
+                  <MaterialIconButton
+                    accessibilityLabel="Clear model search"
+                    icon="xmark"
+                    onPress={() => session.setSearchQuery("")}
+                  />
+                ) : null}
+              </View>
             </View>
           ) : null}
         </>
 @@ -945,6 +984,11 @@ function ThreadSettingsChoiceContent(props: {
   return (
     <ScrollView
       className="flex-1 bg-sheet"
+      style={
+        Platform.OS === "android"
+          ? { width: "100%", maxWidth: 720, alignSelf: "center" }
+          : undefined
+      }
       contentContainerStyle={{
         paddingBottom: insets.bottom + 12,
         paddingHorizontal: 16,
 @@ -1068,14 +1112,15 @@ function ThreadSettingsModelsScreen() {
               icon: "arrow.clockwise",
               onPress: refreshProviders,
             },
-            {
-              accessibilityLabel: session.pendingModel ? "Save thread settings" : "Done",
-              icon: "checkmark",
-              onPress: commitAndClose,
-            },
           ]}
+          trailing={
+            session.pendingModel ? (
+              <MaterialButton label="Save" tone="text" onPress={commitAndClose} />
+            ) : undefined
+          }
           onBack={presentation.onClose}
           title="Thread settings"
+          hideBottomBorder
         />
       ) : null}
       <NativeStackScreenOptions
 @@ -1114,17 +1159,19 @@ function ThreadSettingsModelsScreen() {
               : undefined,
         }}
       />
-      <ThreadSettingsMainContent
+      <MaterialScreenContent>
-        onOpenSubmenu={(submenu) => {
+        <ThreadSettingsMainContent
-          const title =
+          onOpenSubmenu={(submenu) => {
-            submenu.kind === "runtime"
+            const title =
-              ? "Runtime"
+              submenu.kind === "runtime"
-              : (session.displayedDescriptors.find(
+                ? "Runtime"
-                  (descriptor) => descriptor.type === "select" && descriptor.id === submenu.id,
+                : (session.displayedDescriptors.find(
-                )?.label ?? "Option");
+                    (descriptor) => descriptor.type === "select" && descriptor.id === submenu.id,
-          navigation.navigate("ThreadSettingsChoice", { ...submenu, title });
+                  )?.label ?? "Option");
-        }}
+            navigation.navigate("ThreadSettingsChoice", { ...submenu, title });
-      />
+          }}
+        />
+      </MaterialScreenContent>
       <NativeHeaderToolbar placement="left">
         <NativeHeaderToolbar.Button
           accessibilityLabel="Cancel thread settings"
 @@ -1199,9 +1246,18 @@ function ThreadSettingsChoiceScreen() {
     <>
       <NativeStackScreenOptions options={{ headerShown: Platform.OS !== "android" }} />
       {Platform.OS === "android" ? (
-        <AndroidScreenHeader title={route.params.title} onBack={() => navigation.goBack()} />
+        <AndroidScreenHeader
+          title={route.params.title}
+          onBack={() => navigation.goBack()}
+          hideBottomBorder
+        />
       ) : null}
-      <ThreadSettingsChoiceContent submenu={route.params} onSelected={() => navigation.goBack()} />
+      <MaterialScreenContent>
+        <ThreadSettingsChoiceContent
+          submenu={route.params}
+          onSelected={() => navigation.goBack()}
+        />
+      </MaterialScreenContent>
     </>
   );
 }
 @@ -1222,11 +1278,12 @@ function ThreadSettingsPickerNavigator(props: ThreadSettingsPickerPresentation)
       <ThreadSettingsPickerStack.Navigator
         initialRouteName="ThreadSettingsModels"
         screenOptions={{
-          animation: "slide_from_right",
+          animation: Platform.OS === "android" ? "default" : "slide_from_right",
           contentStyle: { backgroundColor: solidSheetBackground },
           gestureEnabled: true,
           headerBackButtonDisplayMode: "minimal",
           headerBackTitle: "",
+          headerShown: Platform.OS !== "android",
           headerShadowVisible: false,
           headerStyle: {
             backgroundColor: NATIVE_LIQUID_GLASS_SUPPORTED ? "transparent" : solidSheetBackground,

apps/mobile/src/features/threads/customSnoozeDate.test.ts created+36

...	@@ -0,0 +1,36 @@
1	import { describe, expect, it } from "vite-plus/test";
2
3	import {
4	applySnoozePickerDate,
5	applySnoozePickerTime,
6	snoozeDateToPickerDate,
7	} from "./customSnoozeDate";
8
9	describe("custom snooze calendar conversion", () => {
10	it("passes the local calendar day to Compose without shifting it across time zones", () => {
11	const date = new Date(2026, 8, 17, 0, 30);
12	expect(snoozeDateToPickerDate(date)).toBe("2026-09-17T00:00:00.000Z");
13	});
14
15	it("applies Compose's UTC calendar day while retaining the local time", () => {
16	const date = new Date(2026, 8, 16, 23, 45);
17	const next = applySnoozePickerDate(date, new Date("2026-09-20T00:00:00Z"));
18	expect([
19	next.getFullYear(),
20	next.getMonth(),
21	next.getDate(),
22	next.getHours(),
23	next.getMinutes(),
24	]).toEqual([2026, 8, 20, 23, 45]);
25	expect(date.getDate()).toBe(16);
26	});
27
28	it("applies a picked local time without changing the chosen calendar day", () => {
29	const date = new Date(2026, 8, 20, 23, 45);
30	const next = applySnoozePickerTime(date, new Date(2026, 8, 16, 8, 15, 30));
31	expect([next.getDate(), next.getHours(), next.getMinutes(), next.getSeconds()]).toEqual([
32	20, 8, 15, 0,
33	]);
34	expect(date.getHours()).toBe(23);
35	});
36	});

apps/mobile/src/features/threads/customSnoozeDate.ts created+16

...	@@ -0,0 +1,16 @@
1	/** Compose calendars exchange calendar days at UTC midnight, not local instants. */
2	export function snoozeDateToPickerDate(date: Date): string {
3	return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())).toISOString();
4	}
5
6	export function applySnoozePickerDate(date: Date, selected: Date): Date {
7	const next = new Date(date);
8	next.setFullYear(selected.getUTCFullYear(), selected.getUTCMonth(), selected.getUTCDate());
9	return next;
10	}
11
12	export function applySnoozePickerTime(date: Date, selected: Date): Date {
13	const next = new Date(date);
14	next.setHours(selected.getHours(), selected.getMinutes(), 0, 0);
15	return next;
16	}

apps/mobile/src/features/threads/git/GitBranchesSheet.tsx+208-111

...	@@ -1,10 +1,12 @@	...	@@ -1,10 +1,12 @@
1	import { sanitizeFeatureBranchName } from "@t3tools/shared/git";	1	import { sanitizeFeatureBranchName } from "@t3tools/shared/git";
2	import { useNavigation, type StaticScreenProps } from "@react-navigation/native";	2	import { useNavigation, type StaticScreenProps } from "@react-navigation/native";
3	import { useState } from "react";	3	import { useState } from "react";
4	import { Platform, Pressable, ScrollView, View } from "react-native";	4	import { Platform, Pressable, ScrollView, useWindowDimensions, View } from "react-native";
5	import { useSafeAreaInsets } from "react-native-safe-area-context";	5	import { useSafeAreaInsets } from "react-native-safe-area-context";
6		6
7	import { AndroidSheetHeader } from "../../../components/AndroidScreenHeader";	7	import { AndroidSheetHeader } from "../../../components/AndroidScreenHeader";
		8	import { MaterialScreenContent } from "../../../components/MaterialScreenContent";
		9	import { NativeStackScreenOptions } from "../../../native/StackHeader";
8	import { AppText as Text, AppTextInput as TextInput } from "../../../components/AppText";	10	import { AppText as Text, AppTextInput as TextInput } from "../../../components/AppText";
9	import { cn } from "../../../lib/cn";	11	import { cn } from "../../../lib/cn";
10	import { useEnvironmentQuery } from "../../../state/query";	12	import { useEnvironmentQuery } from "../../../state/query";
...	@@ -23,6 +25,7 @@ type GitBranchesSheetProps = StaticScreenProps<{	...	@@ -23,6 +25,7 @@ type GitBranchesSheetProps = StaticScreenProps<{
23	export function GitBranchesSheet(_props: GitBranchesSheetProps) {	25	export function GitBranchesSheet(_props: GitBranchesSheetProps) {
24	const navigation = useNavigation();	26	const navigation = useNavigation();
25	const insets = useSafeAreaInsets();	27	const insets = useSafeAreaInsets();
		28	const { height: windowHeight } = useWindowDimensions();
26	const { selectedThread } = useThreadSelection();	29	const { selectedThread } = useThreadSelection();
27	const { selectedThreadCwd, selectedThreadWorktreePath } = useSelectedThreadWorktree();	30	const { selectedThreadCwd, selectedThreadWorktreePath } = useSelectedThreadWorktree();
28	const gitState = useSelectedThreadGitState();	31	const gitState = useSelectedThreadGitState();
...	@@ -58,125 +61,219 @@ export function GitBranchesSheet(_props: GitBranchesSheetProps) {	...	@@ -58,125 +61,219 @@ export function GitBranchesSheet(_props: GitBranchesSheetProps) {
58	const disabledExistingBranches = new Set(disabledExistingBranchNames);	61	const disabledExistingBranches = new Set(disabledExistingBranchNames);
59		62
60	return (	63	return (
61	<View collapsable={false} className="flex-1 bg-sheet">	64	<View
		65	collapsable={false}
		66	className={Platform.OS === "android" ? "bg-sheet" : "flex-1 bg-sheet"}
		67	style={Platform.OS === "android" ? { maxHeight: windowHeight * 0.92 } : undefined}
		68	>
62	{Platform.OS === "android" ? (	69	{Platform.OS === "android" ? (
63	<AndroidSheetHeader title="Branches & worktrees" onBack={() => navigation.goBack()} />	70	<NativeStackScreenOptions
		71	options={{
		72	sheetCornerRadius: 28,
		73	sheetAllowedDetents: "fitToContents",
		74	}}
		75	/>
64	) : null}	76	) : null}
65	<ScrollView	77	{Platform.OS === "android" ? (
66	className="flex-1"	78	<AndroidSheetHeader
67	showsVerticalScrollIndicator={false}	79	title="Branches & worktrees"
68	contentInset={{ bottom: Math.max(insets.bottom, 18) + 18 }}	80	onBack={() => navigation.goBack()}
69	contentContainerClassName="gap-4 px-5 pt-2"	81	hideBottomBorder
70	>	82	/>
71	<View className="gap-2 rounded-[18px] border border-border bg-card px-4 py-4">	83	) : null}
72	<Text className="text-foreground-secondary text-2xs font-t3-bold tracking-[1px] uppercase">	84	<MaterialScreenContent fitToContents>
73	New branch	85	<ScrollView
74	</Text>	86	className={Platform.OS === "android" ? "shrink grow-0" : "flex-1"}
75	<TextInput	87	keyboardShouldPersistTaps="handled"
76	value={newBranchName}	88	showsVerticalScrollIndicator={false}
77	onChangeText={setNewBranchName}	89	contentInset={{ bottom: Math.max(insets.bottom, 18) + 18 }}
78	placeholder="feature/mobile-polish"	90	contentContainerClassName={Platform.OS === "android" ? "gap-2 p-2" : "gap-4 px-5 pt-2"}
79	className="rounded-[18px]"	91	contentContainerStyle={
80	/>	92	Platform.OS === "android"
81	<SheetActionButton	93	? { paddingBottom: Math.max(insets.bottom, 18) + 18 }
82	icon="plus"	94	: undefined
83	label="Create & checkout"	95	}
84	tone="primary"	96	>
85	disabled={busy \|\| newBranchName.trim().length === 0}	97	<View
86	onPress={() => {	98	className={
87	const branch = sanitizeFeatureBranchName(newBranchName.trim());	99	Platform.OS === "android"
88	if (branch.length === 0) return;	100	? "gap-3 rounded-[20px] bg-card p-4"
89	void gitActions.onCreateSelectedThreadBranch(branch).then(() => {	101	: "gap-2 rounded-[18px] border border-border bg-card px-4 py-4"
90	setNewBranchName("");
91	navigation.goBack();
92	});
93	}}
94	/>
95	</View>
96
97	<View className="gap-2 rounded-[18px] border border-border bg-card px-4 py-4">
98	<Text className="text-foreground-secondary text-2xs font-t3-bold tracking-[1px] uppercase">
99	New worktree
100	</Text>
101	<TextInput
102	value={worktreeBaseBranch}
103	onChangeText={setWorktreeBaseBranch}
104	placeholder="main"
105	className="rounded-[18px]"
106	/>
107	<TextInput
108	value={worktreeBranchName}
109	onChangeText={setWorktreeBranchName}
110	placeholder="feature/mobile-thread"
111	className="rounded-[18px]"
112	/>
113	<SheetActionButton
114	icon="square.split.2x1"
115	label="Create worktree"
116	tone="primary"
117	disabled={
118	busy \|\|
119	worktreeBaseBranch.trim().length === 0 \|\|
120	worktreeBranchName.trim().length === 0
121	}	102	}
122	onPress={() => {	103	>
123	const baseBranch = worktreeBaseBranch.trim();	104	<Text
124	const newBranch = worktreeBranchName.trim();	105	className={
125	if (baseBranch.length === 0 \|\| newBranch.length === 0) return;	106	Platform.OS === "android"
126	void gitActions.onCreateSelectedThreadWorktree({ baseBranch, newBranch }).then(() => {	107	? "text-foreground text-base font-t3-medium"
127	setWorktreeBranchName("");	108	: "text-foreground-secondary text-2xs font-t3-bold tracking-[1px] uppercase"
128	navigation.goBack();	109	}
129	});	110	>
130	}}	111	New branch
131	/>
132	</View>
133
134	<View className="gap-2">
135	<Text className="text-foreground-secondary text-2xs font-t3-bold tracking-[1px] uppercase">
136	Existing branches
137	</Text>
138	{branchesLoading ? (
139	<Text className="text-foreground-secondary text-sm font-medium">
140	Loading branches...
141	</Text>	112	</Text>
142	) : null}	113	<TextInput
143	{!branchesLoading && availableBranches.length === 0 ? (	114	value={newBranchName}
144	<Text className="text-foreground-secondary text-sm font-medium">	115	onChangeText={setNewBranchName}
145	No local branches found.	116	placeholder="feature/mobile-polish"
		117	accessibilityLabel="New branch name"
		118	className={Platform.OS === "android" ? "rounded-xl bg-sheet-solid" : "rounded-[18px]"}
		119	/>
		120	<SheetActionButton
		121	icon="plus"
		122	label="Create & checkout"
		123	tone="primary"
		124	disabled={busy \|\| newBranchName.trim().length === 0}
		125	onPress={() => {
		126	const branch = sanitizeFeatureBranchName(newBranchName.trim());
		127	if (branch.length === 0) return;
		128	void gitActions.onCreateSelectedThreadBranch(branch).then(() => {
		129	setNewBranchName("");
		130	navigation.goBack();
		131	});
		132	}}
		133	/>
		134	</View>
		135
		136	<View
		137	className={
		138	Platform.OS === "android"
		139	? "gap-3 rounded-[20px] bg-card p-4"
		140	: "gap-2 rounded-[18px] border border-border bg-card px-4 py-4"
		141	}
		142	>
		143	<Text
		144	className={
		145	Platform.OS === "android"
		146	? "text-foreground text-base font-t3-medium"
		147	: "text-foreground-secondary text-2xs font-t3-bold tracking-[1px] uppercase"
		148	}
		149	>
		150	New worktree
146	</Text>	151	</Text>
147	) : null}	152	{Platform.OS === "android" ? (
148	{availableBranches.map((branch) => {	153	<Text className="text-foreground-secondary text-sm">Base branch</Text>
149	const disabled = disabledExistingBranches.has(branch.name);	154	) : null}
150	const subtitle = branch.worktreePath	155	<TextInput
151	? branch.worktreePath === currentWorktreePath	156	value={worktreeBaseBranch}
152	? "Checked out in this thread"	157	onChangeText={setWorktreeBaseBranch}
153	: "Checked out in another worktree"	158	placeholder="main"
154	: branch.isDefault	159	accessibilityLabel="Worktree base branch"
155	? "Default branch"	160	className={Platform.OS === "android" ? "rounded-xl bg-sheet-solid" : "rounded-[18px]"}
156	: "Local branch";	161	/>
		162	{Platform.OS === "android" ? (
		163	<Text className="text-foreground-secondary text-sm">New branch</Text>
		164	) : null}
		165	<TextInput
		166	value={worktreeBranchName}
		167	onChangeText={setWorktreeBranchName}
		168	placeholder="feature/mobile-thread"
		169	accessibilityLabel="Worktree branch name"
		170	className={Platform.OS === "android" ? "rounded-xl bg-sheet-solid" : "rounded-[18px]"}
		171	/>
		172	<SheetActionButton
		173	icon="square.split.2x1"
		174	label="Create worktree"
		175	tone="primary"
		176	disabled={
		177	busy \|\|
		178	worktreeBaseBranch.trim().length === 0 \|\|
		179	worktreeBranchName.trim().length === 0
		180	}
		181	onPress={() => {
		182	const baseBranch = worktreeBaseBranch.trim();
		183	const newBranch = worktreeBranchName.trim();
		184	if (baseBranch.length === 0 \|\| newBranch.length === 0) return;
		185	void gitActions
		186	.onCreateSelectedThreadWorktree({ baseBranch, newBranch })
		187	.then(() => {
		188	setWorktreeBranchName("");
		189	navigation.goBack();
		190	});
		191	}}
		192	/>
		193	</View>
157		194
158	return (	195	<View className="gap-2">
159	<Pressable	196	<Text
160	key={branch.name}	197	className={
		198	Platform.OS === "android"
		199	? "px-4 pb-1 pt-3 text-foreground-secondary text-sm font-t3-medium"
		200	: "text-foreground-secondary text-2xs font-t3-bold tracking-[1px] uppercase"
		201	}
		202	>
		203	Existing branches
		204	</Text>
		205	{branchesLoading ? (
		206	<Text
161	className={cn(	207	className={cn(
162	"gap-1 rounded-[18px] border px-4 py-3 disabled:opacity-[0.45]",	208	"text-foreground-secondary text-sm font-medium",
163	branch.current ? "border-subtle-strong" : "border-border",	209	Platform.OS === "android" && "px-4",
164	)}	210	)}
165	disabled={busy \|\| disabled}
166	onPress={() => {
167	void gitActions.onCheckoutSelectedThreadBranch(branch.name).then(() => {
168	navigation.goBack();
169	});
170	}}
171	>	211	>
172	<View className="absolute inset-0 rounded-[18px] bg-card" />	212	Loading branches...
173	<Text className="text-foreground text-base font-t3-bold">{branch.name}</Text>	213	</Text>
174	<Text className="text-foreground-secondary text-xs font-medium">{subtitle}</Text>	214	) : null}
175	</Pressable>	215	{!branchesLoading && availableBranches.length === 0 ? (
176	);	216	<Text
177	})}	217	className={cn(
178	</View>	218	"text-foreground-secondary text-sm font-medium",
179	</ScrollView>	219	Platform.OS === "android" && "px-4",
		220	)}
		221	>
		222	No local branches found.
		223	</Text>
		224	) : null}
		225	{availableBranches.map((branch) => {
		226	const disabled = disabledExistingBranches.has(branch.name);
		227	const subtitle = branch.worktreePath
		228	? branch.worktreePath === currentWorktreePath
		229	? "Checked out in this thread"
		230	: "Checked out in another worktree"
		231	: branch.isDefault
		232	? "Default branch"
		233	: "Local branch";
		234
		235	return (
		236	<Pressable
		237	key={branch.name}
		238	className={cn(
		239	"gap-1 px-4 py-3 disabled:opacity-[0.45]",
		240	Platform.OS === "android"
		241	? cn(
		242	"rounded-[20px] active:bg-subtle",
		243	branch.current ? "bg-secondary" : "bg-card",
		244	)
		245	: cn(
		246	"rounded-[18px] border",
		247	branch.current ? "border-subtle-strong" : "border-border",
		248	),
		249	)}
		250	accessibilityRole="button"
		251	accessibilityState={{ selected: branch.current, disabled: busy \|\| disabled }}
		252	disabled={busy \|\| disabled}
		253	onPress={() => {
		254	void gitActions.onCheckoutSelectedThreadBranch(branch.name).then(() => {
		255	navigation.goBack();
		256	});
		257	}}
		258	>
		259	{Platform.OS !== "android" ? (
		260	<View className="absolute inset-0 rounded-[18px] bg-card" />
		261	) : null}
		262	<Text
		263	className={cn(
		264	"text-foreground text-base",
		265	Platform.OS === "android" ? "font-t3-medium" : "font-t3-bold",
		266	)}
		267	>
		268	{branch.name}
		269	</Text>
		270	<Text className="text-foreground-secondary text-xs font-medium">{subtitle}</Text>
		271	</Pressable>
		272	);
		273	})}
		274	</View>
		275	</ScrollView>
		276	</MaterialScreenContent>
180	</View>	277	</View>
181	);	278	);
182	}	279	}

apps/mobile/src/features/threads/git/GitCommitSheet.tsx+267-147

...	@@ -1,9 +1,12 @@	...	@@ -1,9 +1,12 @@
1	import { useNavigation, type StaticScreenProps } from "@react-navigation/native";	1	import { useNavigation, type StaticScreenProps } from "@react-navigation/native";
2	import { useCallback, useState } from "react";	2	import { useCallback, useState } from "react";
3	import { Platform, Pressable, ScrollView, View } from "react-native";	3	import { Platform, Pressable, ScrollView, useWindowDimensions, View } from "react-native";
4	import { useSafeAreaInsets } from "react-native-safe-area-context";	4	import { useSafeAreaInsets } from "react-native-safe-area-context";
5		5
6	import { AndroidSheetHeader } from "../../../components/AndroidScreenHeader";	6	import { AndroidSheetHeader } from "../../../components/AndroidScreenHeader";
		7	import { SymbolView } from "../../../components/AppSymbol";
		8	import { MaterialScreenContent } from "../../../components/MaterialScreenContent";
		9	import { NativeStackScreenOptions } from "../../../native/StackHeader";
7	import { AppText as Text, AppTextInput as TextInput } from "../../../components/AppText";	10	import { AppText as Text, AppTextInput as TextInput } from "../../../components/AppText";
8	import { cn } from "../../../lib/cn";	11	import { cn } from "../../../lib/cn";
9	import { useEnvironmentQuery } from "../../../state/query";	12	import { useEnvironmentQuery } from "../../../state/query";
...	@@ -22,6 +25,7 @@ type GitCommitSheetProps = StaticScreenProps<{	...	@@ -22,6 +25,7 @@ type GitCommitSheetProps = StaticScreenProps<{
22	export function GitCommitSheet(_props: GitCommitSheetProps) {	25	export function GitCommitSheet(_props: GitCommitSheetProps) {
23	const navigation = useNavigation();	26	const navigation = useNavigation();
24	const insets = useSafeAreaInsets();	27	const insets = useSafeAreaInsets();
		28	const { height: windowHeight } = useWindowDimensions();
25	const { selectedThread } = useThreadSelection();	29	const { selectedThread } = useThreadSelection();
26	const { selectedThreadCwd } = useSelectedThreadWorktree();	30	const { selectedThreadCwd } = useSelectedThreadWorktree();
27	const gitState = useSelectedThreadGitState();	31	const gitState = useSelectedThreadGitState();
...	@@ -66,168 +70,284 @@ export function GitCommitSheet(_props: GitCommitSheetProps) {	...	@@ -66,168 +70,284 @@ export function GitCommitSheet(_props: GitCommitSheetProps) {
66	);	70	);
67		71
68	return (	72	return (
69	<View collapsable={false} className="flex-1 bg-sheet">	73	<View
		74	collapsable={false}
		75	className={Platform.OS === "android" ? "bg-sheet" : "flex-1 bg-sheet"}
		76	style={Platform.OS === "android" ? { maxHeight: windowHeight * 0.92 } : undefined}
		77	>
70	{Platform.OS === "android" ? (	78	{Platform.OS === "android" ? (
71	<AndroidSheetHeader title="Commit changes" onBack={() => navigation.goBack()} />	79	<NativeStackScreenOptions
		80	options={{
		81	sheetCornerRadius: 28,
		82	sheetAllowedDetents: "fitToContents",
		83	}}
		84	/>
72	) : null}	85	) : null}
73	<ScrollView	86	{Platform.OS === "android" ? (
74	className="flex-1"	87	<AndroidSheetHeader
75	keyboardShouldPersistTaps="handled"	88	title="Commit changes"
76	showsVerticalScrollIndicator={false}	89	onBack={() => navigation.goBack()}
77	contentInset={{ bottom: Math.max(insets.bottom, 18) + 18 }}	90	hideBottomBorder
78	contentContainerClassName="gap-4 px-5 pt-2"	91	/>
79	>	92	) : null}
80	<View className="gap-3 rounded-[22px] border border-border bg-card px-4 py-4">	93	<MaterialScreenContent fitToContents>
81	<View className="flex-row items-center justify-between gap-3">	94	<ScrollView
82	<Text className="text-foreground-muted text-sm font-medium">Branch</Text>	95	className={Platform.OS === "android" ? "shrink grow-0" : "flex-1"}
83	<Text className="text-foreground text-base font-t3-bold">	96	keyboardShouldPersistTaps="handled"
84	{gitStatus.data?.refName ?? "(detached HEAD)"}	97	showsVerticalScrollIndicator={false}
85	</Text>	98	contentInset={{ bottom: Math.max(insets.bottom, 18) + 18 }}
86	</View>	99	contentContainerClassName={Platform.OS === "android" ? "gap-2 p-2" : "gap-4 px-5 pt-2"}
87	{isDefaultRef ? (	100	contentContainerStyle={
88	<Text className="text-xs leading-normal text-warning-foreground">	101	Platform.OS === "android"
89	Warning: this is the default branch.	102	? { paddingBottom: Math.max(insets.bottom, 18) + 18 }
90	</Text>	103	: undefined
91	) : null}	104	}
92	</View>	105	>
93		106	<View
94	<View className="gap-3 rounded-[22px] border border-border bg-card px-4 py-4">	107	className={cn(
95	<View className="flex-row items-center justify-between gap-3">	108	"gap-3 bg-card p-4",
96	<View className="gap-1">	109	Platform.OS === "android" ? "rounded-[20px]" : "rounded-[22px] border border-border",
97	<Text className="text-foreground text-base font-t3-bold">Files</Text>	110	)}
98	<Text className="text-foreground-muted text-xs leading-normal">	111	>
99	{selectedFiles.length} selected · +{selectedInsertions} / -{selectedDeletions}	112	<View
100	</Text>	113	className={
101	</View>	114	Platform.OS === "android" ? "gap-1" : "flex-row items-center justify-between gap-3"
102	<View className="flex-row items-center gap-2">	115	}
103	{!allSelected && isEditingFiles ? (	116	>
104	<Pressable	117	<Text className="text-foreground-muted text-sm font-medium">Branch</Text>
105	className="bg-subtle rounded-full px-3 py-2"	118	<Text
106	onPress={() => setExcludedFiles(new Set())}	119	className={cn(
107	>	120	"text-foreground text-base",
108	<Text className="text-foreground text-2xs font-t3-bold uppercase">Reset</Text>	121	Platform.OS === "android" ? "font-t3-medium" : "font-t3-bold",
109	</Pressable>	122	)}
110	) : null}
111	<Pressable
112	className="bg-subtle rounded-full px-3 py-2"
113	onPress={() => setIsEditingFiles((current) => !current)}
114	>	123	>
115	<Text className="text-foreground text-2xs font-t3-bold uppercase">	124	{gitStatus.data?.refName ?? "(detached HEAD)"}
116	{isEditingFiles ? "Done" : "Edit"}	125	</Text>
117	</Text>
118	</Pressable>
119	</View>	126	</View>
		127	{isDefaultRef ? (
		128	<Text className="text-xs leading-normal text-warning-foreground">
		129	Warning: this is the default branch.
		130	</Text>
		131	) : null}
120	</View>	132	</View>
121		133
122	{allFiles.length === 0 ? (	134	<View
123	<Text className="text-foreground-secondary text-sm leading-normal">	135	className={cn(
124	No changed files are available to commit.	136	"gap-3 bg-card p-4",
125	</Text>	137	Platform.OS === "android" ? "rounded-[20px]" : "rounded-[22px] border border-border",
126	) : !isEditingFiles ? (	138	)}
127	<View className="gap-2">	139	>
128	{selectedFilePreview.map((file) => (	140	<View className="flex-row items-center justify-between gap-3">
129	<View key={file.path} className="flex-row items-center justify-between gap-3">	141	<View className="gap-1">
130	<Text className="text-foreground flex-1 text-sm font-medium" numberOfLines={1}>	142	<Text
131	{file.path}	143	className={cn(
132	</Text>	144	"text-foreground text-base",
133	<Text className="text-xs font-t3-bold text-emerald-500">+{file.insertions}</Text>	145	Platform.OS === "android" ? "font-t3-medium" : "font-t3-bold",
134	<Text className="text-xs font-t3-bold text-rose-500">-{file.deletions}</Text>	146	)}
135	</View>	147	>
136	))}	148	Files
137	{selectedFiles.length > selectedFilePreview.length ? (
138	<Text className="text-foreground-muted text-xs leading-snug">
139	+{selectedFiles.length - selectedFilePreview.length} more files
140	</Text>	149	</Text>
141	) : null}	150	<Text className="text-foreground-muted text-xs leading-normal">
142	</View>	151	{selectedFiles.length} selected · +{selectedInsertions} / -{selectedDeletions}
143	) : (	152	</Text>
144	<View className="gap-2">	153	</View>
145	{allFiles.map((file) => {	154	<View className="flex-row items-center gap-2">
146	const included = !excludedFiles.has(file.path);	155	{!allSelected && isEditingFiles ? (
147	return (
148	<Pressable	156	<Pressable
149	key={file.path}	157	className={
150	className={cn(	158	Platform.OS === "android"
151	"rounded-[18px] border px-4 py-3",	159	? "min-h-12 justify-center rounded-full px-3 active:bg-subtle"
152	included ? "border-border" : "border-border-subtle",	160	: "bg-subtle rounded-full px-3 py-2"
153	)}	161	}
154	onPress={() => {	162	onPress={() => setExcludedFiles(new Set())}
155	setExcludedFiles((current) => {
156	const next = new Set(current);
157	if (next.has(file.path)) {
158	next.delete(file.path);
159	} else {
160	next.add(file.path);
161	}
162	return next;
163	});
164	}}
165	>	163	>
166	<View	164	<Text
167	className={`absolute inset-0 rounded-[18px] ${included ? "bg-card" : "bg-subtle"}`}	165	className={
168	/>	166	Platform.OS === "android"
169	<View className="flex-row items-start justify-between gap-3">	167	? "text-primary text-sm font-t3-medium"
170	<View className="flex-1 gap-1">	168	: "text-foreground text-2xs font-t3-bold uppercase"
171	<Text	169	}
172	selectable	170	>
173	className={`text-sm font-t3-bold ${included ? "text-foreground" : "text-foreground-muted"}`}	171	Reset
174	>	172	</Text>
175	{file.path}
176	</Text>
177	{!included ? (
178	<Text className="text-foreground-muted text-2xs leading-normal">
179	Excluded from this commit
180	</Text>
181	) : null}
182	</View>
183	<View className="items-end gap-1">
184	<Text className="text-xs font-t3-bold text-emerald-500">
185	+{file.insertions}
186	</Text>
187	<Text className="text-xs font-t3-bold text-rose-500">
188	-{file.deletions}
189	</Text>
190	</View>
191	</View>
192	</Pressable>	173	</Pressable>
193	);	174	) : null}
194	})}	175	<Pressable
		176	className={
		177	Platform.OS === "android"
		178	? "min-h-12 justify-center rounded-full px-3 active:bg-subtle"
		179	: "bg-subtle rounded-full px-3 py-2"
		180	}
		181	onPress={() => setIsEditingFiles((current) => !current)}
		182	>
		183	<Text
		184	className={
		185	Platform.OS === "android"
		186	? "text-primary text-sm font-t3-medium"
		187	: "text-foreground text-2xs font-t3-bold uppercase"
		188	}
		189	>
		190	{isEditingFiles ? "Done" : "Edit"}
		191	</Text>
		192	</Pressable>
		193	</View>
195	</View>	194	</View>
196	)}
197	</View>
198		195
199	<View className="gap-2">	196	{allFiles.length === 0 ? (
200	<Text className="text-foreground text-sm font-t3-bold">Commit message</Text>	197	<Text className="text-foreground-secondary text-sm leading-normal">
201	<TextInput	198	No changed files are available to commit.
202	multiline	199	</Text>
203	value={dialogCommitMessage}	200	) : !isEditingFiles ? (
204	onChangeText={setDialogCommitMessage}	201	<View className="gap-2">
205	placeholder="Leave empty to auto-generate"	202	{selectedFilePreview.map((file) => (
206	textAlignVertical="top"	203	<View key={file.path} className="flex-row items-center justify-between gap-3">
207	className="min-h-[128px] rounded-[20px] px-4 py-3.5"	204	<Text className="text-foreground flex-1 text-sm font-medium" numberOfLines={1}>
208	/>	205	{file.path}
209	</View>	206	</Text>
		207	<Text className="text-xs font-t3-bold text-emerald-500">
		208	+{file.insertions}
		209	</Text>
		210	<Text className="text-xs font-t3-bold text-rose-500">-{file.deletions}</Text>
		211	</View>
		212	))}
		213	{selectedFiles.length > selectedFilePreview.length ? (
		214	<Text className="text-foreground-muted text-xs leading-snug">
		215	+{selectedFiles.length - selectedFilePreview.length} more files
		216	</Text>
		217	) : null}
		218	</View>
		219	) : (
		220	<View className="gap-2">
		221	{allFiles.map((file) => {
		222	const included = !excludedFiles.has(file.path);
		223	return (
		224	<Pressable
		225	key={file.path}
		226	className={cn(
		227	"px-4 py-3",
		228	Platform.OS === "android"
		229	? included
		230	? "rounded-xl bg-subtle"
		231	: "rounded-xl"
		232	: cn(
		233	"rounded-[18px] border",
		234	included ? "border-border" : "border-border-subtle",
		235	),
		236	)}
		237	accessibilityRole="checkbox"
		238	accessibilityLabel={file.path}
		239	accessibilityState={{ checked: included }}
		240	onPress={() => {
		241	setExcludedFiles((current) => {
		242	const next = new Set(current);
		243	if (next.has(file.path)) {
		244	next.delete(file.path);
		245	} else {
		246	next.add(file.path);
		247	}
		248	return next;
		249	});
		250	}}
		251	>
		252	{Platform.OS !== "android" ? (
		253	<View
		254	className={`absolute inset-0 rounded-[18px] ${included ? "bg-card" : "bg-subtle"}`}
		255	/>
		256	) : null}
		257	<View className="flex-row items-start justify-between gap-3">
		258	{Platform.OS === "android" ? (
		259	<View
		260	className={cn(
		261	"mt-0.5 size-5 items-center justify-center rounded-sm",
		262	included ? "bg-primary" : "border border-input-border",
		263	)}
		264	>
		265	{included ? (
		266	<SymbolView
		267	name="checkmark"
		268	size={16}
		269	tintColorClassName="accent-primary-foreground"
		270	type="monochrome"
		271	/>
		272	) : null}
		273	</View>
		274	) : null}
		275	<View className="flex-1 gap-1">
		276	<Text
		277	selectable
		278	className={`text-sm font-t3-bold ${included ? "text-foreground" : "text-foreground-muted"}`}
		279	>
		280	{file.path}
		281	</Text>
		282	{!included ? (
		283	<Text className="text-foreground-muted text-2xs leading-normal">
		284	Excluded from this commit
		285	</Text>
		286	) : null}
		287	</View>
		288	<View className="items-end gap-1">
		289	<Text className="text-xs font-t3-bold text-emerald-500">
		290	+{file.insertions}
		291	</Text>
		292	<Text className="text-xs font-t3-bold text-rose-500">
		293	-{file.deletions}
		294	</Text>
		295	</View>
		296	</View>
		297	</Pressable>
		298	);
		299	})}
		300	</View>
		301	)}
		302	</View>
210		303
211	<View className="flex-row gap-3">	304	<View
212	<View className="flex-1">	305	className={Platform.OS === "android" ? "gap-3 rounded-[20px] bg-card p-4" : "gap-2"}
213	<SheetActionButton	306	>
214	icon="arrow.branch"	307	<Text
215	label="Commit on new branch"	308	className={
216	disabled={noneSelected \|\| busy}	309	Platform.OS === "android"
217	onPress={() => void runCommitAction(true)}	310	? "text-foreground text-base font-t3-medium"
		311	: "text-foreground text-sm font-t3-bold"
		312	}
		313	>
		314	Commit message
		315	</Text>
		316	<TextInput
		317	multiline
		318	accessibilityLabel="Commit message"
		319	value={dialogCommitMessage}
		320	onChangeText={setDialogCommitMessage}
		321	placeholder="Leave empty to auto-generate"
		322	textAlignVertical="top"
		323	className={cn(
		324	"min-h-[128px] px-4 py-3.5",
		325	Platform.OS === "android" ? "rounded-xl bg-sheet-solid" : "rounded-[20px]",
		326	)}
218	/>	327	/>
219	</View>	328	</View>
220	<View className="flex-1">	329
221	<SheetActionButton	330	<View className={Platform.OS === "android" ? "gap-2" : "flex-row gap-3"}>
222	icon="checkmark.circle"	331	<View className={Platform.OS === "android" ? undefined : "flex-1"}>
223	label="Commit"	332	<SheetActionButton
224	tone="primary"	333	icon="arrow.branch"
225	disabled={noneSelected \|\| busy}	334	label="Commit on new branch"
226	onPress={() => void runCommitAction(false)}	335	disabled={noneSelected \|\| busy}
227	/>	336	onPress={() => void runCommitAction(true)}
		337	/>
		338	</View>
		339	<View className={Platform.OS === "android" ? undefined : "flex-1"}>
		340	<SheetActionButton
		341	icon="checkmark.circle"
		342	label="Commit"
		343	tone="primary"
		344	disabled={noneSelected \|\| busy}
		345	onPress={() => void runCommitAction(false)}
		346	/>
		347	</View>
228	</View>	348	</View>
229	</View>	349	</ScrollView>
230	</ScrollView>	350	</MaterialScreenContent>
231	</View>	351	</View>
232	);	352	);
233	}	353	}

apps/mobile/src/features/threads/git/GitConfirmSheet.tsx+86-27

...	@@ -4,11 +4,13 @@ import * as Arr from "effect/Array";	...	@@ -4,11 +4,13 @@ import * as Arr from "effect/Array";
4	import * as Result from "effect/Result";	4	import * as Result from "effect/Result";
5	import { StackActions, useNavigation, type StaticScreenProps } from "@react-navigation/native";	5	import { StackActions, useNavigation, type StaticScreenProps } from "@react-navigation/native";
6	import { useCallback, useMemo } from "react";	6	import { useCallback, useMemo } from "react";
7	import { Platform, View } from "react-native";	7	import { Platform, ScrollView, useWindowDimensions, View } from "react-native";
8		8
9	import { useSafeAreaInsets } from "react-native-safe-area-context";	9	import { useSafeAreaInsets } from "react-native-safe-area-context";
10		10
11	import { AndroidSheetHeader } from "../../../components/AndroidScreenHeader";	11	import { AndroidSheetHeader } from "../../../components/AndroidScreenHeader";
		12	import { MaterialScreenContent } from "../../../components/MaterialScreenContent";
		13	import { NativeStackScreenOptions } from "../../../native/StackHeader";
12	import { AppText as Text } from "../../../components/AppText";	14	import { AppText as Text } from "../../../components/AppText";
13	import { useSelectedThreadGitActions } from "../../../state/use-selected-thread-git-actions";	15	import { useSelectedThreadGitActions } from "../../../state/use-selected-thread-git-actions";
14	import { useSelectedThreadGitState } from "../../../state/use-selected-thread-git-state";	16	import { useSelectedThreadGitState } from "../../../state/use-selected-thread-git-state";
...	@@ -27,6 +29,7 @@ type GitConfirmSheetProps = StaticScreenProps<{	...	@@ -27,6 +29,7 @@ type GitConfirmSheetProps = StaticScreenProps<{
27	export function GitConfirmSheet(props: GitConfirmSheetProps) {	29	export function GitConfirmSheet(props: GitConfirmSheetProps) {
28	const navigation = useNavigation();	30	const navigation = useNavigation();
29	const insets = useSafeAreaInsets();	31	const insets = useSafeAreaInsets();
		32	const { height: windowHeight } = useWindowDimensions();
30	const gitState = useSelectedThreadGitState();	33	const gitState = useSelectedThreadGitState();
31	const gitActions = useSelectedThreadGitActions();	34	const gitActions = useSelectedThreadGitActions();
32		35
...	@@ -102,38 +105,94 @@ export function GitConfirmSheet(props: GitConfirmSheetProps) {	...	@@ -102,38 +105,94 @@ export function GitConfirmSheet(props: GitConfirmSheetProps) {
102	]);	105	]);
103		106
104	return (	107	return (
105	<View collapsable={false} className="flex-1 bg-sheet">	108	<View
		109	collapsable={false}
		110	className={Platform.OS === "android" ? "bg-sheet" : "flex-1 bg-sheet"}
		111	style={Platform.OS === "android" ? { maxHeight: windowHeight * 0.92 } : undefined}
		112	>
106	{Platform.OS === "android" ? (	113	{Platform.OS === "android" ? (
107	<AndroidSheetHeader title="Confirm action" onBack={() => navigation.goBack()} />	114	<NativeStackScreenOptions
		115	options={{
		116	sheetCornerRadius: 28,
		117	sheetAllowedDetents: "fitToContents",
		118	}}
		119	/>
		120	) : null}
		121	{Platform.OS === "android" ? (
		122	<AndroidSheetHeader
		123	title="Confirm action"
		124	onBack={() => navigation.goBack()}
		125	hideBottomBorder
		126	/>
108	) : (	127	) : (
109	<View className="min-h-4 pt-2" />	128	<View className="min-h-4 pt-2" />
110	)}	129	)}
111		130
112	<View className="items-center gap-1 px-5 pb-3 pt-4">	131	<MaterialScreenContent fitToContents>
113	<Text className="text-xs font-t3-bold tracking-[1px] uppercase text-foreground-muted">	132	<ScrollView
114	Confirm	133	className={Platform.OS === "android" ? "shrink grow-0" : "flex-1"}
115	</Text>	134	showsVerticalScrollIndicator={false}
116	<Text className="text-center text-3xl font-t3-bold">	135	contentContainerClassName={Platform.OS === "android" ? "gap-2 p-2" : undefined}
117	{copy?.title ?? "Run action on default branch?"}	136	contentContainerStyle={
118	</Text>	137	Platform.OS === "android"
119	<Text className="text-center text-foreground-secondary text-sm font-medium leading-normal">	138	? { paddingBottom: Math.max(insets.bottom, 18) + 8 }
120	{copy?.description ?? "Choose how to continue."}	139	: undefined
121	</Text>	140	}
122	</View>	141	>
		142	<View
		143	className={
		144	Platform.OS === "android"
		145	? "gap-2 rounded-[20px] bg-card p-3"
		146	: "items-center gap-1 px-5 pb-3 pt-4"
		147	}
		148	>
		149	{Platform.OS !== "android" ? (
		150	<Text className="text-xs font-t3-bold tracking-[1px] uppercase text-foreground-muted">
		151	Confirm
		152	</Text>
		153	) : null}
		154	<Text
		155	className={
		156	Platform.OS === "android"
		157	? "text-xl font-t3-medium"
		158	: "text-center text-3xl font-t3-bold"
		159	}
		160	>
		161	{copy?.title ?? "Run action on default branch?"}
		162	</Text>
		163	<Text
		164	className={
		165	Platform.OS === "android"
		166	? "text-foreground-secondary text-base leading-normal"
		167	: "text-center text-foreground-secondary text-sm font-medium leading-normal"
		168	}
		169	>
		170	{copy?.description ?? "Choose how to continue."}
		171	</Text>
		172	</View>
123		173
124	<View className="gap-3 px-5 pt-2" style={{ paddingBottom: Math.max(insets.bottom, 18) + 8 }}>	174	<View
125	<SheetActionButton	175	className={Platform.OS === "android" ? "gap-2" : "gap-3 px-5 pt-2"}
126	icon="arrow.right.circle"	176	style={
127	label={copy?.continueLabel ?? "Continue"}	177	Platform.OS === "android"
128	onPress={() => void continuePendingAction()}	178	? undefined
129	/>	179	: { paddingBottom: Math.max(insets.bottom, 18) + 8 }
130	<SheetActionButton	180	}
131	icon="arrow.branch"	181	>
132	label="Feature branch & continue"	182	<SheetActionButton
133	tone="primary"	183	icon="arrow.right.circle"
134	onPress={() => void movePendingActionToFeatureBranch()}	184	label={copy?.continueLabel ?? "Continue"}
135	/>	185	onPress={() => void continuePendingAction()}
136	</View>	186	/>
		187	<SheetActionButton
		188	icon="arrow.branch"
		189	label="Feature branch & continue"
		190	tone="primary"
		191	onPress={() => void movePendingActionToFeatureBranch()}
		192	/>
		193	</View>
		194	</ScrollView>
		195	</MaterialScreenContent>
137	</View>	196	</View>
138	);	197	);
139	}	198	}

apps/mobile/src/features/threads/git/GitOverviewSheet.tsx+84-35

...	@@ -22,10 +22,17 @@ import { Alert, Platform, Pressable, RefreshControl, ScrollView, View } from "re	...	@@ -22,10 +22,17 @@ import { Alert, Platform, Pressable, RefreshControl, ScrollView, View } from "re
22	import { Screen, ScreenStack, ScreenStackHeaderConfig } from "react-native-screens";	22	import { Screen, ScreenStack, ScreenStackHeaderConfig } from "react-native-screens";
23	import { useSafeAreaInsets } from "react-native-safe-area-context";	23	import { useSafeAreaInsets } from "react-native-safe-area-context";
24	import { useUniwindTheme } from "../../../lib/useUniwindTheme";	24	import { useUniwindTheme } from "../../../lib/useUniwindTheme";
25		25	import {
26	import { AndroidSheetHeader } from "../../../components/AndroidScreenHeader";	26	AndroidHeaderIconButton,
		27	AndroidSheetHeader,
		28	} from "../../../components/AndroidScreenHeader";
		29	import { MaterialScreenContent } from "../../../components/MaterialScreenContent";
		30	import { useAdaptiveWorkspaceLayout } from "../../layout/AdaptiveWorkspaceLayout";
27	import { AppText as Text } from "../../../components/AppText";	31	import { AppText as Text } from "../../../components/AppText";
28	import { nativeHeaderScrollEdgeEffects } from "../../../native/StackHeader";	32	import {
		33	NativeStackScreenOptions,
		34	nativeHeaderScrollEdgeEffects,
		35	} from "../../../native/StackHeader";
29	import { tryOpenExternalUrl } from "../../../lib/openExternalUrl";	36	import { tryOpenExternalUrl } from "../../../lib/openExternalUrl";
30	import { useEnvironmentQuery } from "../../../state/query";	37	import { useEnvironmentQuery } from "../../../state/query";
31	import { useThreadSelection } from "../../../state/use-thread-selection";	38	import { useThreadSelection } from "../../../state/use-thread-selection";
...	@@ -47,6 +54,7 @@ type GitOverviewSheetProps = StaticScreenProps<{	...	@@ -47,6 +54,7 @@ type GitOverviewSheetProps = StaticScreenProps<{
47	};	54	};
48		55
49	export function GitOverviewSheet(props: GitOverviewSheetProps) {	56	export function GitOverviewSheet(props: GitOverviewSheetProps) {
		57	const { layout } = useAdaptiveWorkspaceLayout();
50	const navigation = useNavigation();	58	const navigation = useNavigation();
51	const insets = useSafeAreaInsets();	59	const insets = useSafeAreaInsets();
52	const presentation = props.presentation ?? "sheet";	60	const presentation = props.presentation ?? "sheet";
...	@@ -224,14 +232,14 @@ export function GitOverviewSheet(props: GitOverviewSheetProps) {	...	@@ -224,14 +232,14 @@ export function GitOverviewSheet(props: GitOverviewSheetProps) {
224		232
225	const content = (	233	const content = (
226	<ScrollView	234	<ScrollView
227	className="flex-1 bg-screen"	235	className={Platform.OS === "android" ? "flex-1 bg-sheet-solid" : "flex-1 bg-screen"}
228	contentInsetAdjustmentBehavior={Platform.OS === "ios" ? "automatic" : "never"}	236	contentInsetAdjustmentBehavior={Platform.OS === "ios" ? "automatic" : "never"}
229	showsVerticalScrollIndicator={false}	237	showsVerticalScrollIndicator={false}
230	contentInset={{ bottom: Math.max(insets.bottom, 18) + 18 }}	238	contentInset={{ bottom: Math.max(insets.bottom, 18) + 18 }}
231	contentContainerStyle={{	239	contentContainerStyle={{
232	paddingHorizontal: isInspector ? 12 : 20,	240	paddingHorizontal: Platform.OS === "android" ? 8 : isInspector ? 12 : 20,
233	paddingTop: 8,	241	paddingTop: 8,
234	gap: 14,	242	gap: Platform.OS === "android" ? 8 : 14,
235	}}	243	}}
236	refreshControl={	244	refreshControl={
237	<RefreshControl refreshing={isPullRefreshing} onRefresh={() => void handlePullRefresh()} />	245	<RefreshControl refreshing={isPullRefreshing} onRefresh={() => void handlePullRefresh()} />
...	@@ -239,14 +247,18 @@ export function GitOverviewSheet(props: GitOverviewSheetProps) {	...	@@ -239,14 +247,18 @@ export function GitOverviewSheet(props: GitOverviewSheetProps) {
239	>	247	>
240	<View	248	<View
241	className={	249	className={
242	isInspector	250	Platform.OS === "android"
243	? "overflow-hidden rounded-2xl border border-border bg-card px-3 py-1"	251	? "overflow-hidden rounded-[20px] bg-card"
244	: "overflow-hidden rounded-[22px] border border-border bg-card px-4 py-1"	252	: isInspector
		253	? "overflow-hidden rounded-2xl border border-border bg-card px-3 py-1"
		254	: "overflow-hidden rounded-[22px] border border-border bg-card px-4 py-1"
245	}	255	}
246	>	256	>
247	{sheetMenuItems.map(({ item, disabledReason }, index) => (	257	{sheetMenuItems.map(({ item, disabledReason }, index) => (
248	<View key={`${item.id}-${item.label}`}>	258	<View key={`${item.id}-${item.label}`}>
249	{index > 0 ? <View className="ml-12 h-px bg-border" /> : null}	259	{index > 0 && Platform.OS !== "android" ? (
		260	<View className="ml-12 h-px bg-border" />
		261	) : null}
250	<SheetListRow	262	<SheetListRow
251	icon={menuItemIconName(item.icon)}	263	icon={menuItemIconName(item.icon)}
252	title={item.label}	264	title={item.label}
...	@@ -258,7 +270,7 @@ export function GitOverviewSheet(props: GitOverviewSheetProps) {	...	@@ -258,7 +270,7 @@ export function GitOverviewSheet(props: GitOverviewSheetProps) {
258	))}	270	))}
259	{behindCount > 0 ? (	271	{behindCount > 0 ? (
260	<>	272	<>
261	<View className="ml-12 h-px bg-border" />	273	{Platform.OS !== "android" ? <View className="ml-12 h-px bg-border" /> : null}
262	<SheetListRow	274	<SheetListRow
263	icon="arrow.down.circle"	275	icon="arrow.down.circle"
264	title="Pull latest"	276	title="Pull latest"
...	@@ -268,7 +280,7 @@ export function GitOverviewSheet(props: GitOverviewSheetProps) {	...	@@ -268,7 +280,7 @@ export function GitOverviewSheet(props: GitOverviewSheetProps) {
268	/>	280	/>
269	</>	281	</>
270	) : null}	282	) : null}
271	<View className="ml-12 h-px bg-border" />	283	{Platform.OS !== "android" ? <View className="ml-12 h-px bg-border" /> : null}
272	<SheetListRow	284	<SheetListRow
273	icon="text.bubble"	285	icon="text.bubble"
274	title="Review changes"	286	title="Review changes"
...	@@ -283,7 +295,7 @@ export function GitOverviewSheet(props: GitOverviewSheetProps) {	...	@@ -283,7 +295,7 @@ export function GitOverviewSheet(props: GitOverviewSheetProps) {
283	);	295	);
284	}}	296	}}
285	/>	297	/>
286	<View className="ml-12 h-px bg-border" />	298	{Platform.OS !== "android" ? <View className="ml-12 h-px bg-border" /> : null}
287	<SheetListRow	299	<SheetListRow
288	icon="point.topleft.down.curvedto.point.bottomright.up"	300	icon="point.topleft.down.curvedto.point.bottomright.up"
289	title="Branches & worktrees"	301	title="Branches & worktrees"
...	@@ -306,7 +318,11 @@ export function GitOverviewSheet(props: GitOverviewSheetProps) {	...	@@ -306,7 +318,11 @@ export function GitOverviewSheet(props: GitOverviewSheetProps) {
306	{linkedPrChains.map((chain) => (	318	{linkedPrChains.map((chain) => (
307	<View	319	<View
308	key={threadPullRequestKeyOf(chain.layers[0]!)}	320	key={threadPullRequestKeyOf(chain.layers[0]!)}
309	className="overflow-hidden rounded-2xl border border-border bg-card px-3 py-1"	321	className={
		322	Platform.OS === "android"
		323	? "overflow-hidden rounded-[20px] bg-card"
		324	: "overflow-hidden rounded-2xl border border-border bg-card px-3 py-1"
		325	}
310	>	326	>
311	{chain.layers.length > 1 ? (	327	{chain.layers.length > 1 ? (
312	<View className="flex-row items-center gap-2 px-1 pt-2 pb-1">	328	<View className="flex-row items-center gap-2 px-1 pt-2 pb-1">
...	@@ -323,7 +339,9 @@ export function GitOverviewSheet(props: GitOverviewSheetProps) {	...	@@ -323,7 +339,9 @@ export function GitOverviewSheet(props: GitOverviewSheetProps) {
323	) : null}	339	) : null}
324	{chain.layers.map((link, index) => (	340	{chain.layers.map((link, index) => (
325	<View key={threadPullRequestKeyOf(link)}>	341	<View key={threadPullRequestKeyOf(link)}>
326	{index > 0 ? <View className="ml-12 h-px bg-border" /> : null}	342	{index > 0 && Platform.OS !== "android" ? (
		343	<View className="ml-12 h-px bg-border" />
		344	) : null}
327	<SheetListRow	345	<SheetListRow
328	icon="arrow.triangle.pull"	346	icon="arrow.triangle.pull"
329	title={`#${link.number} ${link.snapshot?.title ?? "Pull request"}`}	347	title={`#${link.number} ${link.snapshot?.title ?? "Pull request"}`}
...	@@ -416,8 +434,19 @@ export function GitOverviewSheet(props: GitOverviewSheetProps) {	...	@@ -416,8 +434,19 @@ export function GitOverviewSheet(props: GitOverviewSheetProps) {
416	return (	434	return (
417	<View	435	<View
418	collapsable={false}	436	collapsable={false}
419	className={isInspector ? "flex-1 border-l border-border bg-sheet" : "flex-1 bg-sheet"}	437	className={
		438	Platform.OS === "android"
		439	? "flex-1 bg-header"
		440	: isInspector
		441	? "flex-1 border-l border-border bg-sheet"
		442	: "flex-1 bg-sheet"
		443	}
420	>	444	>
		445	{!isInspector ? (
		446	<NativeStackScreenOptions
		447	options={{ sheetCornerRadius: Platform.OS === "android" ? 28 : undefined }}
		448	/>
		449	) : null}
421	{isInspector ? (	450	{isInspector ? (
422	<View	451	<View
423	style={{	452	style={{
...	@@ -428,24 +457,41 @@ export function GitOverviewSheet(props: GitOverviewSheetProps) {	...	@@ -428,24 +457,41 @@ export function GitOverviewSheet(props: GitOverviewSheetProps) {
428	) : null}	457	) : null}
429		458
430	{isInspector ? (	459	{isInspector ? (
431	<View className="gap-1 border-b border-border px-4 pb-4 pt-3">	460	<View
432	<Pressable	461	className={
433	className={	462	Platform.OS === "android"
434	busy	463	? "gap-1 bg-header px-4 pb-4 pt-3"
435	? "absolute right-3 top-4 z-[1] h-9 w-9 items-center justify-center rounded-full bg-subtle opacity-[0.45]"	464	: "gap-1 border-b border-border px-4 pb-4 pt-3"
436	: "absolute right-3 top-4 z-[1] h-9 w-9 items-center justify-center rounded-full bg-subtle"	465	}
437	}	466	>
438	disabled={busy}	467	{Platform.OS === "android" ? (
439	onPress={() => void gitActions.refreshSelectedThreadGitStatus()}	468	<View className="absolute right-3 top-4 z-[1]">
440	>	469	<AndroidHeaderIconButton
441	<SymbolView	470	accessibilityLabel="Refresh repository status"
442	name="arrow.clockwise"	471	disabled={busy}
443	size={16}	472	icon="arrow.clockwise"
444	tintColorClassName={"accent-icon"}	473	onPress={() => void gitActions.refreshSelectedThreadGitStatus()}
445	type="monochrome"	474	/>
446	weight="medium"	475	</View>
447	/>	476	) : (
448	</Pressable>	477	<Pressable
		478	className={
		479	busy
		480	? "absolute right-3 top-4 z-[1] h-9 w-9 items-center justify-center rounded-full bg-subtle opacity-[0.45]"
		481	: "absolute right-3 top-4 z-[1] h-9 w-9 items-center justify-center rounded-full bg-subtle"
		482	}
		483	disabled={busy}
		484	onPress={() => void gitActions.refreshSelectedThreadGitStatus()}
		485	>
		486	<SymbolView
		487	name="arrow.clockwise"
		488	size={16}
		489	tintColorClassName="accent-icon"
		490	type="monochrome"
		491	weight="medium"
		492	/>
		493	</Pressable>
		494	)}
449	<Text className="text-xs font-t3-bold tracking-[1px] uppercase text-foreground-muted">	495	<Text className="text-xs font-t3-bold tracking-[1px] uppercase text-foreground-muted">
450	Repository	496	Repository
451	</Text>	497	</Text>
...	@@ -457,6 +503,7 @@ export function GitOverviewSheet(props: GitOverviewSheetProps) {	...	@@ -457,6 +503,7 @@ export function GitOverviewSheet(props: GitOverviewSheetProps) {
457	) : (	503	) : (
458	<AndroidSheetHeader	504	<AndroidSheetHeader
459	title={currentBranchLabel}	505	title={currentBranchLabel}
		506	hideBottomBorder={Platform.OS === "android"}
460	subtitle={currentStatusSummary}	507	subtitle={currentStatusSummary}
461	onBack={() => navigation.goBack()}	508	onBack={() => navigation.goBack()}
462	actions={[	509	actions={[
...	@@ -470,7 +517,9 @@ export function GitOverviewSheet(props: GitOverviewSheetProps) {	...	@@ -470,7 +517,9 @@ export function GitOverviewSheet(props: GitOverviewSheetProps) {
470	/>	517	/>
471	)}	518	)}
472		519
473	{content}	520	<MaterialScreenContent insetHorizontal={layout.usesSplitView}>
		521	{content}
		522	</MaterialScreenContent>
474	</View>	523	</View>
475	);	524	);
476	}	525	}

apps/mobile/src/features/threads/git/gitSheetComponents.tsx+58-19

 @@ -1,7 +1,8 @@
 import { SymbolView } from "../../../components/AppSymbol";
 import type { ComponentProps } from "react";
-import { Pressable, View } from "react-native";
+import { Platform, Pressable, View } from "react-native";
 import { AppText as Text } from "../../../components/AppText";
+import { MaterialButton } from "../../../components/MaterialButton";
 import { cn } from "../../../lib/cn";
 /* ─── Shared sheet components ──────────────────────────────────────── */
 @@ -13,6 +14,18 @@ export function SheetActionButton(props: {
   readonly tone?: "primary" | "secondary" | "danger";
   readonly onPress: () => void;
 }) {
+  if (Platform.OS === "android")
+    return (
+      <View className="flex-1">
+        <MaterialButton
+          label={props.label}
+          tone={props.tone}
+          disabled={props.disabled}
+          onPress={props.onPress}
+          fullWidth
+        />
+      </View>
+    );
   const tone = props.tone ?? "secondary";
   const textColorClassName =
     tone === "primary"
 @@ -24,13 +37,13 @@ export function SheetActionButton(props: {
   return (
     <Pressable
       className={cn(
-        "min-h-[48px] flex-1 flex-row items-center justify-center gap-2 rounded-[18px] px-4 py-3 disabled:opacity-[0.45]",
+        "min-h-[48px] flex-row items-center justify-center gap-2 px-4 py-3 disabled:opacity-[0.45]",
-        tone === "primary"
+        "flex-1 rounded-[18px]",
-          ? "bg-primary"
+        tone === "primary" ? "bg-primary" : tone === "danger" ? "bg-danger" : "bg-secondary",
-          : tone === "danger"
+        tone !== "primary" &&
-            ? "border border-danger-border bg-danger"
+          (tone === "danger" ? "border border-danger-border" : "border border-secondary-border"),
-            : "border border-secondary-border bg-secondary",
       )}
+      accessibilityRole="button"
       disabled={props.disabled}
       onPress={props.onPress}
     >
 @@ -58,7 +71,13 @@ export function SheetActionButton(props: {
 export function MetaCard(props: { readonly label: string; readonly value: string }) {
   return (
-    <View className="rounded-[18px] border border-border bg-card px-4 py-3">
+    <View
+      className={
+        Platform.OS === "android"
+          ? "rounded-[20px] bg-card px-4 py-3"
+          : "rounded-[18px] border border-border bg-card px-4 py-3"
+      }
+    >
       <Text className="text-foreground-muted text-2xs font-t3-bold tracking-[0.9px] uppercase">
         {props.label}
       </Text>
 @@ -78,30 +97,50 @@ export function SheetListRow(props: {
 }) {
   return (
     <Pressable
-      className="flex-row items-center gap-3 px-1 py-3 disabled:opacity-[0.45]"
+      className={
+        Platform.OS === "android"
+          ? "min-h-16 flex-row items-center gap-4 px-4 py-3 active:bg-subtle disabled:opacity-[0.45]"
+          : "flex-row items-center gap-3 px-1 py-3 disabled:opacity-[0.45]"
+      }
       disabled={props.disabled}
       onPress={props.onPress}
     >
-      <View className="bg-subtle h-9 w-9 items-center justify-center rounded-full">
+      <View
+        className={
+          Platform.OS === "android"
+            ? "size-6 items-center justify-center"
+            : "bg-subtle h-9 w-9 items-center justify-center rounded-full"
+        }
+      >
         <SymbolView
           name={props.icon}
-          size={16}
+          size={Platform.OS === "android" ? 24 : 16}
-          tintColorClassName={"accent-icon"}
+          tintColorClassName="accent-icon"
           type="monochrome"
         />
       </View>
       <View className="flex-1 gap-0.5">
-        <Text className="text-foreground text-base font-t3-bold">{props.title}</Text>
+        <Text
+          className={
+            Platform.OS === "android"
+              ? "text-foreground text-base font-t3-medium"
+              : "text-foreground text-base font-t3-bold"
+          }
+        >
+          {props.title}
+        </Text>
         {props.subtitle ? (
           <Text className="text-foreground-muted text-xs leading-snug">{props.subtitle}</Text>
         ) : null}
       </View>
-      <SymbolView
+      {Platform.OS !== "android" ? (
-        name="chevron.right"
+        <SymbolView
-        size={13}
+          name="chevron.right"
-        tintColorClassName={"accent-icon-subtle"}
+          size={13}
-        type="monochrome"
+          tintColorClassName="accent-icon-subtle"
-      />
+          type="monochrome"
+        />
+      ) : null}
     </Pressable>
   );
 }

apps/mobile/src/features/threads/thread-list-items.tsx+43-36

 @@ -183,7 +183,7 @@ export const ThreadListGroupHeader = memo(function ThreadListGroupHeader(props:
           <SymbolView
             name="plus"
             size={compact ? 20 : 16}
-            tintColorClassName={"accent-icon-muted"}
+            tintColorClassName="accent-icon-muted"
             type="monochrome"
             weight="medium"
           />
 @@ -232,7 +232,7 @@ export const ThreadListShowMoreRow = memo(function ThreadListShowMoreRow(props:
         <SymbolView
           name={icon}
           size={10}
-          tintColorClassName={"accent-icon-subtle"}
+          tintColorClassName="accent-icon-subtle"
           type="monochrome"
           weight="semibold"
         />
 @@ -379,7 +379,7 @@ export const PendingTaskListRow = memo(function PendingTaskListRow(props: {
               <SymbolView
                 name="chevron.right"
                 size={13}
-                tintColorClassName={"accent-icon-subtle"}
+                tintColorClassName="accent-icon-subtle"
                 type="monochrome"
               />
             </View>
 @@ -469,10 +469,10 @@ export const ThreadListRow = memo(function ThreadListRow(props: {
   >["simultaneousWithExternalGesture"];
 }) {
   const { width: windowWidth } = useWindowDimensions();
-  const { themeAppearance: colorScheme, materialYouStyleLayoutActive } = useAppearancePreferences();
+  const { themeAppearance: colorScheme } = useAppearancePreferences();
   const compact = props.variant === "compact";
   const selected = props.selected === true;
-  const visuallySelected = selected && (!compact || materialYouStyleLayoutActive);
+  const visuallySelected = selected && (!compact || Platform.OS === "android");
   const theme = useUniwindTheme();
   const screenColor = theme["--color-screen"];
   const drawerColor = theme["--color-drawer"];
 @@ -507,22 +507,22 @@ export const ThreadListRow = memo(function ThreadListRow(props: {
   );
   const backgroundColor = compact ? screenColor : drawerColor;
-  const effectiveSelectedBackground = materialYouStyleLayoutActive
+  const effectiveSelectedBackground =
-    ? materialSelectedBackgroundColor
+    Platform.OS === "android" ? materialSelectedBackgroundColor : selectedBackgroundColor;
-    : selectedBackgroundColor;
+  const effectiveSelectedForeground =
-  const effectiveSelectedForeground = materialYouStyleLayoutActive
+    Platform.OS === "android" ? materialSelectedForegroundColor : selectedForegroundColor;
-    ? materialSelectedForegroundColor
-    : selectedForegroundColor;
   const effectiveStatus =
     visuallySelected && status
       ? {
           ...status,
-          pillClassName: materialYouStyleLayoutActive
+          pillClassName:
-            ? "bg-thread-selected-foreground/20"
+            Platform.OS === "android"
-            : "bg-user-bubble-foreground/20",
+              ? "bg-thread-selected-foreground/20"
-          textClassName: materialYouStyleLayoutActive
+              : "bg-user-bubble-foreground/20",
-            ? "text-thread-selected-foreground"
+          textClassName:
-            : "text-user-bubble-foreground",
+            Platform.OS === "android"
+              ? "text-thread-selected-foreground"
+              : "text-user-bubble-foreground",
         }
       : status;
 @@ -596,7 +596,7 @@ export const ThreadListRow = memo(function ThreadListRow(props: {
                   compact
                     ? "accent-icon-subtle"
                     : selected
-                      ? materialYouStyleLayoutActive
+                      ? Platform.OS === "android"
                         ? "accent-thread-selected-foreground-muted"
                         : "accent-user-bubble-foreground-muted"
                       : "accent-foreground-muted"
 @@ -608,7 +608,7 @@ export const ThreadListRow = memo(function ThreadListRow(props: {
                 "shrink",
                 compact ? "text-sm" : "text-xs",
                 visuallySelected
-                  ? materialYouStyleLayoutActive
+                  ? Platform.OS === "android"
                     ? "text-thread-selected-foreground-muted"
                     : "text-user-bubble-foreground-muted"
                   : "text-foreground-muted",
 @@ -647,7 +647,7 @@ export const ThreadListRow = memo(function ThreadListRow(props: {
             <Text
               className={`${compact ? "text-sm" : "text-xs"} font-t3-medium ${
                 visuallySelected
-                  ? materialYouStyleLayoutActive
+                  ? Platform.OS === "android"
                     ? "text-thread-selected-foreground"
                     : "text-user-bubble-foreground"
                   : pr.textClassName
 @@ -666,7 +666,7 @@ export const ThreadListRow = memo(function ThreadListRow(props: {
         key={`${thread.environmentId}:${thread.id}`}
         interactionClassName={
           visuallySelected
-            ? materialYouStyleLayoutActive
+            ? Platform.OS === "android"
               ? "bg-thread-selected-foreground"
               : "bg-user-bubble-foreground"
             : "bg-primary"
 @@ -676,10 +676,10 @@ export const ThreadListRow = memo(function ThreadListRow(props: {
         accessibilityRole="button"
         className="bg-screen"
         style={
-          materialYouStyleLayoutActive
+          Platform.OS === "android"
             ? {
                 backgroundColor: visuallySelected ? effectiveSelectedBackground : backgroundColor,
-                borderRadius: SIDEBAR_ROW_RADIUS,
+                borderRadius: 20,
               }
             : undefined
         }
 @@ -689,13 +689,18 @@ export const ThreadListRow = memo(function ThreadListRow(props: {
         }}
       >
         <View className="pr-[18px] pt-[10px]" style={{ paddingLeft: THREAD_LIST_COMPACT_INSET }}>
-          <View className={cn("gap-[3px] pb-[10px]", !props.isLast && "border-b border-separator")}>
+          <View
+            className={cn(
+              "gap-[3px] pb-[10px]",
+              Platform.OS !== "android" && !props.isLast && "border-b border-separator",
+            )}
+          >
             <View className="flex-row items-center justify-between gap-2">
               <Text
                 className={cn(
                   "flex-1 text-lg font-t3-bold",
                   visuallySelected
-                    ? materialYouStyleLayoutActive
+                    ? Platform.OS === "android"
                       ? "text-thread-selected-foreground"
                       : "text-user-bubble-foreground"
                     : "text-foreground",
 @@ -706,14 +711,14 @@ export const ThreadListRow = memo(function ThreadListRow(props: {
               </Text>
               <View className="flex-row items-center gap-2">
                 {props.hasQueuedMessages ? (
-                  <QueuedMessageIcon selected={visuallySelected && !materialYouStyleLayoutActive} />
+                  <QueuedMessageIcon selected={visuallySelected && Platform.OS !== "android"} />
                 ) : null}
                 {statusPill}
                 <Text
                   className={cn(
                     "text-base tabular-nums",
                     visuallySelected
-                      ? materialYouStyleLayoutActive
+                      ? Platform.OS === "android"
                         ? "text-thread-selected-foreground-muted"
                         : "text-user-bubble-foreground-muted"
                       : "text-foreground-tertiary",
 @@ -724,7 +729,7 @@ export const ThreadListRow = memo(function ThreadListRow(props: {
                 <SymbolView
                   name="chevron.right"
                   size={13}
-                  tintColorClassName={"accent-icon-subtle"}
+                  tintColorClassName="accent-icon-subtle"
                   type="monochrome"
                 />
               </View>
 @@ -746,7 +751,7 @@ export const ThreadListRow = memo(function ThreadListRow(props: {
         key={`${thread.environmentId}:${thread.id}`}
         interactionClassName={
           visuallySelected
-            ? materialYouStyleLayoutActive
+            ? Platform.OS === "android"
               ? "bg-thread-selected-foreground"
               : "bg-user-bubble-foreground"
             : "bg-primary"
 @@ -761,7 +766,7 @@ export const ThreadListRow = memo(function ThreadListRow(props: {
         }}
         style={{
           backgroundColor: visuallySelected ? effectiveSelectedBackground : backgroundColor,
-          borderRadius: SIDEBAR_ROW_RADIUS,
+          borderRadius: Platform.OS === "android" ? 20 : SIDEBAR_ROW_RADIUS,
           minHeight: 64,
           justifyContent: "center",
           paddingHorizontal: 12,
 @@ -774,7 +779,7 @@ export const ThreadListRow = memo(function ThreadListRow(props: {
               className={cn(
                 "flex-1 text-base font-t3-medium",
                 visuallySelected
-                  ? materialYouStyleLayoutActive
+                  ? Platform.OS === "android"
                     ? "text-thread-selected-foreground"
                     : "text-user-bubble-foreground"
                   : "text-foreground",
 @@ -785,14 +790,14 @@ export const ThreadListRow = memo(function ThreadListRow(props: {
             </Text>
             <View className="flex-row items-center gap-2">
               {props.hasQueuedMessages ? (
-                <QueuedMessageIcon selected={visuallySelected && !materialYouStyleLayoutActive} />
+                <QueuedMessageIcon selected={visuallySelected && Platform.OS !== "android"} />
               ) : null}
               {statusPill}
               <Text
                 className={cn(
                   "text-xs tabular-nums",
                   visuallySelected
-                    ? materialYouStyleLayoutActive
+                    ? Platform.OS === "android"
                       ? "text-thread-selected-foreground-muted"
                       : "text-user-bubble-foreground-muted"
                     : "text-foreground-muted",
 @@ -820,9 +825,11 @@ export const ThreadListRow = memo(function ThreadListRow(props: {
       threadKey={`${thread.environmentId}:${thread.id}`}
       backgroundColor={backgroundColor}
       containerStyle={
-        compact && !materialYouStyleLayoutActive
+        Platform.OS === "android"
-          ? undefined
+          ? { borderRadius: 20, overflow: "hidden", marginHorizontal: 8, marginVertical: 2 }
-          : { borderRadius: SIDEBAR_ROW_RADIUS, overflow: "hidden" }
+          : compact
+            ? undefined
+            : { borderRadius: SIDEBAR_ROW_RADIUS, overflow: "hidden" }
       }
       enableTrackpadSwipe
       fullSwipeWidth={props.fullSwipeWidth ?? windowWidth - 32}

apps/mobile/src/features/threads/thread-list-v2-items.tsx+42-36

 @@ -1,6 +1,5 @@
 import { RowPressable } from "../../components/RowPressable";
 import { CustomSnoozeSheet } from "./CustomSnoozeSheet";
-import { useAppearancePreferences } from "../settings/appearance/AppearancePreferencesProvider";
 import { appAtomRegistry } from "../../state/atom-registry";
 import { threadArrangementOpenAtom } from "../../state/thread-order";
 import type { ThreadMoveDestination } from "./threadOrder";
 @@ -182,7 +181,7 @@ export const ThreadListV2SettledShelfHeader = memo(function ThreadListV2SettledS
       <SymbolView
         name="chevron.down"
         size={10}
-        tintColorClassName={"accent-foreground-muted"}
+        tintColorClassName="accent-foreground-muted"
         type="monochrome"
         style={{ transform: [{ rotate: props.expanded ? "180deg" : "0deg" }] }}
       />
 @@ -441,12 +440,11 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
   const pr = useThreadPr(thread);
-  const { materialYouStyleLayoutActive } = useAppearancePreferences();
   const theme = useUniwindTheme();
   const screenColor = theme["--color-screen"];
   const drawerColor = theme["--color-drawer"];
   const selectedBackgroundColor =
-    theme[materialYouStyleLayoutActive ? "--color-thread-selected" : "--color-user-bubble"];
+    theme[Platform.OS === "android" ? "--color-thread-selected" : "--color-user-bubble"];
   const sidebarPane = props.pane === "sidebar";
   const selected = props.selected === true;
   // The provider badge's border blends into the row's own surface, which
 @@ -456,7 +454,9 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
   const providerIconSurfaceColor = sidebarPane
     ? selected
       ? selectedBackgroundColor
-      : drawerColor
+      : Platform.OS === "android"
+        ? screenColor
+        : drawerColor
     : screenColor;
   const status = resolveThreadListV2Status(thread);
 @@ -750,7 +750,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
           className={cn(
             "flex-1 text-sm font-t3-medium",
             selected
-              ? materialYouStyleLayoutActive
+              ? Platform.OS === "android"
                 ? "text-thread-selected-foreground-muted"
                 : "text-user-bubble-foreground-muted"
               : "text-foreground-muted",
 @@ -764,7 +764,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
           <SymbolView
             name="pin"
             size={11}
-            tintColorClassName={"accent-foreground-muted"}
+            tintColorClassName="accent-foreground-muted"
             type="monochrome"
           />
         ) : null}
 @@ -772,7 +772,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
           className={cn(
             "text-xs tabular-nums",
             selected
-              ? materialYouStyleLayoutActive
+              ? Platform.OS === "android"
                 ? "text-thread-selected-foreground"
                 : "text-user-bubble-foreground"
               : (statusLabel?.className ?? "text-foreground-tertiary"),
 @@ -785,7 +785,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
         className={cn(
           "mt-1 text-base font-t3-medium",
           selected
-            ? materialYouStyleLayoutActive
+            ? Platform.OS === "android"
               ? "text-thread-selected-foreground"
               : "text-user-bubble-foreground"
             : "text-foreground",
 @@ -809,7 +809,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
             className={cn(
               "flex-1 text-xs",
               selected
-                ? materialYouStyleLayoutActive
+                ? Platform.OS === "android"
                   ? "text-thread-selected-foreground-muted"
                   : "text-user-bubble-foreground-muted"
                 : "text-danger-foreground",
 @@ -830,7 +830,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
               className={cn(
                 "shrink text-xs",
                 selected
-                  ? materialYouStyleLayoutActive
+                  ? Platform.OS === "android"
                     ? "text-thread-selected-foreground-muted"
                     : "text-user-bubble-foreground-muted"
                   : "text-foreground-muted",
 @@ -842,7 +842,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
                   className={cn(
                     "text-xs",
                     selected
-                      ? materialYouStyleLayoutActive
+                      ? Platform.OS === "android"
                         ? "text-thread-selected-foreground-muted"
                         : "text-user-bubble-foreground-muted"
                       : "text-foreground-muted",
 @@ -858,7 +858,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
                   className={cn(
                     "text-xs",
                     selected
-                      ? materialYouStyleLayoutActive
+                      ? Platform.OS === "android"
                         ? "text-thread-selected-foreground-muted"
                         : "text-user-bubble-foreground-muted"
                       : "text-foreground-tertiary",
 @@ -874,7 +874,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
                 size={11}
                 tintColorClassName={
                   selected
-                    ? materialYouStyleLayoutActive
+                    ? Platform.OS === "android"
                       ? "accent-thread-selected-foreground-muted"
                       : "accent-user-bubble-foreground-muted"
                     : "accent-foreground-tertiary"
 @@ -893,7 +893,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
                 size={12}
                 tintColorClassName={
                   selected
-                    ? materialYouStyleLayoutActive
+                    ? Platform.OS === "android"
                       ? "accent-thread-selected-foreground"
                       : "accent-user-bubble-foreground"
                     : pr.state === null || pr.isDraft
 @@ -911,7 +911,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
               className={cn(
                 "text-xs",
                 selected
-                  ? materialYouStyleLayoutActive
+                  ? Platform.OS === "android"
                     ? "text-thread-selected-foreground"
                     : "text-user-bubble-foreground"
                   : pr.textClassName,
 @@ -941,13 +941,13 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
       <RowPressable
         key={`${thread.environmentId}:${thread.id}`}
         interactionClassName={
-          selected && (sidebarPane || materialYouStyleLayoutActive)
+          selected && (sidebarPane || Platform.OS === "android")
-            ? materialYouStyleLayoutActive
+            ? Platform.OS === "android"
               ? "bg-thread-selected-foreground"
               : "bg-user-bubble-foreground"
             : "bg-primary"
         }
-        className={sidebarPane || materialYouStyleLayoutActive ? undefined : "bg-screen"}
+        className={sidebarPane || Platform.OS === "android" ? undefined : "bg-screen"}
         accessibilityHint={swipeAccessibilityHint}
         accessibilityLabel={
           props.hasQueuedMessages ? `${thread.title}, messages queued to send` : thread.title
 @@ -959,14 +959,14 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
           onSelectThread(thread);
         }}
         style={
-          sidebarPane || materialYouStyleLayoutActive
+          sidebarPane || Platform.OS === "android"
             ? {
                 backgroundColor: selected
                   ? selectedBackgroundColor
-                  : sidebarPane
+                  : sidebarPane && Platform.OS !== "android"
                     ? drawerColor
                     : screenColor,
-                borderRadius: SIDEBAR_V2_ROW_RADIUS,
+                borderRadius: Platform.OS === "android" ? 20 : SIDEBAR_V2_ROW_RADIUS,
                 ...(sidebarPane ? { paddingHorizontal: 12, paddingVertical: 10 } : null),
               }
             : undefined
 @@ -980,8 +980,10 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
              separates rows. The opaque screen background stays so swipe
              actions reveal behind the row. */
           <View>
-            <View className="px-5 py-2.5">{cardContent}</View>
+            <View className={Platform.OS === "android" ? "px-3 py-2.5" : "px-5 py-2.5"}>
-            {props.showTrailingDivider !== false ? (
+              {cardContent}
+            </View>
+            {Platform.OS !== "android" && props.showTrailingDivider !== false ? (
               <View className="ml-5 h-px bg-border-subtle" />
             ) : null}
           </View>
 @@ -991,8 +993,8 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
       <RowPressable
         key={`${thread.environmentId}:${thread.id}`}
         interactionClassName={
-          selected && (sidebarPane || materialYouStyleLayoutActive)
+          selected && (sidebarPane || Platform.OS === "android")
-            ? materialYouStyleLayoutActive
+            ? Platform.OS === "android"
               ? "bg-thread-selected-foreground"
               : "bg-user-bubble-foreground"
             : "bg-primary"
 @@ -1003,20 +1005,20 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
         }
         accessibilityRole="button"
         accessibilityState={{ selected }}
-        className={sidebarPane || materialYouStyleLayoutActive ? undefined : "bg-screen"}
+        className={sidebarPane || Platform.OS === "android" ? undefined : "bg-screen"}
         onPress={() => {
           close();
           onSelectThread(thread);
         }}
         style={
-          sidebarPane || materialYouStyleLayoutActive
+          sidebarPane || Platform.OS === "android"
             ? {
                 backgroundColor: selected
                   ? selectedBackgroundColor
-                  : sidebarPane
+                  : sidebarPane && Platform.OS !== "android"
                     ? drawerColor
                     : screenColor,
-                borderRadius: SIDEBAR_V2_ROW_RADIUS,
+                borderRadius: Platform.OS === "android" ? 20 : SIDEBAR_V2_ROW_RADIUS,
               }
             : undefined
         }
 @@ -1044,7 +1046,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
               className={cn(
                 "text-base",
                 selected
-                  ? materialYouStyleLayoutActive
+                  ? Platform.OS === "android"
                     ? "text-thread-selected-foreground"
                     : "text-user-bubble-foreground"
                   : "text-foreground-muted",
 @@ -1066,7 +1068,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
             className={cn(
               "text-sm tabular-nums",
               selected
-                ? materialYouStyleLayoutActive
+                ? Platform.OS === "android"
                   ? "text-thread-selected-foreground-muted"
                   : "text-user-bubble-foreground-muted"
                 : snoozedRow
 @@ -1084,16 +1086,20 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
     );
   return (
-    <>
+    <View collapsable={false}>
       {customSnoozeOpen && (
         <CustomSnoozeSheet onClose={() => setCustomSnoozeOpen(false)} onSnooze={handleSnooze} />
       )}
       <ThreadSwipeable
         threadKey={`${thread.environmentId}:${thread.id}`}
-        backgroundColor={sidebarPane ? drawerColor : screenColor}
+        backgroundColor={sidebarPane && Platform.OS !== "android" ? drawerColor : screenColor}
         compactActions={variant === "slim"}
         containerStyle={
-          sidebarPane ? { borderRadius: SIDEBAR_V2_ROW_RADIUS, overflow: "hidden" } : undefined
+          Platform.OS === "android"
+            ? { borderRadius: 20, overflow: "hidden", marginHorizontal: 8, marginVertical: 2 }
+            : sidebarPane
+              ? { borderRadius: SIDEBAR_V2_ROW_RADIUS, overflow: "hidden" }
+              : undefined
         }
         enableTrackpadSwipe
         // Full swipe commits the advertised lifecycle action (Settle /
 @@ -1141,6 +1147,6 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
           </ControlPillMenu>
         )}
       </ThreadSwipeable>
-    </>
+    </View>
   );
 });

apps/mobile/src/features/threads/thread-search-match.tsx+4-5

 @@ -1,8 +1,8 @@
+import { Platform } from "react-native";
 import type { EnvironmentThreadSearchMatch } from "@t3tools/client-runtime/state/thread-search";
 import { AppText as Text } from "../../components/AppText";
 import { cn } from "../../lib/cn";
-import { useAppearancePreferences } from "../settings/appearance/AppearancePreferencesProvider";
 function foldAsciiCase(value: string): string {
   return value.replace(/[A-Z]/g, (character) => character.toLowerCase());
 @@ -51,14 +51,13 @@ export function ThreadSearchMatchExcerpt(props: {
   readonly compact?: boolean;
 }) {
   const isUser = props.match.source === "user";
-  const { materialYouStyleLayoutActive } = useAppearancePreferences();
   const parts = splitHighlightParts(props.match.snippet, props.query);
   return (
     <Text
       className={cn(
         props.compact ? "text-sm" : "text-xs",
         props.selected
-          ? materialYouStyleLayoutActive
+          ? Platform.OS === "android"
             ? "text-thread-selected-foreground-muted"
             : "text-user-bubble-foreground-muted"
           : "text-foreground-muted",
 @@ -69,7 +68,7 @@ export function ThreadSearchMatchExcerpt(props: {
         className={cn(
           props.compact ? "text-sm font-t3-medium" : "text-xs font-t3-medium",
           props.selected
-            ? materialYouStyleLayoutActive
+            ? Platform.OS === "android"
               ? "text-thread-selected-foreground"
               : "text-user-bubble-foreground"
             : isUser
 @@ -85,7 +84,7 @@ export function ThreadSearchMatchExcerpt(props: {
             props.compact ? "text-sm" : "text-xs",
             part.highlighted && "font-t3-bold",
             props.selected
-              ? materialYouStyleLayoutActive
+              ? Platform.OS === "android"
                 ? "text-thread-selected-foreground"
                 : "text-user-bubble-foreground"
               : part.highlighted

apps/mobile/src/features/usage/UsageLimitsPooled.tsx+4-12

 @@ -12,15 +12,14 @@ import {
   type LimitPoolWindow,
 } from "@t3tools/shared/usageLimits";
 import { useId, useState } from "react";
-import { Platform, Pressable, ScrollView, View } from "react-native";
+import { Pressable, ScrollView, View } from "react-native";
 import { Defs, Path, Pattern, Rect, Svg } from "react-native-svg";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { AndroidScreenHeader } from "../../components/AndroidScreenHeader";
 import { SymbolView } from "../../components/AppSymbol";
 import { AppText as Text } from "../../components/AppText";
 import { ProviderIcon } from "../../components/ProviderIcon";
-import { NativeStackScreenOptions } from "../../native/StackHeader";
+import { SettingsScreen } from "../settings/components/SettingsScreen";
 import { environmentPresentations } from "../../state/presentation";
 import { ResetCredits } from "./UsageLimitsSection";
 import { useProviderColors } from "./usageProviders";
 @@ -278,7 +277,6 @@ type AccountScreenProps = StaticScreenProps<{
 /** Resolve the account again so live quota and credit updates reach the open detail screen. */
 export function UsageLimitAccountScreen({ route }: AccountScreenProps) {
-  const navigation = useNavigation();
   const insets = useSafeAreaInsets();
   const presentations = useAtomValue(environmentPresentations.presentationsAtom);
   const { accountKey, windowId, windowKind, environmentIds, now } = route.params;
 @@ -297,13 +295,7 @@ export function UsageLimitAccountScreen({ route }: AccountScreenProps) {
   const reset = pool?.resets.find((candidate) => candidate.member.account.key === accountKey);
   const [revealed, setRevealed] = useState(false);
   return (
-    <View collapsable={false} className="flex-1 bg-sheet">
+    <SettingsScreen title="Account">
-      {Platform.OS === "android" ? (
-        <>
-          <NativeStackScreenOptions options={{ headerShown: false }} />
-          <AndroidScreenHeader title="Account" onBack={() => navigation.goBack()} />
-        </>
-      ) : null}
       <ScrollView
         contentInsetAdjustmentBehavior="automatic"
         contentContainerClassName="gap-5 p-5"
 @@ -389,6 +381,6 @@ export function UsageLimitAccountScreen({ route }: AccountScreenProps) {
           </>
         )}
       </ScrollView>
-    </View>
+    </SettingsScreen>
   );
 }

apps/mobile/src/features/usage/UsageRouteScreen.tsx+8-18

 @@ -1,3 +1,4 @@
+import { ScreenScrollView as ScrollView } from "../../components/ScreenScrollView";
 import { EnvironmentId, USAGE_CONTRACT_VERSION } from "@t3tools/contracts";
 import { type RouteProp, useIsFocused, useNavigation, useRoute } from "@react-navigation/native";
 import {
 @@ -18,15 +19,14 @@ import {
   makeWindow,
 } from "@t3tools/shared/usageFormat";
 import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { Platform, Pressable, RefreshControl, ScrollView, View } from "react-native";
+import { Platform, Pressable, RefreshControl, View } from "react-native";
 import Animated, { FadeIn, ReduceMotion } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { SegmentedControl } from "../../components/SegmentedControl";
-import { AndroidScreenHeader } from "../../components/AndroidScreenHeader";
 import { AppText as Text } from "../../components/AppText";
 import { cn } from "../../lib/cn";
-import { NativeStackScreenOptions } from "../../native/StackHeader";
+import { SettingsScreen } from "../settings/components/SettingsScreen";
 import { useUsage, type EnvironmentUsageStatus } from "../../state/usage";
 import { SettingsSection } from "../settings/components/SettingsSection";
 import { UsageDailyChart } from "./UsageDailyChart";
 @@ -236,17 +236,7 @@ export function UsageRouteScreen() {
   }, [navigation, environmentFilter]);
   return (
-    <View collapsable={false} className="flex-1 bg-sheet">
+    <SettingsScreen title="Usage" trailing={environmentFilter}>
-      {Platform.OS === "android" ? (
-        <>
-          <NativeStackScreenOptions options={{ headerShown: false }} />
-          <AndroidScreenHeader
-            title="Usage"
-            onBack={() => navigation.goBack()}
-            trailing={environmentFilter}
-          />
-        </>
-      ) : null}
       <ScrollView
         contentInsetAdjustmentBehavior="automatic"
         showsVerticalScrollIndicator={false}
 @@ -277,20 +267,20 @@ export function UsageRouteScreen() {
             <>
               {/* Period and metric together: neither applies to Limits, and
                 both change every number below, so they share one bar. */}
-              <View className="flex-row items-center gap-3">
+              <View className={cn("gap-3", Platform.OS !== "android" && "flex-row items-center")}>
                 <SegmentedControl
                   options={WINDOW_OPTIONS}
                   selected={windowDays}
                   onSelect={selectWindow}
                   size="compact"
-                  className="flex-1"
+                  className={Platform.OS === "android" ? "w-full" : "flex-1"}
                 />
                 <SegmentedControl
                   options={METRIC_OPTIONS}
                   selected={metric}
                   onSelect={setMetric}
                   size="compact"
-                  className="w-36"
+                  className={Platform.OS === "android" ? "w-full" : "w-36"}
                 />
               </View>
               {merged.duplicateSources.length > 0 ? (
 @@ -330,7 +320,7 @@ export function UsageRouteScreen() {
           )}
         </Animated.View>
       </ScrollView>
-    </View>
+    </SettingsScreen>
   );
 }

apps/mobile/src/lib/appBlurTarget.ts deleted-8

...	@@ -1,8 +0,0 @@
1	import { createRef } from "react";
2	import type { View } from "react-native";
3
4	// Android BlurViews can't sample their real backdrop like iOS does — they
5	// need an explicit BlurTargetView to snapshot. App.tsx wraps the app content
6	// in one and binds this ref so overlays hosted in separate windows (the
7	// anchored dropdown's Modal) can still blur what's on screen behind them.
8	export const appBlurTargetRef = createRef<View>();

apps/mobile/src/lib/glassBlurTarget.ts deleted-6

...	@@ -1,6 +0,0 @@
1	import { createContext, type RefObject } from "react";
2	import type { View } from "react-native";
3
4	// Android cannot sample a target that contains the BlurView itself. Keep the
5	// feed in a separate target, shared by the composer and its popovers.
6	export const GlassBlurTargetContext = createContext<RefObject<View \| null> \| undefined>(undefined);

apps/mobile/src/lib/materialYouTheme.test.ts+15-3

 @@ -31,8 +31,20 @@ const palette: MaterialYouPalette = {
 };
 describe("Material You system colors", () => {
+  it.each(["light", "dark"] as const)(
+    "uses the system surface for the Android frame in %s",
+    (appearance) => {
+      const variables = materialYouPaletteToMobileThemeVariables(
+        palette,
+        appearance,
+        getMobileThemeRuntimeVariables("material-you", appearance, "android"),
+      );
+      expect(variables["--color-header"]).toBe(palette.surfaceContainerHigh);
+    },
+  );
   it("overrides the selected theme without mutating its base variables", () => {
-    const base = getMobileThemeRuntimeVariables("t3-code", "dark");
+    const base = getMobileThemeRuntimeVariables("t3-code", "dark", "android");
     const snapshot = { ...base };
     const variables = materialYouPaletteToMobileThemeVariables(palette, "dark", base);
 @@ -47,7 +59,7 @@ describe("Material You system colors", () => {
   });
   it("uses the Messages-style RCS tones for sent messages", () => {
-    const base = getMobileThemeRuntimeVariables("t3-code", "dark");
+    const base = getMobileThemeRuntimeVariables("t3-code", "dark", "android");
     const dark = materialYouPaletteToMobileThemeVariables(
       { ...palette, inversePrimary: "#A31D8DFF" },
       "dark",
 @@ -56,7 +68,7 @@ describe("Material You system colors", () => {
     const light = materialYouPaletteToMobileThemeVariables(
       { ...palette, inversePrimary: "#A31D8DFF" },
       "light",
-      getMobileThemeRuntimeVariables("t3-code", "light"),
+      getMobileThemeRuntimeVariables("t3-code", "light", "android"),
     );
     expect(dark["--color-user-bubble"]).toBe("#850073FF");

apps/mobile/src/lib/mobileThemeVariables.test.ts+38-5

...	@@ -1,25 +1,58 @@	...	@@ -1,25 +1,58 @@
1	import { describe, expect, it } from "vite-plus/test";	1	import { describe, expect, it } from "vite-plus/test";
2		2
3	import { readDefaultMobileThemeVariables } from "./mobileTheme.test-support";	3	import { readDefaultMobileThemeVariables } from "./mobileTheme.test-support";
4	import { getMobileThemeVariables } from "./mobileTheme";	4	import { getMobileThemeVariables, MOBILE_THEME_IDS, themeColorWithAlpha } from "./mobileTheme";
5	import { getMobileThemeRuntimeVariables } from "./mobileThemeVariables";	5	import { getMobileThemeRuntimeVariables } from "./mobileThemeVariables";
6		6
7	describe("mobile theme runtime variables", () => {	7	describe("mobile theme runtime variables", () => {
8	it("derives the standard runtime palette from global.css", () => {	8	it("derives the standard runtime palette from global.css", () => {
9	expect(getMobileThemeRuntimeVariables("t3-code", "light")).toEqual(	9	expect(getMobileThemeRuntimeVariables("t3-code", "light", "ios")).toEqual(
10	readDefaultMobileThemeVariables("light"),	10	readDefaultMobileThemeVariables("light"),
11	);	11	);
12	expect(getMobileThemeRuntimeVariables("t3-code", "dark")).toEqual(	12	expect(getMobileThemeRuntimeVariables("t3-code", "dark", "ios")).toEqual(
13	readDefaultMobileThemeVariables("dark"),	13	readDefaultMobileThemeVariables("dark"),
14	);	14	);
15	});	15	});
16		16
17	it("uses the same shared palette source as generated custom themes", () => {	17	it("uses the same shared palette source as generated custom themes", () => {
18	expect(getMobileThemeRuntimeVariables("ocean", "light")).toEqual(	18	expect(getMobileThemeRuntimeVariables("ocean", "light", "ios")).toEqual(
19	getMobileThemeVariables("ocean", "light"),	19	getMobileThemeVariables("ocean", "light"),
20	);	20	);
21	expect(getMobileThemeRuntimeVariables("iris", "dark")).toEqual(	21	expect(getMobileThemeRuntimeVariables("iris", "dark", "ios")).toEqual(
22	getMobileThemeVariables("iris", "dark"),	22	getMobileThemeVariables("iris", "dark"),
23	);	23	);
24	});	24	});
		25
		26	it.each(MOBILE_THEME_IDS)(
		27	"keeps %s colors on Android with an opaque Material frame",
		28	(themeId) => {
		29	for (const appearance of ["light", "dark"] as const) {
		30	const ios = getMobileThemeRuntimeVariables(themeId, appearance, "ios");
		31	const android = getMobileThemeRuntimeVariables(themeId, appearance, "android");
		32	expect(android).toEqual({
		33	...ios,
		34	"--color-header": themeColorWithAlpha(
		35	ios[
		36	themeId === "t3-code" \|\| themeId === "material-you"
		37	? "--color-card"
		38	: "--color-drawer"
		39	],
		40	1,
		41	),
		42	});
		43	expect(android["--color-header"]).toMatch(/^rgba$\d+, \d+, \d+, 1$$/);
		44	}
		45	},
		46	);
		47
		48	it.each(["t3-code", "material-you"] as const)(
		49	"keeps the %s default dark frame distinct from the rounded settings body",
		50	(themeId) => {
		51	const variables = getMobileThemeRuntimeVariables(themeId, "dark", "android");
		52	expect(variables["--color-header"]).toBe("rgba(23, 23, 23, 1)");
		53	expect(variables["--color-header"]).not.toBe(
		54	themeColorWithAlpha(variables["--color-sheet-solid"], 1),
		55	);
		56	},
		57	);
25	});	58	});

apps/mobile/src/lib/mobileThemeVariables.ts+16-2

...	@@ -1,8 +1,8 @@	...	@@ -1,8 +1,8 @@
1	import defaultThemeVariables from "../../generated-uniwind-default-theme-variables.json";	1	import defaultThemeVariables from "../../generated-uniwind-default-theme-variables.json";
2
3	import {	2	import {
4	DEFAULT_MOBILE_THEME_ID,	3	DEFAULT_MOBILE_THEME_ID,
5	getMobileThemeVariables,	4	getMobileThemeVariables,
		5	themeColorWithAlpha,
6	type MobileThemeAppearance,	6	type MobileThemeAppearance,
7	type MobileThemeId,	7	type MobileThemeId,
8	type MobileThemeVariables,	8	type MobileThemeVariables,
...	@@ -20,8 +20,22 @@ const defaults = defaultThemeVariables as Readonly<	...	@@ -20,8 +20,22 @@ const defaults = defaultThemeVariables as Readonly<
20	export function getMobileThemeRuntimeVariables(	20	export function getMobileThemeRuntimeVariables(
21	themeId: MobileThemeId,	21	themeId: MobileThemeId,
22	appearance: MobileThemeAppearance,	22	appearance: MobileThemeAppearance,
		23	platform: string,
23	): MobileThemeVariables {	24	): MobileThemeVariables {
24	return themeId === DEFAULT_MOBILE_THEME_ID \|\| themeId === "material-you"	25	const usesDefaultPalette = themeId === DEFAULT_MOBILE_THEME_ID \|\| themeId === "material-you";
		26	const variables = usesDefaultPalette
25	? defaults[appearance]	27	? defaults[appearance]
26	: getMobileThemeVariables(themeId, appearance);	28	: getMobileThemeVariables(themeId, appearance);
		29	if (platform !== "android") return variables;
		30
		31	// Rounded panes share one opaque frame. The default dark drawer matches the
		32	// settings body, so use its card tone to keep the rounded edge visible.
		33	// System colors replace this with their own surfaceContainerHigh afterwards.
		34	return {
		35	...variables,
		36	"--color-header": themeColorWithAlpha(
		37	variables[usesDefaultPalette ? "--color-card" : "--color-drawer"],
		38	1,
		39	),
		40	};
27	}	41	}

apps/mobile/src/lib/storage.test.ts+9-15

...	@@ -204,21 +204,15 @@ describe("mobile connection storage", () => {	...	@@ -204,21 +204,15 @@ describe("mobile connection storage", () => {
204	await expect(loadPreferences()).resolves.toEqual({ ...themes, lightThemeId: "t3-chat" });	204	await expect(loadPreferences()).resolves.toEqual({ ...themes, lightThemeId: "t3-chat" });
205	});	205	});
206		206
207	it("persists the Material You layout independently of the selected theme", async () => {	207	it.each([true, false])("drops the removed Android layout preference (%s)", async (enabled) => {
208	await savePreferencesPatch({	208	mocks.setPreferencesJson(
209	lightThemeId: "material-you",	209	JSON.stringify({
210	materialYouStyleLayoutEnabled: true,	210	materialYouStyleLayoutEnabled: enabled,
211	});	211	lightThemeId: "t3-chat",
212	await savePreferencesPatch({ lightThemeId: "t3-chat" });	212	}),
213	await expect(loadPreferences()).resolves.toEqual({	213	10,
214	lightThemeId: "t3-chat",	214	);
215	materialYouStyleLayoutEnabled: true,	215	await expect(loadPreferences()).resolves.toEqual({ lightThemeId: "t3-chat" });
216	});
217	await savePreferencesPatch({ materialYouStyleLayoutEnabled: false });
218	await expect(loadPreferences()).resolves.toEqual({
219	lightThemeId: "t3-chat",
220	materialYouStyleLayoutEnabled: false,
221	});
222	});	216	});
223		217
224	it("drops the removed theme transition preference", async () => {	218	it("drops the removed theme transition preference", async () => {

apps/mobile/src/native/SelectableMarkdownText.android.tsx+17-1

...	@@ -2,8 +2,11 @@ import {	...	@@ -2,8 +2,11 @@ import {
2	SelectableMarkdownText as T3SelectableMarkdownText,	2	SelectableMarkdownText as T3SelectableMarkdownText,
3	type SelectableMarkdownTextProps,	3	type SelectableMarkdownTextProps,
4	} from "@t3tools/mobile-markdown-text/renderer";	4	} from "@t3tools/mobile-markdown-text/renderer";
		5	import { useMemo } from "react";
5		6
6	import { highlightCodeSnippet } from "../features/review/shikiReviewHighlighter";	7	import { highlightCodeSnippet } from "../features/review/shikiReviewHighlighter";
		8	import { themeColorWithAlpha } from "../lib/mobileTheme";
		9	import { useUniwindTheme } from "../lib/useUniwindTheme";
7		10
8	type MobileSelectableMarkdownTextProps = Omit<SelectableMarkdownTextProps, "highlightCode">;	11	type MobileSelectableMarkdownTextProps = Omit<SelectableMarkdownTextProps, "highlightCode">;
9		12
...	@@ -20,5 +23,18 @@ export function hasNativeSelectableMarkdownText(): boolean {	...	@@ -20,5 +23,18 @@ export function hasNativeSelectableMarkdownText(): boolean {
20	}	23	}
21		24
22	export function SelectableMarkdownText(props: MobileSelectableMarkdownTextProps) {	25	export function SelectableMarkdownText(props: MobileSelectableMarkdownTextProps) {
23	return <T3SelectableMarkdownText {...props} highlightCode={highlightCodeSnippet} />;	26	const theme = useUniwindTheme();
		27	const selectionColor = themeColorWithAlpha(theme["--color-primary"], 0.32);
		28	const selectionHandleColor = theme["--color-primary"];
		29	const textStyle = useMemo(
		30	() => ({ selectionColor, selectionHandleColor, ...props.textStyle }),
		31	[props.textStyle, selectionColor, selectionHandleColor],
		32	);
		33	return (
		34	<T3SelectableMarkdownText
		35	{...props}
		36	textStyle={textStyle}
		37	highlightCode={highlightCodeSnippet}
		38	/>
		39	);
24	}	40	}

apps/mobile/src/native/T3ComposerEditor.native.tsx+2-2

...	@@ -14,7 +14,7 @@ import {	...	@@ -14,7 +14,7 @@ import {
14	type Ref,	14	type Ref,
15	} from "react";	15	} from "react";
16	import type { NativeSyntheticEvent, ViewProps } from "react-native";	16	import type { NativeSyntheticEvent, ViewProps } from "react-native";
17	import { Image, StyleSheet } from "react-native";	17	import { Image, Platform, StyleSheet } from "react-native";
18		18
19	import { markdownFileIconSource } from "@t3tools/mobile-markdown-text/file-icons";	19	import { markdownFileIconSource } from "@t3tools/mobile-markdown-text/file-icons";
20	import {	20	import {
...	@@ -259,7 +259,7 @@ export function ComposerEditor({	...	@@ -259,7 +259,7 @@ export function ComposerEditor({
259	);	259	);
260	const { systemColorsActive } = useAppearancePreferences();	260	const { systemColorsActive } = useAppearancePreferences();
261	const themeJson = JSON.stringify({	261	const themeJson = JSON.stringify({
262	selection: systemColorsActive ? theme["--color-primary"] : null,	262	selection: Platform.OS === "android" \|\| systemColorsActive ? theme["--color-primary"] : null,
263	text: theme["--color-foreground"],	263	text: theme["--color-foreground"],
264	placeholder: theme["--color-placeholder"],	264	placeholder: theme["--color-placeholder"],
265	chipBackground: theme["--color-subtle"],	265	chipBackground: theme["--color-subtle"],

apps/mobile/src/persistence/mobile-preferences.ts-6

docs/user/appearance.md+2-1

...	@@ -10,7 +10,8 @@ themes or defaults.	...	@@ -10,7 +10,8 @@ themes or defaults.
10	On Android 12 or newer, choose the Material You theme in Appearance to use colors from	10	On Android 12 or newer, choose the Material You theme in Appearance to use colors from
11	your wallpaper. Selecting another theme replaces those colors. Like other themes, Material You	11	your wallpaper. Selecting another theme replaces those colors. Like other themes, Material You
12	can be selected separately for light and dark appearances.	12	can be selected separately for light and dark appearances.
13	Android also offers Material You Layout, which changes shapes and spacing independently	13	Android uses Material You Layout by default unless you have turned it off in Appearance.
		14	It changes shapes, spacing, and controls independently
14	of the selected theme.	15	of the selected theme.
15		16
16	## Motion	17	## Motion

vite.config.ts+2

author	Alex <me@pixp.cc> 2026-09-16 17:25:37-07:00
committer	GitHub <noreply@github.com> 2026-09-16 17:25:37-07:00
log	e106fe95cc814797cfb3dad6d78c062e96d0060f
tree	c17f6cb4e22c9d61a68357f39920551d4e28041c
parent	394af73e02238e551db14f44d57f1469dd2942aa
signature	Signed by PGP key B5690EEEBB952194

...	@@ -9,6 +9,7 @@ import IconAlertTriangle from "@tabler/icons-react-native/IconAlertTriangle";	...	@@ -9,6 +9,7 @@ import IconAlertTriangle from "@tabler/icons-react-native/IconAlertTriangle";
9	import IconApps from "@tabler/icons-react-native/IconApps";	9	import IconApps from "@tabler/icons-react-native/IconApps";
10	import IconArchive from "@tabler/icons-react-native/IconArchive";	10	import IconArchive from "@tabler/icons-react-native/IconArchive";
11	import IconArrowBackUp from "@tabler/icons-react-native/IconArrowBackUp";	11	import IconArrowBackUp from "@tabler/icons-react-native/IconArrowBackUp";
		12	import IconArrowLeft from "@tabler/icons-react-native/IconArrowLeft";
12	import IconArrowDownCircle from "@tabler/icons-react-native/IconArrowDownCircle";	13	import IconArrowDownCircle from "@tabler/icons-react-native/IconArrowDownCircle";
13	import IconArrowRightCircle from "@tabler/icons-react-native/IconArrowRightCircle";	14	import IconArrowRightCircle from "@tabler/icons-react-native/IconArrowRightCircle";
14	import IconArrowUp from "@tabler/icons-react-native/IconArrowUp";	15	import IconArrowUp from "@tabler/icons-react-native/IconArrowUp";
...	@@ -36,8 +37,10 @@ import IconClock from "@tabler/icons-react-native/IconClock";	...	@@ -36,8 +37,10 @@ import IconClock from "@tabler/icons-react-native/IconClock";
36	import IconCode from "@tabler/icons-react-native/IconCode";	37	import IconCode from "@tabler/icons-react-native/IconCode";
37	import IconCopy from "@tabler/icons-react-native/IconCopy";	38	import IconCopy from "@tabler/icons-react-native/IconCopy";
38	import IconDeviceDesktop from "@tabler/icons-react-native/IconDeviceDesktop";	39	import IconDeviceDesktop from "@tabler/icons-react-native/IconDeviceDesktop";
		40	import IconDatabase from "@tabler/icons-react-native/IconDatabase";
39	import IconDeviceLaptop from "@tabler/icons-react-native/IconDeviceLaptop";	41	import IconDeviceLaptop from "@tabler/icons-react-native/IconDeviceLaptop";
40	import IconDots from "@tabler/icons-react-native/IconDots";	42	import IconDots from "@tabler/icons-react-native/IconDots";
		43	import IconDotsVertical from "@tabler/icons-react-native/IconDotsVertical";
41	import IconDotsCircleHorizontal from "@tabler/icons-react-native/IconDotsCircleHorizontal";	44	import IconDotsCircleHorizontal from "@tabler/icons-react-native/IconDotsCircleHorizontal";
42	import IconEdit from "@tabler/icons-react-native/IconEdit";	45	import IconEdit from "@tabler/icons-react-native/IconEdit";
43	import IconExternalLink from "@tabler/icons-react-native/IconExternalLink";	46	import IconExternalLink from "@tabler/icons-react-native/IconExternalLink";
...	@@ -97,6 +100,7 @@ import { withUniwind } from "uniwind";	...	@@ -97,6 +100,7 @@ import { withUniwind } from "uniwind";
97		100
98	const ANDROID_ICON_BY_SF_SYMBOL: Partial<Record<SFSymbol, Icon>> = {	101	const ANDROID_ICON_BY_SF_SYMBOL: Partial<Record<SFSymbol, Icon>> = {
99	"arrow.branch": IconGitBranch,	102	"arrow.branch": IconGitBranch,
		103	"arrow.left": IconArrowLeft,
100	"arrow.clockwise": IconRefresh,	104	"arrow.clockwise": IconRefresh,
101	"arrow.down.circle": IconArrowDownCircle,	105	"arrow.down.circle": IconArrowDownCircle,
102	"arrow.right.circle": IconArrowRightCircle,	106	"arrow.right.circle": IconArrowRightCircle,
...	@@ -142,7 +146,10 @@ const ANDROID_ICON_BY_SF_SYMBOL: Partial<Record<SFSymbol, Icon>> = {	...	@@ -142,7 +146,10 @@ const ANDROID_ICON_BY_SF_SYMBOL: Partial<Record<SFSymbol, Icon>> = {
142	"folder.badge.plus": IconFolderPlus,	146	"folder.badge.plus": IconFolderPlus,
143	"folder.fill": IconFolder,	147	"folder.fill": IconFolder,
144	gearshape: IconSettings,	148	gearshape: IconSettings,
		149	hammer: IconHammer,
145	"info.circle": IconInfoCircle,	150	"info.circle": IconInfoCircle,
		151	internaldrive: IconDatabase,
		152	keyboard: IconKeyboard,
146	laptopcomputer: IconDeviceLaptop,	153	laptopcomputer: IconDeviceLaptop,
147	link: IconLink,	154	link: IconLink,
148	"line.3.horizontal": IconMenu2,	155	"line.3.horizontal": IconMenu2,
...	@@ -160,6 +167,7 @@ const ANDROID_ICON_BY_SF_SYMBOL: Partial<Record<SFSymbol, Icon>> = {	...	@@ -160,6 +167,7 @@ const ANDROID_ICON_BY_SF_SYMBOL: Partial<Record<SFSymbol, Icon>> = {
160	"pin.slash": IconPinnedOff,	167	"pin.slash": IconPinnedOff,
161	play: IconPlayerPlay,	168	play: IconPlayerPlay,
162	plus: IconPlus,	169	plus: IconPlus,
		170	minus: IconMinus,
163	"qrcode.viewfinder": IconQrcode,	171	"qrcode.viewfinder": IconQrcode,
164	"point.3.connected.trianglepath.dotted": IconNetwork,	172	"point.3.connected.trianglepath.dotted": IconNetwork,
165	"point.topleft.down.curvedto.point.bottomright.up": IconGitMerge,	173	"point.topleft.down.curvedto.point.bottomright.up": IconGitMerge,
...	@@ -209,6 +217,7 @@ const ANDROID_ICON_BY_MATERIAL_NAME: Record<string, Icon> = {	...	@@ -209,6 +217,7 @@ const ANDROID_ICON_BY_MATERIAL_NAME: Record<string, Icon> = {
209	keyboard_arrow_down: IconChevronDown,	217	keyboard_arrow_down: IconChevronDown,
210	keyboard_arrow_up: IconChevronUp,	218	keyboard_arrow_up: IconChevronUp,
211	keyboard_hide: IconKeyboardHide,	219	keyboard_hide: IconKeyboardHide,
		220	more_vert: IconDotsVertical,
212	public: IconWorld,	221	public: IconWorld,
213	remove: IconMinus,	222	remove: IconMinus,
214	terminal: IconTerminal2,	223	terminal: IconTerminal2,

...	@@ -8,7 +8,6 @@ import * as Semaphore from "effect/Semaphore";	...	@@ -8,7 +8,6 @@ import * as Semaphore from "effect/Semaphore";
8	import type { SidebarProjectGroupingMode } from "@t3tools/contracts";	8	import type { SidebarProjectGroupingMode } from "@t3tools/contracts";
9	import type { ComposerEnterBehavior } from "../lib/composerEnterBehavior";	9	import type { ComposerEnterBehavior } from "../lib/composerEnterBehavior";
10	import { MOBILE_THEME_IDS, type MobileThemeId, type MobileThemeMode } from "../lib/mobileTheme";	10	import { MOBILE_THEME_IDS, type MobileThemeId, type MobileThemeMode } from "../lib/mobileTheme";
11
12	import * as MobileDatabase from "./mobile-database";	11	import * as MobileDatabase from "./mobile-database";
13	import * as MobileSecureStorage from "./mobile-secure-storage";	12	import * as MobileSecureStorage from "./mobile-secure-storage";
14	import { MobileStorageDecodeError, MobileStorageEncodeError } from "./mobile-storage";	13	import { MobileStorageDecodeError, MobileStorageEncodeError } from "./mobile-storage";
...	@@ -22,7 +21,6 @@ export interface Preferences {	...	@@ -22,7 +21,6 @@ export interface Preferences {
22	readonly lightThemeId?: MobileThemeId;	21	readonly lightThemeId?: MobileThemeId;
23	readonly darkThemeId?: MobileThemeId;	22	readonly darkThemeId?: MobileThemeId;
24	readonly themeMode?: MobileThemeMode;	23	readonly themeMode?: MobileThemeMode;
25	readonly materialYouStyleLayoutEnabled?: boolean;
26	readonly baseFontSize?: number;	24	readonly baseFontSize?: number;
27	readonly terminalFontSize?: number \| null;	25	readonly terminalFontSize?: number \| null;
28	readonly markdownFontSize?: number;	26	readonly markdownFontSize?: number;
...	@@ -94,7 +92,6 @@ function sanitizePreferences(parsed: Preferences): Preferences {	...	@@ -94,7 +92,6 @@ function sanitizePreferences(parsed: Preferences): Preferences {
94	lightThemeId?: MobileThemeId;	92	lightThemeId?: MobileThemeId;
95	darkThemeId?: MobileThemeId;	93	darkThemeId?: MobileThemeId;
96	themeMode?: MobileThemeMode;	94	themeMode?: MobileThemeMode;
97	materialYouStyleLayoutEnabled?: boolean;
98	baseFontSize?: number;	95	baseFontSize?: number;
99	terminalFontSize?: number \| null;	96	terminalFontSize?: number \| null;
100	markdownFontSize?: number;	97	markdownFontSize?: number;
...	@@ -139,9 +136,6 @@ function sanitizePreferences(parsed: Preferences): Preferences {	...	@@ -139,9 +136,6 @@ function sanitizePreferences(parsed: Preferences): Preferences {
139	) {	136	) {
140	preferences.themeMode = parsed.themeMode;	137	preferences.themeMode = parsed.themeMode;
141	}	138	}
142	if (typeof parsed.materialYouStyleLayoutEnabled === "boolean") {
143	preferences.materialYouStyleLayoutEnabled = parsed.materialYouStyleLayoutEnabled;
144	}
145	if (typeof parsed.baseFontSize === "number") preferences.baseFontSize = parsed.baseFontSize;	139	if (typeof parsed.baseFontSize === "number") preferences.baseFontSize = parsed.baseFontSize;
146	if (typeof parsed.terminalFontSize === "number" \|\| parsed.terminalFontSize === null) {	140	if (typeof parsed.terminalFontSize === "number" \|\| parsed.terminalFontSize === null) {
147	preferences.terminalFontSize = parsed.terminalFontSize;	141	preferences.terminalFontSize = parsed.terminalFontSize;

...	@@ -184,6 +184,7 @@ export default defineConfig({	...	@@ -184,6 +184,7 @@ export default defineConfig({
184	"apps/mobile/src/features/connection/ConnectionsNewRouteScreen.tsx",	184	"apps/mobile/src/features/connection/ConnectionsNewRouteScreen.tsx",
185	"apps/mobile/src/features/files/FileMarkdownPreview.tsx",	185	"apps/mobile/src/features/files/FileMarkdownPreview.tsx",
186	"apps/mobile/src/features/files/SourceFileSurface.tsx",	186	"apps/mobile/src/features/files/SourceFileSurface.tsx",
		187	"apps/mobile/src/features/terminal/ThreadTerminalRouteScreen.tsx",
187	"apps/mobile/src/features/files/AttachmentFileScreen.tsx",	188	"apps/mobile/src/features/files/AttachmentFileScreen.tsx",
188	"apps/mobile/src/features/files/ThreadFilesRouteScreen.tsx",	189	"apps/mobile/src/features/files/ThreadFilesRouteScreen.tsx",
189	"apps/mobile/src/features/files/thread-file-navigator-pane.tsx",	190	"apps/mobile/src/features/files/thread-file-navigator-pane.tsx",
...	@@ -204,6 +205,7 @@ export default defineConfig({	...	@@ -204,6 +205,7 @@ export default defineConfig({
204	"apps/mobile/src/lib/useMobileNavigationTheme.ts",	205	"apps/mobile/src/lib/useMobileNavigationTheme.ts",
205	"apps/mobile/src/native/T3ComposerEditor.ios.tsx",	206	"apps/mobile/src/native/T3ComposerEditor.ios.tsx",
206	"apps/mobile/src/native/T3ComposerEditor.native.tsx",	207	"apps/mobile/src/native/T3ComposerEditor.native.tsx",
		208	"apps/mobile/src/native/SelectableMarkdownText.android.tsx",
207	],	209	],
208	rules: {	210	rules: {
209	"t3code/no-mobile-uniwind-theme-escape-hatches": ["error", { allowUniwindTheme: true }],	211	"t3code/no-mobile-uniwind-theme-escape-hatches": ["error", { allowUniwindTheme: true }],

design(mobile): unify Android Material layouts and native controls (#11841)