Combine SubtleWebHover and SubtleHover, default to web only for all cases

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',
-  },
-})