ts split

plans/todo.md

@@ -1,4 +1,6 @@
-look for opportunities to use gap in all boxes
+look for platform splits that can go away
+jump in inbox below tab
+go screen by screen and find cleanup
 any leftover zustand store
 ios push to convo broken
 ts split maybe

shared/.gitignore

@@ -56,3 +56,4 @@ main.jsbundle
 coverage-ts
 temp.log
 .watchman-cookie-*
+.tsOuts/

shared/chat/audio/audio-video.desktop.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import type {Props} from './audio-video'
+import type {Props} from './audio-video.shared'
 
 const AudioVideo = (props: Props) => {
   const {url, paused, onPositionUpdated, onEnded} = props

shared/chat/audio/audio-video.native.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import {useAudioPlayer} from 'expo-audio'
 import {useEventListener} from 'expo'
-import type {Props} from './audio-video'
+import type {Props} from './audio-video.shared'
 
 const AudioVideo = (props: Props) => {
   const {url, paused, onPositionUpdated, onEnded} = props

shared/chat/audio/audio-video.d.ts → shared/chat/audio/audio-video.shared.tsx

@@ -1,11 +1,6 @@
-import type * as React from 'react'
-
 export type Props = {
   url: string
   paused: boolean
   onPositionUpdated: (ratio: number) => void
   onEnded: () => void
 }
-
-declare const AudioVideo: (p: Props) => React.ReactNode
-export default AudioVideo

shared/chat/conversation/attachment-fullscreen/index.desktop.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as Kb from '@/common-adapters'
 import {useMessagePopup} from '../messages/message-popup'
-import type {Props} from '.'
+import type {Props} from './index.shared'
 import {useData, usePreviewFallback} from './hooks'
 import type {StyleOverride} from '@/common-adapters/markdown'
 

shared/chat/conversation/attachment-fullscreen/index.native.tsx

@@ -4,7 +4,7 @@ import {useMessagePopup} from '../messages/message-popup'
 import {useVideoPlayer, VideoView} from 'expo-video'
 import logger from '@/logger'
 import {ShowToastAfterSaving} from '../messages/attachment/shared'
-import type {Props} from '.'
+import type {Props} from './index.shared'
 import {useData, usePreviewFallback} from './hooks'
 import {type GestureResponderEvent, Animated, View} from 'react-native'
 import {useSafeAreaFrame} from 'react-native-safe-area-context'

shared/chat/conversation/header-area/index.desktop.tsx

@@ -1 +1 @@
-export const headerNavigationOptions = (/*route*/) => ({})
+export const headerNavigationOptions = (_route: unknown) => ({})

shared/chat/conversation/input-area/filepicker-popup/index.native.tsx

@@ -1,5 +1,5 @@
 import * as Kb from '@/common-adapters'
-import type {Props} from '.'
+import type {Props} from './index.shared'
 
 const Prompt = () => (
   <Kb.Box2 direction="horizontal" fullWidth={true} gap="xtiny" style={styles.promptContainer} justifyContent="center">

shared/chat/conversation/input-area/filepicker-popup/index.d.ts → shared/chat/conversation/input-area/filepicker-popup/index.shared.tsx

@@ -7,6 +7,3 @@ export type Props = {
   onHidden: () => void
   onSelect: (mediaType: 'photo' | 'video' | 'mixed' | 'file', location: 'camera' | 'library' | 'file') => void
 }
-
-export declare const FilePickerPopup: (p: Props) => React.ReactNode
-export default FilePickerPopup

shared/chat/conversation/input-area/normal/index.tsx

@@ -13,7 +13,7 @@ import {indefiniteArticle} from '@/util/string'
 import {infoPanelWidthTablet} from '../../info-panel/common'
 import {assertionToDisplay} from '@/common-adapters/usernames'
 import {FocusContext, ScrollContext} from '@/chat/conversation/normal/context'
-import type {RefType as InputRef} from './input'
+import type {RefType as InputRef} from './input.shared'
 import {useConversationCenter} from '../../center-context'
 import {
   useConversationThreadID,

shared/chat/conversation/input-area/normal/input.desktop.tsx

@@ -5,8 +5,9 @@ import * as React from 'react'
 import * as InputState from '../input-state'
 import SetExplodingMessagePopup from './set-explode-popup'
 import Typing from './typing'
-import type {Props as InputLowLevelProps, TextInfo, RefType} from './input'
-import type {PlatformInputProps as Props} from './input'
+import type {Props as InputLowLevelProps, TextInfo, RefType} from './input.shared'
+import type {PlatformInputProps as Props} from './input.shared'
+export type {Selection, RefType, TextInfo, PlatformInputProps} from './input.shared'
 import {EmojiPickerDesktop} from '@/chat/emoji-picker/container'
 import {KeyEventHandler} from '@/common-adapters/key-event-handler.desktop'
 import {formatDurationShort} from '@/util/timestamp'

shared/chat/conversation/input-area/normal/input.native.tsx

@@ -9,7 +9,7 @@ import Typing from './typing'
 import logger from '@/logger'
 import type * as ImagePicker from 'expo-image-picker'
 import type {LayoutEvent} from '@/common-adapters/box'
-import type {Props as InputLowLevelProps, PlatformInputProps as Props, TextInfo, RefType} from './input'
+import type {Props as InputLowLevelProps, PlatformInputProps as Props, TextInfo, RefType} from './input.shared'
 import {AudioSendWrapper} from '@/chat/audio/audio-send.native'
 import {Keyboard, TextInput, type NativeSyntheticEvent, type TextInputSelectionChangeEventData, useColorScheme} from 'react-native'
 import {MaxInputAreaContext} from './max-input-area-context'

shared/chat/conversation/input-area/normal/input.d.ts → shared/chat/conversation/input-area/normal/input.shared.tsx

@@ -4,6 +4,11 @@ import type * as Styles from '@/styles'
 import type {TextType} from '@/common-adapters/text.shared'
 import type {TextInputProps} from 'react-native'
 
+export type Selection = {
+  start: number
+  end?: number
+}
+
 export type RefType = {
   blur: () => void
   clear: () => void
@@ -26,14 +31,11 @@ export type RefType = {
       }
 }
 
-export type Selection = {
-  start: number
-  end?: number
-}
 export type TextInfo = {
   text: string
   selection?: Selection
 }
+
 export type Props = {
   allowKeyboardEvents?: boolean
   disabled?: boolean
@@ -52,11 +54,11 @@ export type Props = {
   textType?: TextType
   style?: Styles.StylesCrossPlatform
   onChangeText?: (value: string) => void
-  onPasteImage?: (uris: Array<string>) => void // mobile only
+  onPasteImage?: (uris: Array<string>) => void
   multiline?: boolean
   rowsMin?: number
   rowsMax?: number
-  padding?: keyof typeof Styles.globalMargins | 0 // globalMargins does not have an option for 0
+  padding?: keyof typeof Styles.globalMargins | 0
 }
 
 export type PlatformInputProps = {
@@ -74,6 +76,3 @@ export type PlatformInputProps = {
   showReplyPreview: boolean
   suggestionOverlayStyle: Styles.StylesCrossPlatform
 }
-
-declare const PlatformInput: (p: PlatformInputProps) => React.ReactNode
-export default PlatformInput

shared/chat/conversation/input-area/normal/set-explode-popup/hooks.tsx

@@ -1,6 +1,6 @@
 import * as Chat from '@/constants/chat'
 import type * as T from '@/constants/types'
-import type {Props} from '.'
+import type {Props} from './index.shared'
 import {useConversationThreadSelector} from '../../../thread-context'
 
 export type MessageExplodeDescription = {

shared/chat/conversation/input-area/normal/set-explode-popup/index.desktop.tsx

@@ -1,5 +1,5 @@
 import * as Kb from '@/common-adapters'
-import type {Props} from '.'
+import type {Props} from './index.shared'
 import useHooks from './hooks'
 import type {MessageExplodeDescription} from './hooks'
 

shared/chat/conversation/input-area/normal/set-explode-popup/index.native.tsx

@@ -1,5 +1,5 @@
 import * as Kb from '@/common-adapters'
-import type {Props} from '.'
+import type {Props} from './index.shared'
 import useHooks from './hooks'
 
 const Prompt = () => (

shared/chat/conversation/input-area/suggestors/commands.tsx

@@ -4,7 +4,7 @@ import * as Common from './common'
 import * as Kb from '@/common-adapters'
 import {useEngineActionListener} from '@/engine/action-listener'
 import {useConfigState} from '@/stores/config'
-import type {Selection as InputSelection} from '../normal/input'
+import type {Selection as InputSelection} from '../normal/input.shared'
 import {useConversationMeta} from '../../data-hooks'
 
 const getCommandPrefix = (command: T.RPCChat.ConversationCommand) => {

shared/chat/conversation/input-area/suggestors/index.tsx

@@ -6,7 +6,7 @@ import * as React from 'react'
 import * as Users from './users'
 import * as InputState from '../input-state'
 import type * as Common from './common'
-import type {PlatformInputProps as Props, RefType as InputRef} from '../normal/input'
+import type {PlatformInputProps as Props, RefType as InputRef} from '../normal/input.shared'
 import {useConversationThreadID} from '../../thread-context'
 
 const positionFallbacks = ['bottom center'] as const
@@ -128,7 +128,7 @@ const useSyncInput = (p: UseSyncInputProps) => {
     return null
   }
 
-  const triggerIDRef = React.useRef<number>(undefined)
+  const triggerIDRef = React.useRef<ReturnType<typeof setTimeout>>(undefined)
   const checkTrigger = () => {
     if (triggerIDRef.current) {
       clearTimeout(triggerIDRef.current)

shared/chat/conversation/input-area/suggestors/suggestion-list.desktop.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as Kb from '@/common-adapters'
 import * as T from '@/constants/types'
-import type {Props} from './suggestion-list'
+import type {Props} from './suggestion-list.shared'
 import {BotCommandUpdateStatus} from './shared'
 import type {LegendListRef} from '@/common-adapters'
 

shared/chat/conversation/input-area/suggestors/suggestion-list.native.tsx

@@ -1,7 +1,7 @@
 import * as Kb from '@/common-adapters'
 import * as T from '@/constants/types'
 import noop from 'lodash/noop'
-import type {Props} from './suggestion-list'
+import type {Props} from './suggestion-list.shared'
 import {BotCommandUpdateStatus} from './shared'
 import {FlatList} from 'react-native'
 

shared/chat/conversation/input-area/suggestors/suggestion-list.d.ts → shared/chat/conversation/input-area/suggestors/suggestion-list.shared.tsx

@@ -3,15 +3,10 @@ import type * as Styles from '@/styles'
 import type * as T from '@/constants/types'
 
 export type Props<I> = {
-  // TODO fix this type
   items: Array<I>
   keyExtractor?: (item: I, idx: number) => string
   renderItem: (index: number, item: I) => React.ReactElement
   selectedIndex: number
   style?: Styles.StylesCrossPlatform
-  // likely doesn't belong here
   suggestBotCommandsUpdateStatus?: T.RPCChat.UIBotCommandsUpdateStatusTyp
 }
-
-declare function SuggestionList<I>(p: Props<I>): React.ReactNode
-export default SuggestionList

shared/chat/conversation/list-area/index.native.tsx

@@ -6,7 +6,7 @@ import * as React from 'react'
 import Separator from '../messages/separator'
 import SpecialBottomMessage from '../messages/special-bottom-message'
 import SpecialTopMessage from '../messages/special-top-message'
-import type {ItemType} from '.'
+import type {ItemType} from './index.shared'
 import {FlatList} from 'react-native'
 // import {FlashList, type ListRenderItemInfo} from '@shopify/flash-list'
 import {MessageRow} from '../messages/wrapper'

shared/chat/conversation/list-area/index.shared.tsx

@@ -0,0 +1,3 @@
+import type * as T from '@/constants/types'
+
+export type ItemType = T.Chat.Ordinal

shared/chat/conversation/messages/attachment/video/videoimpl.desktop.tsx

@@ -1,6 +1,6 @@
 import * as Kb from '@/common-adapters'
 import * as React from 'react'
-import type {Props} from './videoimpl'
+import type {Props} from './videoimpl.shared'
 import {getAttachmentPreviewSize, maxWidth, maxHeight} from '../shared'
 
 // its important we use explicit height/width so we never CLS while loading

shared/chat/conversation/messages/attachment/video/videoimpl.native.tsx

@@ -4,7 +4,7 @@ import {ShowToastAfterSaving} from '../shared'
 import {useVideoPlayer, VideoView} from 'expo-video'
 import {useEventListener} from 'expo'
 import {Pressable} from 'react-native'
-import type {Props} from './videoimpl'
+import type {Props} from './videoimpl.shared'
 import {getAttachmentPreviewSize} from '../shared'
 
 const VideoImpl = (p: Props) => {

shared/chat/conversation/messages/attachment/video/videoimpl.d.ts → shared/chat/conversation/messages/attachment/video/videoimpl.shared.tsx

@@ -1,10 +1,8 @@
-import type * as React from 'react'
 import type * as T from '@/constants/types'
+
 export type Props = {
   openFullscreen?: () => void
   showPopup?: () => void
   allowPlay: boolean
   message: T.Chat.MessageAttachment
 }
-declare const VideoImpl: (p: Props) => React.ReactNode
-export default VideoImpl

shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.desktop.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as Kb from '@/common-adapters/index'
-import type {Props} from './video'
+import type {Props} from './video.shared'
 
 export const Video = (p: Props) => {
   const {autoPlay, onClick, height, width, style, url} = p

shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.native.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import * as Kb from '@/common-adapters/index'
 import logger from '@/logger'
 import {useVideoPlayer, VideoView} from 'expo-video'
-import type {Props} from './video'
+import type {Props} from './video.shared'
 
 export const Video = (props: Props) => {
   const {autoPlay, onClick, url, style, width, height} = props

shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.d.ts → shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.shared.tsx

@@ -1,4 +1,3 @@
-import type * as React from 'react'
 export type Props = {
   autoPlay: boolean
   height: number
@@ -7,4 +6,3 @@ export type Props = {
   url: string
   width: number
 }
-export declare const Video: (p: Props) => React.ReactNode

shared/chat/conversation/messages/wrapper/exploding-height-retainer/index.desktop.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as Kb from '@/common-adapters'
-import type {Props} from '.'
+import type {Props} from './index.shared'
 import {useColorScheme} from 'react-native'
 
 export const animationDuration = 2000

shared/chat/conversation/messages/wrapper/exploding-height-retainer/index.native.tsx

@@ -4,7 +4,7 @@ import * as C from '@/constants'
 import {Animated as NativeAnimated, Easing as NativeEasing} from 'react-native'
 // ios must animated plain colors not the dynamic ones
 import colors, {darkColors} from '@/styles/colors'
-import type {Props} from '.'
+import type {Props} from './index.shared'
 import {useColorScheme} from 'react-native'
 
 // If this image changes, some hard coded dimensions

shared/chat/conversation/messages/wrapper/long-pressable/index.desktop.tsx

@@ -1,6 +1,6 @@
 import type * as React from 'react'
 import * as Kb from '@/common-adapters'
-import type {Props} from '.'
+import type {Props} from './index.shared'
 
 function LongPressable(props: Props & {ref?: React.Ref<Kb.MeasureRef>}) {
   return <Kb.Box2 direction="horizontal" fullWidth={true} {...props} />

shared/chat/conversation/messages/wrapper/long-pressable/index.native.tsx

@@ -1,7 +1,7 @@
 import * as Kb from '@/common-adapters'
 import * as React from 'react'
 import * as InputState from '../../../input-area/input-state'
-import type {Props} from '.'
+import type {Props} from './index.shared'
 import {useOrdinal} from '../../ids-context'
 import {useConversationThreadToggleSearch} from '../../../thread-context'
 import Swipeable, {type SwipeableMethods} from '@/common-adapters/swipeable-row.native'

shared/chat/conversation/rekey/you-rekey.desktop.tsx

@@ -1,5 +1,5 @@
 import * as Kb from '@/common-adapters'
-import type {Props} from './you-rekey'
+import type {Props} from './you-rekey.shared'
 
 const YouRekey = ({onRekey}: Props) => {
   return (

shared/chat/conversation/rekey/you-rekey.native.tsx

@@ -1,5 +1,5 @@
 import * as Kb from '@/common-adapters'
-import type {Props} from './you-rekey'
+import type {Props} from './you-rekey.shared'
 
 const YouRekey = ({onEnterPaperkey}: Props) => (
   <Kb.Box2 direction="vertical">