[🐴] Handle errors, improve styling (#3937)

* Handle errors, improve styling

* Remove old UI

src/screens/Messages/Conversation/MessageListError.tsx

@@ -5,8 +5,9 @@ import {useLingui} from '@lingui/react'
 
 import {ConvoItem, ConvoItemError} from '#/state/messages/convo/types'
 import {atoms as a, useTheme} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as Refresh} from '#/components/icons/ArrowRotateCounterClockwise'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
-import {InlineLinkText} from '#/components/Link'
 import {Text} from '#/components/Typography'
 
 export function MessageListError({
@@ -21,39 +22,52 @@ export function MessageListError({
       [ConvoItemError.Network]: _(
         msg`There was an issue connecting to the chat.`,
       ),
-      [ConvoItemError.HistoryFailed]: _(msg`Failed to load past messages.`),
-      [ConvoItemError.PollFailed]: _(
+      [ConvoItemError.FirehoseFailed]: _(
         msg`This chat was disconnected due to a network error.`,
       ),
+      [ConvoItemError.HistoryFailed]: _(msg`Failed to load past messages.`),
+      [ConvoItemError.PendingFailed]: _(msg`Failed to send message(s).`),
     }[item.code]
   }, [_, item.code])
 
   return (
-    <View style={[a.py_md, a.align_center]}>
+    <View style={[a.py_lg, a.align_center]}>
       <View
         style={[
+          a.flex_row,
           a.align_center,
-          a.pt_md,
-          a.pb_lg,
-          a.px_3xl,
+          a.justify_between,
+          a.gap_lg,
+          a.py_md,
+          a.px_lg,
           a.rounded_md,
           t.atoms.bg_contrast_25,
-          {maxWidth: 300},
+          {maxWidth: 400},
         ]}>
-        <CircleInfo size="lg" fill={t.palette.negative_400} />
-        <Text style={[a.pt_sm, a.leading_snug]}>
-          {message}{' '}
-          <InlineLinkText
-            to="#"
-            label={_(msg`Press to retry`)}
-            onPress={e => {
-              e.preventDefault()
-              item.retry()
-              return false
-            }}>
-            {_(msg`Retry.`)}
-          </InlineLinkText>
-        </Text>
+        <View style={[a.flex_row, a.align_start, a.justify_between, a.gap_sm]}>
+          <CircleInfo
+            size="sm"
+            fill={t.palette.negative_400}
+            style={[{top: 3}]}
+          />
+          <View style={[a.flex_1, {maxWidth: 200}]}>
+            <Text style={[a.leading_snug]}>{message}</Text>
+          </View>
+        </View>
+
+        <Button
+          label={_(msg`Press to retry`)}
+          size="small"
+          variant="ghost"
+          color="secondary"
+          onPress={e => {
+            e.preventDefault()
+            item.retry()
+            return false
+          }}>
+          <ButtonText>{_(msg`Retry`)}</ButtonText>
+          <ButtonIcon icon={Refresh} position="right" />
+        </Button>
       </View>
     </View>
   )

src/screens/Messages/Conversation/MessagesList.tsx

@@ -8,8 +8,6 @@ import {runOnJS, useSharedValue} from 'react-native-reanimated'
 import {ReanimatedScrollEvent} from 'react-native-reanimated/lib/typescript/reanimated2/hook/commonTypes'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {AppBskyRichtextFacet, RichText} from '@atproto/api'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
 
 import {shortenLinks} from '#/lib/strings/rich-text-manip'
 import {isIOS} from '#/platform/detection'
@@ -22,7 +20,6 @@ import {List} from 'view/com/util/List'
 import {MessageInput} from '#/screens/Messages/Conversation/MessageInput'
 import {MessageListError} from '#/screens/Messages/Conversation/MessageListError'
 import {atoms as a, useBreakpoints} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
 import {MessageItem} from '#/components/dms/MessageItem'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
@@ -41,25 +38,6 @@ function MaybeLoader({isLoading}: {isLoading: boolean}) {
   )
 }
 
-function RetryButton({onPress}: {onPress: () => unknown}) {
-  const {_} = useLingui()
-
-  return (
-    <View style={{alignItems: 'center'}}>
-      <Button
-        label={_(msg`Press to Retry`)}
-        onPress={onPress}
-        variant="ghost"
-        color="negative"
-        size="small">
-        <ButtonText>
-          <Trans>Press to Retry</Trans>
-        </ButtonText>
-      </Button>
-    </View>
-  )
-}
-
 function renderItem({item}: {item: ConvoItem}) {
   if (item.type === 'message' || item.type === 'pending-message') {
     return (
@@ -71,8 +49,6 @@ function renderItem({item}: {item: ConvoItem}) {
     )
   } else if (item.type === 'deleted-message') {
     return <Text>Deleted message</Text>
-  } else if (item.type === 'pending-retry') {
-    return <RetryButton onPress={item.retry} />
   } else if (item.type === 'error-recoverable') {
     return <MessageListError item={item} />
   }