Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Some styling of empty list chats states (#4124)

authored by

Eric Bailey and committed by
GitHub
70019e73 31a716d2

+84 -27
+84 -27
src/screens/Messages/List/index.tsx
··· 14 14 import {List} from '#/view/com/util/List' 15 15 import {ViewHeader} from '#/view/com/util/ViewHeader' 16 16 import {CenteredView} from '#/view/com/util/Views' 17 - import {atoms as a, useBreakpoints, useTheme} from '#/alf' 17 + import {atoms as a, useBreakpoints, useTheme, web} from '#/alf' 18 18 import {Button, ButtonIcon, ButtonText} from '#/components/Button' 19 19 import {DialogControlProps, useDialogControl} from '#/components/Dialog' 20 20 import {MessagesNUX} from '#/components/dms/MessagesNUX' 21 21 import {NewChat} from '#/components/dms/NewChatDialog' 22 22 import {useRefreshOnFocus} from '#/components/hooks/useRefreshOnFocus' 23 + import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as Retry} from '#/components/icons/ArrowRotateCounterClockwise' 24 + import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo' 25 + import {Message_Stroke2_Corner0_Rounded as Message} from '#/components/icons/Message' 23 26 import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus' 24 27 import {SettingsSliderVertical_Stroke2_Corner0_Rounded as SettingsSlider} from '#/components/icons/SettingsSlider' 25 28 import {Link} from '#/components/Link' 26 - import {ListFooter, ListMaybePlaceholder} from '#/components/Lists' 29 + import {ListFooter} from '#/components/Lists' 30 + import {Loader} from '#/components/Loader' 27 31 import {Text} from '#/components/Typography' 28 32 import {ClipClopGate} from '../gate' 29 33 import {ChatListItem} from './ChatListItem' ··· 82 86 isFetchingNextPage, 83 87 hasNextPage, 84 88 fetchNextPage, 89 + isError, 85 90 error, 86 91 refetch, 87 92 } = useListConvos({refetchInterval: 15_000}) 88 93 89 94 useRefreshOnFocus(refetch) 90 - 91 - const isError = !!error 92 95 93 96 const conversations = useMemo(() => { 94 97 if (data?.pages) { ··· 133 136 return ( 134 137 <View style={a.flex_1}> 135 138 <MessagesNUX /> 136 - {gtMobile ? ( 137 - <CenteredView sideBorders> 139 + 140 + <CenteredView sideBorders={gtMobile} style={[a.h_full_vh]}> 141 + {gtMobile ? ( 138 142 <DesktopHeader 139 143 newChatControl={newChatControl} 140 144 onNavigateToSettings={onNavigateToSettings} 141 145 /> 142 - </CenteredView> 143 - ) : ( 144 - <ViewHeader 145 - title={_(msg`Messages`)} 146 - renderButton={renderButton} 147 - showBorder 148 - canGoBack={false} 149 - /> 146 + ) : ( 147 + <ViewHeader 148 + title={_(msg`Messages`)} 149 + renderButton={renderButton} 150 + showBorder 151 + canGoBack={false} 152 + /> 153 + )} 154 + 155 + {isLoading ? ( 156 + <View style={[a.align_center, a.pt_3xl, web({paddingTop: '10vh'})]}> 157 + <Loader size="xl" /> 158 + </View> 159 + ) : ( 160 + <> 161 + {isError ? ( 162 + <> 163 + <View style={[a.pt_3xl, a.align_center]}> 164 + <CircleInfo 165 + width={48} 166 + fill={t.atoms.border_contrast_low.borderColor} 167 + /> 168 + <Text style={[a.pt_md, a.pb_sm, a.text_2xl, a.font_bold]}> 169 + <Trans>Whoops!</Trans> 170 + </Text> 171 + <Text 172 + style={[ 173 + a.text_md, 174 + a.pb_xl, 175 + a.text_center, 176 + a.leading_snug, 177 + t.atoms.text_contrast_medium, 178 + {maxWidth: 360}, 179 + ]}> 180 + {cleanError(error)} 181 + </Text> 182 + 183 + <Button 184 + label={_(msg`Reload conversations`)} 185 + size="medium" 186 + color="secondary" 187 + variant="solid" 188 + onPress={() => refetch()}> 189 + <ButtonText>Retry</ButtonText> 190 + <ButtonIcon icon={Retry} position="right" /> 191 + </Button> 192 + </View> 193 + </> 194 + ) : ( 195 + <> 196 + <View style={[a.pt_3xl, a.align_center]}> 197 + <Message width={48} fill={t.palette.primary_500} /> 198 + <Text style={[a.pt_md, a.pb_sm, a.text_2xl, a.font_bold]}> 199 + <Trans>Nothing here</Trans> 200 + </Text> 201 + <Text 202 + style={[ 203 + a.text_md, 204 + a.pb_xl, 205 + a.text_center, 206 + a.leading_snug, 207 + t.atoms.text_contrast_medium, 208 + ]}> 209 + <Trans>You have no conversations yet. Start one!</Trans> 210 + </Text> 211 + </View> 212 + </> 213 + )} 214 + </> 215 + )} 216 + </CenteredView> 217 + 218 + {!isLoading && !isError && ( 219 + <NewChat onNewChat={onNewChat} control={newChatControl} /> 150 220 )} 151 - {!isError && <NewChat onNewChat={onNewChat} control={newChatControl} />} 152 - <ListMaybePlaceholder 153 - isLoading={isLoading} 154 - isError={isError} 155 - emptyType="results" 156 - emptyTitle={_(msg`No chats yet`)} 157 - emptyMessage={_( 158 - msg`You have no chats yet. Start a conversation with someone!`, 159 - )} 160 - errorMessage={cleanError(error)} 161 - onRetry={isError ? refetch : undefined} 162 - hideBackButton 163 - /> 164 221 </View> 165 222 ) 166 223 }