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 (
-
+
+