acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Anastasiya Uraleva
2025-11-27 03:22:03 -08:00
committed by GitHub
parent 2d056e5be6
commit d0649e9a9e
44 changed files with 551 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
__tests__/lib/link-meta.test.ts
+1 -1
View File
@@ -1,4 +1,4 @@
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
+1
View File
@@ -0,0 +1 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 333 B

assets/icons/circle_and_square_stroke1_corner0_rounded_filled.svg
+1
View File
@@ -0,0 +1 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 944 B

assets/icons/editbig_stroke1_corner0_rounded.svg
+1
View File
@@ -0,0 +1 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

assets/icons/hashtagwide_stroke1_corner0_rounded.svg
+1
View File
@@ -0,0 +1 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 224 B

assets/icons/heart2_stroke1_corner0_rounded.svg
+1
View File
@@ -0,0 +1 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 262 B

assets/icons/image_stroke1_corner0_rounded.svg
+1
View File
@@ -0,0 +1 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 491 B

assets/icons/message_stroke1_corner0_rounded_filled.svg
+1
View File
@@ -0,0 +1 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 272 B

assets/icons/peopleremove2_stroke1_corner0_rounded.svg
+1
View File
@@ -0,0 +1 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 429 B

assets/icons/videoclip_stroke1_corner0_rounded.svg
+1
View File
@@ -0,0 +1 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 619 B

src/components/Button.tsx
+2 -1
View File
@@ -798,13 +798,14 @@ export function ButtonIcon({
* 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
+27
View File
@@ -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, 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.ComponentType<any> | React.ReactElement
emptyStateButton?: EmptyStateButtonProps
useEmptyState?: boolean
}): React.ReactNode => {
const t = useTheme()
const {_} = useLingui()
@@ -180,6 +190,23 @@ let ListMaybePlaceholder = ({
)
}
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>
)
}
if (!noEmpty) {
return (
<Error
src/components/StarterPack/Main/PostsList.tsx
+8 -1
View File
@@ -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
+33 -1
View File
@@ -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
src/components/icons/BulletList.tsx
+8
View File
@@ -1,5 +1,13 @@
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
+7
View File
@@ -0,0 +1,7 @@
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
+5
View File
@@ -1,5 +1,10 @@
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
+8
View File
@@ -1,5 +1,13 @@
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
+7
View File
@@ -1,5 +1,12 @@
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
+7
View File
@@ -1,5 +1,12 @@
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
+8
View File
@@ -1,5 +1,13 @@
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
+8
View File
@@ -1,5 +1,13 @@
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
+44 -1
View File
@@ -28,7 +28,50 @@ export const IconTemplate_Stroke2_Corner0_Rounded = React.forwardRef(
},
)
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
+8
View File
@@ -1,5 +1,13 @@
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
+1
View File
@@ -20,6 +20,7 @@ export const sizes = {
lg: 24,
xl: 28,
'2xl': 32,
'3xl': 48,
} as const
export function useCommonSVGProps(props: Props) {
src/locale/locales/en/messages.po
+1 -1
View File
@@ -11013,4 +11013,4 @@ msgstr ""
#: src/components/verification/VerificationsDialog.tsx:65
msgid "Your verifications"
msgstr ""
msgstr ""
src/screens/Bookmarks/index.tsx
+30 -4
View File
@@ -7,7 +7,11 @@ import {
} 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'
@@ -21,12 +25,12 @@ import {useBookmarkMutation} from '#/state/queries/bookmarks/useBookmarkMutation
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'
@@ -259,13 +263,35 @@ function BookmarkNotFound({
)
}
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
+6 -1
View File
@@ -5,6 +5,7 @@ import {type NativeStackScreenProps} from '@react-navigation/native-stack'
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'
@@ -35,7 +36,11 @@ export function NotificationsActivityListScreen({
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
+8 -1
View File
@@ -45,6 +45,7 @@ import {
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'>
@@ -189,7 +190,13 @@ export function ProfileFeedScreenInner({
}, [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
+28 -6
View File
@@ -6,14 +6,20 @@ import {useQueryClient} from '@tanstack/react-query'
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'
@@ -25,7 +31,11 @@ interface FeedSectionProps {
scrollElRef: ListRef
ignoreFilterFor?: string
setScrollViewTag: (tag: number | null) => void
emptyStateMessage?: string
emptyStateButton?: EmptyStateButtonProps
emptyStateIcon?: React.ComponentType<any> | React.ReactElement
}
export function ProfileFeedSection({
ref,
feed,
@@ -34,6 +44,9 @@ export function ProfileFeedSection({
scrollElRef,
ignoreFilterFor,
setScrollViewTag,
emptyStateMessage,
emptyStateButton,
emptyStateIcon,
}: FeedSectionProps) {
const {_} = useLingui()
const queryClient = useQueryClient()
@@ -44,7 +57,6 @@ export function ProfileFeedSection({
const adjustedInitialNumToRender = useInitialNumToRender({
screenHeightOffset: headerHeight,
})
const onScrollToTop = useCallback(() => {
scrollElRef.current?.scrollToOffset({
animated: isNative,
@@ -59,8 +71,18 @@ export function ProfileFeedSection({
}))
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
+3 -2
View File
@@ -12,6 +12,7 @@ import {type ListRef} from '#/view/com/util/List'
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 {
@@ -95,7 +96,7 @@ export function AboutSection({
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"
@@ -111,7 +112,7 @@ export function AboutSection({
)}
</View>
)
}, [_, onPressAddUser, isOwner])
}, [_, isOwner, onPressAddUser])
return (
<View>
src/screens/ProfileList/FeedSection.tsx
+10 -3
View File
@@ -7,14 +7,17 @@ import {useQueryClient} from '@tanstack/react-query'
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 {
@@ -68,7 +71,11 @@ export function FeedSection({
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
+2 -1
View File
@@ -24,6 +24,7 @@ import {atoms as a, useTheme} from '#/alf'
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'
@@ -102,7 +103,7 @@ export function AppPasswordsScreen({}: Props) {
</View>
) : (
<EmptyState
icon="growth"
icon={Growth}
message={_(msg`No app passwords yet`)}
/>
)
src/screens/Settings/components/SettingsList.tsx
+1
View File
@@ -201,6 +201,7 @@ export function ItemIcon({
lg: 24,
xl: 28,
'2xl': 32,
'3xl': 40,
}[size]
const color =
src/view/com/feeds/ProfileFeedgens.tsx
+15 -4
View File
@@ -15,6 +15,7 @@ import {
} 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'
@@ -29,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 {HashtagWide_Stroke1_Corner0_Rounded as HashtagWideIcon} from '#/components/icons/Hashtag'
import {ListFooter} from '#/components/Lists'
const LOADING = {_reactKey: '__loading__'}
@@ -78,6 +80,7 @@ export function ProfileFeedgens({
} = useProfileFeedgensQuery(did, opts)
const isEmpty = !isPending && !data?.pages[0]?.feeds.length
const {data: preferences} = usePreferencesQuery()
const navigation = useNavigation()
const items = useMemo(() => {
let items: any[] = []
@@ -147,9 +150,17 @@ export function ProfileFeedgens({
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) {
@@ -183,7 +194,7 @@ export function ProfileFeedgens({
}
return null
},
[_, t, error, refetch, onPressRetryLoadMore, preferences],
[_, t, error, refetch, onPressRetryLoadMore, preferences, navigation],
)
useEffect(() => {
src/view/com/lists/MyLists.tsx
+6 -7
View File
@@ -18,7 +18,7 @@ import {logger} from '#/logger'
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'
@@ -69,7 +69,7 @@ export function MyLists({
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':
@@ -102,19 +102,18 @@ export function MyLists({
({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
+50 -33
View File
@@ -15,19 +15,22 @@ import {
} 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__'}
@@ -39,7 +42,7 @@ interface SectionRef {
scrollToTop: () => void
}
interface ProfileListsProps {
interface ProfileFeedgensProps {
ref?: React.Ref<SectionRef>
did: string
scrollElRef: ListRef
@@ -59,23 +62,25 @@ export function ProfileLists({
style,
testID,
setScrollViewTag,
}: ProfileListsProps) {
const t = useTheme()
}: ProfileFeedgensProps) {
const {_} = useLingui()
const {height} = useWindowDimensions()
const t = useTheme()
const [isPTRing, setIsPTRing] = useState(false)
const {height} = useWindowDimensions()
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[] = []
@@ -88,10 +93,9 @@ export function ProfileLists({
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
@@ -119,17 +123,18 @@ export function ProfileLists({
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])
@@ -140,14 +145,23 @@ export function ProfileLists({
// 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) {
@@ -166,19 +180,22 @@ export function ProfileLists({
} 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(() => {
@@ -188,7 +205,7 @@ export function ProfileLists({
}
}, [enabled, scrollElRef, setScrollViewTag])
const ProfileListsFooter = useCallback(() => {
const ProfileFeedgensFooter = useCallback(() => {
if (isEmpty) return null
return (
<ListFooter
@@ -215,8 +232,8 @@ export function ProfileLists({
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
+2 -1
View File
@@ -19,6 +19,7 @@ import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
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__'}
@@ -118,7 +119,7 @@ export function NotificationFeed({
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
+4 -1
View File
@@ -15,6 +15,7 @@ import {cleanError} from '#/lib/strings/errors'
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'
@@ -50,6 +51,7 @@ export function PostFeedErrorMessage({
() => detectKnownError(feedDesc, error),
[feedDesc, error],
)
if (
typeof knownError !== 'undefined' &&
knownError !== KnownError.Unknown &&
@@ -68,7 +70,8 @@ export function PostFeedErrorMessage({
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
+13 -1
View File
@@ -2,6 +2,7 @@ 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'
@@ -9,6 +10,7 @@ import {logger} from '#/logger'
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'
@@ -39,6 +41,7 @@ function keyExtractor(item: ActorDefs.ProfileViewBasic) {
export function ProfileFollowers({name}: {name: string}) {
const {_} = useLingui()
const navigation = useNavigation()
const initialNumToRender = useInitialNumToRender()
const {currentAccount} = useSession()
@@ -129,12 +132,21 @@ 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}
emptyStateButton={{
label: _(msg`Go back`),
text: _(msg`Go back`),
color: 'secondary',
size: 'small',
onPress: () => navigation.goBack(),
}}
/>
)
}
src/view/com/profile/ProfileFollows.tsx
+24 -1
View File
@@ -2,13 +2,17 @@ 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 {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'
@@ -41,6 +45,16 @@ export function ProfileFollows({name}: {name: string}) {
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 {
@@ -129,12 +143,21 @@ export function ProfileFollows({name}: {name: string}) {
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
+84 -49
View File
@@ -1,76 +1,111 @@
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
+10 -1
View File
@@ -20,6 +20,7 @@ import {Text} from '#/view/com/util/text/Text'
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']
@@ -333,7 +334,15 @@ function TypographyView() {
}
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
+63 -2
View File
@@ -7,17 +7,19 @@ import {
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'
@@ -42,6 +44,11 @@ import {ProfileHeader, ProfileHeaderLoading} from '#/screens/Profile/Header'
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'
@@ -169,6 +176,8 @@ function ProfileScreenLoaded({
const {hasSession, currentAccount} = useSession()
const setMinimalShellMode = useSetMinimalShellMode()
const {openComposer} = useOpenComposer()
const navigation = useNavigation<NavigationProp>()
const requireEmailVerification = useRequireEmailVerification()
const {
data: labelerInfo,
error: labelerError,
@@ -334,6 +343,17 @@ function ProfileScreenLoaded({
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
// =
@@ -408,6 +428,14 @@ function ProfileScreenLoaded({
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}
@@ -421,6 +449,8 @@ function ProfileScreenLoaded({
scrollElRef={scrollElRef as ListRef}
ignoreFilterFor={profile.did}
setScrollViewTag={setScrollViewTag}
emptyStateMessage={_(msg`No replies yet`)}
emptyStateIcon={MessageIcon}
/>
)
: null}
@@ -434,6 +464,15 @@ function ProfileScreenLoaded({
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}
@@ -447,6 +486,15 @@ function ProfileScreenLoaded({
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}
@@ -460,6 +508,8 @@ function ProfileScreenLoaded({
scrollElRef={scrollElRef as ListRef}
ignoreFilterFor={profile.did}
setScrollViewTag={setScrollViewTag}
emptyStateMessage={_(msg`No likes yet`)}
emptyStateIcon={HeartIcon}
/>
)
: null}
@@ -485,6 +535,17 @@ function ProfileScreenLoaded({
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}