fix(mobile): Android composer picker scrolls past the first four rows

apps/mobile/src/features/threads/ComposerPopoverAnchor.android.tsx

@@ -0,0 +1,70 @@
+import type { ReactNode } from "react";
+import { useEffect, useRef, useState } from "react";
+import { View, type ViewInstance } from "react-native";
+
+import { useComposerPopoverHost } from "./ComposerPopoverHost";
+
+const COMPOSER_GAP = 8;
+
+type Frame = { readonly x: number; readonly y: number; readonly width: number };
+
+/**
+ * Places a composer popover just above the composer. Android only delivers
+ * drags to views inside their parent's bounds, so a popover hung above the
+ * composer with `bottom-full` takes taps but its list never scrolls. Render it
+ * into ComposerPopoverHost instead, which shares the composer's keyboard
+ * transform, so only the composer's resting layout needs measuring.
+ */
+export function ComposerPopoverAnchor(props: { readonly children: ReactNode }) {
+  const host = useComposerPopoverHost();
+  const anchorRef = useRef<ViewInstance>(null);
+  const [frame, setFrame] = useState<Frame | null>(null);
+
+  const measure = () => {
+    const hostView = host?.hostRef.current;
+    if (!hostView) {
+      return;
+    }
+    anchorRef.current?.measureLayout(hostView, (x, y, width) => {
+      setFrame((current) =>
+        current?.x === x && current.y === y && current.width === width ? current : { x, y, width },
+      );
+    });
+  };
+
+  // No dependency array: the composer re-renders when its padding or expanded
+  // state changes, which moves it without resizing the anchor, so measure and
+  // re-project after every render.
+  useEffect(() => {
+    measure();
+    host?.setContent(
+      frame === null ? null : (
+        <View
+          pointerEvents="box-none"
+          className="absolute top-0 justify-end"
+          style={{ left: frame.x, width: frame.width, height: frame.y - COMPOSER_GAP }}
+        >
+          {props.children}
+        </View>
+      ),
+    );
+  });
+
+  const setHostContent = host?.setContent;
+  useEffect(() => () => setHostContent?.(null), [setHostContent]);
+
+  if (host === null) {
+    return <View className="absolute inset-x-0 bottom-full z-10 mb-2">{props.children}</View>;
+  }
+
+  // Covers the composer, so its onLayout fires whenever the composer resizes.
+  return (
+    <View
+      ref={anchorRef}
+      collapsable={false}
+      pointerEvents="none"
+      className="absolute inset-0"
+      onLayout={measure}
+    />
+  );
+}

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

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+import { View } from "react-native";
+
+/** Places a composer popover just above the composer. */
+export function ComposerPopoverAnchor(props: { readonly children: ReactNode }) {
+  return <View className="absolute inset-x-0 bottom-full z-10 mb-2">{props.children}</View>;
+}

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

@@ -0,0 +1,49 @@
+import type { ReactNode, RefObject } from "react";
+import { createContext, useContext, useMemo, useRef, useState } from "react";
+import { View, type ViewInstance } from "react-native";
+
+type ComposerPopoverHostValue = {
+  readonly hostRef: RefObject<ViewInstance | null>;
+  readonly setContent: (content: ReactNode) => void;
+  /** Changes when the host resizes, which moves the bottom-anchored composer. */
+  readonly layoutVersion: number;
+};
+
+const ComposerPopoverHostContext = createContext<ComposerPopoverHostValue | null>(null);
+
+export function useComposerPopoverHost() {
+  return useContext(ComposerPopoverHostContext);
+}
+
+/**
+ * Full-size layer around the composer for its popovers. Mount it inside the
+ * composer's KeyboardStickyView: popovers placed here move with the composer
+ * and sit inside a parent that covers them, so Android delivers their scroll
+ * gestures. It wraps the composer because measureLayout needs an ancestor.
+ * Pass `hidden` whenever the composer itself is hidden: popovers live outside
+ * the composer's subtree, so they don't hide with it.
+ */
+export function ComposerPopoverHost(props: {
+  readonly hidden: boolean;
+  readonly children: ReactNode;
+}) {
+  const hostRef = useRef<ViewInstance>(null);
+  const [content, setContent] = useState<ReactNode>(null);
+  const [layoutVersion, setLayoutVersion] = useState(0);
+  const value = useMemo(() => ({ hostRef, setContent, layoutVersion }), [layoutVersion]);
+
+  return (
+    <ComposerPopoverHostContext.Provider value={value}>
+      <View
+        ref={hostRef}
+        collapsable={false}
+        pointerEvents="box-none"
+        className="absolute inset-0"
+        onLayout={() => setLayoutVersion((version) => version + 1)}
+      >
+        {props.children}
+        {props.hidden ? null : content}
+      </View>
+    </ComposerPopoverHostContext.Provider>
+  );
+}

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

@@ -102,6 +102,7 @@ import {
   type ComposerSendPresentation,
 } from "./composerSendPresentation";
 import { ComposerCommandPopover } from "./ComposerCommandPopover";
+import { ComposerPopoverAnchor } from "./ComposerPopoverAnchor";
 import { ComposerQueuedEditAttachments } from "./ComposerQueuedEdit";
 import { useComposerCommandMenu } from "./use-composer-command-menu";
 import {
@@ -773,15 +774,15 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
         {!voiceInput.isBusy &&
         composerMenu.trigger &&
         (composerMenu.items.length > 0 || composerMenu.trigger.kind === "pull-request") ? (
-          <View className="absolute inset-x-0 bottom-full z-10 mb-2">
+          <ComposerPopoverAnchor>
             <ComposerCommandPopover
               items={composerMenu.items}
               triggerKind={composerMenu.trigger.kind}
               isLoading={composerMenu.isLoading}
               error={composerMenu.error}
               onSelect={composerMenu.onSelect}
             />
-          </View>
+          </ComposerPopoverAnchor>
         ) : null}
 
         {selectedProviderStatus?.compatibilityAdvisory?.message &&