fix(mobile): prevent text leaking through Android glass

apps/mobile/src/components/AndroidAnchoredMenu.tsx

@@ -1,5 +1,4 @@
 import type { MenuAction, MenuComponentProps } from "@react-native-menu/menu";
-import { BlurView } from "expo-blur";
 import type { ReactNode } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { StyleProp, ViewStyle } from "react-native";
@@ -8,11 +7,11 @@ import { useKeyboardState } from "react-native-keyboard-controller";
 import Animated, { FadeIn } from "react-native-reanimated";
 
 import { appBlurTargetRef } from "../lib/appBlurTarget";
-import { useAppearancePreferences } from "../features/settings/appearance/AppearancePreferencesProvider";
 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";
 
 const MENU_WIDTH = 250;
 const SCREEN_MARGIN = 12;
@@ -79,8 +78,6 @@ export function AndroidAnchoredMenu(props: AndroidAnchoredMenuProps) {
   const anchorRef = useRef<View>(null);
   const overlayRef = useRef<View>(null);
 
-  const { themeAppearance } = useAppearancePreferences();
-  const isDarkMode = themeAppearance === "dark";
   const keyboardVisible = useKeyboardState((state) => state.isVisible);
   const keyboardHeight = useKeyboardState((state) => state.height);
   const close = useCallback(() => {
@@ -227,16 +224,7 @@ export function AndroidAnchoredMenu(props: AndroidAnchoredMenuProps) {
                     : { bottom: (rootHeight ?? 0) - local.y + ANCHOR_GAP }),
                 }}
               >
-                {/* Frosted backdrop: blur of the app content behind the menu,
-                  washed with the translucent card tone so rows keep contrast. */}
-                <BlurView
-                  blurMethod="dimezisBlurView"
-                  blurTarget={appBlurTargetRef}
-                  intensity={40}
-                  tint={isDarkMode ? "dark" : "light"}
-                  className="absolute inset-0"
-                />
-                <View className="absolute inset-0 bg-card-translucent" />
+                <GlassBackdrop blurTarget={appBlurTargetRef} />
                 {/* keyboardShouldPersistTaps: the menu often opens over an
                   active editor; the first item tap must act, not just
                   dismiss the keyboard. */}

apps/mobile/src/components/GlassBackdrop.tsx

@@ -0,0 +1,53 @@
+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: {
+  readonly fallbackColor?: ColorValue;
+  readonly blurTarget?: RefObject<View | null>;
+}) {
+  const { themeAppearance } = useAppearancePreferences();
+  const inheritedBlurTarget = useContext(GlassBlurTargetContext);
+  const target = props.blurTarget ?? inheritedBlurTarget;
+  const supportsBlur =
+    Platform.OS === "ios" ||
+    (Platform.OS === "android" && Platform.Version >= 31 && target !== undefined);
+  const colorStyle =
+    props.fallbackColor === undefined
+      ? undefined
+      : { backgroundColor: themeColorWithAlpha(String(props.fallbackColor), 1) };
+
+  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}
+        />
+      ) : null}
+      <View
+        pointerEvents="none"
+        className="absolute inset-0 bg-card"
+        style={[
+          colorStyle,
+          { opacity: supportsBlur ? (themeAppearance === "dark" ? 0.25 : 0.55) : 1 },
+        ]}
+      />
+    </>
+  );
+}

apps/mobile/src/components/GlassSurface.tsx

@@ -1,9 +1,7 @@
-import { BlurView } from "expo-blur";
 import { GlassView, isGlassEffectAPIAvailable } from "expo-glass-effect";
-import { useContext, type ReactNode, type Ref, type RefObject } from "react";
+import type { ReactNode, Ref, RefObject } from "react";
 import {
   Platform,
-  StyleSheet,
   useColorScheme,
   View,
   type ColorValue,
@@ -13,8 +11,7 @@ import {
 import { withUniwind } from "uniwind";
 
 import { cn } from "../lib/cn";
-import { GlassBlurTargetContext } from "../lib/glassBlurTarget";
-import { themeColorWithAlpha } from "../lib/mobileTheme";
+import { GlassBackdrop } from "./GlassBackdrop";
 
 // Explicit mappings keep the native glassEffectStyle enum out of style-array conversion.
 const ThemedGlassView = withUniwind(GlassView, {
@@ -51,13 +48,6 @@ export function GlassSurface({
   ...props
 }: GlassSurfaceProps) {
   const isDarkMode = useColorScheme() === "dark";
-  const inheritedBlurTarget = useContext(GlassBlurTargetContext);
-  const target = blurTarget ?? inheritedBlurTarget;
-  const supportsBlur =
-    Platform.OS === "ios" ||
-    (Platform.OS === "android" && Platform.Version >= 31 && target !== undefined);
-  const backgroundColor =
-    fallbackColor === undefined ? undefined : themeColorWithAlpha(String(fallbackColor), 1);
   const supportsGlass = Platform.OS === "ios" && isGlassEffectAPIAvailable();
   const surfaceStyle: ViewStyle = {
     borderRadius: 32,
@@ -113,21 +103,7 @@ export function GlassSurface({
       )}
       style={[surfaceStyle, style]}
     >
-      {supportsBlur ? (
-        <BlurView
-          pointerEvents="none"
-          blurTarget={target}
-          blurMethod="dimezisBlurViewSdk31Plus"
-          intensity={80}
-          tint={isDarkMode ? "dark" : "default"}
-          style={StyleSheet.absoluteFill}
-        />
-      ) : null}
-      <View
-        pointerEvents="none"
-        className="absolute inset-0 bg-card"
-        style={{ backgroundColor, opacity: supportsBlur ? (isDarkMode ? 0.25 : 0.55) : 1 }}
-      />
+      <GlassBackdrop blurTarget={blurTarget} fallbackColor={fallbackColor} />
       {children}
     </View>
   );