enable contextual on-device translation in post menu

src/components/PostControls/PostMenu/PostMenuItems.tsx

@@ -19,7 +19,6 @@ import {useNavigation} from '@react-navigation/native'
 
 import {DISCOVER_DEBUG_DIDS} from '#/lib/constants'
 import {useOpenLink} from '#/lib/hooks/useOpenLink'
-import {useTranslate} from '#/lib/hooks/useTranslate'
 import {getCurrentRoute} from '#/lib/routes/helpers'
 import {makeProfileLink} from '#/lib/routes/links'
 import {
@@ -95,6 +94,7 @@ import {
 import * as Prompt from '#/components/Prompt'
 import {useAnalytics} from '#/analytics'
 import {IS_INTERNAL} from '#/env'
+import {useMaybeTranslateOnDevice} from '#/translation'
 import * as bsky from '#/types/bsky'
 
 let PostMenuItems = ({
@@ -133,7 +133,7 @@ let PostMenuItems = ({
   const {hidePost} = useHiddenPostsApi()
   const feedFeedback = useFeedFeedbackContext()
   const openLink = useOpenLink()
-  const translate = useTranslate()
+  const translate = useMaybeTranslateOnDevice()
   const navigation = useNavigation<NavigationProp>()
   const {mutedWordsDialogControl} = useGlobalDialogsControlContext()
   const blockPromptControl = useDialogControl()

src/translation/index.tsx

@@ -10,6 +10,7 @@ import {getLocales} from 'expo-localization'
 import {type TranslationTaskResult} from '@bsky.app/expo-translate-text/build/ExpoTranslateText.types'
 
 import {useOpenLink} from '#/lib/hooks/useOpenLink'
+import {useTranslate} from '#/lib/hooks/useTranslate'
 import {getTranslatorLink} from '#/locale/helpers'
 import {logger} from '#/logger'
 import {useLanguagePrefs} from '#/state/preferences'
@@ -95,11 +96,7 @@ const Context = createContext<{
     sourceLangCode?: string,
   ) => Promise<void>
   clearTranslation: () => void
-}>({
-  translationState: IDLE,
-  translate: async () => {},
-  clearTranslation: () => {},
-})
+} | null>(null)
 Context.displayName = 'TranslationContext'
 
 /**
@@ -120,6 +117,29 @@ export function useTranslateOnDevice() {
   return context
 }
 
+/**
+ * Triggers the on-device translation, if within the TranslateOnDeviceProvider.
+ * Otherwise, falls back to linking out to Google Translate.
+ */
+export function useMaybeTranslateOnDevice() {
+  const onDeviceTranslation = useContext(Context)
+  const fallbackTranslation = useTranslate()
+
+  return useCallback(
+    (text: string, targetLangCode: string, sourceLangCode?: string) => {
+      if (onDeviceTranslation) {
+        return onDeviceTranslation.translate(
+          text,
+          targetLangCode,
+          sourceLangCode,
+        )
+      }
+      return fallbackTranslation(text, targetLangCode, sourceLangCode)
+    },
+    [onDeviceTranslation, fallbackTranslation],
+  )
+}
+
 export function Provider({children}: React.PropsWithChildren<unknown>) {
   const [translationState, setTranslationState] =
     useState<TranslationState>(IDLE)