[APP-1403] Profile empty states (#8969)

* update: Empty state component

* update type error fixes

* add empty state icon

* update translations on labels

* update: lint error for empty state

* remove unused prompt

* update type errors

* fix lint errors and update profile followers and profile follows

* updated starterpack

* fix lint errors

* address feedback

* update icons to be a react element

* update icons

* update viewbox for icons

* optimize: icons and update profile lists

* optimize: icons and update profile lists

* lint error fix

* update iconSize from the rebase

src/components/StarterPack/Main/PostsList.tsx

@@ -9,6 +9,7 @@ import {PostFeed} from '#/view/com/posts/PostFeed'
 import {EmptyState} from '#/view/com/util/EmptyState'
 import {type ListRef} from '#/view/com/util/List'
 import {type SectionRef} from '#/screens/Profile/Sections/types'
+import {HashtagWide_Stroke1_Corner0_Rounded as HashtagWideIcon} from '#/components/icons/Hashtag'
 
 interface ProfilesListProps {
   listUri: string
@@ -33,7 +34,13 @@ export const PostsList = React.forwardRef<SectionRef, ProfilesListProps>(
     }))
 
     const renderPostsEmpty = useCallback(() => {
-      return <EmptyState icon="hashtag" message={_(msg`This feed is empty.`)} />
+      return (
+        <EmptyState
+          icon={HashtagWideIcon}
+          iconSize="2xl"
+          message={_(msg`This feed is empty.`)}
+        />
+      )
     }, [_])
 
     return (

src/components/StarterPack/ProfileStarterPacks.tsx

@@ -21,6 +21,10 @@ import {parseStarterPackUri} from '#/lib/strings/starter-pack'
 import {logger} from '#/logger'
 import {isIOS} from '#/platform/detection'
 import {useActorStarterPacksQuery} from '#/state/queries/actor-starter-packs'
+import {
+  EmptyState,
+  type EmptyStateButtonProps,
+} from '#/view/com/util/EmptyState'
 import {List, type ListRef} from '#/view/com/util/List'
 import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 import {atoms as a, ios, useTheme} from '#/alf'
@@ -47,6 +51,9 @@ interface ProfileFeedgensProps {
   testID?: string
   setScrollViewTag: (tag: number | null) => void
   isMe: boolean
+  emptyStateMessage?: string
+  emptyStateButton?: EmptyStateButtonProps
+  emptyStateIcon?: React.ComponentType<any> | React.ReactElement
 }
 
 function keyExtractor(item: AppBskyGraphDefs.StarterPackView) {
@@ -63,6 +70,9 @@ export function ProfileStarterPacks({
   testID,
   setScrollViewTag,
   isMe,
+  emptyStateMessage,
+  emptyStateButton,
+  emptyStateIcon,
 }: ProfileFeedgensProps) {
   const t = useTheme()
   const bottomBarOffset = useBottomBarOffset(100)
@@ -79,6 +89,28 @@ export function ProfileStarterPacks({
   const {isTabletOrDesktop} = useWebMediaQueries()
 
   const items = data?.pages.flatMap(page => page.starterPacks)
+  const {_} = useLingui()
+
+  const EmptyComponent = useCallback(() => {
+    if (emptyStateMessage || emptyStateButton || emptyStateIcon) {
+      return (
+        <View style={[a.px_lg, a.align_center, a.justify_center]}>
+          <EmptyState
+            icon={emptyStateIcon}
+            iconSize="3xl"
+            message={
+              emptyStateMessage ??
+              _(
+                'Starter packs let you share your favorite feeds and people with your friends.',
+              )
+            }
+            button={emptyStateButton}
+          />
+        </View>
+      )
+    }
+    return <Empty />
+  }, [_, emptyStateMessage, emptyStateButton, emptyStateIcon])
 
   useImperativeHandle(ref, () => ({
     scrollToTop: () => {},
@@ -146,7 +178,7 @@ export function ProfileStarterPacks({
         onEndReached={onEndReached}
         onRefresh={onRefresh}
         ListEmptyComponent={
-          data ? (isMe ? Empty : undefined) : FeedLoadingPlaceholder
+          data ? (isMe ? EmptyComponent : undefined) : FeedLoadingPlaceholder
         }
         ListFooterComponent={
           !!data && items?.length !== 0 && isMe ? CreateAnother : undefined