[Layout] ChatList header (#6929)
* Replace ChatList header * update chat settings as well --------- Co-authored-by: Samuel Newman <mozzius@protonmail.com>
This commit is contained in:
Eric Bailey
@@ -16,7 +16,6 @@ import {MESSAGE_SCREEN_POLL_INTERVAL} from '#/state/messages/convo/const'
|
||||
import {useMessagesEventBus} from '#/state/messages/events'
|
||||
import {useListConvosQuery} from '#/state/queries/messages/list-converations'
|
||||
import {List} from '#/view/com/util/List'
|
||||
import {ViewHeader} from '#/view/com/util/ViewHeader'
|
||||
import {CenteredView} from '#/view/com/util/Views'
|
||||
import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
|
||||
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
|
||||
@@ -81,21 +80,6 @@ export function MessagesScreen({navigation, route}: Props) {
|
||||
}, [messagesBus, isActive]),
|
||||
)
|
||||
|
||||
const renderButton = useCallback(() => {
|
||||
return (
|
||||
<Link
|
||||
to="/messages/settings"
|
||||
label={_(msg`Chat settings`)}
|
||||
size="small"
|
||||
variant="ghost"
|
||||
color="secondary"
|
||||
shape="square"
|
||||
style={[a.justify_center]}>
|
||||
<SettingsSlider size="md" style={[t.atoms.text_contrast_medium]} />
|
||||
</Link>
|
||||
)
|
||||
}, [_, t])
|
||||
|
||||
const initialNumToRender = useInitialNumToRender({minItemHeight: 80})
|
||||
const [isPTRing, setIsPTRing] = useState(false)
|
||||
|
||||
@@ -144,27 +128,11 @@ export function MessagesScreen({navigation, route}: Props) {
|
||||
[navigation],
|
||||
)
|
||||
|
||||
const onNavigateToSettings = useCallback(() => {
|
||||
navigation.navigate('MessagesSettings')
|
||||
}, [navigation])
|
||||
|
||||
if (conversations.length < 1) {
|
||||
return (
|
||||
<Layout.Screen>
|
||||
<CenteredView sideBorders={gtMobile} style={[a.h_full_vh]}>
|
||||
{gtMobile ? (
|
||||
<DesktopHeader
|
||||
newChatControl={newChatControl}
|
||||
onNavigateToSettings={onNavigateToSettings}
|
||||
/>
|
||||
) : (
|
||||
<ViewHeader
|
||||
title={_(msg`Messages`)}
|
||||
renderButton={renderButton}
|
||||
showBorder
|
||||
canGoBack={false}
|
||||
/>
|
||||
)}
|
||||
<Header newChatControl={newChatControl} />
|
||||
|
||||
{isLoading ? (
|
||||
<View style={[a.align_center, a.pt_3xl, web({paddingTop: '10vh'})]}>
|
||||
@@ -237,106 +205,93 @@ export function MessagesScreen({navigation, route}: Props) {
|
||||
}
|
||||
|
||||
return (
|
||||
<Layout.Screen testID="messagesScreen">
|
||||
{!gtMobile && (
|
||||
<ViewHeader
|
||||
title={_(msg`Messages`)}
|
||||
renderButton={renderButton}
|
||||
showBorder
|
||||
canGoBack={false}
|
||||
<Layout.Screen testID="messagesScreen" temp__enableWebBorders>
|
||||
<Layout.Center>
|
||||
<Header newChatControl={newChatControl} />
|
||||
<NewChat onNewChat={onNewChat} control={newChatControl} />
|
||||
<List
|
||||
data={conversations}
|
||||
renderItem={renderItem}
|
||||
keyExtractor={keyExtractor}
|
||||
refreshing={isPTRing}
|
||||
onRefresh={onRefresh}
|
||||
onEndReached={onEndReached}
|
||||
ListFooterComponent={
|
||||
<ListFooter
|
||||
isFetchingNextPage={isFetchingNextPage}
|
||||
error={cleanError(error)}
|
||||
onRetry={fetchNextPage}
|
||||
style={{borderColor: 'transparent'}}
|
||||
hasNextPage={hasNextPage}
|
||||
showEndMessage={true}
|
||||
endMessageText={_(msg`No more conversations to show`)}
|
||||
/>
|
||||
}
|
||||
onEndReachedThreshold={isNative ? 1.5 : 0}
|
||||
initialNumToRender={initialNumToRender}
|
||||
windowSize={11}
|
||||
// @ts-ignore our .web version only -sfn
|
||||
desktopFixedHeight
|
||||
sideBorders={false}
|
||||
/>
|
||||
)}
|
||||
<NewChat onNewChat={onNewChat} control={newChatControl} />
|
||||
<List
|
||||
data={conversations}
|
||||
renderItem={renderItem}
|
||||
keyExtractor={keyExtractor}
|
||||
refreshing={isPTRing}
|
||||
onRefresh={onRefresh}
|
||||
onEndReached={onEndReached}
|
||||
ListHeaderComponent={
|
||||
<DesktopHeader
|
||||
newChatControl={newChatControl}
|
||||
onNavigateToSettings={onNavigateToSettings}
|
||||
/>
|
||||
}
|
||||
ListFooterComponent={
|
||||
<ListFooter
|
||||
isFetchingNextPage={isFetchingNextPage}
|
||||
error={cleanError(error)}
|
||||
onRetry={fetchNextPage}
|
||||
style={{borderColor: 'transparent'}}
|
||||
hasNextPage={hasNextPage}
|
||||
showEndMessage={true}
|
||||
endMessageText={_(msg`No more conversations to show`)}
|
||||
/>
|
||||
}
|
||||
onEndReachedThreshold={isNative ? 1.5 : 0}
|
||||
initialNumToRender={initialNumToRender}
|
||||
windowSize={11}
|
||||
// @ts-ignore our .web version only -sfn
|
||||
desktopFixedHeight
|
||||
/>
|
||||
</Layout.Center>
|
||||
</Layout.Screen>
|
||||
)
|
||||
}
|
||||
|
||||
function DesktopHeader({
|
||||
newChatControl,
|
||||
onNavigateToSettings,
|
||||
}: {
|
||||
newChatControl: DialogControlProps
|
||||
onNavigateToSettings: () => void
|
||||
}) {
|
||||
const t = useTheme()
|
||||
function Header({newChatControl}: {newChatControl: DialogControlProps}) {
|
||||
const {_} = useLingui()
|
||||
const {gtMobile, gtTablet} = useBreakpoints()
|
||||
const {gtMobile} = useBreakpoints()
|
||||
|
||||
if (!gtMobile) {
|
||||
return null
|
||||
}
|
||||
const settingsLink = (
|
||||
<Link
|
||||
to="/messages/settings"
|
||||
label={_(msg`Chat settings`)}
|
||||
size="small"
|
||||
variant="ghost"
|
||||
color="secondary"
|
||||
shape="square"
|
||||
style={[a.justify_center]}>
|
||||
<ButtonIcon icon={SettingsSlider} size="md" />
|
||||
</Link>
|
||||
)
|
||||
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
t.atoms.bg,
|
||||
a.flex_row,
|
||||
a.align_center,
|
||||
a.justify_between,
|
||||
a.gap_lg,
|
||||
a.px_lg,
|
||||
a.pr_md,
|
||||
a.py_sm,
|
||||
a.border_b,
|
||||
t.atoms.border_contrast_low,
|
||||
]}>
|
||||
<Text style={[a.text_2xl, a.font_bold]}>
|
||||
<Trans>Messages</Trans>
|
||||
</Text>
|
||||
<View style={[a.flex_row, a.align_center, a.gap_sm]}>
|
||||
<Button
|
||||
label={_(msg`Message settings`)}
|
||||
color="secondary"
|
||||
size="small"
|
||||
variant="ghost"
|
||||
shape="square"
|
||||
onPress={onNavigateToSettings}>
|
||||
<SettingsSlider size="md" style={[t.atoms.text_contrast_medium]} />
|
||||
</Button>
|
||||
{gtTablet && (
|
||||
<Button
|
||||
label={_(msg`New chat`)}
|
||||
color="primary"
|
||||
size="small"
|
||||
variant="solid"
|
||||
onPress={newChatControl.open}>
|
||||
<ButtonIcon icon={Plus} position="left" />
|
||||
<ButtonText>
|
||||
<Trans>New chat</Trans>
|
||||
</ButtonText>
|
||||
</Button>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
<Layout.Header.Outer>
|
||||
{gtMobile ? (
|
||||
<>
|
||||
<Layout.Header.Content>
|
||||
<Layout.Header.TitleText>
|
||||
<Trans>Messages</Trans>
|
||||
</Layout.Header.TitleText>
|
||||
</Layout.Header.Content>
|
||||
|
||||
<View style={[a.flex_row, a.align_center, a.gap_sm]}>
|
||||
{settingsLink}
|
||||
<Button
|
||||
label={_(msg`New chat`)}
|
||||
color="primary"
|
||||
size="small"
|
||||
variant="solid"
|
||||
onPress={newChatControl.open}>
|
||||
<ButtonIcon icon={Plus} position="left" />
|
||||
<ButtonText>
|
||||
<Trans>New chat</Trans>
|
||||
</ButtonText>
|
||||
</Button>
|
||||
</View>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Layout.Header.MenuButton />
|
||||
<Layout.Header.Content>
|
||||
<Layout.Header.TitleText>
|
||||
<Trans>Messages</Trans>
|
||||
</Layout.Header.TitleText>
|
||||
</Layout.Header.Content>
|
||||
<Layout.Header.Slot>{settingsLink}</Layout.Header.Slot>
|
||||
</>
|
||||
)}
|
||||
</Layout.Header.Outer>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -10,8 +10,6 @@ import {useUpdateActorDeclaration} from '#/state/queries/messages/actor-declarat
|
||||
import {useProfileQuery} from '#/state/queries/profile'
|
||||
import {useSession} from '#/state/session'
|
||||
import * as Toast from '#/view/com/util/Toast'
|
||||
import {ViewHeader} from '#/view/com/util/ViewHeader'
|
||||
import {ScrollView} from '#/view/com/util/Views'
|
||||
import {atoms as a} from '#/alf'
|
||||
import {Admonition} from '#/components/Admonition'
|
||||
import {Divider} from '#/components/Divider'
|
||||
@@ -57,8 +55,16 @@ export function MessagesSettingsScreen({}: Props) {
|
||||
|
||||
return (
|
||||
<Layout.Screen testID="messagesSettingsScreen">
|
||||
<ScrollView stickyHeaderIndices={[0]}>
|
||||
<ViewHeader title={_(msg`Chat Settings`)} showOnDesktop showBorder />
|
||||
<Layout.Header.Outer>
|
||||
<Layout.Header.BackButton />
|
||||
<Layout.Header.Content>
|
||||
<Layout.Header.TitleText>
|
||||
<Trans>Chat Settings</Trans>
|
||||
</Layout.Header.TitleText>
|
||||
</Layout.Header.Content>
|
||||
<Layout.Header.Slot />
|
||||
</Layout.Header.Outer>
|
||||
<Layout.Content>
|
||||
<View style={[a.p_lg, a.gap_md]}>
|
||||
<Text style={[a.text_lg, a.font_bold]}>
|
||||
<Trans>Allow new messages from</Trans>
|
||||
@@ -142,7 +148,7 @@ export function MessagesSettingsScreen({}: Props) {
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</Layout.Content>
|
||||
</Layout.Screen>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user