fix lint errors and update profile followers and profile follows

APiligrim · APiligrim · commit f5a9c14b0af8 · 2025-09-17T11:32:59.000-07:00
diff --git a/src/components/Lists.tsx b/src/components/Lists.tsx
@@ -4,6 +4,10 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {cleanError} from '#/lib/strings/errors'
+import {
+  EmptyState,
+  type EmptyStateButtonProps,
+} from '#/view/com/util/EmptyState'
 import {CenteredView} from '#/view/com/util/Views'
 import {atoms as a, flatten, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
@@ -129,6 +133,9 @@ let ListMaybePlaceholder = ({
   hideBackButton,
   sideBorders,
   topBorder = false,
+  emptyStateIcon,
+  emptyStateButton,
+  useEmptyState = false,
 }: {
   isLoading: boolean
   noEmpty?: boolean
@@ -143,6 +150,9 @@ let ListMaybePlaceholder = ({
   hideBackButton?: boolean
   sideBorders?: boolean
   topBorder?: boolean
+  emptyStateIcon?: React.ReactElement
+  emptyStateButton?: EmptyStateButtonProps
+  useEmptyState?: boolean
 }): React.ReactNode => {
   const t = useTheme()
   const {_} = useLingui()
@@ -180,6 +190,30 @@ let ListMaybePlaceholder = ({
     )
   }
 
+  if (useEmptyState) {
+    return (
+      <View
+        style={[
+          a.h_full_vh,
+          a.align_center,
+          a.justify_center,
+          t.atoms.border_contrast_low,
+          {paddingTop: 175, paddingBottom: 110},
+        ]}>
+        <EmptyState
+          icon={emptyStateIcon ?? 'growth'}
+          message={
+            emptyMessage ??
+            (emptyType === 'results'
+              ? _(msg`No results found`)
+              : _(msg`Page not found`))
+          }
+          button={emptyStateButton}
+        />
+      </View>
+    )
+  }
+
   if (!noEmpty) {
     return (
       <Error
diff --git a/src/components/icons/PeopleRemove2.tsx b/src/components/icons/PeopleRemove2.tsx
@@ -1,5 +1,13 @@
 import {createSinglePathSVG} from './TEMPLATE'
 
+export const PeopleRemove2_Stroke1_Corner0_Rounded = createSinglePathSVG({
+  viewBox: '0 0 65 64',
+  strokeWidth: 2,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+  path: 'M32.4999 53.3333H15.429C13.8577 53.3333 12.6129 51.975 12.9574 50.4419C14.9904 41.396 22.3783 34.6667 32.4999 34.6667C33.4116 34.6667 34.3012 34.7213 35.1666 34.8272M53.8333 42.6667L48.4999 48M48.4999 48L43.1666 53.3333M48.4999 48L43.1666 42.6667M48.4999 48L53.8333 53.3333M41.8333 17.3333C41.8333 22.488 37.6546 26.6667 32.4999 26.6667C27.3453 26.6667 23.1666 22.488 23.1666 17.3333C23.1666 12.1787 27.3453 8 32.4999 8C37.6546 8 41.8333 12.1787 41.8333 17.3333Z',
+})
+
 export const PeopleRemove2_Stroke2_Corner0_Rounded = createSinglePathSVG({
   path: 'M10 4a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5ZM5.5 6.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM16 11a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2h-5a1 1 0 0 1-1-1ZM3.678 19h12.644c-.71-2.909-3.092-5-6.322-5s-5.613 2.091-6.322 5Zm-2.174.906C1.917 15.521 5.242 12 10 12c4.758 0 8.083 3.521 8.496 7.906A1 1 0 0 1 17.5 21h-15a1 1 0 0 1-.996-1.094Z',
 })
diff --git a/src/screens/Profile/Sections/Feed.tsx b/src/screens/Profile/Sections/Feed.tsx
@@ -18,7 +18,7 @@ import {
 } from '#/view/com/util/EmptyState'
 import {type ListRef} from '#/view/com/util/List'
 import {LoadLatestBtn} from '#/view/com/util/load-latest/LoadLatestBtn'
-import {atoms as a, ios, useTheme} from '#/alf'
+import {atoms as a, ios, useBreakpoints, useTheme} from '#/alf'
 import {EditBig_Stroke1_Corner0_Rounded as EditIcon} from '#/components/icons/EditBig'
 import {Text} from '#/components/Typography'
 import {type SectionRef} from './types'
@@ -58,7 +58,7 @@ export function ProfileFeedSection({
     screenHeightOffset: headerHeight,
   })
   const t = useTheme()
-
+  const {gtPhone} = useBreakpoints()
   const onScrollToTop = useCallback(() => {
     scrollElRef.current?.scrollToOffset({
       animated: isNative,
@@ -74,17 +74,27 @@ export function ProfileFeedSection({
 
   const renderPostsEmpty = useCallback(() => {
     return (
-      <EmptyState
-        icon={
-          emptyStateIcon || (
-            <EditIcon size="3xl" fill={t.atoms.text_contrast_low.color} />
-          )
-        }
-        message={emptyStateMessage || _(msg`No posts yet.`)}
-        button={emptyStateButton}
-      />
+      <View style={[a.flex_1, a.justify_center, a.align_center]}>
+        <EmptyState
+          style={{width: '100%', marginTop: gtPhone ? 0 : 200}}
+          icon={
+            emptyStateIcon || (
+              <EditIcon size="3xl" fill={t.atoms.text_contrast_low.color} />
+            )
+          }
+          message={emptyStateMessage || _(msg`No posts yet.`)}
+          button={emptyStateButton}
+        />
+      </View>
     )
-  }, [_, t, emptyStateMessage, emptyStateButton, emptyStateIcon])
+  }, [
+    _,
+    emptyStateButton,
+    emptyStateIcon,
+    emptyStateMessage,
+    gtPhone,
+    t.atoms.text_contrast_low.color,
+  ])
 
   useEffect(() => {
     if (isIOS && isFocused && scrollElRef.current) {
diff --git a/src/view/com/lists/ProfileLists.tsx b/src/view/com/lists/ProfileLists.tsx
@@ -18,7 +18,6 @@ import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
 import {useQueryClient} from '@tanstack/react-query'
 
-import {HashtagWideIcon} from '#/lib/icons'
 import {cleanError} from '#/lib/strings/errors'
 import {logger} from '#/logger'
 import {isIOS, isNative, isWeb} from '#/platform/detection'
@@ -31,6 +30,7 @@ import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 import {LoadMoreRetryBtn} from '#/view/com/util/LoadMoreRetryBtn'
 import {atoms as a, ios, useTheme} from '#/alf'
 import * as FeedCard from '#/components/FeedCard'
+import {BulletList_Stroke1_Corner0_Rounded as ListIcon} from '#/components/icons/BulletList'
 import {ListFooter} from '#/components/Lists'
 
 const LOADING = {_reactKey: '__loading__'}
@@ -151,19 +151,22 @@ export function ProfileFeedgens({
         return (
           <EmptyState
             icon={
-              <HashtagWideIcon
-                size={64}
-                style={{color: t.atoms.text_contrast_low.color}}
+              <ListIcon
+                size="3xl"
+                fill={t.atoms.text_contrast_low.color}
+                viewBox="0 0 47 38"
               />
             }
-            message={_(msg`You haven't made any custom feeds yet.`)}
+            message={_(
+              msg`Lists allow you to see content from your favorite people.`,
+            )}
             textStyle={[t.atoms.text_contrast_medium, a.font_medium]}
             button={{
-              label: _(msg`Browse custom feeds`),
-              text: _(msg`Browse custom feeds`),
-              onPress: () => navigation.navigate('Feeds' as never),
+              label: _(msg`Create a list`),
+              text: _(msg`Create a list`),
+              onPress: () => navigation.navigate('Lists' as never),
               size: 'small',
-              color: 'secondary',
+              color: 'primary',
             }}
           />
         )
diff --git a/src/view/com/profile/ProfileFollowers.tsx b/src/view/com/profile/ProfileFollowers.tsx
@@ -2,13 +2,16 @@ import React from 'react'
 import {type AppBskyActorDefs as ActorDefs} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {useNavigation} from '@react-navigation/native'
 
 import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender'
 import {cleanError} from '#/lib/strings/errors'
 import {logger} from '#/logger'
 import {useProfileFollowersQuery} from '#/state/queries/profile-followers'
 import {useResolveDidQuery} from '#/state/queries/resolve-uri'
 import {useSession} from '#/state/session'
+import {useTheme} from '#/alf'
+import {PeopleRemove2_Stroke1_Corner0_Rounded as PeopleRemoveIcon} from '#/components/icons/PeopleRemove2'
 import {ListFooter, ListMaybePlaceholder} from '#/components/Lists'
 import {List} from '../util/List'
 import {ProfileCardWithFollowBtn} from './ProfileCard'
@@ -35,8 +38,10 @@ function keyExtractor(item: ActorDefs.ProfileViewBasic) {
 
 export function ProfileFollowers({name}: {name: string}) {
   const {_} = useLingui()
+  const navigation = useNavigation()
   const initialNumToRender = useInitialNumToRender()
   const {currentAccount} = useSession()
+  const t = useTheme()
 
   const [isPTRing, setIsPTRing] = React.useState(false)
   const {
@@ -91,12 +96,23 @@ export function ProfileFollowers({name}: {name: string}) {
         emptyType="results"
         emptyMessage={
           isMe
-            ? _(msg`You do not have any followers.`)
+            ? _(msg`No followers yet.`)
             : _(msg`This user doesn't have any followers.`)
         }
         errorMessage={cleanError(resolveError || error)}
         onRetry={isError ? refetch : undefined}
         sideBorders={false}
+        useEmptyState={true}
+        emptyStateIcon={
+          <PeopleRemoveIcon size="3xl" fill={t.atoms.text_contrast_low.color} />
+        }
+        emptyStateButton={{
+          label: _(msg`Go back`),
+          text: _(msg`Go back`),
+          color: 'secondary',
+          size: 'small',
+          onPress: () => navigation.goBack(),
+        }}
       />
     )
   }
diff --git a/src/view/com/profile/ProfileFollows.tsx b/src/view/com/profile/ProfileFollows.tsx
@@ -2,13 +2,18 @@ import React from 'react'
 import {type AppBskyActorDefs as ActorDefs} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {useNavigation} from '@react-navigation/native'
 
 import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender'
+import {type NavigationProp} from '#/lib/routes/types'
 import {cleanError} from '#/lib/strings/errors'
 import {logger} from '#/logger'
+import {isWeb} from '#/platform/detection'
 import {useProfileFollowsQuery} from '#/state/queries/profile-follows'
 import {useResolveDidQuery} from '#/state/queries/resolve-uri'
 import {useSession} from '#/state/session'
+import {useTheme} from '#/alf'
+import {PeopleRemove2_Stroke1_Corner0_Rounded as PeopleRemoveIcon} from '#/components/icons/PeopleRemove2'
 import {ListFooter, ListMaybePlaceholder} from '#/components/Lists'
 import {List} from '../util/List'
 import {ProfileCardWithFollowBtn} from './ProfileCard'
@@ -37,6 +42,17 @@ export function ProfileFollows({name}: {name: string}) {
   const {_} = useLingui()
   const initialNumToRender = useInitialNumToRender()
   const {currentAccount} = useSession()
+  const t = useTheme()
+  const navigation = useNavigation<NavigationProp>()
+
+  const onPressFindAccounts = React.useCallback(() => {
+    if (isWeb) {
+      navigation.navigate('Search', {})
+    } else {
+      navigation.navigate('SearchTab')
+      navigation.popToTop()
+    }
+  }, [navigation])
 
   const [isPTRing, setIsPTRing] = React.useState(false)
   const {
@@ -97,6 +113,16 @@ export function ProfileFollows({name}: {name: string}) {
         errorMessage={cleanError(resolveError || error)}
         onRetry={isError ? refetch : undefined}
         sideBorders={false}
+        useEmptyState={true}
+        emptyStateIcon={
+          <PeopleRemoveIcon size="3xl" fill={t.atoms.text_contrast_low.color} />
+        }
+        emptyStateButton={{
+          label: _(msg`See suggested accounts`),
+          text: _(msg`See suggested accounts`),
+          variant: 'solid',
+          onPress: onPressFindAccounts,
+        }}
       />
     )
   }
diff --git a/src/view/com/util/EmptyState.tsx b/src/view/com/util/EmptyState.tsx
@@ -4,7 +4,7 @@ import {View} from 'react-native'
 
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button, type ButtonProps, ButtonText} from '#/components/Button'
 import {EditBig_Stroke1_Corner0_Rounded as EditIcon} from '#/components/icons/EditBig'
 import {Growth_Stroke2_Corner0_Rounded as Growth} from '#/components/icons/Growth'
@@ -34,9 +34,10 @@ export function EmptyState({
   const {isTabletOrDesktop} = useWebMediaQueries()
   const iconSize = isTabletOrDesktop ? 64 : 48
   const t = useTheme()
+  const {gtMobile} = useBreakpoints()
 
   const placeholderIcon = (
-    <EditIcon size="2xl" fill={t.atoms.text_contrast_low.color} />
+    <EditIcon size="3xl" fill={t.atoms.text_contrast_low.color} />
   )
 
   const renderIcon = () => {
@@ -73,7 +74,7 @@ export function EmptyState({
       </View>
       <Text
         style={[
-          {color: pal.colors.textLight, maxWidth: '40%'},
+          {color: pal.colors.textLight, maxWidth: gtMobile ? '40%' : '60%'},
           a.font_medium,
           a.text_md,
           a.leading_snug,
