Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

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

Unify profile tabs and lists screens placeholders (#4315)

authored by

Bartosz Kaszubowski and committed by
GitHub
44670c7e 8d832342

+38 -46
+7 -11
src/view/com/feeds/ProfileFeedgens.tsx
··· 7 7 View, 8 8 ViewStyle, 9 9 } from 'react-native' 10 - import {msg, Trans} from '@lingui/macro' 10 + import {msg} from '@lingui/macro' 11 11 import {useLingui} from '@lingui/react' 12 12 import {useQueryClient} from '@tanstack/react-query' 13 13 ··· 18 18 import {hydrateFeedGenerator} from '#/state/queries/feed' 19 19 import {usePreferencesQuery} from '#/state/queries/preferences' 20 20 import {RQKEY, useProfileFeedgensQuery} from '#/state/queries/profile-feedgens' 21 - import {usePalette} from 'lib/hooks/usePalette' 22 21 import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' 22 + import {EmptyState} from 'view/com/util/EmptyState' 23 23 import {ErrorMessage} from '../util/error/ErrorMessage' 24 24 import {List, ListRef} from '../util/List' 25 25 import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn' 26 - import {Text} from '../util/text/Text' 27 26 import {FeedSourceCardLoaded} from './FeedSourceCard' 28 27 29 28 const LOADING = {_reactKey: '__loading__'} ··· 52 51 {did, scrollElRef, headerOffset, enabled, style, testID, setScrollViewTag}, 53 52 ref, 54 53 ) { 55 - const pal = usePalette('default') 56 54 const {_} = useLingui() 57 55 const theme = useTheme() 58 56 const [isPTRing, setIsPTRing] = React.useState(false) ··· 138 136 ({item, index}: ListRenderItemInfo<any>) => { 139 137 if (item === EMPTY) { 140 138 return ( 141 - <View 139 + <EmptyState 140 + icon="hashtag" 141 + message={_(msg`You have no feeds.`)} 142 142 testID="listsEmpty" 143 - style={[{padding: 18, borderTopWidth: 1}, pal.border]}> 144 - <Text style={pal.textLight}> 145 - <Trans>You have no feeds.</Trans> 146 - </Text> 147 - </View> 143 + /> 148 144 ) 149 145 } else if (item === ERROR_ITEM) { 150 146 return ( ··· 176 172 } 177 173 return null 178 174 }, 179 - [error, refetch, onPressRetryLoadMore, pal, preferences, _], 175 + [error, refetch, onPressRetryLoadMore, preferences, _], 180 176 ) 181 177 182 178 React.useEffect(() => {
+9 -10
src/view/com/lists/MyLists.tsx
··· 9 9 ViewStyle, 10 10 } from 'react-native' 11 11 import {AppBskyGraphDefs as GraphDefs} from '@atproto/api' 12 - import {Trans} from '@lingui/macro' 12 + import {msg} from '@lingui/macro' 13 + import {useLingui} from '@lingui/react' 13 14 14 15 import {cleanError} from '#/lib/strings/errors' 15 16 import {logger} from '#/logger' ··· 17 18 import {useAnalytics} from 'lib/analytics/analytics' 18 19 import {usePalette} from 'lib/hooks/usePalette' 19 20 import {s} from 'lib/styles' 21 + import {EmptyState} from 'view/com/util/EmptyState' 20 22 import {ErrorMessage} from '../util/error/ErrorMessage' 21 23 import {List} from '../util/List' 22 - import {Text} from '../util/text/Text' 23 24 import {ListCard} from './ListCard' 24 - import hairlineWidth = StyleSheet.hairlineWidth 25 25 26 26 const LOADING = {_reactKey: '__loading__'} 27 27 const EMPTY = {_reactKey: '__empty__'} ··· 42 42 }) { 43 43 const pal = usePalette('default') 44 44 const {track} = useAnalytics() 45 + const {_} = useLingui() 45 46 const [isPTRing, setIsPTRing] = React.useState(false) 46 47 const {data, isFetching, isFetched, isError, error, refetch} = 47 48 useMyListsQuery(filter) ··· 83 84 ({item, index}: {item: any; index: number}) => { 84 85 if (item === EMPTY) { 85 86 return ( 86 - <View 87 + <EmptyState 87 88 key={item._reactKey} 89 + icon="list-ul" 90 + message={_(msg`You have no lists.`)} 88 91 testID="listsEmpty" 89 - style={[{padding: 18, borderTopWidth: hairlineWidth}, pal.border]}> 90 - <Text style={pal.textLight}> 91 - <Trans>You have no lists.</Trans> 92 - </Text> 93 - </View> 92 + /> 94 93 ) 95 94 } else if (item === ERROR_ITEM) { 96 95 return ( ··· 118 117 /> 119 118 ) 120 119 }, 121 - [error, onRefresh, renderItem, pal], 120 + [error, onRefresh, renderItem, _], 122 121 ) 123 122 124 123 if (inline) {
+8 -10
src/view/com/lists/ProfileLists.tsx
··· 7 7 View, 8 8 ViewStyle, 9 9 } from 'react-native' 10 - import {msg, Trans} from '@lingui/macro' 10 + import {msg} from '@lingui/macro' 11 11 import {useLingui} from '@lingui/react' 12 12 import {useQueryClient} from '@tanstack/react-query' 13 13 ··· 17 17 import {isNative} from '#/platform/detection' 18 18 import {RQKEY, useProfileListsQuery} from '#/state/queries/profile-lists' 19 19 import {useAnalytics} from 'lib/analytics/analytics' 20 - import {usePalette} from 'lib/hooks/usePalette' 21 20 import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' 21 + import {EmptyState} from 'view/com/util/EmptyState' 22 22 import {ErrorMessage} from '../util/error/ErrorMessage' 23 23 import {List, ListRef} from '../util/List' 24 24 import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn' 25 - import {Text} from '../util/text/Text' 26 25 import {ListCard} from './ListCard' 27 26 28 27 const LOADING = {_reactKey: '__loading__'} ··· 49 48 {did, scrollElRef, headerOffset, enabled, style, testID, setScrollViewTag}, 50 49 ref, 51 50 ) { 52 - const pal = usePalette('default') 53 51 const theme = useTheme() 54 52 const {track} = useAnalytics() 55 53 const {_} = useLingui() ··· 142 140 ({item, index}: ListRenderItemInfo<any>) => { 143 141 if (item === EMPTY) { 144 142 return ( 145 - <View testID="listsEmpty" style={[{padding: 18}, pal.border]}> 146 - <Text style={pal.textLight}> 147 - <Trans>You have no lists.</Trans> 148 - </Text> 149 - </View> 143 + <EmptyState 144 + icon="list-ul" 145 + message={_(msg`You have no lists.`)} 146 + testID="listsEmpty" 147 + /> 150 148 ) 151 149 } else if (item === ERROR_ITEM) { 152 150 return ( ··· 176 174 /> 177 175 ) 178 176 }, 179 - [error, refetch, onPressRetryLoadMore, pal, _], 177 + [error, refetch, onPressRetryLoadMore, _], 180 178 ) 181 179 182 180 React.useEffect(() => {
+2 -6
src/view/com/modals/UserAddRemoveLists.tsx
··· 61 61 return [pal.border, {height: screenHeight / 1.5}] 62 62 } 63 63 64 - return [pal.border, {flex: 1}] 64 + return [pal.border, {flex: 1, borderTopWidth: 1}] 65 65 }, [pal.border, screenHeight]) 66 66 67 67 return ( ··· 233 233 textAlign: 'center', 234 234 fontWeight: 'bold', 235 235 fontSize: 24, 236 - marginBottom: 10, 237 - }, 238 - list: { 239 - flex: 1, 240 - borderTopWidth: 1, 236 + marginBottom: 12, 241 237 }, 242 238 btns: { 243 239 position: 'relative',
+6 -3
src/view/com/util/EmptyState.tsx
··· 8 8 import {Text} from './text/Text' 9 9 import {UserGroupIcon} from 'lib/icons' 10 10 import {usePalette} from 'lib/hooks/usePalette' 11 + import {isWeb} from 'platform/detection' 11 12 12 13 export function EmptyState({ 13 14 testID, ··· 22 23 }) { 23 24 const pal = usePalette('default') 24 25 return ( 25 - <View testID={testID} style={[styles.container, pal.border, style]}> 26 + <View 27 + testID={testID} 28 + style={[styles.container, isWeb && pal.border, style]}> 26 29 <View style={styles.iconContainer}> 27 30 {icon === 'user-group' ? ( 28 31 <UserGroupIcon size="64" style={styles.icon} /> ··· 48 51 49 52 const styles = StyleSheet.create({ 50 53 container: { 51 - paddingVertical: 20, 54 + paddingVertical: 24, 52 55 paddingHorizontal: 36, 53 - borderTopWidth: 1, 56 + borderTopWidth: isWeb ? 1 : undefined, 54 57 }, 55 58 iconContainer: { 56 59 flexDirection: 'row',
+6 -6
src/view/screens/Lists.tsx
··· 52 52 <View style={s.hContentRegion} testID="listsScreen"> 53 53 <SimpleViewHeader 54 54 showBackButton={isMobile} 55 - style={ 56 - !isMobile && [ 57 - pal.border, 58 - {borderLeftWidth: hairlineWidth, borderRightWidth: hairlineWidth}, 59 - ] 60 - }> 55 + style={[ 56 + pal.border, 57 + isMobile 58 + ? {borderBottomWidth: hairlineWidth} 59 + : {borderLeftWidth: hairlineWidth, borderRightWidth: hairlineWidth}, 60 + ]}> 61 61 <View style={{flex: 1}}> 62 62 <Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}> 63 63 <Trans>User Lists</Trans>