Add subtle web hover to interactive rows (#5989)

* Add subtle web hover to interactive rows

* Adjust numbers

* Ignore touch devices

src/components/SubtleWebHover.tsx

@@ -0,0 +1,3 @@
+export function SubtleWebHover({}: {hover: boolean}) {
+  return null
+}

src/components/SubtleWebHover.web.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import {StyleSheet, View} from 'react-native'
+
+import {isTouchDevice} from '#/lib/browser'
+import {useTheme} from '#/alf'
+
+export function SubtleWebHover({hover}: {hover: boolean}) {
+  const t = useTheme()
+  if (isTouchDevice) {
+    return null
+  }
+  let opacity: number
+  switch (t.name) {
+    case 'dark':
+      opacity = 0.4
+      break
+    case 'dim':
+      opacity = 0.45
+      break
+    case 'light':
+      opacity = 0.5
+      break
+  }
+  return (
+    <View
+      style={[
+        t.atoms.bg_contrast_25,
+        styles.container,
+        {
+          opacity: hover ? opacity : 0,
+        },
+      ]}
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    top: 0,
+    pointerEvents: 'none',
+    // @ts-ignore web only
+    transition: '0.15s ease-in-out opacity',
+  },
+})

src/view/com/notifications/FeedItem.tsx

@@ -51,6 +51,7 @@ import {Link as NewLink} from '#/components/Link'
 import * as MediaPreview from '#/components/MediaPreview'
 import {ProfileHoverCard} from '#/components/ProfileHoverCard'
 import {Notification as StarterPackCard} from '#/components/StarterPack/StarterPackCard'
+import {SubtleWebHover} from '#/components/SubtleWebHover'
 import {FeedSourceCard} from '../feeds/FeedSourceCard'
 import {Post} from '../post/Post'
 import {Link, TextLink} from '../util/Link'
@@ -129,6 +130,8 @@ let FeedItem = ({
     ]
   }, [item, moderationOpts])
 
+  const [hover, setHover] = React.useState(false)
+
   if (item.subjectUri && !item.subject && item.type !== 'feedgen-like') {
     // don't render anything if the target post was deleted or unfindable
     return <View />
@@ -285,7 +288,14 @@ let FeedItem = ({
           onToggleAuthorsExpanded()
         }
       }}
-      onBeforePress={onBeforePress}>
+      onBeforePress={onBeforePress}
+      onPointerEnter={() => {
+        setHover(true)
+      }}
+      onPointerLeave={() => {
+        setHover(false)
+      }}>
+      <SubtleWebHover hover={hover} />
       <View style={[styles.layoutIcon, a.pr_sm]}>
         {/* TODO: Prevent conditional rendering and move toward composable
         notifications for clearer accessibility labeling */}

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>
   )

src/view/com/post/Post.tsx

@@ -27,6 +27,7 @@ import {AviFollowButton} from '#/view/com/posts/AviFollowButton'
 import {atoms as a} from '#/alf'
 import {ProfileHoverCard} from '#/components/ProfileHoverCard'
 import {RichText} from '#/components/RichText'
+import {SubtleWebHover} from '#/components/SubtleWebHover'
 import {ContentHider} from '../../../components/moderation/ContentHider'
 import {LabelsOnMyPost} from '../../../components/moderation/LabelsOnMe'
 import {PostAlerts} from '../../../components/moderation/PostAlerts'
@@ -148,6 +149,7 @@ function PostInner({
   const {currentAccount} = useSession()
   const isMe = replyAuthorDid === currentAccount?.did
 
+  const [hover, setHover] = React.useState(false)
   return (
     <Link
       href={itemHref}
@@ -157,7 +159,14 @@ function PostInner({
         !hideTopBorder && {borderTopWidth: StyleSheet.hairlineWidth},
         style,
       ]}
-      onBeforePress={onBeforePress}>
+      onBeforePress={onBeforePress}
+      onPointerEnter={() => {
+        setHover(true)
+      }}
+      onPointerLeave={() => {
+        setHover(false)
+      }}>
+      <SubtleWebHover hover={hover} />
       {showReplyLine && <View style={styles.replyLine} />}
       <View style={styles.layout}>
         <View style={styles.layoutAvi}>

src/view/com/posts/FeedItem.tsx

@@ -46,6 +46,7 @@ import {PostAlerts} from '#/components/moderation/PostAlerts'
 import {AppModerationCause} from '#/components/Pills'
 import {ProfileHoverCard} from '#/components/ProfileHoverCard'
 import {RichText} from '#/components/RichText'
+import {SubtleWebHover} from '#/components/SubtleWebHover'
 import {Link, TextLink, TextLinkOnWebOnly} from '../util/Link'
 import {AviFollowButton} from './AviFollowButton'
 
@@ -237,6 +238,7 @@ let FeedItemInner = ({
     ? rootPost.threadgate.record
     : undefined
 
+  const [hover, setHover] = useState(false)
   return (
     <Link
       testID={`feedItem-by-${post.author.handle}`}
@@ -245,7 +247,14 @@ let FeedItemInner = ({
       noFeedback
       accessible={false}
       onBeforePress={onBeforePress}
-      dataSet={{feedContext}}>
+      dataSet={{feedContext}}
+      onPointerEnter={() => {
+        setHover(true)
+      }}
+      onPointerLeave={() => {
+        setHover(false)
+      }}>
+      <SubtleWebHover hover={hover} />
       <View style={{flexDirection: 'row', gap: 10, paddingLeft: 8}}>
         <View style={{width: 42}}>
           {isThreadChild && (

src/view/com/util/Link.tsx

@@ -49,6 +49,7 @@ interface Props extends ComponentProps<typeof TouchableOpacity> {
   anchorNoUnderline?: boolean
   navigationAction?: 'push' | 'replace' | 'navigate'
   onPointerEnter?: () => void
+  onPointerLeave?: () => void
   onBeforePress?: () => void
 }
 

src/view/com/util/post-embeds/QuoteEmbed.tsx

@@ -35,6 +35,7 @@ import {useResolveLinkQuery} from '#/state/queries/resolve-link'
 import {useSession} from '#/state/session'
 import {atoms as a, useTheme} from '#/alf'
 import {RichText} from '#/components/RichText'
+import {SubtleWebHover} from '#/components/SubtleWebHover'
 import {ContentHider} from '../../../../components/moderation/ContentHider'
 import {PostAlerts} from '../../../../components/moderation/PostAlerts'
 import {Link} from '../Link'
@@ -209,46 +210,59 @@ export function QuoteEmbed({
     onOpen?.()
   }, [queryClient, quote.author, onOpen])
 
+  const [hover, setHover] = React.useState(false)
   return (
-    <ContentHider
+    <View
-      modui={moderation?.ui('contentList')}
+      onPointerEnter={() => {
-      style={[
+        setHover(true)
-        a.rounded_md,
+      }}
-        a.p_md,
+      onPointerLeave={() => {
-        a.mt_sm,
+        setHover(false)
-        a.border,
+      }}>
-        t.atoms.border_contrast_low,
+      <ContentHider
-        style,
+        modui={moderation?.ui('contentList')}
-      ]}
+        style={[
-      childContainerStyle={[a.pt_sm]}>
+          a.rounded_md,
-      <Link
+          a.p_md,
-        hoverStyle={{borderColor: pal.colors.borderLinkHover}}
+          a.mt_sm,
-        href={itemHref}
+          a.border,
-        title={itemTitle}
+          t.atoms.border_contrast_low,
-        onBeforePress={onBeforePress}>
+          style,
-        <View pointerEvents="none">
+        ]}
-          <PostMeta
+        childContainerStyle={[a.pt_sm]}>
-            author={quote.author}
+        <SubtleWebHover hover={hover} />
-            moderation={moderation}
+        <Link
-            showAvatar
+          hoverStyle={{borderColor: pal.colors.borderLinkHover}}
-            postHref={itemHref}
+          href={itemHref}
-            timestamp={quote.indexedAt}
+          title={itemTitle}
-          />
+          onBeforePress={onBeforePress}>
-        </View>
+          <View pointerEvents="none">
-        {moderation ? (
+            <PostMeta
-          <PostAlerts modui={moderation.ui('contentView')} style={[a.py_xs]} />
+              author={quote.author}
-        ) : null}
+              moderation={moderation}
-        {richText ? (
+              showAvatar
-          <RichText
+              postHref={itemHref}
-            value={richText}
+              timestamp={quote.indexedAt}
-            style={a.text_md}
+            />
-            numberOfLines={20}
+          </View>
-            disableLinks
+          {moderation ? (
-          />
+            <PostAlerts
-        ) : null}
+              modui={moderation.ui('contentView')}
-        {embed && <PostEmbeds embed={embed} moderation={moderation} />}
+              style={[a.py_xs]}
-      </Link>
+            />
-    </ContentHider>
+          ) : null}
+          {richText ? (
+            <RichText
+              value={richText}
+              style={a.text_md}
+              numberOfLines={20}
+              disableLinks
+            />
+          ) : null}
+          {embed && <PostEmbeds embed={embed} moderation={moderation} />}
+        </Link>
+      </ContentHider>
+    </View>
   )
 }