+2 -2

src/components/Post/Embed/index.tsx

··· 23 23 import {PostAlerts} from '#/components/moderation/PostAlerts' 24 24 import {RichText} from '#/components/RichText' 25 25 import {Embed as StarterPackCard} from '#/components/StarterPack/StarterPackCard' 26 26 - import {SubtleWebHover} from '#/components/SubtleWebHover' 26 26 + import {SubtleHover} from '#/components/SubtleHover' 27 27 import * as bsky from '#/types/bsky' 28 28 import { 29 29 type Embed as TEmbed, ··· 284 284 childContainerStyle={[a.pt_sm]}> 285 285 {({active}) => ( 286 286 <> 287 287 - {!active && <SubtleWebHover hover={hover} style={[a.rounded_md]} />} 287 287 + {!active && <SubtleHover hover={hover} style={[a.rounded_md]} />} 288 288 <Link 289 289 style={[!active && a.p_md]} 290 290 hoverStyle={{borderColor: pal.colors.borderLinkHover}}

+27 -3

src/components/SubtleHover.tsx

··· 1 1 import {View} from 'react-native' 2 2 3 3 + import {isTouchDevice} from '#/lib/browser' 4 4 + import {isNative, isWeb} from '#/platform/detection' 3 5 import {atoms as a, useTheme, type ViewStyleProp} from '#/alf' 4 6 5 5 - export function SubtleHover({style, hover}: ViewStyleProp & {hover: boolean}) { 7 7 + export function SubtleHover({ 8 8 + style, 9 9 + hover, 10 10 + web = true, 11 11 + native = false, 12 12 + }: ViewStyleProp & {hover: boolean; web?: boolean; native?: boolean}) { 6 13 const t = useTheme() 7 14 8 15 let opacity: number ··· 18 25 break 19 26 } 20 27 21 21 - return ( 28 28 + const el = ( 22 29 <View 23 30 style={[ 24 31 a.absolute, 25 32 a.inset_0, 26 33 a.pointer_events_none, 27 34 a.transition_opacity, 28 28 - t.atoms.bg_contrast_25, 35 35 + t.atoms.bg_contrast_50, 29 36 style, 30 37 {opacity: hover ? opacity : 0}, 31 38 ]} 32 39 /> 33 40 ) 41 41 + 42 42 + if (hover) { 43 43 + console.log({ 44 44 + isWeb, 45 45 + web, 46 46 + isNative, 47 47 + native, 48 48 + }) 49 49 + } 50 50 + 51 51 + if (isWeb && web) { 52 52 + return isTouchDevice ? null : el 53 53 + } else if (isNative && native) { 54 54 + return el 55 55 + } 56 56 + 57 57 + return null 34 58 }

-5

src/components/SubtleWebHover.tsx

··· 1 1 - import {type ViewStyleProp} from '#/alf' 2 2 - 3 3 - export function SubtleWebHover({}: ViewStyleProp & {hover: boolean}) { 4 4 - return null 5 5 - }

-49

src/components/SubtleWebHover.web.tsx

··· 1 1 - import {StyleSheet, View} from 'react-native' 2 2 - 3 3 - import {isTouchDevice} from '#/lib/browser' 4 4 - import {useTheme, type ViewStyleProp} from '#/alf' 5 5 - 6 6 - export function SubtleWebHover({ 7 7 - style, 8 8 - hover, 9 9 - }: ViewStyleProp & {hover: boolean}) { 10 10 - const t = useTheme() 11 11 - if (isTouchDevice) { 12 12 - return null 13 13 - } 14 14 - let opacity = 0.5 15 15 - switch (t.name) { 16 16 - case 'dark': 17 17 - opacity = 0.4 18 18 - break 19 19 - case 'dim': 20 20 - opacity = 0.45 21 21 - break 22 22 - case 'light': 23 23 - opacity = 0.5 24 24 - break 25 25 - } 26 26 - return ( 27 27 - <View 28 28 - style={[ 29 29 - t.atoms.bg_contrast_25, 30 30 - styles.container, 31 31 - {opacity: hover ? opacity : 0}, 32 32 - style, 33 33 - ]} 34 34 - /> 35 35 - ) 36 36 - } 37 37 - 38 38 - const styles = StyleSheet.create({ 39 39 - container: { 40 40 - position: 'absolute', 41 41 - left: 0, 42 42 - right: 0, 43 43 - bottom: 0, 44 44 - top: 0, 45 45 - pointerEvents: 'none', 46 46 - // @ts-ignore web only 47 47 - transition: '0.15s ease-in-out opacity', 48 48 - }, 49 49 - })

+5 -5

src/screens/PostThread/components/ThreadItemPost.tsx

··· 41 41 import {PostControls} from '#/components/PostControls' 42 42 import {RichText} from '#/components/RichText' 43 43 import * as Skele from '#/components/Skeleton' 44 44 - import {SubtleWebHover} from '#/components/SubtleWebHover' 44 44 + import {SubtleHover} from '#/components/SubtleHover' 45 45 import {Text} from '#/components/Typography' 46 46 47 47 export type ThreadItemPostProps = { ··· 246 246 const {isActive: live} = useActorStatus(post.author) 247 247 248 248 return ( 249 249 - <SubtleHover> 249 249 + <SubtleHoverWrapper> 250 250 <ThreadItemPostOuterWrapper item={item} overrides={overrides}> 251 251 <PostHider 252 252 testID={`postThreadItem-by-${post.author.handle}`} ··· 339 339 </View> 340 340 </PostHider> 341 341 </ThreadItemPostOuterWrapper> 342 342 - </SubtleHover> 342 342 + </SubtleHoverWrapper> 343 343 ) 344 344 }) 345 345 346 346 - function SubtleHover({children}: {children: ReactNode}) { 346 346 + function SubtleHoverWrapper({children}: {children: ReactNode}) { 347 347 const { 348 348 state: hover, 349 349 onIn: onHoverIn, ··· 354 354 onPointerEnter={onHoverIn} 355 355 onPointerLeave={onHoverOut} 356 356 style={a.pointer}> 357 357 - <SubtleWebHover hover={hover} /> 357 357 + <SubtleHover hover={hover} /> 358 358 {children} 359 359 </View> 360 360 )

+5 -5

src/screens/PostThread/components/ThreadItemTreePost.tsx

··· 40 40 import {PostControls} from '#/components/PostControls' 41 41 import {RichText} from '#/components/RichText' 42 42 import * as Skele from '#/components/Skeleton' 43 43 - import {SubtleWebHover} from '#/components/SubtleWebHover' 43 43 + import {SubtleHover} from '#/components/SubtleHover' 44 44 import {Text} from '#/components/Typography' 45 45 46 46 /** ··· 310 310 311 311 return ( 312 312 <ThreadItemTreePostOuterWrapper item={item}> 313 313 - <SubtleHover> 313 313 + <SubtleHoverWrapper> 314 314 <PostHider 315 315 testID={`postThreadItem-by-${post.author.handle}`} 316 316 href={postHref} ··· 381 381 </View> 382 382 </ThreadItemTreePostInnerWrapper> 383 383 </PostHider> 384 384 - </SubtleHover> 384 384 + </SubtleHoverWrapper> 385 385 </ThreadItemTreePostOuterWrapper> 386 386 ) 387 387 }) 388 388 389 389 - function SubtleHover({children}: {children: React.ReactNode}) { 389 389 + function SubtleHoverWrapper({children}: {children: React.ReactNode}) { 390 390 const { 391 391 state: hover, 392 392 onIn: onHoverIn, ··· 397 397 onPointerEnter={onHoverIn} 398 398 onPointerLeave={onHoverOut} 399 399 style={[a.flex_1, a.pointer]}> 400 400 - <SubtleWebHover hover={hover} /> 400 400 + <SubtleHover hover={hover} /> 401 401 {children} 402 402 </View> 403 403 )

+2 -2

src/view/com/notifications/NotificationFeedItem.tsx

··· 66 66 import * as MediaPreview from '#/components/MediaPreview' 67 67 import {ProfileHoverCard} from '#/components/ProfileHoverCard' 68 68 import {Notification as StarterPackCard} from '#/components/StarterPack/StarterPackCard' 69 69 - import {SubtleWebHover} from '#/components/SubtleWebHover' 69 69 + import {SubtleHover} from '#/components/SubtleHover' 70 70 import {Text} from '#/components/Typography' 71 71 import {useSimpleVerificationState} from '#/components/verification' 72 72 import {VerificationCheck} from '#/components/verification/VerificationCheck' ··· 613 613 }}> 614 614 {({hovered}) => ( 615 615 <> 616 616 - <SubtleWebHover hover={hovered} /> 616 616 + <SubtleHover hover={hovered} /> 617 617 <View style={[styles.layoutIcon, a.pr_sm]}> 618 618 {/* TODO: Prevent conditional rendering and move toward composable 619 619 notifications for clearer accessibility labeling */}

+2 -2

src/view/com/post/Post.tsx

··· 35 35 import {ShowMoreTextButton} from '#/components/Post/ShowMoreTextButton' 36 36 import {PostControls} from '#/components/PostControls' 37 37 import {RichText} from '#/components/RichText' 38 38 - import {SubtleWebHover} from '#/components/SubtleWebHover' 38 38 + import {SubtleHover} from '#/components/SubtleHover' 39 39 import * as bsky from '#/types/bsky' 40 40 41 41 export function Post({ ··· 167 167 onPointerLeave={() => { 168 168 setHover(false) 169 169 }}> 170 170 - <SubtleWebHover hover={hover} /> 170 170 + <SubtleHover hover={hover} /> 171 171 {showReplyLine && <View style={styles.replyLine} />} 172 172 <View style={styles.layout}> 173 173 <View style={styles.layoutAvi}>

+2 -2

src/view/com/posts/PostFeedItem.tsx

··· 58 58 import {DiscoverDebug} from '#/components/PostControls/DiscoverDebug' 59 59 import {ProfileHoverCard} from '#/components/ProfileHoverCard' 60 60 import {RichText} from '#/components/RichText' 61 61 - import {SubtleWebHover} from '#/components/SubtleWebHover' 61 61 + import {SubtleHover} from '#/components/SubtleHover' 62 62 import * as bsky from '#/types/bsky' 63 63 64 64 interface FeedItemProps { ··· 317 317 onPointerLeave={() => { 318 318 setHover(false) 319 319 }}> 320 320 - <SubtleWebHover hover={hover} /> 320 320 + <SubtleHover hover={hover} /> 321 321 <View style={{flexDirection: 'row', gap: 10, paddingLeft: 8}}> 322 322 <View style={{width: 42}}> 323 323 {isThreadChild && (

+2 -2

src/view/com/posts/ViewFullThread.tsx

··· 8 8 import {usePalette} from '#/lib/hooks/usePalette' 9 9 import {makeProfileLink} from '#/lib/routes/links' 10 10 import {useInteractionState} from '#/components/hooks/useInteractionState' 11 11 - import {SubtleWebHover} from '#/components/SubtleWebHover' 11 11 + import {SubtleHover} from '#/components/SubtleHover' 12 12 import {Link} from '../util/Link' 13 13 import {Text} from '../util/text/Text' 14 14 ··· 33 33 noFeedback 34 34 onPointerEnter={onHoverIn} 35 35 onPointerLeave={onHoverOut}> 36 36 - <SubtleWebHover 36 36 + <SubtleHover 37 37 hover={hover} 38 38 // adjust position for visual alignment - the actual box has lots of top padding and not much bottom padding -sfn 39 39 style={{top: 8, bottom: -5}}

+2 -2

src/view/com/util/load-latest/LoadLatestBtn.tsx

··· 14 14 import {useInteractionState} from '#/components/hooks/useInteractionState' 15 15 import {ArrowTop_Stroke2_Corner0_Rounded as ArrowIcon} from '#/components/icons/Arrow' 16 16 import {CENTER_COLUMN_OFFSET} from '#/components/Layout' 17 17 - import {SubtleWebHover} from '#/components/SubtleWebHover' 17 17 + import {SubtleHover} from '#/components/SubtleHover' 18 18 19 19 export function LoadLatestBtn({ 20 20 onPress, ··· 91 91 targetScale={0.9} 92 92 onPointerEnter={onHoverIn} 93 93 onPointerLeave={onHoverOut}> 94 94 - <SubtleWebHover hover={hovered} style={[a.rounded_full]} /> 94 94 + <SubtleHover hover={hovered} style={[a.rounded_full]} /> 95 95 <ArrowIcon 96 96 size="md" 97 97 style={[