Unify profile tabs and lists screens placeholders (#4315)

src/view/com/feeds/ProfileFeedgens.tsx

@@ -7,7 +7,7 @@ import {
   View,
   ViewStyle,
 } from 'react-native'
-import {msg, Trans} from '@lingui/macro'
+import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useQueryClient} from '@tanstack/react-query'
 
@@ -18,12 +18,11 @@ import {isNative} from '#/platform/detection'
 import {hydrateFeedGenerator} from '#/state/queries/feed'
 import {usePreferencesQuery} from '#/state/queries/preferences'
 import {RQKEY, useProfileFeedgensQuery} from '#/state/queries/profile-feedgens'
-import {usePalette} from 'lib/hooks/usePalette'
 import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
+import {EmptyState} from 'view/com/util/EmptyState'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {List, ListRef} from '../util/List'
 import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn'
-import {Text} from '../util/text/Text'
 import {FeedSourceCardLoaded} from './FeedSourceCard'
 
 const LOADING = {_reactKey: '__loading__'}
@@ -52,7 +51,6 @@ export const ProfileFeedgens = React.forwardRef<
   {did, scrollElRef, headerOffset, enabled, style, testID, setScrollViewTag},
   ref,
 ) {
-  const pal = usePalette('default')
   const {_} = useLingui()
   const theme = useTheme()
   const [isPTRing, setIsPTRing] = React.useState(false)
@@ -138,13 +136,11 @@ export const ProfileFeedgens = React.forwardRef<
     ({item, index}: ListRenderItemInfo<any>) => {
       if (item === EMPTY) {
         return (
-          <View
+          <EmptyState
+            icon="hashtag"
+            message={_(msg`You have no feeds.`)}
             testID="listsEmpty"
-            style={[{padding: 18, borderTopWidth: 1}, pal.border]}>
-            <Text style={pal.textLight}>
-              <Trans>You have no feeds.</Trans>
-            </Text>
-          </View>
+          />
         )
       } else if (item === ERROR_ITEM) {
         return (
@@ -176,7 +172,7 @@ export const ProfileFeedgens = React.forwardRef<
       }
       return null
     },
-    [error, refetch, onPressRetryLoadMore, pal, preferences, _],
+    [error, refetch, onPressRetryLoadMore, preferences, _],
   )
 
   React.useEffect(() => {

src/view/com/lists/MyLists.tsx

@@ -9,7 +9,8 @@ import {
   ViewStyle,
 } from 'react-native'
 import {AppBskyGraphDefs as GraphDefs} from '@atproto/api'
-import {Trans} from '@lingui/macro'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
 import {cleanError} from '#/lib/strings/errors'
 import {logger} from '#/logger'
@@ -17,11 +18,10 @@ import {MyListsFilter, useMyListsQuery} from '#/state/queries/my-lists'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {usePalette} from 'lib/hooks/usePalette'
 import {s} from 'lib/styles'
+import {EmptyState} from 'view/com/util/EmptyState'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {List} from '../util/List'
-import {Text} from '../util/text/Text'
 import {ListCard} from './ListCard'
-import hairlineWidth = StyleSheet.hairlineWidth
 
 const LOADING = {_reactKey: '__loading__'}
 const EMPTY = {_reactKey: '__empty__'}
@@ -42,6 +42,7 @@ export function MyLists({
 }) {
   const pal = usePalette('default')
   const {track} = useAnalytics()
+  const {_} = useLingui()
   const [isPTRing, setIsPTRing] = React.useState(false)
   const {data, isFetching, isFetched, isError, error, refetch} =
     useMyListsQuery(filter)
@@ -83,14 +84,12 @@ export function MyLists({
     ({item, index}: {item: any; index: number}) => {
       if (item === EMPTY) {
         return (
-          <View
+          <EmptyState
             key={item._reactKey}
+            icon="list-ul"
+            message={_(msg`You have no lists.`)}
             testID="listsEmpty"
-            style={[{padding: 18, borderTopWidth: hairlineWidth}, pal.border]}>
-            <Text style={pal.textLight}>
-              <Trans>You have no lists.</Trans>
-            </Text>
-          </View>
+          />
         )
       } else if (item === ERROR_ITEM) {
         return (
@@ -118,7 +117,7 @@ export function MyLists({
         />
       )
     },
-    [error, onRefresh, renderItem, pal],
+    [error, onRefresh, renderItem, _],
   )
 
   if (inline) {

src/view/com/lists/ProfileLists.tsx

@@ -7,7 +7,7 @@ import {
   View,
   ViewStyle,
 } from 'react-native'
-import {msg, Trans} from '@lingui/macro'
+import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useQueryClient} from '@tanstack/react-query'
 
@@ -17,12 +17,11 @@ import {logger} from '#/logger'
 import {isNative} from '#/platform/detection'
 import {RQKEY, useProfileListsQuery} from '#/state/queries/profile-lists'
 import {useAnalytics} from 'lib/analytics/analytics'
-import {usePalette} from 'lib/hooks/usePalette'
 import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
+import {EmptyState} from 'view/com/util/EmptyState'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {List, ListRef} from '../util/List'
 import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn'
-import {Text} from '../util/text/Text'
 import {ListCard} from './ListCard'
 
 const LOADING = {_reactKey: '__loading__'}
@@ -49,7 +48,6 @@ export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
     {did, scrollElRef, headerOffset, enabled, style, testID, setScrollViewTag},
     ref,
   ) {
-    const pal = usePalette('default')
     const theme = useTheme()
     const {track} = useAnalytics()
     const {_} = useLingui()
@@ -142,11 +140,11 @@ export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
       ({item, index}: ListRenderItemInfo<any>) => {
         if (item === EMPTY) {
           return (
-            <View testID="listsEmpty" style={[{padding: 18}, pal.border]}>
-              <Text style={pal.textLight}>
-                <Trans>You have no lists.</Trans>
-              </Text>
-            </View>
+            <EmptyState
+              icon="list-ul"
+              message={_(msg`You have no lists.`)}
+              testID="listsEmpty"
+            />
           )
         } else if (item === ERROR_ITEM) {
           return (
@@ -176,7 +174,7 @@ export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
           />
         )
       },
-      [error, refetch, onPressRetryLoadMore, pal, _],
+      [error, refetch, onPressRetryLoadMore, _],
     )
 
     React.useEffect(() => {

src/view/com/modals/UserAddRemoveLists.tsx

@@ -61,7 +61,7 @@ export function Component({
       return [pal.border, {height: screenHeight / 1.5}]
     }
 
-    return [pal.border, {flex: 1}]
+    return [pal.border, {flex: 1, borderTopWidth: 1}]
   }, [pal.border, screenHeight])
 
   return (
@@ -233,11 +233,7 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     fontWeight: 'bold',
     fontSize: 24,
-    marginBottom: 10,
-  },
-  list: {
-    flex: 1,
-    borderTopWidth: 1,
+    marginBottom: 12,
   },
   btns: {
     position: 'relative',

src/view/com/util/EmptyState.tsx

@@ -8,6 +8,7 @@ import {
 import {Text} from './text/Text'
 import {UserGroupIcon} from 'lib/icons'
 import {usePalette} from 'lib/hooks/usePalette'
+import {isWeb} from 'platform/detection'
 
 export function EmptyState({
   testID,
@@ -22,7 +23,9 @@ export function EmptyState({
 }) {
   const pal = usePalette('default')
   return (
-    <View testID={testID} style={[styles.container, pal.border, style]}>
+    <View
+      testID={testID}
+      style={[styles.container, isWeb && pal.border, style]}>
       <View style={styles.iconContainer}>
         {icon === 'user-group' ? (
           <UserGroupIcon size="64" style={styles.icon} />
@@ -48,9 +51,9 @@ export function EmptyState({
 
 const styles = StyleSheet.create({
   container: {
-    paddingVertical: 20,
+    paddingVertical: 24,
     paddingHorizontal: 36,
-    borderTopWidth: 1,
+    borderTopWidth: isWeb ? 1 : undefined,
   },
   iconContainer: {
     flexDirection: 'row',

src/view/screens/Lists.tsx

@@ -52,12 +52,12 @@ export function ListsScreen({}: Props) {
     <View style={s.hContentRegion} testID="listsScreen">
       <SimpleViewHeader
         showBackButton={isMobile}
-        style={
-          !isMobile && [
+        style={[
           pal.border,
-            {borderLeftWidth: hairlineWidth, borderRightWidth: hairlineWidth},
-          ]
-        }>
+          isMobile
+            ? {borderBottomWidth: hairlineWidth}
+            : {borderLeftWidth: hairlineWidth, borderRightWidth: hairlineWidth},
+        ]}>
         <View style={{flex: 1}}>
           <Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}>
             <Trans>User Lists</Trans>