fix(mobile): reserve the bottom safe area on Android surfaces

apps/mobile/src/components/AndroidAnchoredMenu.tsx

@@ -6,6 +6,7 @@ import type { StyleProp, ViewStyle } from "react-native";
 import { BackHandler, Pressable, ScrollView, View } from "react-native";
 import { useKeyboardState } from "react-native-keyboard-controller";
 import Animated, { FadeIn } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { appBlurTargetRef } from "../lib/appBlurTarget";
 import { useAppearancePreferences } from "../features/settings/appearance/AppearancePreferencesProvider";
@@ -81,6 +82,7 @@ export function AndroidAnchoredMenu(props: AndroidAnchoredMenuProps) {
 
   const { themeAppearance } = useAppearancePreferences();
   const isDarkMode = themeAppearance === "dark";
+  const insets = useSafeAreaInsets();
   const keyboardVisible = useKeyboardState((state) => state.isVisible);
   const keyboardHeight = useKeyboardState((state) => state.height);
   const close = useCallback(() => {
@@ -158,9 +160,13 @@ export function AndroidAnchoredMenu(props: AndroidAnchoredMenuProps) {
         );
   // The keyboard stays up while the menu is open (in-window overlay, no
   // focus change), so the space it covers is not usable — without this the
-  // composer-pill menus "open down" into the IME and can't be tapped.
+  // composer-pill menus "open down" into the IME and can't be tapped. The
+  // portal host spans the whole window, so the gesture bar is unusable too;
+  // the keyboard already covers it when up, hence the max rather than a sum.
   const usableBottom =
-    overlay === null ? 0 : overlay.height - (keyboardVisible ? keyboardHeight : 0);
+    overlay === null
+      ? 0
+      : overlay.height - Math.max(keyboardVisible ? keyboardHeight : 0, insets.bottom);
   const spaceBelow =
     local === null || overlay === null
       ? 0

apps/mobile/src/features/archive/ArchivedThreadsScreen.tsx

@@ -525,6 +525,7 @@ export function ArchivedThreadsScreen(props: {
   readonly onUnarchiveThread: (thread: EnvironmentThreadShell) => void;
 }) {
   const { onDeleteThread, onUnarchiveThread } = props;
+  const insets = useSafeAreaInsets();
   const openSwipeableRef = useRef<SwipeableMethods | null>(null);
   const archiveScrollGesture = useMemo(() => Gesture.Native(), []);
   const environmentLabelsById = useMemo(
@@ -650,7 +651,11 @@ export function ArchivedThreadsScreen(props: {
         <LegendList
           className="flex-1"
           contentContainerStyle={{
-            paddingBottom: 32,
+            // iOS is left alone: contentInsetAdjustmentBehavior="automatic"
+            // already adds the safe area to the content inset, and adding it
+            // here again would leave a dead strip below the last thread.
+            // Android ignores that prop, so it needs the inset spelled out.
+            paddingBottom: Platform.OS === "android" ? Math.max(insets.bottom, 16) + 16 : 32,
             paddingHorizontal: 16,
             paddingTop: 4,
           }}

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

@@ -252,7 +252,13 @@ export function FileTreeBrowser(props: {
       maxToRenderPerBatch={FILE_TREE_RENDER_BATCH_SIZE}
       updateCellsBatchingPeriod={16}
       windowSize={5}
-      contentContainerStyle={{ paddingTop: 8, paddingBottom: 8 }}
+      contentContainerStyle={{
+        paddingTop: 8,
+        // With automatic content insets iOS already reserves the bottom safe
+        // area; Android and pre-glass iOS (`"never"` above) get nothing from
+        // that prop and need the inset here.
+        paddingBottom: NATIVE_LIQUID_GLASS_SUPPORTED ? 8 : Math.max(insets.bottom, 8) + 8,
+      }}
       refreshControl={<RefreshControl refreshing={props.isPending} onRefresh={props.onRefresh} />}
       renderItem={renderItem}
       ListEmptyComponent={

apps/mobile/src/features/review/ReviewSheet.tsx

@@ -277,7 +277,9 @@ function ReviewFileNavigator({
       keyExtractor={(file) => file.id}
       contentContainerStyle={{
         paddingHorizontal: 8,
-        paddingBottom: 8,
+        // iOS hosts this list in a native Screen whose content insets already
+        // cover the home indicator; Android needs the gesture bar reserved.
+        paddingBottom: Platform.OS === "android" ? Math.max(insets.bottom, 8) + 8 : 8,
         // The nested native header is translucent; start the list below it so
         // the scroll-edge effect can sample the content (same treatment as
         // FileTreeBrowser in the Files pane).

apps/mobile/src/features/terminal/ThreadTerminalRouteScreen.tsx

@@ -14,6 +14,7 @@ import {
   KeyboardStickyView,
   useKeyboardState,
 } from "react-native-keyboard-controller";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { AndroidHeaderIconButton, AndroidScreenHeader } from "../../components/AndroidScreenHeader";
 import {
@@ -507,9 +508,13 @@ export function ThreadTerminalRouteScreen(props: ThreadTerminalRouteScreenProps)
     height: state.height,
     isVisible: state.isVisible,
   }));
+  const insets = useSafeAreaInsets();
   const isAccessoryVisible = keyboardState.isVisible && !isAccessoryDismissed;
+  // With the keyboard up its height already clears the gesture bar and the
+  // home indicator; with it down the terminal owns the bottom edge, so the
+  // last rows need the safe area or they scroll under the system chrome.
   const terminalBottomInset =
-    (keyboardState.isVisible ? keyboardState.height : 0) +
+    (keyboardState.isVisible ? keyboardState.height : insets.bottom) +
     (isAccessoryVisible ? TERMINAL_ACCESSORY_HEIGHT : 0);
 
   useEffect(() => {
@@ -1331,7 +1336,7 @@ export function ThreadTerminalRouteScreen(props: ThreadTerminalRouteScreenProps)
                 accessibilityRole="button"
                 onPress={handleShowKeyboard}
                 style={({ pressed }) => ({
-                  bottom: 16,
+                  bottom: Math.max(insets.bottom, 16) + 16,
                   borderRadius: 28,
                   opacity: pressed ? 0.72 : 1,
                   position: "absolute",

oxlint-plugin-t3code/index.ts

@@ -6,6 +6,7 @@ import noInlineSchemaCompile from "./rules/no-inline-schema-compile.ts";
 import noManualEffectRuntimeInTests from "./rules/no-manual-effect-runtime-in-tests.ts";
 import noMobileUniwindThemeEscapeHatches from "./rules/no-mobile-uniwind-theme-escape-hatches.ts";
 import noNativeTitleTooltip from "./rules/no-native-title-tooltip.ts";
+import requireBottomSafeAreaInset from "./rules/require-bottom-safe-area-inset.ts";
 
 export default definePlugin({
   meta: {
@@ -18,5 +19,6 @@ export default definePlugin({
     "no-manual-effect-runtime-in-tests": noManualEffectRuntimeInTests,
     "no-mobile-uniwind-theme-escape-hatches": noMobileUniwindThemeEscapeHatches,
     "no-native-title-tooltip": noNativeTitleTooltip,
+    "require-bottom-safe-area-inset": requireBottomSafeAreaInset,
   },
 });

oxlint-plugin-t3code/rules/require-bottom-safe-area-inset.test.ts

@@ -0,0 +1,264 @@
+import { assert, describe } from "@effect/vitest";
+
+import { createOxlintRuleHarness } from "../test/utils.ts";
+
+const rule = createOxlintRuleHarness("t3code/require-bottom-safe-area-inset", {
+  filename: "fixture.tsx",
+});
+
+describe("t3code/require-bottom-safe-area-inset", () => {
+  rule.valid(
+    "allows bottom offsets outside React Native files",
+    `
+      export const style = { position: "absolute", bottom: 16, right: 16 };
+    `,
+  );
+
+  rule.valid(
+    "allows a floating button that reserves the safe-area inset",
+    `
+      import { Pressable } from "react-native";
+      import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+      export function ShowKeyboardButton() {
+        const insets = useSafeAreaInsets();
+        return (
+          <Pressable
+            style={{ position: "absolute", bottom: Math.max(insets.bottom, 16) + 16, right: 16 }}
+          />
+        );
+      }
+    `,
+  );
+
+  rule.valid(
+    "allows an edge-attached overlay whose child owns the padding",
+    `
+      import { View } from "react-native";
+      import { KeyboardStickyView } from "react-native-keyboard-controller";
+
+      export function ComposerOverlay(props: { readonly bottomInset: number }) {
+        return (
+          <KeyboardStickyView style={{ position: "absolute", bottom: 0, left: 0, right: 0 }}>
+            <View style={{ paddingBottom: props.bottomInset }} />
+          </KeyboardStickyView>
+        );
+      }
+    `,
+  );
+
+  rule.valid(
+    "allows list padding that is derived from the inset",
+    `
+      import { FlatList } from "react-native";
+      import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+      export function FileList() {
+        const insets = useSafeAreaInsets();
+        return (
+          <FlatList
+            data={[]}
+            renderItem={() => null}
+            contentContainerStyle={{ paddingTop: 8, paddingBottom: Math.max(insets.bottom, 18) + 18 }}
+          />
+        );
+      }
+    `,
+  );
+
+  rule.valid(
+    "allows a nested callback that closes over its component's inset",
+    `
+      import { FlatList, View } from "react-native";
+      import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+      export function FileList() {
+        const insets = useSafeAreaInsets();
+        return (
+          <FlatList
+            data={[]}
+            renderItem={() => <View style={{ position: "absolute", bottom: insets.bottom + 8 }} />}
+            contentContainerStyle={{ paddingBottom: insets.bottom }}
+          />
+        );
+      }
+    `,
+  );
+
+  rule.valid(
+    "allows an inline scroll view bounded by an explicit height",
+    `
+      import { ScrollView, Text } from "react-native";
+
+      export function Caption(props: { readonly source: string }) {
+        return (
+          <ScrollView
+            style={{ maxHeight: 88, flexGrow: 0 }}
+            contentContainerStyle={{ paddingHorizontal: 16, paddingBottom: 8 }}
+          >
+            <Text>{props.source}</Text>
+          </ScrollView>
+        );
+      }
+    `,
+  );
+
+  rule.valid(
+    "allows a style array whose last element resets the anchor to the edge",
+    `
+      import { View } from "react-native";
+
+      export function Overlay() {
+        return <View style={[{ position: "absolute", bottom: 16 }, { bottom: 0 }]} />;
+      }
+    `,
+  );
+
+  rule.invalid(
+    "reports an anchor split across style array elements",
+    `
+      import { Pressable } from "react-native";
+
+      export function ShowKeyboardButton() {
+        return <Pressable style={[{ position: "absolute" }, { bottom: 16, right: 16 }]} />;
+      }
+    `,
+    (output) => {
+      assert.match(output, /safe-area inset/);
+    },
+  );
+
+  rule.invalid(
+    "reports an anchor guarded by a condition inside a style array",
+    `
+      import { Pressable } from "react-native";
+
+      export function ShowKeyboardButton(props: { readonly floating: boolean }) {
+        return (
+          <Pressable
+            style={[{ right: 16 }, props.floating && { position: "absolute", bottom: 16 }]}
+          />
+        );
+      }
+    `,
+    (output) => {
+      assert.match(output, /safe-area inset/);
+    },
+  );
+
+  rule.invalid(
+    "reports an anchor on JSX rendered inside an array",
+    `
+      import { View } from "react-native";
+
+      export function Overlays() {
+        return [<View key="fab" style={{ position: "absolute", bottom: 16 }} />];
+      }
+    `,
+    (output) => {
+      assert.match(output, /safe-area inset/);
+    },
+  );
+
+  rule.invalid(
+    "reports a screen-filling list sized with a percentage height",
+    `
+      import { FlatList } from "react-native";
+
+      export function FileList() {
+        return (
+          <FlatList
+            data={[]}
+            renderItem={() => null}
+            style={{ height: "100%" }}
+            contentContainerStyle={{ paddingBottom: 8 }}
+          />
+        );
+      }
+    `,
+    (output) => {
+      assert.match(output, /safe-area inset/);
+    },
+  );
+
+  rule.invalid(
+    "reports a component that ignores the inset even when a sibling component reads it",
+    `
+      import { Pressable, View } from "react-native";
+      import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+      function Header() {
+        const insets = useSafeAreaInsets();
+        return <View style={{ paddingBottom: insets.bottom }} />;
+      }
+
+      export function Screen() {
+        return (
+          <View>
+            <Header />
+            <Pressable style={{ position: "absolute", bottom: 16, right: 16 }} />
+          </View>
+        );
+      }
+    `,
+    (output) => {
+      assert.match(output, /safe-area inset/);
+    },
+  );
+
+  rule.invalid(
+    "reports a fixed bottom padding inside a style array",
+    `
+      import { FlatList, StyleSheet } from "react-native";
+
+      const styles = StyleSheet.create({ base: { paddingTop: 8 } });
+
+      export function FileList() {
+        return (
+          <FlatList
+            data={[]}
+            renderItem={() => null}
+            contentContainerStyle={[styles.base, { paddingBottom: 8 }]}
+          />
+        );
+      }
+    `,
+    (output) => {
+      assert.match(output, /safe-area inset/);
+    },
+  );
+
+  rule.invalid(
+    "reports a floating button pinned with a fixed bottom offset",
+    `
+      import { Pressable } from "react-native";
+
+      export function ShowKeyboardButton() {
+        return <Pressable style={{ position: "absolute", bottom: 16, right: 16 }} />;
+      }
+    `,
+    (output) => {
+      assert.match(output, /safe-area inset/);
+    },
+  );
+
+  rule.invalid(
+    "reports list content padding that ignores the bottom inset",
+    `
+      import { FlatList } from "react-native";
+
+      export function FileList() {
+        return (
+          <FlatList
+            data={[]}
+            renderItem={() => null}
+            contentContainerStyle={{ paddingTop: 8, paddingBottom: 8 }}
+          />
+        );
+      }
+    `,
+    (output) => {
+      assert.match(output, /insets\.bottom/);
+    },
+  );
+});