Clean up feature gate for follow buttons in expanded notifications (#11068)

This commit is contained in:
Alex Benzer
2026-07-07 04:22:42 -07:00
committed by GitHub
parent 9ff248528b
commit 882a5573af
2 changed files with 19 additions and 115 deletions
-1
View File
@@ -12,7 +12,6 @@ export enum Features {
GroupChatsDisable = 'group_chats:disable',
ComposerLanguageDetectionEnable = 'composer:language_detection:enable',
PostGalleryEmbedEnable = 'post_gallery_embed:enable',
NotificationsExpandedProfileCardEnable = 'notifications:expanded_profile_card:enable',
SearchV2Enable = 'search_v2:enable',
AdvancedSearchV2Enable = 'advanced_search_v2:enable',
@@ -31,7 +31,6 @@ import {makeProfileLink} from '#/lib/routes/links'
import {type NavigationProp} from '#/lib/routes/types'
import {forceLTR} from '#/lib/strings/bidi'
import {sanitizeDisplayName} from '#/lib/strings/display-names'
import {sanitizeHandle} from '#/lib/strings/handles'
import {niceDate} from '#/lib/strings/time'
import {s} from '#/lib/styles'
import {logger} from '#/logger'
@@ -44,7 +43,7 @@ import {FeedSourceCard} from '#/view/com/feeds/FeedSourceCard'
import {Post} from '#/view/com/post/Post'
import {formatCount} from '#/view/com/util/numeric/format'
import {TimeElapsed} from '#/view/com/util/TimeElapsed'
import {PreviewableUserAvatar, UserAvatar} from '#/view/com/util/UserAvatar'
import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
import {atoms as a, platform, useTheme} from '#/alf'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import {BellRinging_Filled_Corner0_Rounded as BellRingingIcon} from '#/components/icons/BellRinging'
@@ -75,8 +74,6 @@ import * as bsky from '#/types/bsky'
const MAX_AUTHORS = 5
const EXPANDED_AUTHOR_EL_HEIGHT = 35
interface Author {
profile: AppBskyActorDefs.ProfileView
href: string
@@ -98,9 +95,6 @@ let NotificationFeedItem = ({
const t = useTheme()
const {_, i18n} = useLingui()
const ax = useAnalytics()
const profileCardEnabled = ax.features.enabled(
ax.features.NotificationsExpandedProfileCardEnable,
)
const [isAuthorsExpanded, setIsAuthorsExpanded] = useState<boolean>(false)
const [isHoveringAuthorsList, setIsHoveringAuthorsList] = useState(false)
const itemHref = useMemo(() => {
@@ -633,9 +627,7 @@ let NotificationFeedItem = ({
}}>
{({hovered}) => (
<>
<SubtleHover
hover={hovered && (!profileCardEnabled || !isHoveringAuthorsList)}
/>
<SubtleHover hover={hovered && !isHoveringAuthorsList} />
<View style={[styles.layoutIcon, a.pr_sm]}>
{/* TODO: Prevent conditional rendering and move toward composable
notifications for clearer accessibility labeling */}
@@ -645,16 +637,8 @@ let NotificationFeedItem = ({
<ExpandListPressable
hasMultipleAuthors={hasMultipleAuthors}
onToggleAuthorsExpanded={onToggleAuthorsExpanded}
onHoverIn={
profileCardEnabled
? () => setIsHoveringAuthorsList(true)
: undefined
}
onHoverOut={
profileCardEnabled
? () => setIsHoveringAuthorsList(false)
: undefined
}>
onHoverIn={() => setIsHoveringAuthorsList(true)}
onHoverOut={() => setIsHoveringAuthorsList(false)}>
<CondensedAuthorsList
visible={!isAuthorsExpanded}
authors={authors}
@@ -1025,28 +1009,23 @@ function ExpandedAuthorsList({
authors: Author[]
moderationOpts: ModerationOpts
}) {
const ax = useAnalytics()
const profileCardEnabled = ax.features.enabled(
ax.features.NotificationsExpandedProfileCardEnable,
)
const isNativeFade = !IS_WEB && profileCardEnabled
const heightInterp = useAnimatedValue(visible ? 1 : 0)
const opacityInterp = useAnimatedValue(visible ? 1 : 0)
const [measuredHeight, setMeasuredHeight] = useState(0)
useEffect(() => {
Animated.timing(isNativeFade ? opacityInterp : heightInterp, {
Animated.timing(IS_WEB ? heightInterp : opacityInterp, {
toValue: visible ? 1 : 0,
duration: 200,
useNativeDriver: isNativeFade,
useNativeDriver: !IS_WEB,
}).start()
}, [heightInterp, opacityInterp, visible, isNativeFade])
}, [heightInterp, opacityInterp, visible])
const onInnerLayout = (e: LayoutChangeEvent) => {
if (measuredHeight === 0) {
setMeasuredHeight(e.nativeEvent.layout.height)
}
}
if (isNativeFade) {
if (!IS_WEB) {
return (
<Animated.View style={{opacity: opacityInterp}}>
{visible && (
@@ -1065,31 +1044,22 @@ function ExpandedAuthorsList({
)
}
const targetHeight = profileCardEnabled
? measuredHeight
: authors.length * (EXPANDED_AUTHOR_EL_HEIGHT + 10) /*10=margin*/
const heightStyle = {
height: Animated.multiply(heightInterp, targetHeight),
height: Animated.multiply(heightInterp, measuredHeight),
opacity: Animated.divide(heightInterp, 1),
}
return (
<Animated.View style={[a.overflow_hidden, heightStyle]}>
{profileCardEnabled ? (
<View onLayout={onInnerLayout} style={[a.pt_sm, a.pb_md]}>
{authors.map((author, i) => (
<ExpandedAuthorProfileCard
key={author.profile.did}
author={author}
moderationOpts={moderationOpts}
isLast={i === authors.length - 1}
/>
))}
</View>
) : (
authors.map(author => (
<ExpandedAuthorCard key={author.profile.did} author={author} />
))
)}
<View onLayout={onInnerLayout} style={[a.pt_sm, a.pb_md]}>
{authors.map((author, i) => (
<ExpandedAuthorProfileCard
key={author.profile.did}
author={author}
moderationOpts={moderationOpts}
isLast={i === authors.length - 1}
/>
))}
</View>
</Animated.View>
)
}
@@ -1134,65 +1104,6 @@ function ExpandedAuthorProfileCard({
)
}
function ExpandedAuthorCard({author}: {author: Author}) {
const t = useTheme()
const {_} = useLingui()
return (
<Link
label={author.profile.displayName || author.profile.handle}
accessibilityHint={_(msg`Opens this profile`)}
to={makeProfileLink({
did: author.profile.did,
handle: author.profile.handle,
})}
style={styles.expandedAuthor}>
<View style={[a.mr_sm]}>
<ProfileHoverCard did={author.profile.did}>
<UserAvatar
size={35}
avatar={author.profile.avatar}
moderation={author.moderation.ui('avatar')}
type={author.profile.associated?.labeler ? 'labeler' : 'user'}
/>
</ProfileHoverCard>
</View>
<View style={[a.flex_1]}>
<View style={[a.flex_row, a.align_end]}>
<Text
numberOfLines={1}
emoji
style={[
a.text_md,
a.font_semi_bold,
a.leading_tight,
{maxWidth: '70%'},
]}>
{sanitizeDisplayName(
author.profile.displayName || author.profile.handle,
)}
</Text>
<ProfileBadges
profile={author.profile}
size="md"
style={[a.pl_2xs, a.self_center]}
/>
<Text
numberOfLines={1}
style={[
a.pl_xs,
a.text_md,
a.leading_tight,
a.flex_shrink,
t.atoms.text_contrast_medium,
]}>
{sanitizeHandle(author.profile.handle, '@')}
</Text>
</View>
</View>
</Link>
)
}
function AdditionalPostText({post}: {post?: AppBskyFeedDefs.PostView}) {
const t = useTheme()
if (
@@ -1256,10 +1167,4 @@ const styles = StyleSheet.create({
paddingTop: 10,
paddingBottom: 6,
},
expandedAuthor: {
flexDirection: 'row',
alignItems: 'center',
marginTop: 10,
height: EXPANDED_AUTHOR_EL_HEIGHT,
},
})