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

New SP card

Browse Source
This commit is contained in:
Eric Bailey
2025-04-02 15:27:24 -05:00
parent a6b3d741c9
commit 101114e384
5 changed files with 286 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AvatarStack.tsx
+10 -4
View File
@@ -6,22 +6,24 @@ import {useModerationOpts} from '#/state/preferences/moderation-opts'
import {useProfilesQuery} from '#/state/queries/profile'
import {UserAvatar} from '#/view/com/util/UserAvatar'
import {atoms as a, useTheme} from '#/alf'
import * as bsky from '#/types/bsky'
import type * as bsky from '#/types/bsky'
export function AvatarStack({
profiles,
size = 26,
numPending,
backgroundColor,
spacing = 'normal',
}: {
profiles: bsky.profile.AnyProfileView[]
size?: number
numPending?: number
backgroundColor?: string
spacing?: 'normal' | 'loose'
}) {
const halfSize = size / 2
const t = useTheme()
const moderationOpts = useModerationOpts()
const translateX = size / getSpacingValue(spacing)
const isPending = (numPending && profiles.length === 0) || !moderationOpts
@@ -43,7 +45,7 @@ export function AvatarStack({
a.flex_row,
a.align_center,
a.relative,
{width: size + (items.length - 1) * halfSize},
{width: size + (items.length - 1) * translateX},
]}>
{items.map((item, i) => (
<View
@@ -54,7 +56,7 @@ export function AvatarStack({
{
width: size,
height: size,
left: i * -halfSize,
left: i * -translateX,
borderWidth: 1,
borderColor: backgroundColor ?? t.atoms.bg.backgroundColor,
borderRadius: 999,
@@ -75,6 +77,10 @@ export function AvatarStack({
)
}
export function getSpacingValue(spacing: 'normal' | 'loose') {
return spacing === 'normal' ? 2 : 4
}
export function AvatarStackWithFetch({
profiles,
size,
src/components/StarterPack/StarterPackCard.tsx
+27 -1
View File
@@ -13,7 +13,7 @@ import {precacheStarterPack} from '#/state/queries/starter-packs'
import {useSession} from '#/state/session'
import {atoms as a, useTheme} from '#/alf'
import {StarterPack as StarterPackIcon} from '#/components/icons/StarterPack'
import {Link as BaseLink, LinkProps as BaseLinkProps} from '#/components/Link'
import {Link as BaseLink, type LinkProps as BaseLinkProps} from '#/components/Link'
import {Text} from '#/components/Typography'
import * as bsky from '#/types/bsky'
@@ -104,6 +104,32 @@ export function Card({
)
}
export function useStarterPackLink({
view,
}: {
view: bsky.starterPack.AnyStarterPackView
}) {
const {_} = useLingui()
const qc = useQueryClient()
const {rkey, handleOrDid} = React.useMemo(() => {
const rkey = new AtUri(view.uri).rkey
const {creator} = view
return {rkey, handleOrDid: creator.handle || creator.did}
}, [view])
const precache = () => {
precacheResolvedUri(qc, view.creator.handle, view.creator.did)
precacheStarterPack(qc, view)
}
return {
to: `/starter-pack/${handleOrDid}/${rkey}`,
label: AppBskyGraphStarterpack.isRecord(view.record)
? _(msg`Navigate to ${view.record.name}`)
: _(msg`Navigate to starter pack`),
precache,
}
}
export function Link({
starterPack,
children,
src/screens/Search/Explore.tsx
+14 -13
View File
@@ -1,6 +1,10 @@
import {useCallback, useMemo, useRef, useState} from 'react'
import {View, type ViewabilityConfig, type ViewToken} from 'react-native'
import {type AppBskyActorDefs, type AppBskyFeedDefs, type AppBskyGraphDefs} from '@atproto/api'
import {
type AppBskyActorDefs,
type AppBskyFeedDefs,
type AppBskyGraphDefs,
} from '@atproto/api'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
@@ -13,19 +17,20 @@ import {useActorSearchPaginated} from '#/state/queries/actor-search'
import {useGetPopularFeedsQuery} from '#/state/queries/feed'
import {usePreferencesQuery} from '#/state/queries/preferences'
import {useSuggestedFollowsQuery} from '#/state/queries/suggested-follows'
import {useSuggestedStarterPacksQuery} from '#/state/queries/useSuggestedStarterPacksQuery'
import {useProgressGuide} from '#/state/shell/progress-guide'
import {List} from '#/view/com/util/List'
import {
FeedFeedLoadingPlaceholder,
ProfileCardFeedLoadingPlaceholder,
} from '#/view/com/util/LoadingPlaceholder'
import {StarterPackCard} from '#/screens/Search/components/StarterPackCard'
import {ExploreRecommendations} from '#/screens/Search/modules/ExploreRecommendations'
import {ExploreTrendingTopics} from '#/screens/Search/modules/ExploreTrendingTopics'
import {ExploreTrendingVideos} from '#/screens/Search/modules/ExploreTrendingVideos'
import {atoms as a, useTheme} from '#/alf'
import {Button} from '#/components/Button'
import * as FeedCard from '#/components/FeedCard'
import {StarterPackCard} from '#/screens/Search/components/StarterPackCard'
import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDownIcon} from '#/components/icons/Chevron'
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
import {type Props as SVGIconProps} from '#/components/icons/common'
@@ -40,7 +45,6 @@ import {
SuggestedProfileCard,
useLoadEnoughProfiles,
} from './modules/ExploreSuggestedAccounts'
import {useSuggestedStarterPacksQuery} from '#/state/queries/useSuggestedStarterPacksQuery'
function LoadMore({item}: {item: ExploreScreenItems & {type: 'loadMore'}}) {
const t = useTheme()
@@ -156,9 +160,9 @@ type ExploreScreenItems =
error: string
}
| {
type: 'starterPack',
type: 'starterPack'
key: string
view: AppBskyGraphDefs.StarterPackViewBasic
view: AppBskyGraphDefs.StarterPackView
}
export function Explore({
@@ -465,7 +469,7 @@ export function Explore({
// error: cleanError(suggestedSPsError),
// })
} else {
suggestedSPs.map(s => {
suggestedSPs.starterPacks.map(s => {
i.push({
type: 'starterPack',
key: s.uri,
@@ -512,6 +516,9 @@ export function Explore({
gate,
moderationOpts,
hasPressedLoadMoreFeeds,
suggestedSPs,
isLoadingSuggestedSPs,
suggestedSPsError,
])
const renderItem = useCallback(
@@ -593,13 +600,7 @@ export function Explore({
}
case 'starterPack': {
return (
<View
style={[
a.border_b,
t.atoms.border_contrast_low,
a.px_lg,
a.py_lg,
]}>
<View style={[a.px_lg, a.py_sm]}>
<StarterPackCard view={item.view} />
</View>
)
src/screens/Search/components/StarterPackCard.tsx
+232 -36
View File
@@ -1,57 +1,253 @@
import React from 'react'
import {View} from 'react-native'
import {AppBskyGraphDefs} from '@atproto/api'
import {Image} from 'expo-image'
import {
type AppBskyGraphDefs,
AppBskyGraphStarterpack,
moderateProfile,
} from '@atproto/api'
import {msg,Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {Trans, msg} from '@lingui/macro'
import {getStarterPackOgCard} from '#/lib/strings/starter-pack'
import * as Card from '#/components/StarterPack/StarterPackCard'
import {atoms as a, useTheme, useBreakpoints} from '#/alf'
import {Button, ButtonText} from '#/components/Button'
import {sanitizeHandle} from '#/lib/strings/handles'
import {useModerationOpts} from '#/state/preferences/moderation-opts'
import {useSession} from '#/state/session'
import {UserAvatar} from '#/view/com/util/UserAvatar'
import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
import {ButtonText} from '#/components/Button'
import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
import {Link} from '#/components/Link'
import {MediaInsetBorder} from '#/components/MediaInsetBorder'
import {useStarterPackLink} from '#/components/StarterPack/StarterPackCard'
import {Text} from '#/components/Typography'
import * as bsky from '#/types/bsky'
export function StarterPackCard({view}: {view: AppBskyGraphDefs.StarterPackViewBasic}) {
export function StarterPackCard({
view,
}: {
view: AppBskyGraphDefs.StarterPackView
}) {
const t = useTheme()
const {_} = useLingui()
const imageUri = getStarterPackOgCard(view)
const {currentAccount} = useSession()
const {gtPhone} = useBreakpoints()
const link = useStarterPackLink({view})
if (
!bsky.dangerousIsType<AppBskyGraphStarterpack.Record>(
view.record,
AppBskyGraphStarterpack.isRecord,
)
) {
return null
}
const profileCount = gtPhone ? 11 : 8
const profiles = view.listItemsSample
?.slice(0, profileCount)
.map(item => item.subject)
return (
<View
style={[
a.w_full,
a.p_lg,
a.gap_md,
a.border,
a.rounded_sm,
a.overflow_hidden,
t.atoms.border_contrast_low,
]}>
<Card.Link starterPack={view}>
<View style={[a.w_full, gtPhone && [
a.flex_row, a.gap_lg,
]]}>
<View style={[gtPhone && {
width: '50%',
}]}>
<Image
source={imageUri}
style={[a.w_full, {aspectRatio: 1.91}]}
accessibilityIgnoresInvertColors={true}
/>
</View>
<View style={[a.flex_1, a.py_md, a.pr_md, !gtPhone && [a.px_md, a.flex_row, a.gap_sm, a.align_start]]}>
<View style={[a.flex_1]}>
<Card.Card starterPack={view} noIcon />
</View>
<Button
label={_(msg`Open pack`)}
variant='solid'
color='secondary'
size='small'
>
<ButtonText><Trans>Open pack</Trans></ButtonText>
</Button>
</View>
<View aria-hidden style={[a.absolute, a.inset_0, a.z_40]}>
<Link
to={link.to}
label={link.label}
style={[a.absolute, a.inset_0]}
onHoverIn={link.precache}
onPress={link.precache}>
<View />
</Link>
</View>
<AvatarStack
profiles={profiles ?? []}
numPending={profileCount}
total={view.list?.listItemCount}
/>
<View
style={[
a.w_full,
a.flex_row,
a.align_start,
a.gap_lg,
web({
position: 'static',
zIndex: 'unset',
}),
]}>
<View style={[a.flex_1]}>
<Text
emoji
style={[a.text_md, a.font_bold, a.leading_snug]}
numberOfLines={1}>
{view.record.name}
</Text>
<Text
emoji
style={[a.leading_snug, t.atoms.text_contrast_medium]}
numberOfLines={1}>
{view.creator?.did === currentAccount?.did
? _(msg`By you`)
: _(msg`By ${sanitizeHandle(view.creator.handle, '@')}`)}
</Text>
</View>
</Card.Link>
<Link
to={link.to}
label={link.label}
onHoverIn={link.precache}
onPress={link.precache}
variant="solid"
color="secondary"
size="small"
style={[a.z_50]}>
<ButtonText>
<Trans>Open pack</Trans>
</ButtonText>
</Link>
</View>
</View>
)
}
export function AvatarStack({
profiles,
numPending,
total,
}: {
profiles: bsky.profile.AnyProfileView[]
numPending: number
total?: number
}) {
const t = useTheme()
const {gtPhone} = useBreakpoints()
const moderationOpts = useModerationOpts()
const circlesCount = numPending + 1 // add total at end
const widthPerc = 100 / circlesCount
const [size, setSize] = React.useState<number | null>(null)
const isPending = (numPending && profiles.length === 0) || !moderationOpts
const items = isPending
? Array.from({length: numPending ?? circlesCount}).map((_, i) => ({
key: i,
profile: null,
moderation: null,
}))
: profiles.map(item => ({
key: item.did,
profile: item,
moderation: moderateProfile(item, moderationOpts),
}))
return (
<View
style={[
a.w_full,
a.flex_row,
a.align_center,
a.relative,
{width: `${100 - widthPerc * 0.2}%`},
]}>
{items.map((item, i) => (
<View
key={item.key}
style={[
{
width: `${widthPerc}%`,
zIndex: 100 - i,
},
]}>
<View
style={[
a.relative,
{
width: '120%',
},
]}>
<View
onLayout={e => setSize(e.nativeEvent.layout.width)}
style={[
a.rounded_full,
t.atoms.bg_contrast_25,
{
paddingTop: '100%',
},
]}>
{size && item.profile ? (
<UserAvatar
size={size}
avatar={item.profile.avatar}
type={item.profile.associated?.labeler ? 'labeler' : 'user'}
moderation={item.moderation.ui('avatar')}
style={[a.absolute, a.inset_0]}
/>
) : (
<MediaInsetBorder style={[a.rounded_full]} />
)}
</View>
</View>
</View>
))}
<View
style={[
{
width: `${widthPerc}%`,
zIndex: 1,
},
]}>
<View
style={[
a.relative,
{
width: '120%',
},
]}>
<View
style={[
{
paddingTop: '100%',
},
]}>
<View
style={[
a.absolute,
a.inset_0,
a.rounded_full,
a.align_center,
a.justify_center,
{
backgroundColor: t.atoms.text_contrast_low.color,
},
]}>
{total ? (
<Text
style={[
gtPhone ? a.text_md : a.text_sm,
a.font_bold,
a.leading_snug,
{color: 'white'},
]}>
<Trans comment="Indicates the number of additional profiles are in the Starter Pack e.g. +12">
+{total}
</Trans>
</Text>
) : (
<Plus fill="white" />
)}
</View>
</View>
</View>
</View>
</View>
)
}
src/state/queries/useSuggestedStarterPacksQuery.ts
+3 -85
View File
@@ -1,5 +1,4 @@
import {useQuery} from '@tanstack/react-query'
import {AppBskyGraphDefs} from '@atproto/api'
import {useAgent} from '#/state/session'
@@ -13,90 +12,9 @@ export function useSuggestedStarterPacksQuery() {
return useQuery({
queryKey: createSuggestedStarterPacksQueryKey(),
async queryFn() {
// // @ts-expect-error
// const {data} = await agent.app.bsky.unspecced.getSuggestedStarterPacks()
// const {starterPacks} = data
const {starterPacks} = {starterPacks: [temp]}
return starterPacks as AppBskyGraphDefs.StarterPackViewBasic[]
// TODO interests
const {data} = await agent.app.bsky.unspecced.getSuggestedStarterPacks()
return data
},
})
}
const temp = {
uri: 'at://did:plc:dpajgwmnecpdyjyqzjzm6bnb/app.bsky.graph.starterpack/3l3bhtqkjfo2m',
cid: 'bafyreifvtjkrvuq3qcyz32p6lacdxbwhcmux5amnhokfputfarlpuyqqhu',
record: {
$type: 'app.bsky.graph.starterpack',
createdAt: '2024-09-03T18:44:43.158Z',
feeds: [
{
avatar:
'https://cdn.bsky.app/img/avatar/plain/did:plc:z72i7hdynmk6r22z27h6tvur/bafkreieppnjpayqgjbyqnbeqzwj3pzqtiwbe5a4m6whzqnp3k7gpqs2gai@jpeg',
cid: 'bafyreigreonzn577vy6i4qh2so7aqfjztqrrj4jpssg2jczc27p6x4y6wi',
creator: {
associated: {
chat: {
allowIncoming: 'none',
},
},
avatar:
'https://cdn.bsky.app/img/avatar/plain/did:plc:z72i7hdynmk6r22z27h6tvur/bafkreihagr2cmvl2jt4mgx3sppwe2it3fwolkrbtjrhcnwjk4jdijhsoze@jpeg',
createdAt: '2023-04-12T04:53:57.057Z',
description:
'official Bluesky account (check username👆)\n\nBugs, feature requests, feedback: support@bsky.app',
did: 'did:plc:z72i7hdynmk6r22z27h6tvur',
displayName: 'Bluesky',
handle: 'bsky.app',
indexedAt: '2024-12-18T07:43:57.513Z',
labels: [
{
cts: '2024-05-31T04:01:47.907Z',
src: 'did:plc:z3yk2cflhmn6vmzo3f5ixqh4',
uri: 'did:plc:z72i7hdynmk6r22z27h6tvur',
val: 'cornerstone',
ver: 1,
},
],
viewer: {
blockedBy: false,
muted: false,
},
},
description:
'A mix of popular content from accounts you follow and content that your follows like.',
did: 'did:web:discover.bsky.app',
displayName: 'Popular With Friends',
indexedAt: '2023-05-19T23:19:21.076Z',
labels: [],
likeCount: 33616,
uri: 'at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/with-friends',
viewer: {},
},
],
list: 'at://did:plc:dpajgwmnecpdyjyqzjzm6bnb/app.bsky.graph.list/3l3bhtqgyrn2e',
name: "Tom Sawyeeeeeee's Starter Pack",
updatedAt: '2024-12-19T22:44:58.411Z',
},
creator: {
did: 'did:plc:dpajgwmnecpdyjyqzjzm6bnb',
handle: 'test.esb.lol',
displayName: 'e',
avatar:
'https://cdn.bsky.app/img/avatar/plain/did:plc:dpajgwmnecpdyjyqzjzm6bnb/bafkreia6dx7fhoi6fxwfpgm7jrxijpqci7ap53wpilkpazojwvqlmgud2m@jpeg',
associated: {
chat: {
allowIncoming: 'all',
},
},
viewer: {
muted: false,
blockedBy: false,
},
labels: [],
createdAt: '2023-07-17T15:57:52.014Z',
},
joinedAllTimeCount: 1,
joinedWeekCount: 0,
labels: [],
indexedAt: '2024-12-19T22:45:06.322Z',
}