Refactor chat list implementation (#10059)

src/components/Composer/index.tsx

@@ -338,6 +338,8 @@ export function Composer({
             web({
               caretColor: textStyle.color ?? 'black',
               overscrollBehavior: 'none',
+              scrollbarWidth: 'thin',
+              scrollbarColor: `${t.palette.contrast_200} transparent`,
             }),
           ]}
           {...rest}

src/components/GlassView.tsx

@@ -0,0 +1,35 @@
+import {type StyleProp, View, type ViewStyle} from 'react-native'
+import {
+  GlassView as ExpoGlassView,
+  type GlassViewProps as ExpoGlassViewProps,
+  isGlassEffectAPIAvailable,
+  isLiquidGlassAvailable,
+} from 'expo-glass-effect'
+
+import {useTheme} from '#/alf'
+
+export const IS_GLASS_AVAILABLE =
+  isLiquidGlassAvailable() && isGlassEffectAPIAvailable()
+
+/**
+ * Liquid Glass View that uses `expo-glass-effect`
+ *
+ * If unavailable, falls back to a regular `View`. Use `fallbackStyle` to customize the fallback appearance.
+ */
+export const GlassView = IS_GLASS_AVAILABLE ? InnerGlassView : FallbackView
+
+export type GlassViewProps = ExpoGlassViewProps & {
+  fallbackStyle?: StyleProp<ViewStyle>
+}
+
+function InnerGlassView({
+  fallbackStyle: _fallbackStyle,
+  ...props
+}: GlassViewProps) {
+  const t = useTheme()
+  return <ExpoGlassView colorScheme={t.scheme} {...props} />
+}
+
+function FallbackView({fallbackStyle, style, ...props}: GlassViewProps) {
+  return <View style={[fallbackStyle, style]} {...props} />
+}

src/components/PostControls/ShareMenu/RecentChats.tsx

@@ -22,7 +22,13 @@ import {Text} from '#/components/Typography'
 import {useAnalytics} from '#/analytics'
 import type * as bsky from '#/types/bsky'
 
-export function RecentChats({postUri}: {postUri: string}) {
+export function RecentChats({
+  postUri,
+  onBeforePress,
+}: {
+  postUri: string
+  onBeforePress?: () => void
+}) {
   const ax = useAnalytics()
   const control = useDialogContext()
   const {currentAccount} = useSession()
@@ -32,6 +38,7 @@ export function RecentChats({postUri}: {postUri: string}) {
   const navigation = useNavigation<NavigationProp>()
 
   const onSelectChat = (convoId: string) => {
+    onBeforePress?.()
     control.close(() => {
       ax.metric('share:press:recentDm', {})
       navigation.navigate('MessagesConversation', {

src/components/PostControls/ShareMenu/ShareMenuItems.tsx

@@ -5,12 +5,14 @@ import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 import {Trans} from '@lingui/react/macro'
 import {useNavigation} from '@react-navigation/native'
+import {useQueryClient} from '@tanstack/react-query'
 
 import {makeProfileLink} from '#/lib/routes/links'
 import {type NavigationProp} from '#/lib/routes/types'
 import {shareText, shareUrl} from '#/lib/sharing'
 import {toShareUrl} from '#/lib/strings/url-helpers'
 import {useProfileShadow} from '#/state/cache/profile-shadow'
+import {precachePost} from '#/state/queries/post'
 import {useSession} from '#/state/session'
 import {atoms as a} from '#/alf'
 import {Admonition} from '#/components/Admonition'
@@ -40,6 +42,7 @@ let ShareMenuItems = ({
   const sendViaChatControl = useDialogControl()
   const [devModeEnabled] = useDevMode()
   const aa = useAgeAssurance()
+  const queryClient = useQueryClient()
 
   const postUri = post.uri
   const postAuthor = useProfileShadow(post.author)
@@ -77,7 +80,12 @@ let ShareMenuItems = ({
     onShareProp()
   }
 
+  const onBeforeShareViaChat = () => {
+    precachePost(queryClient, postUri, post)
+  }
+
   const onSelectChatToShareTo = (conversation: string) => {
+    onBeforeShareViaChat()
     navigation.navigate('MessagesConversation', {
       conversation,
       embed: postUri,
@@ -98,7 +106,10 @@ let ShareMenuItems = ({
         {hasSession && aa.state.access === aa.Access.Full && (
           <Menu.Group>
             <Menu.ContainerItem>
-              <RecentChats postUri={postUri} />
+              <RecentChats
+                postUri={postUri}
+                onBeforePress={onBeforeShareViaChat}
+              />
             </Menu.ContainerItem>
             <Menu.Item
               testID="postDropdownSendViaDMBtn"

src/components/dms/ChatEmptyPill.tsx

@@ -91,7 +91,8 @@ export function ChatEmptyPill() {
         onPressOut={onPressOut}>
         <Text
           style={[a.font_semi_bold, a.pointer_events_none]}
-          selectable={false}>
+          selectable={false}
+          emoji>
           {prompts[promptIndex]}
         </Text>
       </AnimatedPressable>

src/components/icons/PaperPlane.tsx

@@ -3,3 +3,8 @@ import {createSinglePathSVG} from './TEMPLATE'
 export const PaperPlane_Stroke2_Corner0_Rounded = createSinglePathSVG({
   path: 'M3.374 3.22a1 1 0 0 1 1.073-.114l16 8a1 1 0 0 1 0 1.788l-16 8a1 1 0 0 1-1.417-1.136L4.97 12 3.03 4.243a1 1 0 0 1 .344-1.023ZM6.781 13l-1.284 5.133L17.764 12 5.497 5.867 6.781 11H9a1 1 0 1 1 0 2H6.78Z',
 })
+
+export const PaperPlaneVertical_Filled_Stroke2_Corner1_Rounded =
+  createSinglePathSVG({
+    path: 'M10.655 3.718c.55-1.116 2.14-1.116 2.69 0l7.548 15.317c.578 1.172-.515 2.471-1.768 2.103L13 19.336V15a1 1 0 0 0-2 0v4.336l-6.124 1.802c-1.254.369-2.346-.93-1.769-2.103l7.548-15.317Z',
+  })