forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Few list tweaks on web (#3062)
* share button only on native
* update gttablet to be 1300px
* improve web layout
* change re-layout to mobile breakpoint
* adjustable not found reason
* don't show the borders on mobile web
* slight padding for the spinner
+45
-20
+1
-1
src/alf/index.tsx
+1
-1
src/alf/index.tsx
+23
-5
src/components/Lists.tsx
+23
-5
src/components/Lists.tsx
···
9
9
import {StackActions} from '@react-navigation/native'
10
10
import {useNavigation} from '@react-navigation/core'
11
11
import {NavigationProp} from 'lib/routes/types'
12
+
import {router} from '#/routes'
12
13
13
14
export function ListFooter({
14
15
isFetching,
···
30
31
a.align_center,
31
32
a.justify_center,
32
33
a.border_t,
34
+
a.pb_lg,
33
35
t.atoms.border_contrast_low,
34
36
{height: 100},
35
37
]}>
···
128
130
isError,
129
131
empty,
130
132
error,
133
+
notFoundType = 'page',
131
134
onRetry,
132
135
}: {
133
136
isLoading: boolean
···
135
138
isError: boolean
136
139
empty?: string
137
140
error?: string
141
+
notFoundType?: 'page' | 'results'
138
142
onRetry?: () => Promise<unknown>
139
143
}) {
140
144
const navigation = useNavigation<NavigationProp>()
141
145
const t = useTheme()
146
+
const {gtMobile} = useBreakpoints()
142
147
143
148
const canGoBack = navigation.canGoBack()
144
149
const onGoBack = React.useCallback(() => {
···
146
151
navigation.goBack()
147
152
} else {
148
153
navigation.navigate('HomeTab')
149
-
navigation.dispatch(StackActions.popToTop())
154
+
155
+
// Checking the state for routes ensures that web doesn't encounter errors while going back
156
+
if (navigation.getState()?.routes) {
157
+
navigation.dispatch(StackActions.push(...router.matchPath('/')))
158
+
} else {
159
+
navigation.navigate('HomeTab')
160
+
navigation.dispatch(StackActions.popToTop())
161
+
}
150
162
}
151
163
}, [navigation, canGoBack])
152
164
···
157
169
style={[
158
170
a.flex_1,
159
171
a.align_center,
160
-
a.border_t,
161
-
a.justify_between,
172
+
!gtMobile ? [a.justify_between, a.border_t] : a.gap_5xl,
162
173
t.atoms.border_contrast_low,
163
174
{paddingTop: 175, paddingBottom: 110},
164
175
]}>
···
173
184
{isError ? (
174
185
<Trans>Oops!</Trans>
175
186
) : isEmpty ? (
176
-
<Trans>Page not found</Trans>
187
+
<>
188
+
{notFoundType === 'results' ? (
189
+
<Trans>No results found</Trans>
190
+
) : (
191
+
<Trans>Page not found</Trans>
192
+
)}
193
+
</>
177
194
) : undefined}
178
195
</Text>
179
196
···
195
212
</Text>
196
213
) : undefined}
197
214
</View>
198
-
<View style={[a.w_full, a.px_lg, a.gap_md]}>
215
+
<View
216
+
style={[a.gap_md, !gtMobile ? [a.w_full, a.px_lg] : {width: 350}]}>
199
217
{isError && onRetry && (
200
218
<Button
201
219
variant="solid"
+21
-14
src/screens/Hashtag.tsx
+21
-14
src/screens/Hashtag.tsx
···
1
1
import React from 'react'
2
2
import {ListRenderItemInfo, Pressable} from 'react-native'
3
-
import {atoms as a} from '#/alf'
3
+
import {atoms as a, useBreakpoints} from '#/alf'
4
4
import {useFocusEffect} from '@react-navigation/native'
5
5
import {useSetMinimalShellMode} from 'state/shell'
6
6
import {ViewHeader} from 'view/com/util/ViewHeader'
···
23
23
import {ArrowOutOfBox_Stroke2_Corner0_Rounded} from '#/components/icons/ArrowOutOfBox'
24
24
import {shareUrl} from 'lib/sharing'
25
25
import {HITSLOP_10} from 'lib/constants'
26
+
import {isNative} from 'platform/detection'
26
27
27
28
const renderItem = ({item}: ListRenderItemInfo<PostView>) => {
28
29
return <Post post={item} />
···
37
38
}: NativeStackScreenProps<CommonNavigatorParams, 'Hashtag'>) {
38
39
const {tag, author} = route.params
39
40
const setMinimalShellMode = useSetMinimalShellMode()
41
+
const {gtMobile} = useBreakpoints()
40
42
const {_} = useLingui()
41
43
const [isPTR, setIsPTR] = React.useState(false)
42
44
···
101
103
}, [isFetching, hasNextPage, error, fetchNextPage])
102
104
103
105
return (
104
-
<CenteredView style={a.flex_1}>
106
+
<CenteredView style={a.flex_1} sideBorders={gtMobile}>
105
107
<ViewHeader
106
108
title={headerTitle}
107
109
subtitle={author ? _(msg`From @${sanitizedAuthor}`) : undefined}
108
-
canGoBack={true}
109
-
renderButton={() => (
110
-
<Pressable
111
-
accessibilityRole="button"
112
-
onPress={onShare}
113
-
hitSlop={HITSLOP_10}>
114
-
<ArrowOutOfBox_Stroke2_Corner0_Rounded
115
-
size="lg"
116
-
onPress={onShare}
117
-
/>
118
-
</Pressable>
119
-
)}
110
+
canGoBack
111
+
renderButton={
112
+
isNative
113
+
? () => (
114
+
<Pressable
115
+
accessibilityRole="button"
116
+
onPress={onShare}
117
+
hitSlop={HITSLOP_10}>
118
+
<ArrowOutOfBox_Stroke2_Corner0_Rounded
119
+
size="lg"
120
+
onPress={onShare}
121
+
/>
122
+
</Pressable>
123
+
)
124
+
: undefined
125
+
}
120
126
/>
121
127
<ListMaybePlaceholder
122
128
isLoading={isLoading || isRefetching}
123
129
isError={isError}
124
130
isEmpty={posts.length < 1}
125
131
onRetry={refetch}
132
+
notFoundType="results"
126
133
empty={_(msg`We couldn't find any results for that hashtag.`)}
127
134
/>
128
135
{!isLoading && posts.length > 0 && (