diff --git a/src/components/SubtleWebHover.tsx b/src/components/SubtleWebHover.tsx index e6f427237b..5cbbfc898a 100644 --- a/src/components/SubtleWebHover.tsx +++ b/src/components/SubtleWebHover.tsx @@ -1,3 +1,5 @@ -export function SubtleWebHover({}: {hover: boolean}) { +import {ViewStyleProp} from '#/alf' + +export function SubtleWebHover({}: ViewStyleProp & {hover: boolean}) { return null } diff --git a/src/components/SubtleWebHover.web.tsx b/src/components/SubtleWebHover.web.tsx index e98251e0dd..adabf46bfd 100644 --- a/src/components/SubtleWebHover.web.tsx +++ b/src/components/SubtleWebHover.web.tsx @@ -2,9 +2,12 @@ import React from 'react' import {StyleSheet, View} from 'react-native' import {isTouchDevice} from '#/lib/browser' -import {useTheme} from '#/alf' +import {useTheme, ViewStyleProp} from '#/alf' -export function SubtleWebHover({hover}: {hover: boolean}) { +export function SubtleWebHover({ + style, + hover, +}: ViewStyleProp & {hover: boolean}) { const t = useTheme() if (isTouchDevice) { return null @@ -26,9 +29,8 @@ export function SubtleWebHover({hover}: {hover: boolean}) { style={[ t.atoms.bg_contrast_25, styles.container, - { - opacity: hover ? opacity : 0, - }, + {opacity: hover ? opacity : 0}, + style, ]} /> ) diff --git a/src/view/com/posts/FeedSlice.tsx b/src/view/com/posts/FeedSlice.tsx index dc68ee7a17..09335fa0ed 100644 --- a/src/view/com/posts/FeedSlice.tsx +++ b/src/view/com/posts/FeedSlice.tsx @@ -7,6 +7,8 @@ import {Trans} from '@lingui/macro' import {usePalette} from '#/lib/hooks/usePalette' import {makeProfileLink} from '#/lib/routes/links' import {FeedPostSlice} from '#/state/queries/post-feed' +import {useInteractionState} from '#/components/hooks/useInteractionState' +import {SubtleWebHover} from '#/components/SubtleWebHover' import {Link} from '../util/Link' import {Text} from '../util/text/Text' import {FeedItem} from './FeedItem' @@ -108,6 +110,11 @@ FeedSlice = memo(FeedSlice) export {FeedSlice} function ViewFullThread({uri}: {uri: string}) { + const { + state: hover, + onIn: onHoverIn, + onOut: onHoverOut, + } = useInteractionState() const pal = usePalette('default') const itemHref = React.useMemo(() => { const urip = new AtUri(uri) @@ -115,7 +122,18 @@ function ViewFullThread({uri}: {uri: string}) { }, [uri]) return ( - + +