refresh inbox empty state

This commit is contained in:
Samuel Newman
2026-05-11 17:18:16 +03:00
parent 0308f341d6
commit 423e46fdb0
2 changed files with 37 additions and 46 deletions
+3 -1
View File
@@ -272,7 +272,7 @@ export function ChatList({
if (conversations.length === 0) { if (conversations.length === 0) {
return ( return (
<Layout.Center> <Layout.Center style={web({minHeight: '100%'})}>
{isLoading ? ( {isLoading ? (
<ChatListLoadingPlaceholder /> <ChatListLoadingPlaceholder />
) : ( ) : (
@@ -319,6 +319,7 @@ export function ChatList({
iconSize="4xl" iconSize="4xl"
textStyle={t.atoms.text} textStyle={t.atoms.text}
iconColor={t.atoms.text.color} iconColor={t.atoms.text.color}
style={web([a.h_full, a.justify_center, {paddingBottom: 120}])}
/> />
) : ( ) : (
<EmptyState <EmptyState
@@ -335,6 +336,7 @@ export function ChatList({
color: 'primary', color: 'primary',
icon: MessagePlusIcon, icon: MessagePlusIcon,
}} }}
style={web([a.h_full, a.justify_center, {paddingBottom: 120}])}
/> />
)} )}
</> </>
+29 -40
View File
@@ -25,10 +25,11 @@ import {useMessagesEventBus} from '#/state/messages/events'
import {useLeftConvos} from '#/state/queries/messages/leave-conversation' import {useLeftConvos} from '#/state/queries/messages/leave-conversation'
import {useListConvosQuery} from '#/state/queries/messages/list-conversations' import {useListConvosQuery} from '#/state/queries/messages/list-conversations'
import {useUpdateAllRead} from '#/state/queries/messages/update-all-read' import {useUpdateAllRead} from '#/state/queries/messages/update-all-read'
import {EmptyState} from '#/view/com/util/EmptyState'
import {FAB} from '#/view/com/util/fab/FAB' import {FAB} from '#/view/com/util/fab/FAB'
import {List} from '#/view/com/util/List' import {List} from '#/view/com/util/List'
import {ChatListLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' import {ChatListLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
import {atoms as a, useBreakpoints, useTheme} from '#/alf' import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
import {AgeRestrictedScreen} from '#/components/ageAssurance/AgeRestrictedScreen' import {AgeRestrictedScreen} from '#/components/ageAssurance/AgeRestrictedScreen'
import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy' import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
import {Button, ButtonIcon, ButtonText} from '#/components/Button' import {Button, ButtonIcon, ButtonText} from '#/components/Button'
@@ -37,7 +38,7 @@ import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeftIcon} from '#/components/i
import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as RetryIcon} from '#/components/icons/ArrowRotate' import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as RetryIcon} from '#/components/icons/ArrowRotate'
import {Check_Stroke2_Corner0_Rounded as CheckIcon} from '#/components/icons/Check' import {Check_Stroke2_Corner0_Rounded as CheckIcon} from '#/components/icons/Check'
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfoIcon} from '#/components/icons/CircleInfo' import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfoIcon} from '#/components/icons/CircleInfo'
import {Message_Stroke2_Corner0_Rounded as MessageIcon} from '#/components/icons/Message' import {Inbox_Stroke2_Corner2_Rounded_Large as InboxLargeIcon} from '#/components/icons/Inbox'
import * as Layout from '#/components/Layout' import * as Layout from '#/components/Layout'
import {ListFooter} from '#/components/Lists' import {ListFooter} from '#/components/Lists'
import * as Toast from '#/components/Toast' import * as Toast from '#/components/Toast'
@@ -182,7 +183,7 @@ function RequestList({
if (conversations.length < 1) { if (conversations.length < 1) {
return ( return (
<Layout.Center> <Layout.Center style={web([a.h_full])}>
{isLoading ? ( {isLoading ? (
<ChatListLoadingPlaceholder /> <ChatListLoadingPlaceholder />
) : ( ) : (
@@ -224,48 +225,36 @@ function RequestList({
</View> </View>
</> </>
) : ( ) : (
<> <EmptyState
<View style={[a.pt_3xl, a.align_center]}> message={l({
<MessageIcon width={48} fill={t.palette.primary_500} /> message: `Inbox zero!`,
<Text comment:
style={[a.pt_md, a.pb_sm, a.text_2xl, a.font_semi_bold]}> "Title message shown in chat requests inbox when it's empty",
<Trans comment="Title message shown in chat requests inbox when it's empty"> })}
Inbox zero! icon={InboxLargeIcon}
</Trans> iconSize="4xl"
</Text> textStyle={t.atoms.text}
<Text iconColor={t.atoms.text.color}
style={[ button={
a.text_md, isWithinSplitView
a.pb_xl, ? undefined
a.text_center, : {
a.leading_snug, label: l`Back to Chats`,
t.atoms.text_contrast_medium, text: l`Back`,
]}> onPress: () => {
<Trans>
You don't have any chat requests at the moment.
</Trans>
</Text>
{!isWithinSplitView && (
<Button
variant="solid"
color="secondary"
size="small"
label={l`Go back`}
onPress={() => {
if (navigation.canGoBack()) { if (navigation.canGoBack()) {
navigation.goBack() navigation.goBack()
} else { } else {
navigation.navigate('Messages', {animation: 'pop'}) navigation.navigate('Messages', {animation: 'pop'})
} }
}}> },
<ButtonIcon icon={ArrowLeftIcon} /> size: 'small',
<ButtonText> color: 'secondary',
<Trans>Back to Chats</Trans> icon: ArrowLeftIcon,
</ButtonText> }
</Button> }
)} style={web([a.h_full, a.justify_center, a.pb_5xl])}
</View> />
</>
)} )}
</> </>
)} )}