Add moduleSuffixes to tsconfig (#11146)

Co-authored-by: Claude <noreply@anthropic.com>

src/components/ContextMenu/index.web.tsx

@@ -2,8 +2,9 @@ import {type StyleProp, type ViewStyle} from 'react-native'
 
 import {atoms as a, useTheme} from '#/alf'
 import * as Menu from '#/components/Menu'
+import {type TriggerProps as MenuTriggerProps} from '#/components/Menu/types'
 import {Text} from '#/components/Typography'
-import {type AuxiliaryViewProps} from './types'
+import {type AuxiliaryViewProps, type TriggerProps} from './types'
 
 export {
   ContainerItem,
@@ -16,7 +17,6 @@ export {
   ItemText,
   LabelText,
   Root,
-  Trigger,
   useMenuContext as useContextMenuContext,
   useMenuControl as useContextMenuControl,
 } from '#/components/Menu'
@@ -30,14 +30,37 @@ export function AuxiliaryView({}: AuxiliaryViewProps) {
   return null
 }
 
+/*
+ * On web the context menu is just a Menu; contentLabel, onTap, style, and
+ * swipeGesture only apply to the native press-and-hold presentation.
+ */
+export function Trigger({children, label, hint, role}: TriggerProps) {
+  return (
+    <Menu.Trigger label={label} hint={hint} role={role}>
+      {/*
+       * Menu supplies the same web-arm child props shape as ContextMenu's
+       * TriggerChildProps; only the native arms of the two unions differ,
+       * and those never occur here.
+       */}
+      {children as unknown as MenuTriggerProps['children']}
+    </Menu.Trigger>
+  )
+}
+
 export function Outer({
   children,
   label,
+  align: _align,
   style,
   onCloseAutoFocus,
 }: {
   children: React.ReactNode
   label?: string
+  /**
+   * Native positions the menu against the message bubble explicitly; the web
+   * dropdown is anchored by radix, so this is accepted only for parity.
+   */
+  align?: 'left' | 'right'
   style?: StyleProp<ViewStyle>
   onCloseAutoFocus?: (event: Event) => void
 }) {

src/components/Dialog/index.web.tsx

@@ -12,6 +12,7 @@ import {
   type GestureResponderEvent,
   type LayoutChangeEvent,
   Pressable,
+  type ScrollView,
   type StyleProp,
   View,
   type ViewStyle,
@@ -24,6 +25,7 @@ import {RemoveScrollBar} from 'react-remove-scroll-bar'
 import {logger} from '#/logger'
 import {useA11y} from '#/state/a11y'
 import {useDialogStateControlContext} from '#/state/dialogs'
+import {type ListMethods} from '#/view/com/util/List'
 import {atoms as a, flatten, useBreakpoints, useTheme, web} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
 import {Context} from '#/components/Dialog/context'
@@ -224,11 +226,21 @@ export function Inner({
   )
 }
 
-export const ScrollableInner = Inner
+/*
+ * There is no inner ScrollView on web - the ref is accepted for parity with
+ * the native variant and never attached, so native-only scrolling code in
+ * shared callers stays a no-op here.
+ */
+export function ScrollableInner({
+  ref: _ref,
+  ...props
+}: DialogInnerProps & {ref?: React.Ref<ScrollView>}) {
+  return <Inner {...props} />
+}
 
 export const InnerFlatList = forwardRef<
-  FlatList,
-  FlatListProps<any> & {label: string} & {
+  ListMethods,
+  FlatListProps<any> & {label?: string} & {
     webInnerStyle?: StyleProp<ViewStyle>
     webInnerContentContainerStyle?: StyleProp<ViewStyle>
     footer?: React.ReactNode
@@ -247,7 +259,11 @@ export const InnerFlatList = forwardRef<
   const {gtMobile} = useBreakpoints()
   return (
     <Inner
-      label={label}
+      /*
+       * Most shared callers cannot pass a label since the native variant has
+       * no such prop; aria-label is simply absent for them, as before.
+       */
+      label={label as string}
       style={[
         a.overflow_hidden,
         a.px_0,
@@ -256,7 +272,13 @@ export const InnerFlatList = forwardRef<
       ]}
       contentContainerStyle={[a.h_full, a.px_0, webInnerContentContainerStyle]}>
       <FlatList
-        ref={ref}
+        /*
+         * The FlatList instance satisfies the (web) ListMethods interface
+         * shared callers hold their refs as, except scrollToTop, which no
+         * platform-agnostic caller can use since the native ListMethods
+         * (FlatList) lacks it too.
+         */
+        ref={ref as React.Ref<FlatList>}
         style={[a.h_full, gtMobile ? a.px_2xl : a.px_xl, style]}
         {...props}
       />
@@ -321,7 +343,11 @@ export function Close() {
   )
 }
 
-export function Handle() {
+/*
+ * The drag handle only exists on the native bottom sheet; props are accepted
+ * for parity with the native variant.
+ */
+export function Handle(_props: {difference?: boolean; fill?: string}) {
   return null
 }
 

src/components/DraggableList/index.web.tsx

@@ -1,5 +1,7 @@
 import {useState} from 'react'
 import {View} from 'react-native'
+import type Animated from 'react-native-reanimated'
+import {type AnimatedRef, type SharedValue} from 'react-native-reanimated'
 
 import {useTheme} from '#/alf'
 import {DotGrid2x3_Stroke2_Corner0_Rounded as GripIcon} from '#/components/icons/DotGrid'
@@ -18,6 +20,10 @@ interface SortableListProps<T> {
   onDragEnd?: () => void
   /** Fixed row height used for position math. */
   itemHeight: number
+  /** Ref to the parent Animated.ScrollView for auto-scroll. Ignored on web. */
+  scrollRef?: AnimatedRef<Animated.ScrollView>
+  /** Scroll offset shared value from useScrollViewOffset. Ignored on web. */
+  scrollOffset?: SharedValue<number>
 }
 
 export function SortableList<T>({

src/components/Menu/index.web.tsx

@@ -32,6 +32,8 @@ import {
 import {Portal} from '#/components/Portal'
 import {Text} from '#/components/Typography'
 
+export {type DialogControlProps as MenuControlProps} from '#/components/Dialog'
+
 export {useMenuContext}
 
 export function useMenuControl(): Dialog.DialogControlProps {

src/components/Post/Embed/VideoEmbed/VideoEmbedInner/VideoEmbedInnerWeb.native.tsx

@@ -1,3 +1,10 @@
-export function VideoEmbedInnerWeb() {
+import {type VideoEmbedInnerWebProps} from './VideoEmbedInnerWeb.shared'
+
+export {
+  HLSUnsupportedError,
+  VideoNotFoundError,
+} from './VideoEmbedInnerWeb.shared'
+
+export function VideoEmbedInnerWeb(_props: VideoEmbedInnerWebProps): never {
   throw new Error('VideoEmbedInnerWeb may not be used on native.')
 }

src/components/Post/Embed/VideoEmbed/VideoEmbedInner/VideoEmbedInnerWeb.shared.ts

@@ -0,0 +1,21 @@
+import {type AppBskyEmbedVideo} from '@atproto/api'
+
+export type VideoEmbedInnerWebProps = {
+  embed: AppBskyEmbedVideo.View
+  active: boolean
+  setActive: () => void
+  onScreen: boolean
+  lastKnownTime: React.RefObject<number | undefined>
+}
+
+export class HLSUnsupportedError extends Error {
+  constructor() {
+    super('HLS is not supported')
+  }
+}
+
+export class VideoNotFoundError extends Error {
+  constructor() {
+    super('Video not found')
+  }
+}

src/components/Post/Embed/VideoEmbed/VideoEmbedInner/VideoEmbedInnerWeb.tsx

@@ -1,6 +1,5 @@
 import {useCallback, useEffect, useId, useRef, useState} from 'react'
 import {View} from 'react-native'
-import {type AppBskyEmbedVideo} from '@atproto/api'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 import type * as HlsTypes from 'hls.js'
@@ -10,21 +9,25 @@ import {atoms as a} from '#/alf'
 import {AltBadgeWithDialog} from '#/components/AltBadgeWithDialog'
 import {useFullscreen} from '#/components/hooks/useFullscreen'
 import * as BandwidthEstimate from './bandwidth-estimate'
+import {
+  HLSUnsupportedError,
+  type VideoEmbedInnerWebProps,
+  VideoNotFoundError,
+} from './VideoEmbedInnerWeb.shared'
 import {Controls} from './web-controls/VideoControls'
 
+export {
+  HLSUnsupportedError,
+  VideoNotFoundError,
+} from './VideoEmbedInnerWeb.shared'
+
 export function VideoEmbedInnerWeb({
   embed,
   active,
   setActive,
   onScreen,
   lastKnownTime,
-}: {
-  embed: AppBskyEmbedVideo.View
-  active: boolean
-  setActive: () => void
-  onScreen: boolean
-  lastKnownTime: React.RefObject<number | undefined>
-}) {
+}: VideoEmbedInnerWebProps) {
   const containerRef = useRef<HTMLDivElement>(null)
   const videoRef = useRef<HTMLVideoElement>(null)
   const [focused, setFocused] = useState(false)
@@ -104,12 +107,6 @@ export function VideoEmbedInnerWeb({
   )
 }
 
-export class HLSUnsupportedError extends Error {
-  constructor() {
-    super('HLS is not supported')
-  }
-}
-
 // Bluesky serves HLS as MPEG-TS with H.264 + AAC. `Hls.isSupported()` is loose
 // (true if MSE supports *any* of {H.264, AV1, VP9} OR *any* of {AAC, FLAC}),
 // so on Linux boxes missing H.264 (e.g. no ubuntu-restricted-extras, sandboxed
@@ -138,12 +135,6 @@ function canPlayBskyVideoCodecs(): boolean {
   )
 }
 
-export class VideoNotFoundError extends Error {
-  constructor() {
-    super('Video not found')
-  }
-}
-
 type CachedPromise<T> = Promise<T> & {value: undefined | T}
 const promiseForHls = import(
   // @ts-ignore

src/components/Post/Embed/VideoEmbed/VideoEmbedInner/web-controls/VideoControls.native.tsx

@@ -1,3 +1,5 @@
-export function Controls() {
+import {type ControlsProps} from './VideoControls.shared'
+
+export function Controls(_props: ControlsProps): never {
   throw new Error('VideoWebControls may not be used on native.')
 }

src/components/Post/Embed/VideoEmbed/VideoEmbedInner/web-controls/VideoControls.shared.ts

@@ -0,0 +1,17 @@
+import type Hls from 'hls.js'
+
+export type ControlsProps = {
+  videoRef: React.RefObject<HTMLVideoElement | null>
+  hlsRef: React.RefObject<Hls | undefined | null>
+  active: boolean
+  setActive: () => void
+  focused: boolean
+  setFocused: (focused: boolean) => void
+  onScreen: boolean
+  fullscreenRef: React.RefObject<HTMLDivElement | null>
+  hlsLoading: boolean
+  hasSubtitleTrack: boolean
+  isGif: boolean
+  altText?: string
+  updateCuePositions: (controlsVisible?: boolean) => void
+}

src/components/Post/Embed/VideoEmbed/VideoEmbedInner/web-controls/VideoControls.tsx

@@ -3,7 +3,6 @@ import {Pressable, View} from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 import {Trans} from '@lingui/react/macro'
-import type Hls from 'hls.js'
 
 import {clamp} from '#/lib/numbers'
 import {
@@ -33,6 +32,7 @@ import {TimeIndicator} from '../TimeIndicator'
 import {ControlButton} from './ControlButton'
 import {Scrubber} from './Scrubber'
 import {formatTime, useVideoElement} from './utils'
+import {type ControlsProps} from './VideoControls.shared'
 import {VolumeControl} from './VolumeControl'
 
 export function Controls({
@@ -49,21 +49,7 @@ export function Controls({
   isGif,
   altText,
   updateCuePositions,
-}: {
-  videoRef: React.RefObject<HTMLVideoElement | null>
-  hlsRef: React.RefObject<Hls | undefined | null>
-  active: boolean
-  setActive: () => void
-  focused: boolean
-  setFocused: (focused: boolean) => void
-  onScreen: boolean
-  fullscreenRef: React.RefObject<HTMLDivElement | null>
-  hlsLoading: boolean
-  hasSubtitleTrack: boolean
-  isGif: boolean
-  altText?: string
-  updateCuePositions: (controlsVisible?: boolean) => void
-}) {
+}: ControlsProps) {
   const {
     play,
     pause,

src/components/StarterPack/Main/ProfilesList.tsx

@@ -23,7 +23,7 @@ import {ListFooter, ListMaybePlaceholder} from '#/components/Lists'
 import {Default as ProfileCard} from '#/components/ProfileCard'
 import {IS_NATIVE, IS_WEB} from '#/env'
 
-function keyExtractor(item: AppBskyActorDefs.ProfileViewBasic, index: number) {
+function keyExtractor(item: AppBskyActorDefs.ProfileView, index: number) {
   return `${item.did}-${index}`
 }
 
@@ -87,7 +87,7 @@ export const ProfilesList = forwardRef<SectionRef, ProfilesListProps>(
     const renderItem = ({
       item,
       index,
-    }: ListRenderItemInfo<AppBskyActorDefs.ProfileViewBasic>) => {
+    }: ListRenderItemInfo<AppBskyActorDefs.ProfileView>) => {
       return (
         <View
           style={[

src/components/StarterPack/ProfileStarterPacks.tsx

@@ -1,6 +1,5 @@
 import {useCallback, useEffect, useImperativeHandle, useState} from 'react'
 import {
-  findNodeHandle,
   type ListRenderItemInfo,
   type StyleProp,
   useWindowDimensions,
@@ -26,6 +25,7 @@ import {
   type EmptyStateButtonProps,
 } from '#/view/com/util/EmptyState'
 import {List, type ListRef} from '#/view/com/util/List'
+import {findListNativeTag} from '#/view/com/util/listNativeTag'
 import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 import {atoms as a, ios, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
@@ -57,7 +57,7 @@ interface ProfileFeedgensProps {
   emptyStateIcon?: React.ComponentType<any> | React.ReactElement
 }
 
-function keyExtractor(item: AppBskyGraphDefs.StarterPackView) {
+function keyExtractor(item: AppBskyGraphDefs.StarterPackViewBasic) {
   return item.uri
 }
 
@@ -138,13 +138,16 @@ export function ProfileStarterPacks({
 
   useEffect(() => {
     if (IS_IOS && enabled && scrollElRef.current) {
-      const nativeTag = findNodeHandle(scrollElRef.current)
+      const nativeTag = findListNativeTag(scrollElRef.current)
       setScrollViewTag(nativeTag)
     }
   }, [enabled, scrollElRef, setScrollViewTag])
 
   const renderItem = useCallback(
-    ({item, index}: ListRenderItemInfo<AppBskyGraphDefs.StarterPackView>) => {
+    ({
+      item,
+      index,
+    }: ListRenderItemInfo<AppBskyGraphDefs.StarterPackViewBasic>) => {
       return (
         <View
           style={[

src/components/WelcomeModal.tsx

@@ -10,6 +10,7 @@ import {useLoggedOutViewControls} from '#/state/shell/logged-out'
 import {Logo} from '#/view/icons/Logo'
 import {atoms as a, flatten, useBreakpoints, web} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
+import {type WelcomeModalControl} from '#/components/hooks/useWelcomeModal.shared'
 import {TimesLarge_Stroke2_Corner0_Rounded as XIcon} from '#/components/icons/Times'
 import {Text} from '#/components/Typography'
 import {useAnalytics} from '#/analytics'
@@ -17,11 +18,7 @@ import {useAnalytics} from '#/analytics'
 const welcomeModalBg = require('../../assets/images/welcome-modal-bg.jpg')
 
 interface WelcomeModalProps {
-  control: {
-    isOpen: boolean
-    open: () => void
-    close: () => void
-  }
+  control: WelcomeModalControl
 }
 
 export function WelcomeModal({control}: WelcomeModalProps) {

src/components/contacts/FindContactsFlow.web.tsx

@@ -1,3 +1,11 @@
-export function FindContactsFlow() {
+import {type Action, type State} from './state'
+
+export function FindContactsFlow(_props: {
+  state: State
+  dispatch: React.ActionDispatch<[Action]>
+  onBack?: () => void
+  onCancel: () => void
+  context: 'Onboarding' | 'Standalone'
+}): never {
   throw new Error('FindContactsFlow is not available on web')
 }

src/components/hooks/useWelcomeModal.native.ts

@@ -1,3 +1,5 @@
-export function useWelcomeModal() {
+import {type WelcomeModalControl} from './useWelcomeModal.shared'
+
+export function useWelcomeModal(): WelcomeModalControl {
   throw new Error('useWelcomeModal is web only')
 }

src/components/hooks/useWelcomeModal.shared.ts

@@ -0,0 +1,5 @@
+export type WelcomeModalControl = {
+  isOpen: boolean
+  open: () => void
+  close: () => void
+}

src/components/hooks/useWelcomeModal.ts

@@ -2,8 +2,9 @@ import {useEffect, useState} from 'react'
 
 import {useSession} from '#/state/session'
 import {IS_WEB} from '#/env'
+import {type WelcomeModalControl} from './useWelcomeModal.shared'
 
-export function useWelcomeModal() {
+export function useWelcomeModal(): WelcomeModalControl {
   const {hasSession} = useSession()
   const [isOpen, setIsOpen] = useState(false)