Combine SubtleWebHover and SubtleHover, default to web only for all cases (#9188)

src/components/Post/Embed/index.tsx

@@ -23,7 +23,7 @@ import {ContentHider} from '#/components/moderation/ContentHider'
 import {PostAlerts} from '#/components/moderation/PostAlerts'
 import {RichText} from '#/components/RichText'
 import {Embed as StarterPackCard} from '#/components/StarterPack/StarterPackCard'
-import {SubtleWebHover} from '#/components/SubtleWebHover'
+import {SubtleHover} from '#/components/SubtleHover'
 import * as bsky from '#/types/bsky'
 import {
   type Embed as TEmbed,
@@ -284,7 +284,7 @@ export function QuoteEmbed({
         childContainerStyle={[a.pt_sm]}>
         {({active}) => (
           <>
-            {!active && <SubtleWebHover hover={hover} style={[a.rounded_md]} />}
+            {!active && <SubtleHover hover={hover} style={[a.rounded_md]} />}
             <Link
               style={[!active && a.p_md]}
               hoverStyle={{borderColor: pal.colors.borderLinkHover}}

src/components/SubtleHover.tsx

@@ -1,8 +1,15 @@
 import {View} from 'react-native'
 
+import {isTouchDevice} from '#/lib/browser'
+import {isNative, isWeb} from '#/platform/detection'
 import {atoms as a, useTheme, type ViewStyleProp} from '#/alf'
 
-export function SubtleHover({style, hover}: ViewStyleProp & {hover: boolean}) {
+export function SubtleHover({
+  style,
+  hover,
+  web = true,
+  native = false,
+}: ViewStyleProp & {hover: boolean; web?: boolean; native?: boolean}) {
   const t = useTheme()
 
   let opacity: number
@@ -18,17 +25,34 @@ export function SubtleHover({style, hover}: ViewStyleProp & {hover: boolean}) {
       break
   }
 
-  return (
+  const el = (
     <View
       style={[
         a.absolute,
         a.inset_0,
         a.pointer_events_none,
         a.transition_opacity,
-        t.atoms.bg_contrast_25,
+        t.atoms.bg_contrast_50,
         style,
         {opacity: hover ? opacity : 0},
       ]}
     />
   )
+
+  if (hover) {
+    console.log({
+      isWeb,
+      web,
+      isNative,
+      native,
+    })
+  }
+
+  if (isWeb && web) {
+    return isTouchDevice ? null : el
+  } else if (isNative && native) {
+    return el
+  }
+
+  return null
 }

src/components/SubtleWebHover.tsx

@@ -1,5 +0,0 @@
-import {type ViewStyleProp} from '#/alf'
-
-export function SubtleWebHover({}: ViewStyleProp & {hover: boolean}) {
-  return null
-}

src/components/SubtleWebHover.web.tsx

@@ -1,49 +0,0 @@
-import {StyleSheet, View} from 'react-native'
-
-import {isTouchDevice} from '#/lib/browser'
-import {useTheme, type ViewStyleProp} from '#/alf'
-
-export function SubtleWebHover({
-  style,
-  hover,
-}: ViewStyleProp & {hover: boolean}) {
-  const t = useTheme()
-  if (isTouchDevice) {
-    return null
-  }
-  let opacity = 0.5
-  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},
-        style,
-      ]}
-    />
-  )
-}
-
-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/screens/PostThread/components/ThreadItemPost.tsx

@@ -41,7 +41,7 @@ import {ShowMoreTextButton} from '#/components/Post/ShowMoreTextButton'
 import {PostControls} from '#/components/PostControls'
 import {RichText} from '#/components/RichText'
 import * as Skele from '#/components/Skeleton'
-import {SubtleWebHover} from '#/components/SubtleWebHover'
+import {SubtleHover} from '#/components/SubtleHover'
 import {Text} from '#/components/Typography'
 
 export type ThreadItemPostProps = {
@@ -246,7 +246,7 @@ const ThreadItemPostInner = memo(function ThreadItemPostInner({
   const {isActive: live} = useActorStatus(post.author)
 
   return (
-    <SubtleHover>
+    <SubtleHoverWrapper>
       <ThreadItemPostOuterWrapper item={item} overrides={overrides}>
         <PostHider
           testID={`postThreadItem-by-${post.author.handle}`}
@@ -339,11 +339,11 @@ const ThreadItemPostInner = memo(function ThreadItemPostInner({
           </View>
         </PostHider>
       </ThreadItemPostOuterWrapper>
-    </SubtleHover>
+    </SubtleHoverWrapper>
   )
 })
 
-function SubtleHover({children}: {children: ReactNode}) {
+function SubtleHoverWrapper({children}: {children: ReactNode}) {
   const {
     state: hover,
     onIn: onHoverIn,
@@ -354,7 +354,7 @@ function SubtleHover({children}: {children: ReactNode}) {
       onPointerEnter={onHoverIn}
       onPointerLeave={onHoverOut}
       style={a.pointer}>
-      <SubtleWebHover hover={hover} />
+      <SubtleHover hover={hover} />
       {children}
     </View>
   )

src/screens/PostThread/components/ThreadItemTreePost.tsx

@@ -40,7 +40,7 @@ import {ShowMoreTextButton} from '#/components/Post/ShowMoreTextButton'
 import {PostControls} from '#/components/PostControls'
 import {RichText} from '#/components/RichText'
 import * as Skele from '#/components/Skeleton'
-import {SubtleWebHover} from '#/components/SubtleWebHover'
+import {SubtleHover} from '#/components/SubtleHover'
 import {Text} from '#/components/Typography'
 
 /**
@@ -310,7 +310,7 @@ const ThreadItemTreePostInner = memo(function ThreadItemTreePostInner({
 
   return (
     <ThreadItemTreePostOuterWrapper item={item}>
-      <SubtleHover>
+      <SubtleHoverWrapper>
         <PostHider
           testID={`postThreadItem-by-${post.author.handle}`}
           href={postHref}
@@ -381,12 +381,12 @@ const ThreadItemTreePostInner = memo(function ThreadItemTreePostInner({
             </View>
           </ThreadItemTreePostInnerWrapper>
         </PostHider>
-      </SubtleHover>
+      </SubtleHoverWrapper>
     </ThreadItemTreePostOuterWrapper>
   )
 })
 
-function SubtleHover({children}: {children: React.ReactNode}) {
+function SubtleHoverWrapper({children}: {children: React.ReactNode}) {
   const {
     state: hover,
     onIn: onHoverIn,
@@ -397,7 +397,7 @@ function SubtleHover({children}: {children: React.ReactNode}) {
       onPointerEnter={onHoverIn}
       onPointerLeave={onHoverOut}
       style={[a.flex_1, a.pointer]}>
-      <SubtleWebHover hover={hover} />
+      <SubtleHover hover={hover} />
       {children}
     </View>
   )

src/view/com/notifications/NotificationFeedItem.tsx

@@ -66,7 +66,7 @@ import {InlineLinkText, Link} 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 {SubtleHover} from '#/components/SubtleHover'
 import {Text} from '#/components/Typography'
 import {useSimpleVerificationState} from '#/components/verification'
 import {VerificationCheck} from '#/components/verification/VerificationCheck'
@@ -613,7 +613,7 @@ let NotificationFeedItem = ({
       }}>
       {({hovered}) => (
         <>
-          <SubtleWebHover hover={hovered} />
+          <SubtleHover hover={hovered} />
           <View style={[styles.layoutIcon, a.pr_sm]}>
             {/* TODO: Prevent conditional rendering and move toward composable
           notifications for clearer accessibility labeling */}

src/view/com/post/Post.tsx

@@ -35,7 +35,7 @@ import {PostRepliedTo} from '#/components/Post/PostRepliedTo'
 import {ShowMoreTextButton} from '#/components/Post/ShowMoreTextButton'
 import {PostControls} from '#/components/PostControls'
 import {RichText} from '#/components/RichText'
-import {SubtleWebHover} from '#/components/SubtleWebHover'
+import {SubtleHover} from '#/components/SubtleHover'
 import * as bsky from '#/types/bsky'
 
 export function Post({
@@ -167,7 +167,7 @@ function PostInner({
       onPointerLeave={() => {
         setHover(false)
       }}>
-      <SubtleWebHover hover={hover} />
+      <SubtleHover hover={hover} />
       {showReplyLine && <View style={styles.replyLine} />}
       <View style={styles.layout}>
         <View style={styles.layoutAvi}>

src/view/com/posts/PostFeedItem.tsx

@@ -58,7 +58,7 @@ import {PostControls} from '#/components/PostControls'
 import {DiscoverDebug} from '#/components/PostControls/DiscoverDebug'
 import {ProfileHoverCard} from '#/components/ProfileHoverCard'
 import {RichText} from '#/components/RichText'
-import {SubtleWebHover} from '#/components/SubtleWebHover'
+import {SubtleHover} from '#/components/SubtleHover'
 import * as bsky from '#/types/bsky'
 
 interface FeedItemProps {
@@ -317,7 +317,7 @@ let FeedItemInner = ({
       onPointerLeave={() => {
         setHover(false)
       }}>
-      <SubtleWebHover hover={hover} />
+      <SubtleHover hover={hover} />
       <View style={{flexDirection: 'row', gap: 10, paddingLeft: 8}}>
         <View style={{width: 42}}>
           {isThreadChild && (

src/view/com/posts/ViewFullThread.tsx

@@ -8,7 +8,7 @@ import {useLingui} from '@lingui/react'
 import {usePalette} from '#/lib/hooks/usePalette'
 import {makeProfileLink} from '#/lib/routes/links'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
-import {SubtleWebHover} from '#/components/SubtleWebHover'
+import {SubtleHover} from '#/components/SubtleHover'
 import {Link} from '../util/Link'
 import {Text} from '../util/text/Text'
 
@@ -33,7 +33,7 @@ export function ViewFullThread({uri}: {uri: string}) {
       noFeedback
       onPointerEnter={onHoverIn}
       onPointerLeave={onHoverOut}>
-      <SubtleWebHover
+      <SubtleHover
         hover={hover}
         // adjust position for visual alignment - the actual box has lots of top padding and not much bottom padding -sfn
         style={{top: 8, bottom: -5}}

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

@@ -14,7 +14,7 @@ import {atoms as a, useLayoutBreakpoints, useTheme, web} from '#/alf'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {ArrowTop_Stroke2_Corner0_Rounded as ArrowIcon} from '#/components/icons/Arrow'
 import {CENTER_COLUMN_OFFSET} from '#/components/Layout'
-import {SubtleWebHover} from '#/components/SubtleWebHover'
+import {SubtleHover} from '#/components/SubtleHover'
 
 export function LoadLatestBtn({
   onPress,
@@ -91,7 +91,7 @@ export function LoadLatestBtn({
         targetScale={0.9}
         onPointerEnter={onHoverIn}
         onPointerLeave={onHoverOut}>
-        <SubtleWebHover hover={hovered} style={[a.rounded_full]} />
+        <SubtleHover hover={hovered} style={[a.rounded_full]} />
         <ArrowIcon
           size="md"
           style={[