[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

__tests__/lib/link-meta.test.ts

···
-import {LikelyType, getLikelyType} from '../../src/lib/link-meta/link-meta'
+import {getLikelyType, LikelyType} from '../../src/lib/link-meta/link-meta'
 
 describe('getLikelyType', () => {
   it('correctly handles non-parsed url', async () => {

assets/icons/bulletlist_stroke1_corner0_rounded.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 46 38"><path stroke="#405168" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M22.333 31.667H45M22.333 6.333H45m-33.333 0A5.333 5.333 0 1 1 1 6.333a5.333 5.333 0 0 1 10.667 0Zm0 25.334a5.333 5.333 0 1 1-10.667 0 5.333 5.333 0 0 1 10.667 0Z"/></svg>

assets/icons/circle_and_square_stroke1_corner0_rounded_filled.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 62 53"><path fill="#405168" d="M28.173.231a5.653 5.653 0 0 1 7.018 3.83l2.66 9.046a20 20 0 0 1 3.986-.397c11.026 0 19.964 8.937 19.964 19.962l-.006.516c-.274 10.787-9.104 19.448-19.958 19.448l-.514-.007c-8.332-.21-15.394-5.528-18.178-12.938l-8.805 2.59a5.654 5.654 0 0 1-7.02-3.83L.232 14.34a5.654 5.654 0 0 1 3.83-7.018L28.172.23ZM41.838 14.71c-1.17 0-2.313.111-3.42.325l3.863 13.137a5.653 5.653 0 0 1-3.83 7.019L25.07 39.126c2.593 6.732 9.122 11.51 16.768 11.51 9.92 0 17.963-8.043 17.963-17.964S51.758 14.71 41.837 14.71ZM33.271 4.624a3.653 3.653 0 0 0-4.535-2.474L4.624 9.24a3.653 3.653 0 0 0-2.475 4.535l7.09 24.113a3.654 3.654 0 0 0 4.536 2.475l8.762-2.577a20 20 0 0 1-.662-5.114c0-8.961 5.905-16.544 14.037-19.069l-2.64-8.98Zm3.204 10.899c-7.302 2.28-12.601 9.096-12.601 17.15 0 1.571.203 3.095.582 4.548l13.431-3.948a3.654 3.654 0 0 0 2.474-4.536l-3.886-13.214Z"/></svg>

assets/icons/editbig_stroke1_corner0_rounded.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 48 48"><path fill="#405168" d="M19.667 4.458a1 1 0 1 0 0-2v2Zm25 23a1 1 0 0 0-2 0h2ZM3.912 45.543l.454-.891-.454.89Zm-2.33-2.33.89-.455h0l-.89.454Zm39.173 2.33-.454-.891h0l.454.89Zm2.33-2.33-.89-.455.89.454ZM1.581 6.37l-.89-.454h0l.89.454Zm2.331-2.331-.454-.891.454.89ZM14.333 32.79h-1a1 1 0 0 0 1 1v-1Zm.781-8.781.707.707-.707-.707ZM36.562 2.562l-.707-.707v0l.707.707Zm7.543 0-.707.707v0l.707-.707Zm.457.458.707-.707v0l-.707.707Zm0 7.542.707.707-.707-.707ZM23.114 32.01l.707.707-.707-.707Zm12.02 14.114v-1h-25.6v2h25.6v-1ZM1 37.591h1v-25.6H0v25.6h1ZM9.533 3.458v1h10.134v-2H9.533v1Zm34.134 24h-1V37.59h2V27.457h-1ZM9.533 46.124v-1c-1.51 0-2.582 0-3.421-.07-.828-.067-1.34-.195-1.746-.402l-.454.89-.454.892c.735.374 1.54.537 2.491.614.94.077 2.107.076 3.584.076v-1ZM1 37.591H0c0 1.477 0 2.645.076 3.584.078.951.24 1.756.614 2.491l.891-.454.891-.454c-.207-.406-.335-.918-.403-1.746C2.001 40.173 2 39.101 2 37.591H1Zm2.912 7.952.454-.891a4.33 4.33 0 0 1-1.894-1.894l-.89.454-.892.454a6.33 6.33 0 0 0 2.768 2.768l.454-.891Zm31.221.581v1c1.477 0 2.645.001 3.585-.076.95-.078 1.756-.24 2.49-.614l-.453-.891-.454-.891c-.406.207-.919.335-1.746.403-.84.068-1.912.07-3.422.07v1Zm8.534-8.533h-1c0 1.51-.001 2.582-.07 3.421-.067.828-.196 1.34-.403 1.746l.891.454.891.454c.375-.735.537-1.54.615-2.49.076-.94.076-2.108.076-3.585h-1Zm-2.912 7.952.454.89a6.33 6.33 0 0 0 2.767-2.767l-.89-.454-.892-.454a4.33 4.33 0 0 1-1.893 1.894l.454.89ZM1 11.99h1c0-1.51 0-2.582.07-3.422.067-.827.195-1.34.402-1.745l-.89-.454-.892-.454c-.374.734-.536 1.54-.614 2.49C-.001 9.345 0 10.513 0 11.99h1Zm8.533-8.533v-1c-1.477 0-2.645-.001-3.584.076-.951.077-1.756.24-2.49.614l.453.89.454.892c.406-.207.918-.336 1.746-.403.839-.069 1.911-.07 3.421-.07v-1ZM1.581 6.37l.891.454A4.33 4.33 0 0 1 4.366 4.93l-.454-.891-.454-.891A6.33 6.33 0 0 0 .69 5.916l.891.454Zm12.752 19.525h-1v6.896h2v-6.896h-1Zm0 6.896v1h6.896v-2h-6.896v1Zm.781-8.781.707.707L37.27 3.269l-.707-.707-.707-.707-21.448 21.448.707.707Zm28.99-21.448-.706.707.457.458.707-.707.707-.707-.457-.458-.707.707Zm.458 8-.707-.707-21.448 21.448.707.707.707.707L45.27 11.269l-.707-.707Zm0-7.542-.707.707a4.333 4.333 0 0 1 0 6.128l.707.707.707.707a6.333 6.333 0 0 0 0-8.956l-.707.707Zm-8-.458.707.707a4.333 4.333 0 0 1 6.129 0l.707-.707.707-.707a6.333 6.333 0 0 0-8.957 0l.707.707ZM21.23 32.791v1c.972 0 1.905-.386 2.593-1.074l-.708-.707-.707-.707a1.67 1.67 0 0 1-1.178.488v1Zm-6.896-6.896h1c0-.442.176-.866.489-1.178l-.708-.707-.707-.707a3.67 3.67 0 0 0-1.074 2.592h1Z"/></svg>

assets/icons/hashtagwide_stroke1_corner0_rounded.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 46 46"><path stroke="#405168" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.333 1 9 45M37 1l-5.333 44M1 11.667h44m0 22.666H1"/></svg>

assets/icons/heart2_stroke1_corner0_rounded.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 50 45"><path stroke="#405168" stroke-linejoin="round" stroke-width="2" d="M49 17c0 15.333-22 26.667-24 26.667S1 32.333 1 17C1 6.333 7.667 1 14.333 1S25 5 25 5s4-4 10.667-4S49 6.333 49 17Z"/></svg>

assets/icons/image_stroke1_corner0_rounded.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 46 46"><path stroke="#080B12" stroke-linecap="round" stroke-width="1.5" d="m1.417 28.645 7.586-5.676a5.33 5.33 0 0 1 6.867.809c3.98 4.286 8.594 8.182 14.88 8.182 5.794 0 9.633-2.147 13.333-5.847m-38 18.637h33.334a5.333 5.333 0 0 0 5.333-5.333V6.083A5.333 5.333 0 0 0 39.417.75H6.083A5.333 5.333 0 0 0 .75 6.083v33.334a5.333 5.333 0 0 0 5.333 5.333ZM36.75 14.083a5.333 5.333 0 1 1-10.667 0 5.333 5.333 0 0 1 10.667 0Z"/></svg>

assets/icons/message_stroke1_corner0_rounded_filled.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 50 50"><path stroke="#405168" stroke-linecap="square" stroke-linejoin="round" stroke-width="2" d="M9 1h32a8 8 0 0 1 8 8v21.333a8 8 0 0 1-8 8H27.667L14.333 49V38.333H9a8 8 0 0 1-8-8V9a8 8 0 0 1 8-8Z"/></svg>

assets/icons/peopleremove2_stroke1_corner0_rounded.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 43 48"><path stroke="#405168" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.603 46.333H3.532c-1.572 0-2.816-1.358-2.472-2.891 2.033-9.046 9.421-15.775 19.543-15.775q1.367 0 2.666.16m18.667 7.84L36.603 41m0 0-5.334 5.333M36.603 41l-5.334-5.333M36.603 41l5.333 5.333m-12-36A9.333 9.333 0 1 1 20.603 1a9.333 9.333 0 0 1 9.333 9.333Z"/></svg>

assets/icons/videoclip_stroke1_corner0_rounded.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 46 46"><path stroke="#405168" stroke-linecap="square" stroke-linejoin="round" stroke-width="2" d="M1 23h10.667M1 23V12m0 11v11m10.667-11h22.666m-22.666 0v11m0-11V12m22.666 11H45m-10.667 0v12.222m0-12.222V12M45 23V12m0 11v12.222M34.333 45h5.334A5.333 5.333 0 0 0 45 39.667v-4.445M34.333 45v-9.778m0 9.778H11.667M34.333 1h5.334A5.333 5.333 0 0 1 45 6.333V12M34.333 1v11m0-11H11.667m22.666 11H45M34.333 35.222H45M11.667 45H6.333A5.333 5.333 0 0 1 1 39.667V34m10.667 11V34m0-33H6.333A5.333 5.333 0 0 0 1 6.333V12M11.667 1v11M1 12h10.667M1 34h10.667"/></svg>

src/components/Button.tsx

···
        * also so that we can calculate transforms.
        */
       const iconSize = {
-        '2xs': 8,
         xs: 12,
         sm: 16,
         md: 18,
         lg: 24,
         xl: 28,
+        '2xs': 8,
         '2xl': 32,
+        '3xl': 40,
       }[iconSizeShorthand]
 
       /*

src/components/Lists.tsx

···
 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, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
···
   hideBackButton,
   sideBorders,
   topBorder = false,
+  emptyStateIcon,
+  emptyStateButton,
+  useEmptyState = false,
 }: {
   isLoading: boolean
   noEmpty?: boolean
···
   hideBackButton?: boolean
   sideBorders?: boolean
   topBorder?: boolean
+  emptyStateIcon?: React.ComponentType<any> | React.ReactElement
+  emptyStateButton?: EmptyStateButtonProps
+  useEmptyState?: boolean
 }): React.ReactNode => {
   const t = useTheme()
   const {_} = useLingui()
···
         sideBorders={sideBorders}
         hideBackButton={hideBackButton}
       />
+    )
+  }
+
+  if (useEmptyState) {
+    return (
+      <View style={[t.atoms.border_contrast_low]}>
+        <EmptyState
+          icon={emptyStateIcon}
+          message={
+            emptyMessage ??
+            (emptyType === 'results'
+              ? _(msg`No results found`)
+              : _(msg`Page not found`))
+          }
+          button={emptyStateButton}
+        />
+      </View>
     )
   }
 

src/components/StarterPack/Main/PostsList.tsx

···
 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
···
     }))
 
     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

···
 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'
···
   testID?: string
   setScrollViewTag: (tag: number | null) => void
   isMe: boolean
+  emptyStateMessage?: string
+  emptyStateButton?: EmptyStateButtonProps
+  emptyStateIcon?: React.ComponentType<any> | React.ReactElement
 }
 
 function keyExtractor(item: AppBskyGraphDefs.StarterPackView) {
···
   testID,
   setScrollViewTag,
   isMe,
+  emptyStateMessage,
+  emptyStateButton,
+  emptyStateIcon,
 }: ProfileFeedgensProps) {
   const t = useTheme()
   const bottomBarOffset = useBottomBarOffset(100)
···
   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: () => {},
···
         onEndReached={onEndReached}
         onRefresh={onRefresh}
         ListEmptyComponent={
-          data ? (isMe ? Empty : undefined) : FeedLoadingPlaceholder
+          data ? (isMe ? EmptyComponent : undefined) : FeedLoadingPlaceholder
         }
         ListFooterComponent={
           !!data && items?.length !== 0 && isMe ? CreateAnother : undefined

src/components/icons/BulletList.tsx

···
 import {createSinglePathSVG} from './TEMPLATE'
 
+export const BulletList_Stroke1_Corner0_Rounded = createSinglePathSVG({
+  viewBox: '0 0 47 38',
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+  strokeWidth: 2,
+  path: 'M22.333 31.667H45M22.333 6.333H45m-33.333 0A5.333 5.333 0 1 1 1 6.333a5.333 5.333 0 0 1 10.667 0Zm0 25.334a5.333 5.333 0 1 1-10.667 0 5.333 5.333 0 0 1 10.667 0Z',
+})
+
 export const BulletList_Stroke2_Corner0_Rounded = createSinglePathSVG({
   path: 'M6 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2ZM3 7a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm9 0a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2h-7a1 1 0 0 1-1-1Zm-6 9a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-3 1a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm9 0a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2h-7a1 1 0 0 1-1-1Z',
 })

src/components/icons/CircleAndSquare.tsx

···
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const Circle_And_Square_Stroke1_Corner0_Rounded_Filled =
+  createSinglePathSVG({
+    viewBox: '0 0 62 53',
+    path: 'M28.173.231a5.653 5.653 0 0 1 7.018 3.83l2.66 9.046a20 20 0 0 1 3.986-.397c11.026 0 19.964 8.937 19.964 19.962l-.006.516c-.274 10.787-9.104 19.448-19.958 19.448l-.514-.007c-8.332-.21-15.394-5.528-18.178-12.938l-8.805 2.59a5.654 5.654 0 0 1-7.02-3.83L.232 14.34a5.654 5.654 0 0 1 3.83-7.018L28.172.23ZM41.838 14.71c-1.17 0-2.313.111-3.42.325l3.863 13.137a5.653 5.653 0 0 1-3.83 7.019L25.07 39.126c2.593 6.732 9.122 11.51 16.768 11.51 9.92 0 17.963-8.043 17.963-17.964S51.758 14.71 41.837 14.71ZM33.271 4.624a3.653 3.653 0 0 0-4.535-2.474L4.624 9.24a3.653 3.653 0 0 0-2.475 4.535l7.09 24.113a3.654 3.654 0 0 0 4.536 2.475l8.762-2.577a20 20 0 0 1-.662-5.114c0-8.961 5.905-16.544 14.037-19.069l-2.64-8.98Zm3.204 10.899c-7.302 2.28-12.601 9.096-12.601 17.15 0 1.571.203 3.095.582 4.548l13.431-3.948a3.654 3.654 0 0 0 2.474-4.536l-3.886-13.214Z',
+  })

src/components/icons/EditBig.tsx

···
 import {createSinglePathSVG} from './TEMPLATE'
 
+export const EditBig_Stroke1_Corner0_Rounded = createSinglePathSVG({
+  viewBox: '0 0 48 48',
+  path: 'M19.667 4.458a1 1 0 1 0 0-2v2Zm25 23a1 1 0 0 0-2 0h2ZM3.912 45.543l.454-.891-.454.89Zm-2.33-2.33.89-.455h0l-.89.454Zm39.173 2.33-.454-.891h0l.454.89Zm2.33-2.33-.89-.455.89.454ZM1.581 6.37l-.89-.454h0l.89.454Zm2.331-2.331-.454-.891.454.89ZM14.333 32.79h-1a1 1 0 0 0 1 1v-1Zm.781-8.781.707.707-.707-.707ZM36.562 2.562l-.707-.707v0l.707.707Zm7.543 0-.707.707v0l.707-.707Zm.457.458.707-.707v0l-.707.707Zm0 7.542.707.707-.707-.707ZM23.114 32.01l.707.707-.707-.707Zm12.02 14.114v-1h-25.6v2h25.6v-1ZM1 37.591h1v-25.6H0v25.6h1ZM9.533 3.458v1h10.134v-2H9.533v1Zm34.134 24h-1V37.59h2V27.457h-1ZM9.533 46.124v-1c-1.51 0-2.582 0-3.421-.07-.828-.067-1.34-.195-1.746-.402l-.454.89-.454.892c.735.374 1.54.537 2.491.614.94.077 2.107.076 3.584.076v-1ZM1 37.591H0c0 1.477 0 2.645.076 3.584.078.951.24 1.756.614 2.491l.891-.454.891-.454c-.207-.406-.335-.918-.403-1.746C2.001 40.173 2 39.101 2 37.591H1Zm2.912 7.952.454-.891a4.33 4.33 0 0 1-1.894-1.894l-.89.454-.892.454a6.33 6.33 0 0 0 2.768 2.768l.454-.891Zm31.221.581v1c1.477 0 2.645.001 3.585-.076.95-.078 1.756-.24 2.49-.614l-.453-.891-.454-.891c-.406.207-.919.335-1.746.403-.84.068-1.912.07-3.422.07v1Zm8.534-8.533h-1c0 1.51-.001 2.582-.07 3.421-.067.828-.196 1.34-.403 1.746l.891.454.891.454c.375-.735.537-1.54.615-2.49.076-.94.076-2.108.076-3.585h-1Zm-2.912 7.952.454.89a6.33 6.33 0 0 0 2.767-2.767l-.89-.454-.892-.454a4.33 4.33 0 0 1-1.893 1.894l.454.89ZM1 11.99h1c0-1.51 0-2.582.07-3.422.067-.827.195-1.34.402-1.745l-.89-.454-.892-.454c-.374.734-.536 1.54-.614 2.49C-.001 9.345 0 10.513 0 11.99h1Zm8.533-8.533v-1c-1.477 0-2.645-.001-3.584.076-.951.077-1.756.24-2.49.614l.453.89.454.892c.406-.207.918-.336 1.746-.403.839-.069 1.911-.07 3.421-.07v-1ZM1.581 6.37l.891.454A4.33 4.33 0 0 1 4.366 4.93l-.454-.891-.454-.891A6.33 6.33 0 0 0 .69 5.916l.891.454Zm12.752 19.525h-1v6.896h2v-6.896h-1Zm0 6.896v1h6.896v-2h-6.896v1Zm.781-8.781.707.707L37.27 3.269l-.707-.707-.707-.707-21.448 21.448.707.707Zm28.99-21.448-.706.707.457.458.707-.707.707-.707-.457-.458-.707.707Zm.458 8-.707-.707-21.448 21.448.707.707.707.707L45.27 11.269l-.707-.707Zm0-7.542-.707.707a4.333 4.333 0 0 1 0 6.128l.707.707.707.707a6.333 6.333 0 0 0 0-8.956l-.707.707Zm-8-.458.707.707a4.333 4.333 0 0 1 6.129 0l.707-.707.707-.707a6.333 6.333 0 0 0-8.957 0l.707.707ZM21.23 32.791v1c.972 0 1.905-.386 2.593-1.074l-.708-.707-.707-.707a1.67 1.67 0 0 1-1.178.488v1Zm-6.896-6.896h1c0-.442.176-.866.489-1.178l-.708-.707-.707-.707a3.67 3.67 0 0 0-1.074 2.592h1Z',
+})
+
 export const EditBig_Stroke2_Corner0_Rounded = createSinglePathSVG({
   path: 'M17.293 2.293a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414l-9 9A1 1 0 0 1 12 16H9a1 1 0 0 1-1-1v-3a1 1 0 0 1 .293-.707l9-9ZM10 12.414V14h1.586l8-8L18 4.414l-8 8ZM3 4a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v7a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Z',
 })

src/components/icons/Hashtag.tsx

···
 import {createSinglePathSVG} from './TEMPLATE'
 
+export const HashtagWide_Stroke1_Corner0_Rounded = createSinglePathSVG({
+  viewBox: '0 0 46 46',
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+  strokeWidth: 2,
+  path: 'M14.333 1 9 45M37 1l-5.333 44M1 11.667h44m0 22.666H1',
+})
+
 export const Hashtag_Stroke2_Corner0_Rounded = createSinglePathSVG({
   path: 'M9.124 3.008a1 1 0 0 1 .868 1.116L9.632 7h5.985l.39-3.124a1 1 0 0 1 1.985.248L17.632 7H20a1 1 0 1 1 0 2h-2.617l-.75 6H20a1 1 0 1 1 0 2h-3.617l-.39 3.124a1 1 0 1 1-1.985-.248l.36-2.876H8.382l-.39 3.124a1 1 0 1 1-1.985-.248L6.368 17H4a1 1 0 1 1 0-2h2.617l.75-6H4a1 1 0 1 1 0-2h3.617l.39-3.124a1 1 0 0 1 1.117-.868ZM9.383 9l-.75 6h5.984l.75-6H9.383Z',
 })

src/components/icons/Heart2.tsx

···
 import {createSinglePathSVG} from './TEMPLATE'
 
+export const Heart2_Stroke1_Corner0_Rounded = createSinglePathSVG({
+  viewBox: '0 0 51 46',
+  strokeLinejoin: 'round',
+  strokeWidth: 2,
+  path: 'M49 17c0 15.333-22 26.667-24 26.667S1 32.333 1 17C1 6.333 7.667 1 14.333 1S25 5 25 5s4-4 10.667-4S49 6.333 49 17Z',
+})
+
 export const Heart2_Stroke2_Corner0_Rounded = createSinglePathSVG({
   path: 'M16.734 5.091c-1.238-.276-2.708.047-4.022 1.38a1 1 0 0 1-1.424 0C9.974 5.137 8.504 4.814 7.266 5.09c-1.263.282-2.379 1.206-2.92 2.556C3.33 10.18 4.252 14.84 12 19.348c7.747-4.508 8.67-9.168 7.654-11.7-.541-1.351-1.657-2.275-2.92-2.557Zm4.777 1.812c1.604 4-.494 9.69-9.022 14.47a1 1 0 0 1-.978 0C2.983 16.592.885 10.902 2.49 6.902c.779-1.942 2.414-3.334 4.342-3.764 1.697-.378 3.552.003 5.169 1.286 1.617-1.283 3.472-1.664 5.17-1.286 1.927.43 3.562 1.822 4.34 3.764Z',
 })

src/components/icons/Image.tsx

···
 import {createSinglePathSVG} from './TEMPLATE'
 
+export const Image_Stroke1_Corner0_Rounded = createSinglePathSVG({
+  viewBox: '0 0 46 46',
+  strokeLinecap: 'round',
+  strokeWidth: 1.5,
+  path: 'm1.417 28.645 7.586-5.676a5.33 5.33 0 0 1 6.867.809c3.98 4.286 8.594 8.182 14.88 8.182 5.794 0 9.633-2.147 13.333-5.847m-38 18.637h33.334a5.333 5.333 0 0 0 5.333-5.333V6.083A5.333 5.333 0 0 0 39.417.75H6.083A5.333 5.333 0 0 0 .75 6.083v33.334a5.333 5.333 0 0 0 5.333 5.333ZM36.75 14.083a5.333 5.333 0 1 1-10.667 0 5.333 5.333 0 0 1 10.667 0Z',
+})
+
 export const Image_Stroke2_Corner0_Rounded = createSinglePathSVG({
   path: 'M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm2 1v7.213l1.246-.932.044-.03a3 3 0 0 1 3.863.454c1.468 1.58 2.941 2.749 4.847 2.749 1.703 0 2.855-.555 4-1.618V5H5Zm14 10.357c-1.112.697-2.386 1.097-4 1.097-2.81 0-4.796-1.755-6.313-3.388a1 1 0 0 0-1.269-.164L5 14.712V19h14v-3.643ZM15 8a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-3 1a3 3 0 1 1 6 0 3 3 0 0 1-6 0Z',
 })

src/components/icons/Message.tsx

···
 import {createSinglePathSVG} from './TEMPLATE'
 
+export const Message_Stroke1_Corner0_Rounded_Filled = createSinglePathSVG({
+  viewBox: '0 0 51 51',
+  strokeWidth: 2,
+  strokeLinecap: 'square',
+  strokeLinejoin: 'round',
+  path: 'M9 1h32a8 8 0 0 1 8 8v21.333a8 8 0 0 1-8 8H27.667L14.333 49V38.333H9a8 8 0 0 1-8-8V9a8 8 0 0 1 8-8Z',
+})
+
 export const Message_Stroke2_Corner0_Rounded_Filled = createSinglePathSVG({
   path: 'M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10a9.968 9.968 0 0 1-4.136-.893l-4.68.876a1 1 0 0 1-1.164-1.184l.931-4.537A9.965 9.965 0 0 1 2 12Zm4.25 0a1.25 1.25 0 1 0 2.5 0 1.25 1.25 0 0 0-2.5 0Zm4.5 0a1.25 1.25 0 1 0 2.5 0 1.25 1.25 0 0 0-2.5 0Zm5.75 1.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Z',
 })

src/components/icons/PeopleRemove2.tsx

···
 import {createSinglePathSVG} from './TEMPLATE'
 
+export const PeopleRemove2_Stroke1_Corner0_Rounded = createSinglePathSVG({
+  viewBox: '-15 0 65 64',
+  strokeWidth: 2,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+  path: 'M20.603 46.333H3.532c-1.572 0-2.816-1.358-2.472-2.891 2.033-9.046 9.421-15.775 19.543-15.775q1.367 0 2.666.16m18.667 7.84L36.603 41m0 0-5.334 5.333M36.603 41l-5.334-5.333M36.603 41l5.333 5.333m-12-36A9.333 9.333 0 1 1 20.603 1a9.333 9.333 0 0 1 9.333 9.333Z',
+})
+
 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',
 })

src/components/icons/TEMPLATE.tsx

···
   },
 )
 
-export function createSinglePathSVG({path}: {path: string}) {
+export function createSinglePathSVG({
+  path,
+  viewBox,
+  strokeWidth = 0,
+  strokeLinecap = 'butt',
+  strokeLinejoin = 'miter',
+}: {
+  path: string
+  viewBox?: string
+  strokeWidth?: number
+  strokeLinecap?: 'butt' | 'round' | 'square'
+  strokeLinejoin?: 'miter' | 'round' | 'bevel'
+}) {
+  return React.forwardRef<Svg, Props>(function LogoImpl(props, ref) {
+    const {fill, size, style, gradient, ...rest} = useCommonSVGProps(props)
+
+    const hasStroke = strokeWidth > 0
+
+    return (
+      <Svg
+        fill="none"
+        {...rest}
+        ref={ref}
+        viewBox={viewBox || '0 0 24 24'}
+        width={size}
+        height={size}
+        style={[style]}>
+        {gradient}
+        <Path
+          fill={hasStroke ? 'none' : fill}
+          stroke={hasStroke ? fill : 'none'}
+          strokeWidth={strokeWidth}
+          strokeLinecap={strokeLinecap}
+          strokeLinejoin={strokeLinejoin}
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d={path}
+        />
+      </Svg>
+    )
+  })
+}
+
+export function createSinglePathSVG2({path}: {path: string}) {
   return React.forwardRef<Svg, Props>(function LogoImpl(props, ref) {
     const {fill, size, style, gradient, ...rest} = useCommonSVGProps(props)
 

src/components/icons/VideoClip.tsx

···
 import {createSinglePathSVG} from './TEMPLATE'
 
+export const VideoClip_Stroke1_Corner0_Rounded = createSinglePathSVG({
+  viewBox: '0 0 46 46',
+  strokeLinecap: 'square',
+  strokeLinejoin: 'round',
+  strokeWidth: 2,
+  path: 'M1 23h10.667M1 23V12m0 11v11m10.667-11h22.666m-22.666 0v11m0-11V12m22.666 11H45m-10.667 0v12.222m0-12.222V12M45 23V12m0 11v12.222M34.333 45h5.334A5.333 5.333 0 0 0 45 39.667v-4.445M34.333 45v-9.778m0 9.778H11.667M34.333 1h5.334A5.333 5.333 0 0 1 45 6.333V12M34.333 1v11m0-11H11.667m22.666 11H45M34.333 35.222H45M11.667 45H6.333A5.333 5.333 0 0 1 1 39.667V34m10.667 11V34m0-33H6.333A5.333 5.333 0 0 0 1 6.333V12M11.667 1v11M1 12h10.667M1 34h10.667',
+})
+
 export const VideoClip_Stroke2_Corner0_Rounded = createSinglePathSVG({
   path: 'M3 4a1 1 0 011-1h16a1 1 0 011 1v16a1 1 0 01-1 1H4a1 1 0 01-1-1V4Zm2 1v2h2V5H5Zm4 0v6h6V5H9Zm8 0v2h2V5h-2Zm2 4h-2v2h2V9Zm0 4h-2v2h2V13Zm0 4h-2V19h2ZM15 19v-6H9v6h6Zm-8 0v-2H5v2h2Zm-2-4h2v-2H5v2Zm0-4h2V9H5v2Z',
 })

src/components/icons/common.tsx

···
   lg: 24,
   xl: 28,
   '2xl': 32,
+  '3xl': 48,
 } as const
 
 export function useCommonSVGProps(props: Props) {

src/locale/locales/en/messages.po

···
 
 #: src/components/verification/VerificationsDialog.tsx:65
 msgid "Your verifications"
-msgstr ""
+msgstr ""

src/screens/Bookmarks/index.tsx

···
 } from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {useFocusEffect} from '@react-navigation/native'
+import {
+  type NavigationProp,
+  useFocusEffect,
+  useNavigation,
+} from '@react-navigation/native'
 
 import {useCleanError} from '#/lib/hooks/useCleanError'
 import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender'
···
 import {useBookmarksQuery} from '#/state/queries/bookmarks/useBookmarksQuery'
 import {useSetMinimalShellMode} from '#/state/shell'
 import {Post} from '#/view/com/post/Post'
+import {EmptyState} from '#/view/com/util/EmptyState'
 import {List} from '#/view/com/util/List'
 import {PostFeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
-import {EmptyState} from '#/screens/Bookmarks/components/EmptyState'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
-import {BookmarkFilled} from '#/components/icons/Bookmark'
+import {BookmarkDeleteLarge, BookmarkFilled} from '#/components/icons/Bookmark'
 import {CircleQuestion_Stroke2_Corner2_Rounded as QuestionIcon} from '#/components/icons/CircleQuestion'
 import * as Layout from '#/components/Layout'
 import {ListFooter} from '#/components/Lists'
···
   )
 }
 
+function BookmarksEmpty() {
+  const t = useTheme()
+  const {_} = useLingui()
+  const navigation = useNavigation<NavigationProp<CommonNavigatorParams>>()
+
+  return (
+    <EmptyState
+      icon={BookmarkDeleteLarge}
+      message={_(msg`Nothing saved yet`)}
+      textStyle={[t.atoms.text_contrast_medium, a.font_medium]}
+      button={{
+        label: _(msg`Button to go back to the home timeline`),
+        text: _(msg`Go home`),
+        onPress: () => navigation.navigate('Home' as never),
+        size: 'small',
+        color: 'secondary',
+      }}
+      style={[a.pt_3xl]}
+    />
+  )
+}
+
 function renderItem({item, index}: {item: ListItem; index: number}) {
   switch (item.type) {
     case 'loading': {
       return <PostFeedLoadingPlaceholder />
     }
     case 'empty': {
-      return <EmptyState />
+      return <BookmarksEmpty />
     }
     case 'bookmark': {
       return (

src/screens/Notifications/ActivityList.tsx

···
 import {type AllNavigatorParams} from '#/lib/routes/types'
 import {PostFeed} from '#/view/com/posts/PostFeed'
 import {EmptyState} from '#/view/com/util/EmptyState'
+import {EditBig_Stroke1_Corner0_Rounded as EditIcon} from '#/components/icons/EditBig'
 import * as Layout from '#/components/Layout'
 import {ListFooter} from '#/components/Lists'
 
···
         feed={`posts|${uris}`}
         disablePoll
         renderEmptyState={() => (
-          <EmptyState icon="growth" message={_(msg`No posts here`)} />
+          <EmptyState
+            icon={EditIcon}
+            iconSize="2xl"
+            message={_(msg`No posts here`)}
+          />
         )}
         renderEndOfFeed={() => <ListFooter />}
       />

src/screens/Profile/ProfileFeed/index.tsx

···
   ProfileFeedHeader,
   ProfileFeedHeaderSkeleton,
 } from '#/screens/Profile/components/ProfileFeedHeader'
+import {HashtagWide_Stroke1_Corner0_Rounded as HashtagWideIcon} from '#/components/icons/Hashtag'
 import * as Layout from '#/components/Layout'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileFeed'>
···
   }, [onScrollToTop, isScreenFocused])
 
   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.`)}
+      />
+    )
   }, [_])
 
   const isVideoFeed = React.useMemo(() => {

src/screens/Profile/Sections/Feed.tsx

···
 
 import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender'
 import {isIOS, isNative} from '#/platform/detection'
-import {type FeedDescriptor} from '#/state/queries/post-feed'
-import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed'
+import {
+  type FeedDescriptor,
+  RQKEY as FEED_RQKEY,
+} from '#/state/queries/post-feed'
 import {truncateAndInvalidate} from '#/state/queries/util'
 import {PostFeed} from '#/view/com/posts/PostFeed'
-import {EmptyState} from '#/view/com/util/EmptyState'
+import {
+  EmptyState,
+  type EmptyStateButtonProps,
+} 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 {EditBig_Stroke1_Corner0_Rounded as EditIcon} from '#/components/icons/EditBig'
 import {Text} from '#/components/Typography'
 import {type SectionRef} from './types'
 
···
   scrollElRef: ListRef
   ignoreFilterFor?: string
   setScrollViewTag: (tag: number | null) => void
+  emptyStateMessage?: string
+  emptyStateButton?: EmptyStateButtonProps
+  emptyStateIcon?: React.ComponentType<any> | React.ReactElement
 }
+
 export function ProfileFeedSection({
   ref,
   feed,
···
   scrollElRef,
   ignoreFilterFor,
   setScrollViewTag,
+  emptyStateMessage,
+  emptyStateButton,
+  emptyStateIcon,
 }: FeedSectionProps) {
   const {_} = useLingui()
   const queryClient = useQueryClient()
···
   const adjustedInitialNumToRender = useInitialNumToRender({
     screenHeightOffset: headerHeight,
   })
-
   const onScrollToTop = useCallback(() => {
     scrollElRef.current?.scrollToOffset({
       animated: isNative,
···
   }))
 
   const renderPostsEmpty = useCallback(() => {
-    return <EmptyState icon="growth" message={_(msg`No posts yet.`)} />
-  }, [_])
+    return (
+      <View style={[a.flex_1, a.justify_center, a.align_center]}>
+        <EmptyState
+          style={{width: '100%'}}
+          icon={emptyStateIcon || EditIcon}
+          iconSize="3xl"
+          message={emptyStateMessage || _(msg`No posts yet`)}
+          button={emptyStateButton}
+        />
+      </View>
+    )
+  }, [_, emptyStateButton, emptyStateIcon, emptyStateMessage])
 
   useEffect(() => {
     if (isIOS && isFocused && scrollElRef.current) {

src/screens/ProfileList/AboutSection.tsx

···
 import {LoadLatestBtn} from '#/view/com/util/load-latest/LoadLatestBtn'
 import {atoms as a, useBreakpoints} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {BulletList_Stroke1_Corner0_Rounded as ListIcon} from '#/components/icons/BulletList'
 import {PersonPlus_Stroke2_Corner0_Rounded as PersonPlusIcon} from '#/components/icons/Person'
 
 interface SectionRef {
···
   const renderEmptyState = useCallback(() => {
     return (
       <View style={[a.gap_xl, a.align_center]}>
-        <EmptyState icon="users-slash" message={_(msg`This list is empty.`)} />
+        <EmptyState icon={ListIcon} message={_(msg`This list is empty.`)} />
         {isOwner && (
           <Button
             testID="emptyStateAddUserBtn"
···
         )}
       </View>
     )
-  }, [_, onPressAddUser, isOwner])
+  }, [_, isOwner, onPressAddUser])
 
   return (
     <View>

src/screens/ProfileList/FeedSection.tsx

···
 
 import {isNative} from '#/platform/detection'
 import {listenSoftReset} from '#/state/events'
-import {type FeedDescriptor} from '#/state/queries/post-feed'
-import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed'
+import {
+  type FeedDescriptor,
+  RQKEY as FEED_RQKEY,
+} from '#/state/queries/post-feed'
 import {PostFeed} from '#/view/com/posts/PostFeed'
 import {EmptyState} 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} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {HashtagWide_Stroke1_Corner0_Rounded as HashtagWideIcon} from '#/components/icons/Hashtag'
 import {PersonPlus_Stroke2_Corner0_Rounded as PersonPlusIcon} from '#/components/icons/Person'
 
 interface SectionRef {
···
   const renderPostsEmpty = useCallback(() => {
     return (
       <View style={[a.gap_xl, a.align_center]}>
-        <EmptyState icon="hashtag" message={_(msg`This feed is empty.`)} />
+        <EmptyState
+          icon={HashtagWideIcon}
+          iconSize="2xl"
+          message={_(msg`This feed is empty.`)}
+        />
         {isOwner && (
           <Button
             label={_(msg`Start adding people`)}

src/screens/Settings/AppPasswords.tsx

···
 import {Admonition, colors} from '#/components/Admonition'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {useDialogControl} from '#/components/Dialog'
+import {Growth_Stroke2_Corner0_Rounded as Growth} from '#/components/icons/Growth'
 import {PlusLarge_Stroke2_Corner0_Rounded as PlusIcon} from '#/components/icons/Plus'
 import {Trash_Stroke2_Corner0_Rounded as TrashIcon} from '#/components/icons/Trash'
 import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
···
                   </View>
                 ) : (
                   <EmptyState
-                    icon="growth"
+                    icon={Growth}
                     message={_(msg`No app passwords yet`)}
                   />
                 )

src/screens/Settings/components/SettingsList.tsx

···
     lg: 24,
     xl: 28,
     '2xl': 32,
+    '3xl': 40,
   }[size]
 
   const color =

src/view/com/feeds/ProfileFeedgens.tsx

···
 } from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {useNavigation} from '@react-navigation/native'
 import {useQueryClient} from '@tanstack/react-query'
 
 import {cleanError} from '#/lib/strings/errors'
···
 import {LoadMoreRetryBtn} from '#/view/com/util/LoadMoreRetryBtn'
 import {atoms as a, ios, useTheme} from '#/alf'
 import * as FeedCard from '#/components/FeedCard'
+import {HashtagWide_Stroke1_Corner0_Rounded as HashtagWideIcon} from '#/components/icons/Hashtag'
 import {ListFooter} from '#/components/Lists'
 
 const LOADING = {_reactKey: '__loading__'}
···
   } = useProfileFeedgensQuery(did, opts)
   const isEmpty = !isPending && !data?.pages[0]?.feeds.length
   const {data: preferences} = usePreferencesQuery()
+  const navigation = useNavigation()
 
   const items = useMemo(() => {
     let items: any[] = []
···
       if (item === EMPTY) {
         return (
           <EmptyState
-            icon="hashtag"
-            message={_(msg`You have no feeds.`)}
-            testID="listsEmpty"
+            style={{width: '100%'}}
+            icon={HashtagWideIcon}
+            message={_(msg`You haven't made any custom feeds yet.`)}
+            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),
+              size: 'small',
+              color: 'secondary',
+            }}
           />
         )
       } else if (item === ERROR_ITEM) {
···
       }
       return null
     },
-    [_, t, error, refetch, onPressRetryLoadMore, preferences],
+    [_, t, error, refetch, onPressRetryLoadMore, preferences, navigation],
   )
 
   useEffect(() => {

src/view/com/lists/MyLists.tsx

···
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {type MyListsFilter, useMyListsQuery} from '#/state/queries/my-lists'
 import {atoms as a, useTheme} from '#/alf'
-import {BulletList_Stroke2_Corner0_Rounded as ListIcon} from '#/components/icons/BulletList'
+import {BulletList_Stroke1_Corner0_Rounded as ListIcon} from '#/components/icons/BulletList'
 import * as ListCard from '#/components/ListCard'
 import {Text} from '#/components/Typography'
 import {ErrorMessage} from '../util/error/ErrorMessage'
···
   switch (filter) {
     case 'curate':
       emptyText = _(
-        msg`Public, sharable lists which can be used to drive feeds.`,
+        msg`Lists allow you to see content from your favorite people.`,
       )
       break
     case 'mod':
···
     ({item, index}: {item: any; index: number}) => {
       if (item === EMPTY) {
         return (
-          <View style={[a.flex_1, a.align_center, a.gap_sm, a.px_xl, a.pt_xl]}>
+          <View style={[a.flex_1, a.align_center, a.gap_sm, a.px_xl, a.pt_3xl]}>
             <View
               style={[
                 a.align_center,
                 a.justify_center,
                 a.rounded_full,
-                t.atoms.bg_contrast_25,
                 {
-                  width: 32,
-                  height: 32,
+                  width: 64,
+                  height: 64,
                 },
               ]}>
-              <ListIcon size="md" fill={t.atoms.text_contrast_low.color} />
+              <ListIcon size="2xl" fill={t.atoms.text_contrast_medium.color} />
             </View>
             <Text
               style={[

src/view/com/lists/ProfileLists.tsx

···
 } from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {useNavigation} from '@react-navigation/native'
 import {useQueryClient} from '@tanstack/react-query'
 
 import {cleanError} from '#/lib/strings/errors'
 import {logger} from '#/logger'
 import {isIOS, isNative, isWeb} from '#/platform/detection'
-import {RQKEY, useProfileListsQuery} from '#/state/queries/profile-lists'
+import {usePreferencesQuery} from '#/state/queries/preferences'
+import {RQKEY, useProfileFeedgensQuery} from '#/state/queries/profile-feedgens'
 import {EmptyState} from '#/view/com/util/EmptyState'
 import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
 import {List, type ListRef} from '#/view/com/util/List'
 import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 import {LoadMoreRetryBtn} from '#/view/com/util/LoadMoreRetryBtn'
 import {atoms as a, ios, useTheme} from '#/alf'
-import * as ListCard from '#/components/ListCard'
+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__'}
···
   scrollToTop: () => void
 }
 
-interface ProfileListsProps {
+interface ProfileFeedgensProps {
   ref?: React.Ref<SectionRef>
   did: string
   scrollElRef: ListRef
···
   style,
   testID,
   setScrollViewTag,
-}: ProfileListsProps) {
+}: ProfileFeedgensProps) {
+  const {_} = useLingui()
   const t = useTheme()
-  const {_} = useLingui()
+  const [isPTRing, setIsPTRing] = useState(false)
   const {height} = useWindowDimensions()
-  const [isPTRing, setIsPTRing] = useState(false)
   const opts = useMemo(() => ({enabled}), [enabled])
   const {
     data,
     isPending,
+    isFetchingNextPage,
     hasNextPage,
     fetchNextPage,
-    isFetchingNextPage,
     isError,
     error,
     refetch,
-  } = useProfileListsQuery(did, opts)
-  const isEmpty = !isPending && !data?.pages[0]?.lists.length
+  } = useProfileFeedgensQuery(did, opts)
+  const isEmpty = !isPending && !data?.pages[0]?.feeds.length
+  const {data: preferences} = usePreferencesQuery()
+  const navigation = useNavigation()
 
   const items = useMemo(() => {
     let items: any[] = []
···
       items = items.concat([EMPTY])
     } else if (data?.pages) {
       for (const page of data?.pages) {
-        items = items.concat(page.lists)
+        items = items.concat(page.feeds)
       }
-    }
-    if (isError && !isEmpty) {
+    } else if (isError && !isEmpty) {
       items = items.concat([LOAD_MORE_ERROR_ITEM])
     }
     return items
···
     try {
       await refetch()
     } catch (err) {
-      logger.error('Failed to refresh lists', {message: err})
+      logger.error('Failed to refresh feeds', {message: err})
     }
     setIsPTRing(false)
   }, [refetch, setIsPTRing])
 
   const onEndReached = useCallback(async () => {
     if (isFetchingNextPage || !hasNextPage || isError) return
+
     try {
       await fetchNextPage()
     } catch (err) {
-      logger.error('Failed to load more lists', {message: err})
+      logger.error('Failed to load more feeds', {message: err})
     }
   }, [isFetchingNextPage, hasNextPage, isError, fetchNextPage])
 
···
   // rendering
   // =
 
-  const renderItemInner = useCallback(
+  const renderItem = useCallback(
     ({item, index}: ListRenderItemInfo<any>) => {
       if (item === EMPTY) {
         return (
           <EmptyState
-            icon="list-ul"
-            message={_(msg`You have no lists.`)}
-            testID="listsEmpty"
+            icon={ListIcon}
+            message={_(
+              msg`Lists allow you to see content from your favorite people.`,
+            )}
+            textStyle={[t.atoms.text_contrast_medium, a.font_medium]}
+            button={{
+              label: _(msg`Create a list`),
+              text: _(msg`Create a list`),
+              onPress: () => navigation.navigate('Lists' as never),
+              size: 'small',
+              color: 'primary',
+            }}
           />
         )
       } else if (item === ERROR_ITEM) {
···
       } else if (item === LOADING) {
         return <FeedLoadingPlaceholder />
       }
-      return (
-        <View
-          style={[
-            (index !== 0 || isWeb) && a.border_t,
-            t.atoms.border_contrast_low,
-            a.px_lg,
-            a.py_lg,
-          ]}>
-          <ListCard.Default view={item} />
-        </View>
-      )
+      if (preferences) {
+        return (
+          <View
+            style={[
+              (index !== 0 || isWeb) && a.border_t,
+              t.atoms.border_contrast_low,
+              a.px_lg,
+              a.py_lg,
+            ]}>
+            <FeedCard.Default view={item} />
+          </View>
+        )
+      }
+      return null
     },
-    [error, refetch, onPressRetryLoadMore, _, t.atoms.border_contrast_low],
+    [_, t, error, refetch, onPressRetryLoadMore, preferences, navigation],
   )
 
   useEffect(() => {
···
     }
   }, [enabled, scrollElRef, setScrollViewTag])
 
-  const ProfileListsFooter = useCallback(() => {
+  const ProfileFeedgensFooter = useCallback(() => {
     if (isEmpty) return null
     return (
       <ListFooter
···
         ref={scrollElRef}
         data={items}
         keyExtractor={keyExtractor}
-        renderItem={renderItemInner}
-        ListFooterComponent={ProfileListsFooter}
+        renderItem={renderItem}
+        ListFooterComponent={ProfileFeedgensFooter}
         refreshing={isPTRing}
         onRefresh={onRefresh}
         headerOffset={headerOffset}

src/view/com/notifications/NotificationFeed.tsx

···
 import {List, type ListProps, type ListRef} from '#/view/com/util/List'
 import {NotificationFeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 import {LoadMoreRetryBtn} from '#/view/com/util/LoadMoreRetryBtn'
+import {Bell_Stroke2_Corner0_Rounded as BellIcon} from '#/components/icons/Bell'
 import {NotificationFeedItem} from './NotificationFeedItem'
 
 const EMPTY_FEED_ITEM = {_reactKey: '__empty__'}
···
       if (item === EMPTY_FEED_ITEM) {
         return (
           <EmptyState
-            icon="bell"
+            icon={BellIcon}
             message={_(msg`No notifications yet!`)}
             style={styles.emptyState}
           />

src/view/com/posts/PostFeedErrorMessage.tsx

···
 import {logger} from '#/logger'
 import {type FeedDescriptor} from '#/state/queries/post-feed'
 import {useRemoveFeedMutation} from '#/state/queries/preferences'
+import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
 import * as Prompt from '#/components/Prompt'
 import {EmptyState} from '../util/EmptyState'
 import {ErrorMessage} from '../util/error/ErrorMessage'
···
     () => detectKnownError(feedDesc, error),
     [feedDesc, error],
   )
+
   if (
     typeof knownError !== 'undefined' &&
     knownError !== KnownError.Unknown &&
···
   if (knownError === KnownError.Block) {
     return (
       <EmptyState
-        icon="ban"
+        icon={WarningIcon}
+        iconSize="2xl"
         message={_l(msgLingui`Posts hidden`)}
         style={{paddingVertical: 40}}
       />

src/view/com/profile/ProfileFollowers.tsx

···
 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 {useProfileFollowersQuery} from '#/state/queries/profile-followers'
 import {useResolveDidQuery} from '#/state/queries/resolve-uri'
 import {useSession} from '#/state/session'
+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'
···
 
 export function ProfileFollowers({name}: {name: string}) {
   const {_} = useLingui()
+  const navigation = useNavigation()
   const initialNumToRender = useInitialNumToRender()
   const {currentAccount} = useSession()
 
···
         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}
+        emptyStateButton={{
+          label: _(msg`Go back`),
+          text: _(msg`Go back`),
+          color: 'secondary',
+          size: 'small',
+          onPress: () => navigation.goBack(),
+        }}
       />
     )
   }

src/view/com/profile/ProfileFollows.tsx

···
 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 {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'
···
   const {_} = useLingui()
   const initialNumToRender = useInitialNumToRender()
   const {currentAccount} = useSession()
+  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 {
···
         emptyType="results"
         emptyMessage={
           isMe
-            ? _(msg`You are not following anyone.`)
+            ? _(msg`You are not following anyone yet`)
             : _(msg`This user isn't following anyone.`)
         }
         errorMessage={cleanError(resolveError || error)}
         onRetry={isError ? refetch : undefined}
         sideBorders={false}
+        useEmptyState={true}
+        emptyStateIcon={PeopleRemoveIcon}
+        emptyStateButton={{
+          label: _(msg`See suggested accounts`),
+          text: _(msg`See suggested accounts`),
+          onPress: onPressFindAccounts,
+          size: 'tiny',
+          color: 'primary',
+        }}
       />
     )
   }

src/view/com/util/EmptyState.tsx

···
-import {type StyleProp, StyleSheet, View, type ViewStyle} from 'react-native'
-import {type IconProp} from '@fortawesome/fontawesome-svg-core'
-import {
-  FontAwesomeIcon,
-  type FontAwesomeIconStyle,
-} from '@fortawesome/react-native-fontawesome'
+import React from 'react'
+import {type StyleProp, type TextStyle, type ViewStyle} from 'react-native'
+import {View} from 'react-native'
 
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {UserGroupIcon} from '#/lib/icons'
-import {Growth_Stroke2_Corner0_Rounded as Growth} from '#/components/icons/Growth'
-import {Text} from './text/Text'
+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 {Text} from '#/components/Typography'
+
+export type EmptyStateButtonProps = Omit<ButtonProps, 'children' | 'label'> & {
+  label: string
+  text: string
+}
 
 export function EmptyState({
   testID,
   icon,
+  iconSize = '3xl',
   message,
   style,
+  textStyle,
+  button,
 }: {
   testID?: string
-  icon: IconProp | 'user-group' | 'growth'
+  icon?: React.ComponentType<any> | React.ReactElement
+  iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
   message: string
   style?: StyleProp<ViewStyle>
+  textStyle?: StyleProp<TextStyle>
+  button?: EmptyStateButtonProps
 }) {
   const pal = usePalette('default')
   const {isTabletOrDesktop} = useWebMediaQueries()
-  const iconSize = isTabletOrDesktop ? 64 : 48
+  const t = useTheme()
+  const {gtMobile} = useBreakpoints()
+
+  const placeholderIcon = (
+    <EditIcon size="2xl" fill={t.atoms.text_contrast_medium.color} />
+  )
+
+  const renderIcon = () => {
+    if (!icon) {
+      return placeholderIcon
+    }
+
+    if (React.isValidElement(icon)) {
+      return icon
+    }
+
+    if (
+      typeof icon === 'function' ||
+      (typeof icon === 'object' && icon && 'render' in icon)
+    ) {
+      const IconComponent = icon
+      return (
+        <IconComponent
+          size={iconSize}
+          fill={t.atoms.text_contrast_medium.color}
+          style={{color: t.atoms.text_contrast_low.color}}
+        />
+      )
+    }
+
+    return placeholderIcon
+  }
+
   return (
     <View testID={testID} style={style}>
       <View
         style={[
-          styles.iconContainer,
-          isTabletOrDesktop && styles.iconContainerBig,
-          pal.viewLight,
+          a.flex_row,
+          a.align_center,
+          a.justify_center,
+          a.self_center,
+          a.rounded_full,
+          a.mt_5xl,
+          {height: 64, width: 64},
+          React.isValidElement(icon)
+            ? a.bg_transparent
+            : [isTabletOrDesktop && {marginTop: 50}],
         ]}>
-        {icon === 'user-group' ? (
-          <UserGroupIcon size={iconSize} />
-        ) : icon === 'growth' ? (
-          <Growth width={iconSize} fill={pal.colors.emptyStateIcon} />
-        ) : (
-          <FontAwesomeIcon
-            icon={icon}
-            size={iconSize}
-            style={[{color: pal.colors.emptyStateIcon} as FontAwesomeIconStyle]}
-          />
-        )}
+        {renderIcon()}
       </View>
-      <Text type="xl" style={[{color: pal.colors.textLight}, styles.text]}>
+      <Text
+        style={[
+          {
+            color: pal.colors.textLight,
+            maxWidth: gtMobile ? '40%' : '60%',
+          },
+          a.pt_xs,
+          a.font_medium,
+          a.text_md,
+          a.leading_snug,
+          a.text_center,
+          a.self_center,
+          textStyle,
+        ]}>
         {message}
       </Text>
+      {button && (
+        <View style={[a.flex_shrink, a.mt_xl, a.self_center]}>
+          <Button {...button}>
+            <ButtonText>{button.text}</ButtonText>
+          </Button>
+        </View>
+      )}
     </View>
   )
 }
-
-const styles = StyleSheet.create({
-  iconContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: 80,
-    width: 80,
-    marginLeft: 'auto',
-    marginRight: 'auto',
-    borderRadius: 80,
-    marginTop: 30,
-  },
-  iconContainerBig: {
-    width: 100,
-    height: 100,
-    marginTop: 50,
-  },
-  text: {
-    textAlign: 'center',
-    paddingTop: 20,
-  },
-})

src/view/screens/Debug.tsx

···
 import * as Toast from '#/view/com/util/Toast'
 import {ViewHeader} from '#/view/com/util/ViewHeader'
 import {ViewSelector} from '#/view/com/util/ViewSelector'
+import {HashtagWide_Stroke1_Corner0_Rounded as HashtagWideIcon} from '#/components/icons/Hashtag'
 import * as Layout from '#/components/Layout'
 
 const MAIN_VIEWS = ['Base', 'Controls', 'Error', 'Notifs']
···
 }
 
 function EmptyStateView() {
-  return <EmptyState icon="bars" message="This is an empty state" />
+  const {_} = useLingui()
+
+  return (
+    <EmptyState
+      icon={HashtagWideIcon}
+      iconSize="2xl"
+      message={_(msg`This is an empty state`)}
+    />
+  )
 }
 
 function LoadingPlaceholderView() {

src/view/screens/Profile.tsx

···
   type ModerationOpts,
   RichText as RichTextAPI,
 } from '@atproto/api'
-import {msg} from '@lingui/macro'
+import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {useFocusEffect} from '@react-navigation/native'
+import {useFocusEffect, useNavigation} from '@react-navigation/native'
 import {useQueryClient} from '@tanstack/react-query'
 
 import {useOpenComposer} from '#/lib/hooks/useOpenComposer'
+import {useRequireEmailVerification} from '#/lib/hooks/useRequireEmailVerification'
 import {useSetTitle} from '#/lib/hooks/useSetTitle'
 import {ComposeIcon2} from '#/lib/icons'
 import {
   type CommonNavigatorParams,
   type NativeStackScreenProps,
+  type NavigationProp,
 } from '#/lib/routes/types'
 import {combinedDisplayName} from '#/lib/strings/display-names'
 import {cleanError} from '#/lib/strings/errors'
···
 import {ProfileFeedSection} from '#/screens/Profile/Sections/Feed'
 import {ProfileLabelsSection} from '#/screens/Profile/Sections/Labels'
 import {atoms as a} from '#/alf'
+import {Circle_And_Square_Stroke1_Corner0_Rounded_Filled as CircleAndSquareIcon} from '#/components/icons/CircleAndSquare'
+import {Heart2_Stroke1_Corner0_Rounded as HeartIcon} from '#/components/icons/Heart2'
+import {Image_Stroke1_Corner0_Rounded as ImageIcon} from '#/components/icons/Image'
+import {Message_Stroke1_Corner0_Rounded_Filled as MessageIcon} from '#/components/icons/Message'
+import {VideoClip_Stroke1_Corner0_Rounded as VideoIcon} from '#/components/icons/VideoClip'
 import * as Layout from '#/components/Layout'
 import {ScreenHider} from '#/components/moderation/ScreenHider'
 import {ProfileStarterPacks} from '#/components/StarterPack/ProfileStarterPacks'
···
   const {hasSession, currentAccount} = useSession()
   const setMinimalShellMode = useSetMinimalShellMode()
   const {openComposer} = useOpenComposer()
+  const navigation = useNavigation<NavigationProp>()
+  const requireEmailVerification = useRequireEmailVerification()
   const {
     data: labelerInfo,
     error: labelerError,
···
     scrollSectionToTop(index)
   }
 
+  const navToWizard = useCallback(() => {
+    navigation.navigate('StarterPackWizard', {})
+  }, [navigation])
+  const wrappedNavToWizard = requireEmailVerification(navToWizard, {
+    instructions: [
+      <Trans key="nav">
+        Before creating a starter pack, you must first verify your email.
+      </Trans>,
+    ],
+  })
+
   // rendering
   // =
 
···
                 scrollElRef={scrollElRef as ListRef}
                 ignoreFilterFor={profile.did}
                 setScrollViewTag={setScrollViewTag}
+                emptyStateMessage={_(msg`No posts yet`)}
+                emptyStateButton={{
+                  label: _(msg`Write a post`),
+                  text: _(msg`Write a post`),
+                  onPress: () => openComposer({}),
+                  size: 'small',
+                  color: 'primary',
+                }}
               />
             )
           : null}
···
                 scrollElRef={scrollElRef as ListRef}
                 ignoreFilterFor={profile.did}
                 setScrollViewTag={setScrollViewTag}
+                emptyStateMessage={_(msg`No replies yet`)}
+                emptyStateIcon={MessageIcon}
               />
             )
           : null}
···
                 scrollElRef={scrollElRef as ListRef}
                 ignoreFilterFor={profile.did}
                 setScrollViewTag={setScrollViewTag}
+                emptyStateMessage={_(msg`No media yet`)}
+                emptyStateButton={{
+                  label: _(msg`Post a photo`),
+                  text: _(msg`Post a photo`),
+                  onPress: () => openComposer({}),
+                  size: 'small',
+                  color: 'primary',
+                }}
+                emptyStateIcon={ImageIcon}
               />
             )
           : null}
···
                 scrollElRef={scrollElRef as ListRef}
                 ignoreFilterFor={profile.did}
                 setScrollViewTag={setScrollViewTag}
+                emptyStateMessage={_(msg`No video posts yet`)}
+                emptyStateButton={{
+                  label: _(msg`Post a video`),
+                  text: _(msg`Post a video`),
+                  onPress: () => openComposer({}),
+                  size: 'small',
+                  color: 'primary',
+                }}
+                emptyStateIcon={VideoIcon}
               />
             )
           : null}
···
                 scrollElRef={scrollElRef as ListRef}
                 ignoreFilterFor={profile.did}
                 setScrollViewTag={setScrollViewTag}
+                emptyStateMessage={_(msg`No likes yet`)}
+                emptyStateIcon={HeartIcon}
               />
             )
           : null}
···
                 headerOffset={headerHeight}
                 enabled={isFocused}
                 setScrollViewTag={setScrollViewTag}
+                emptyStateMessage={_(
+                  msg`Starter packs let you share your favorite feeds and people with your friends.`,
+                )}
+                emptyStateButton={{
+                  label: _(msg`Create a Starter Pack`),
+                  text: _(msg`Create a Starter Pack`),
+                  onPress: wrappedNavToWizard,
+                  color: 'primary',
+                  size: 'small',
+                }}
+                emptyStateIcon={CircleAndSquareIcon}
               />
             )
           : null}