From ba802eb0f24d30467dd8621f204526d6457f9613 Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@gmail.com>
Date: Tue, 29 Oct 2024 21:42:37 +0000
Subject: Add subtle web hover to interactive rows (#5989)

* Add subtle web hover to interactive rows

* Adjust numbers

* Ignore touch devices
---
 src/view/com/post-thread/PostThreadItem.tsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

(limited to 'src/view/com/post-thread/PostThreadItem.tsx')

diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx
index 99950495f..4a30cc6a9 100644
--- a/src/view/com/post-thread/PostThreadItem.tsx
+++ b/src/view/com/post-thread/PostThreadItem.tsx
@@ -31,6 +31,7 @@ import {PostThreadFollowBtn} from '#/view/com/post-thread/PostThreadFollowBtn'
 import {atoms as a, useTheme} from '#/alf'
 import {AppModerationCause} from '#/components/Pills'
 import {RichText} from '#/components/RichText'
+import {SubtleWebHover} from '#/components/SubtleWebHover'
 import {Text as NewText} from '#/components/Typography'
 import {ContentHider} from '../../../components/moderation/ContentHider'
 import {LabelsOnMyPost} from '../../../components/moderation/LabelsOnMe'
@@ -649,6 +650,7 @@ function PostOuterWrapper({
   hideTopBorder?: boolean
 }>) {
   const t = useTheme()
+  const [hover, setHover] = React.useState(false)
   if (treeView && depth > 0) {
     return (
       <View
@@ -661,7 +663,13 @@ function PostOuterWrapper({
             flexDirection: 'row',
             borderTopWidth: depth === 1 ? a.border_t.borderTopWidth : 0,
           },
-        ]}>
+        ]}
+        onPointerEnter={() => {
+          setHover(true)
+        }}
+        onPointerLeave={() => {
+          setHover(false)
+        }}>
         {Array.from(Array(depth - 1)).map((_, n: number) => (
           <View
             key={`${post.uri}-padding-${n}`}
@@ -681,6 +689,12 @@ function PostOuterWrapper({
   }
   return (
     <View
+      onPointerEnter={() => {
+        setHover(true)
+      }}
+      onPointerLeave={() => {
+        setHover(false)
+      }}
       style={[
         a.border_t,
         a.px_sm,
@@ -689,6 +703,7 @@ function PostOuterWrapper({
         hideTopBorder && styles.noTopBorder,
         styles.cursor,
       ]}>
+      <SubtleWebHover hover={hover} />
       {children}
     </View>
   )
-- 
cgit 1.4.1