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";
@@ -82,6 +83,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 rippleColor = useThemeColor("--color-subtle");
@@ -164,9 +166,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

@@ -511,6 +511,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 refreshTint = useThemeColor("--color-icon");
@@ -629,7 +630,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

@@ -1,7 +1,14 @@
 import type { ProjectEntry } from "@t3tools/contracts";
 import { SymbolView } from "../../components/AppSymbol";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { ActivityIndicator, FlatList, Pressable, RefreshControl, View } from "react-native";
+import {
+  ActivityIndicator,
+  FlatList,
+  Platform,
+  Pressable,
+  RefreshControl,
+  View,
+} from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { AppText as Text } from "../../components/AppText";
@@ -256,7 +263,13 @@ export function FileTreeBrowser(props: {
       maxToRenderPerBatch={FILE_TREE_RENDER_BATCH_SIZE}
       updateCellsBatchingPeriod={16}
       windowSize={5}
-      contentContainerStyle={{ paddingTop: 8, paddingBottom: 8 }}
+      contentContainerStyle={{
+        paddingTop: 8,
+        // On iOS the list runs under a native header with automatic content
+        // insets, which already reserve the bottom safe area; Android gets
+        // nothing from that prop and needs the inset here.
+        paddingBottom: Platform.OS === "android" ? Math.max(insets.bottom, 8) + 8 : 8,
+      }}
       refreshControl={<RefreshControl refreshing={props.isPending} onRefresh={props.onRefresh} />}
       renderItem={renderItem}
       ListEmptyComponent={

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

@@ -275,7 +275,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

@@ -12,6 +12,7 @@ import {
   KeyboardStickyView,
   useKeyboardState,
 } from "react-native-keyboard-controller";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { AndroidHeaderIconButton, AndroidScreenHeader } from "../../components/AndroidScreenHeader";
 import {
@@ -503,9 +504,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(() => {
@@ -1289,7 +1294,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

@@ -4,6 +4,7 @@ import namespaceNodeImports from "./rules/namespace-node-imports.ts";
 import noGlobalProcessRuntime from "./rules/no-global-process-runtime.ts";
 import noInlineSchemaCompile from "./rules/no-inline-schema-compile.ts";
 import noManualEffectRuntimeInTests from "./rules/no-manual-effect-runtime-in-tests.ts";
+import requireBottomSafeAreaInset from "./rules/require-bottom-safe-area-inset.ts";
 
 export default definePlugin({
   meta: {
@@ -14,5 +15,6 @@ export default definePlugin({
     "no-global-process-runtime": noGlobalProcessRuntime,
     "no-inline-schema-compile": noInlineSchemaCompile,
     "no-manual-effect-runtime-in-tests": noManualEffectRuntimeInTests,
+    "require-bottom-safe-area-inset": requireBottomSafeAreaInset,
   },
 });

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

@@ -0,0 +1,168 @@
+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.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/);
+    },
+  );
+});