Fix nested links and hover states

src/components/Link.tsx

@@ -1,5 +1,10 @@
 import {useCallback, useMemo} from 'react'
-import {type GestureResponderEvent, Linking} from 'react-native'
+import {
+  type GestureResponderEvent,
+  Linking,
+  type NativeSyntheticEvent,
+  type TargetedEvent,
+} from 'react-native'
 import {sanitizeUrl} from '@braintree/sanitize-url'
 import {
   type LinkProps as RNLinkProps,
@@ -78,6 +83,15 @@ type BaseLinkProps = {
    * Whether the link should be opened through the redirect proxy.
    */
   shouldProxy?: boolean
+
+  /**
+   * Web only
+   */
+  onMouseEnter?: () => void
+  /**
+   * Web only
+   */
+  onMouseLeave?: () => void
 }
 
 export function useLink({
@@ -322,12 +336,10 @@ export type InlineLinkProps = React.PropsWithChildren<
   BaseLinkProps &
     TextStyleProp &
     Pick<TextProps, 'selectable' | 'numberOfLines' | 'emoji'> &
-    Pick<ButtonProps, 'label' | 'accessibilityHint'> & {
+    Pick<ButtonProps, 'label' | 'accessibilityHint' | 'onFocus' | 'onBlur'> & {
       disableUnderline?: boolean
       title?: TextProps['title']
       overridePresentation?: boolean
-      onMouseEnter?: () => void
-      onMouseLeave?: () => void
     }
 >
 
@@ -362,9 +374,9 @@ export function InlineLinkText({
     shouldProxy: shouldProxy,
   })
   const {
-    state: hovered,
+    state: interacted,
-    onIn: onHoverIn,
+    onIn: onInteract,
-    onOut: onHoverOut,
+    onOut: onInteractOut,
   } = useInteractionState()
   const flattenedStyle = flatten(style) || {}
 
@@ -376,7 +388,7 @@ export function InlineLinkText({
       {...rest}
       style={[
         {color: t.palette.primary_500},
-        hovered &&
+        interacted &&
           !disableUnderline && {
             ...web({
               outline: 0,
@@ -390,13 +402,23 @@ export function InlineLinkText({
       role="link"
       onPress={download ? undefined : onPress}
       onLongPress={onLongPress}
-      onMouseEnter={() => {
+      {...web({
-        rest.onMouseEnter?.()
+        onMouseEnter: () => {
-        onHoverIn()
+          rest.onMouseEnter?.()
+          onInteract()
+        },
+        onMouseLeave: () => {
+          rest.onMouseLeave?.()
+          onInteractOut()
+        },
+      })}
+      onFocus={(e: NativeSyntheticEvent<TargetedEvent>) => {
+        rest.onFocus?.(e)
+        onInteract()
       }}
-      onMouseLeave={() => {
+      onBlur={(e: NativeSyntheticEvent<TargetedEvent>) => {
-        rest.onMouseLeave?.()
+        rest.onBlur?.(e)
-        onHoverOut()
+        onInteractOut()
       }}
       accessibilityRole="link"
       href={href}
@@ -444,9 +466,9 @@ export function SimpleInlineLinkText({
 }) {
   const t = useTheme()
   const {
-    state: hovered,
+    state: interacted,
-    onIn: onHoverIn,
+    onIn: onInteract,
-    onOut: onHoverOut,
+    onOut: onInteractOut,
   } = useInteractionState()
   const flattenedStyle = flatten(style) || {}
   const isExternal = isExternalUrl(to)
@@ -470,7 +492,7 @@ export function SimpleInlineLinkText({
       {...rest}
       style={[
         {color: t.palette.primary_500},
-        hovered &&
+        interacted &&
           !disableUnderline && {
             ...web({
               outline: 0,
@@ -483,8 +505,24 @@ export function SimpleInlineLinkText({
       ]}
       role="link"
       onPress={onPress}
-      onMouseEnter={onHoverIn}
+      {...web({
-      onMouseLeave={onHoverOut}
+        onMouseEnter: () => {
+          rest.onMouseEnter?.()
+          onInteract()
+        },
+        onMouseLeave: () => {
+          rest.onMouseLeave?.()
+          onInteractOut()
+        },
+      })}
+      onFocus={(e: NativeSyntheticEvent<TargetedEvent>) => {
+        rest.onFocus?.(e)
+        onInteract()
+      }}
+      onBlur={(e: NativeSyntheticEvent<TargetedEvent>) => {
+        rest.onBlur?.(e)
+        onInteractOut()
+      }}
       accessibilityRole="link"
       href={href}
       {...web({

src/components/Post/Embed/StandardSiteEmbed/StandardSiteMetaRow.tsx

@@ -21,13 +21,9 @@ import {Text} from '#/components/Typography'
 export function StandardSiteMetaRow({
   type = 'document',
   view,
-  onInteractWithin,
-  onInteractWithout,
 }: {
   type?: 'document' | 'publication'
   view: AppBskyEmbedExternal.ViewExternal
-  onInteractWithin: () => void
-  onInteractWithout: () => void
 }) {
   const t = useTheme()
   const {t: l} = useLingui()
@@ -80,13 +76,7 @@ export function StandardSiteMetaRow({
             <InlineLinkText
               label={l`View @${authorProfile.handle}'s profile`}
               to={makeProfileLink(authorProfile)}
-              style={metaTextStyle}
+              style={[metaTextStyle, a.pointer_events_auto]}>
-              onPress={e => {
-                // this link is nested, yes it's not ideal
-                e.stopPropagation()
-              }}
-              onMouseEnter={onInteractWithin}
-              onMouseLeave={onInteractWithout}>
               @{authorProfile.handle}
             </InlineLinkText>
           </Trans>
@@ -98,7 +88,7 @@ export function StandardSiteMetaRow({
   if (items.length === 0) return null
 
   return (
-    <View style={[a.flex_row, a.align_center, a.gap_xs]}>
+    <View style={[a.flex_row, a.align_center, a.gap_xs, a.z_10]}>
       {items.map((item, i) => (
         <Fragment key={item.key}>
           {i > 0 && <Text style={metaTextStyle}>•</Text>}

src/components/Post/Embed/StandardSiteEmbed/index.tsx

@@ -9,7 +9,7 @@ import {shareUrl} from '#/lib/sharing'
 import {niceDate} from '#/lib/strings/time'
 import {toNiceDomain} from '#/lib/strings/url-helpers'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
-import {atoms as a, useBreakpoints, useTheme, utils} from '#/alf'
+import {atoms as a, useBreakpoints, useTheme, utils, web} from '#/alf'
 import {ButtonIcon, ButtonText} from '#/components/Button'
 import {Divider} from '#/components/Divider'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
@@ -73,9 +73,9 @@ export const StandardSiteEmbed = ({
   }
 
   const {
-    state: interactedWithin,
+    state: interacted,
-    onIn: onInteractWithin,
+    onIn: onInteract,
-    onOut: onInteractWithout,
+    onOut: onInteractOut,
   } = useInteractionState()
 
   const onPress = () => {
@@ -111,7 +111,7 @@ export const StandardSiteEmbed = ({
         a.overflow_hidden,
         a.w_full,
         a.border,
-        t.atoms.border_contrast_low,
+        interacted ? t.atoms.border_contrast_high : t.atoms.border_contrast_low,
         style,
       ]}>
       <Link
@@ -119,124 +119,108 @@ export const StandardSiteEmbed = ({
         to={view.uri}
         label={view.title || l`Open link to ${niceUrl}`}
         onPress={onPress}
-        onLongPress={onLongPress}>
+        onLongPress={onLongPress}
-        {({hovered: maybeHovered}) => {
+        style={[a.absolute, a.inset_0, a.z_10]}
-          const hovered = maybeHovered && !interactedWithin
+        {...web({
-          return (
+          onMouseEnter: onInteract,
-            <View style={[a.w_full]}>
+          onMouseLeave: onInteractOut,
-              {imageUri ? (
+        })}
-                <Image
+        onFocus={onInteract}
-                  style={[a.aspect_card]}
+        onBlur={onInteractOut}>
-                  source={{uri: imageUri}}
+        <></>
-                  accessibilityIgnoresInvertColors
+      </Link>
-                  loading="lazy"
-                />
-              ) : undefined}
 
+      <View style={[a.w_full, a.z_10, a.pointer_events_none]}>
+        {imageUri ? (
+          <Image
+            style={[a.aspect_card]}
+            source={{uri: imageUri}}
+            accessibilityIgnoresInvertColors
+            loading="lazy"
+          />
+        ) : undefined}
+
+        <View
+          style={[
+            a.flex_1,
+            a.pt_sm,
+            hasMedia && a.border_t,
+            interacted
+              ? t.atoms.border_contrast_high
+              : t.atoms.border_contrast_low,
+            {gap: 3},
+            isStandard && a.pt_md,
+          ]}>
+          <View
+            style={[
+              a.pb_xs,
+              a.px_md,
+              {gap: 3},
+              isStandard && [{gap: 5}, a.pb_sm],
+            ]}>
+            <Text
+              emoji
+              numberOfLines={3}
+              style={[
+                a.text_md,
+                a.font_semi_bold,
+                a.leading_snug,
+                isStandard && [a.text_lg, a.font_bold],
+              ]}>
+              {view.title}
+            </Text>
+            {view.description ? (
+              <Text
+                emoji
+                numberOfLines={view.thumb ? 2 : 4}
+                style={[a.text_sm, a.leading_snug]}>
+                {view.description}
+              </Text>
+            ) : undefined}
+
+            {isStandard && (view.createdAt || view.readingTime) && (
               <View
-                style={[
+                style={[a.flex_row, a.align_center, a.gap_md, {paddingTop: 2}]}>
-                  a.flex_1,
+                {view.createdAt && (
-                  a.pt_sm,
-                  t.atoms.border_contrast_low,
-                  hasMedia && a.border_t,
-                  {gap: 3},
-                  isStandard && a.pt_md,
-                ]}>
-                <View
-                  style={[
-                    a.pb_xs,
-                    a.px_md,
-                    {gap: 3},
-                    isStandard && [{gap: 5}, a.pb_sm],
-                  ]}>
                   <Text
-                    emoji
-                    numberOfLines={3}
                     style={[
-                      a.text_md,
+                      a.text_xs,
-                      a.font_semi_bold,
                       a.leading_snug,
-                      isStandard && [
+                      t.atoms.text_contrast_medium,
-                        a.text_lg,
-                        a.font_bold,
-                        hovered && a.underline,
-                      ],
                     ]}>
-                    {view.title}
+                    {niceDate(i18n, view.createdAt, 'long', 'none')}
                   </Text>
-                  {view.description ? (
+                )}
+                {view.readingTime && (
+                  <View style={[a.flex_row, a.align_center, a.gap_2xs]}>
+                    <Clock size="xs" style={t.atoms.text_contrast_medium} />
                     <Text
-                      emoji
-                      numberOfLines={view.thumb ? 2 : 4}
-                      style={[a.text_sm, a.leading_snug]}>
-                      {view.description}
-                    </Text>
-                  ) : undefined}
-
-                  {isStandard && (view.createdAt || view.readingTime) && (
-                    <View
                       style={[
-                        a.flex_row,
+                        a.text_xs,
-                        a.align_center,
+                        a.leading_snug,
-                        a.gap_md,
+                        t.atoms.text_contrast_medium,
-                        {paddingTop: 2},
                       ]}>
-                      {view.createdAt && (
+                      {l({
-                        <Text
+                        message: plural(view.readingTime, {
-                          style={[
+                          one: '#m',
-                            a.text_xs,
+                          other: '#m',
-                            a.leading_snug,
+                        }),
-                            t.atoms.text_contrast_medium,
+                        comment: `How long it takes to read an article, in minutes. Displayed in a short form, e.g. "5m" for 5 minutes.`,
-                          ]}>
+                      })}
-                          {niceDate(i18n, view.createdAt, 'long', 'none')}
+                    </Text>
-                        </Text>
-                      )}
-                      {view.readingTime && (
-                        <View style={[a.flex_row, a.align_center, a.gap_2xs]}>
-                          <Clock size="xs" style={t.atoms.text_contrast_high} />
-                          <Text
-                            style={[
-                              a.text_xs,
-                              a.leading_snug,
-                              t.atoms.text_contrast_medium,
-                            ]}>
-                            {l({
-                              message: plural(view.readingTime, {
-                                one: '#m',
-                                other: '#m',
-                              }),
-                              comment: `How long it takes to read an article, in minutes. Displayed in a short form, e.g. "5m" for 5 minutes.`,
-                            })}
-                          </Text>
-                        </View>
-                      )}
-                    </View>
-                  )}
-                </View>
-
-                {!view.source && (
-                  <View style={[a.px_md]}>
-                    <Divider />
-                    <View style={[a.py_sm]}>
-                      <StandardSiteMetaRow
-                        view={view}
-                        onInteractWithin={onInteractWithin}
-                        onInteractWithout={onInteractWithout}
-                      />
-                    </View>
                   </View>
                 )}
               </View>
-            </View>
+            )}
-          )
-        }}
-      </Link>
-
-      {view.source && (
-        <>
-          <View style={[a.px_md]}>
-            <Divider />
           </View>
+        </View>
+      </View>
+
+      <View style={[a.z_20]}>
+        <View style={[a.px_md]}>
+          <Divider />
+        </View>
+        {view.source ? (
           <PublicationFooter
             view={view}
             onPress={onPress}
@@ -244,8 +228,12 @@ export const StandardSiteEmbed = ({
             themeColors={themeColors}
             hideSubscribe={hideSubscribe}
           />
-        </>
+        ) : (
-      )}
+          <View style={[a.px_md, a.py_sm, a.pointer_events_none]}>
+            <StandardSiteMetaRow view={view} />
+          </View>
+        )}
+      </View>
     </View>
   )
 }
@@ -269,109 +257,109 @@ export function PublicationCard({
   const {t: l} = useLingui()
   const {gtPhone} = useBreakpoints()
   const {
-    state: interactedWithin,
+    state: interacted,
-    onIn: onInteractWithin,
+    onIn: onInteract,
-    onOut: onInteractWithout,
+    onOut: onInteractOut,
   } = useInteractionState()
 
   if (!view.source) return null
 
   return (
-    <Link
+    <View
-      shouldProxy
+      style={[
-      to={view.source.uri}
+        a.rounded_lg,
-      label={l`View publication`}
+        a.overflow_hidden,
-      onPress={onPress}
+        a.w_full,
-      onLongPress={onLongPress}>
+        a.border,
-      {({hovered: maybeHovered}) => {
+        a.p_md,
-        const hovered = maybeHovered && !interactedWithin
+        interacted ? t.atoms.border_contrast_high : t.atoms.border_contrast_low,
-        return (
+        style,
-          <View
+      ]}>
-            style={[
+      <Link
-              a.flex_col,
+        shouldProxy
-              a.rounded_lg,
+        to={view.source.uri}
-              a.overflow_hidden,
+        label={l`View publication`}
-              a.w_full,
+        onPress={onPress}
-              a.border,
+        onLongPress={onLongPress}
-              a.p_md,
+        {...web({
-              t.atoms.border_contrast_low,
+          onMouseEnter: onInteract,
-              style,
+          onMouseLeave: onInteractOut,
-            ]}>
+        })}
-            <View
+        onFocus={onInteract}
+        onBlur={onInteractOut}
+        style={[a.absolute, a.inset_0]}>
+        <></>
+      </Link>
+
+      <View
+        style={[
+          a.flex_1,
+          a.align_center,
+          a.justify_between,
+          a.gap_md,
+          a.pointer_events_none,
+          gtPhone && [a.flex_row, a.gap_sm],
+        ]}>
+        <View
+          style={[
+            a.w_full,
+            a.flex_row,
+            a.align_center,
+            a.gap_sm,
+            gtPhone && a.flex_1,
+          ]}>
+          <PublicationIcon
+            view={view}
+            size={40}
+            interacted={interacted}
+            themeColors={themeColors}
+          />
+          <View style={[a.flex_1, a.gap_2xs]}>
+            <Text
+              numberOfLines={1}
               style={[
-                a.flex_1,
+                a.text_md,
-                a.align_center,
+                a.font_semi_bold,
-                a.justify_between,
+                t.atoms.text,
-                a.gap_md,
+                interacted && a.underline,
-                gtPhone && [a.flex_row, a.gap_sm],
+              ]}>
-              ]}
+              {view.source?.title}
-              testID="publication-embed-footer">
+            </Text>
-              <View
+            <StandardSiteMetaRow type="publication" view={view} />
-                style={[
-                  a.w_full,
-                  a.flex_row,
-                  a.align_center,
-                  a.gap_sm,
-                  gtPhone && a.flex_1,
-                ]}>
-                <PublicationIcon
-                  view={view}
-                  size={40}
-                  hovered={hovered}
-                  themeColors={themeColors}
-                />
-                <View style={[a.flex_1, a.gap_2xs]}>
-                  <Text
-                    numberOfLines={1}
-                    style={[
-                      a.text_md,
-                      a.font_semi_bold,
-                      t.atoms.text,
-                      hovered && a.underline,
-                    ]}>
-                    {view.source?.title}
-                  </Text>
-                  <StandardSiteMetaRow
-                    type="publication"
-                    view={view}
-                    onInteractWithin={onInteractWithin}
-                    onInteractWithout={onInteractWithout}
-                  />
-                </View>
-              </View>
-
-              {!hideSubscribe && gtPhone && (
-                <SubscribeButton
-                  view={view}
-                  style={[!gtPhone && [a.w_full, a.justify_center]]}
-                  onPress={onPress}
-                  onLongPress={onLongPress}
-                />
-              )}
-            </View>
-
-            {view.description && (
-              <View style={[a.pt_sm]}>
-                <Text style={[a.text_sm, a.leading_snug]} numberOfLines={3}>
-                  {view.description}
-                </Text>
-              </View>
-            )}
-
-            {!hideSubscribe && !gtPhone && (
-              <View style={[view.description && a.pt_sm]}>
-                <SubscribeButton
-                  view={view}
-                  style={[!gtPhone && [a.w_full, a.justify_center]]}
-                  onPress={onPress}
-                  onLongPress={onLongPress}
-                />
-              </View>
-            )}
           </View>
-        )
+        </View>
-      }}
+
-    </Link>
+        {!hideSubscribe && gtPhone && (
+          <SubscribeButton
+            view={view}
+            style={[!gtPhone && [a.w_full, a.justify_center]]}
+            onPress={onPress}
+            onLongPress={onLongPress}
+          />
+        )}
+      </View>
+
+      <View style={[a.pointer_events_none]}>
+        {view.description && (
+          <View style={[a.pt_sm]}>
+            <Text style={[a.text_sm, a.leading_snug]} numberOfLines={3}>
+              {view.description}
+            </Text>
+          </View>
+        )}
+
+        {!hideSubscribe && !gtPhone && (
+          <View style={[view.description && a.pt_sm]}>
+            <SubscribeButton
+              view={view}
+              style={[!gtPhone && [a.w_full, a.justify_center]]}
+              onPress={onPress}
+              onLongPress={onLongPress}
+            />
+          </View>
+        )}
+      </View>
+    </View>
   )
 }
 
@@ -402,7 +390,7 @@ export function SubscribeButton({
         label={cta}
         size="small"
         color="secondary_inverted"
-        style={[style, a.gap_sm]}
+        style={[style, a.gap_sm, a.pointer_events_auto]}
         onPress={onPress}
         onLongPress={onLongPress}>
         {highlightedPublisher ? (
@@ -424,15 +412,13 @@ export function SubscribeButton({
 function PublicationIcon({
   view,
   size,
-  hovered,
   themeColors,
 }: {
   view: AppBskyEmbedExternal.ViewExternal
   size: number
-  hovered?: boolean
+  interacted?: boolean
   themeColors: ThemeColors
 }) {
-  const opacity = hovered ? 0.6 : 0.2
   if (!view.source) return null
   return view.source?.icon ? (
     <View>
@@ -443,15 +429,7 @@ function PublicationIcon({
         avatar={view.source.icon}
         extraAviStyle={PUBLICATION_AVATAR_STYLE}
       />
-      <MediaInsetBorder
+      <MediaInsetBorder opaque style={[a.rounded_sm]} />
-        style={[
-          a.rounded_sm,
-          {
-            borderColor: themeColors.accentForeground,
-            opacity,
-          },
-        ]}
-      />
     </View>
   ) : (
     <View
@@ -470,15 +448,7 @@ function PublicationIcon({
         style={[a.text_xl, a.font_bold, {color: themeColors.accentForeground}]}>
         {[...view.source.title][0] ?? ''}
       </Text>
-      <MediaInsetBorder
+      <MediaInsetBorder opaque style={[a.rounded_sm]} />
-        style={[
-          a.rounded_sm,
-          {
-            borderColor: themeColors.accentForeground,
-            opacity,
-          },
-        ]}
-      />
     </View>
   )
 }
@@ -500,16 +470,10 @@ export function PublicationFooter({
   const {t: l} = useLingui()
   const {gtPhone} = useBreakpoints()
   const {
-    state: maybeHovered,
+    state: interacted,
-    onIn: onHoverIn,
+    onIn: onInteract,
-    onOut: onHoverOut,
+    onOut: onInteractOut,
   } = useInteractionState()
-  const {
-    state: interactedWithin,
-    onIn: onInteractWithin,
-    onOut: onInteractWithout,
-  } = useInteractionState()
-  const hovered = maybeHovered && !interactedWithin
 
   if (!view.source) return null
 
@@ -523,27 +487,36 @@ export function PublicationFooter({
         a.gap_md,
         gtPhone && [a.flex_row, a.gap_sm],
       ]}
-      testID="publication-embed-footer"
+      testID="publication-embed-footer">
-      // @ts-ignore it's Fine™
-      onMouseEnter={onHoverIn}
-      onMouseLeave={onHoverOut}>
       <Link
         shouldProxy
         to={view.source.uri}
         label={l`View publication`}
         onPress={onPress}
         onLongPress={onLongPress}
+        style={[a.absolute, a.inset_0, web({outline: 0})]}
+        {...web({
+          onMouseEnter: onInteract,
+          onMouseLeave: onInteractOut,
+        })}
+        onFocus={onInteract}
+        onBlur={onInteractOut}>
+        <></>
+      </Link>
+
+      <View
         style={[
           a.w_full,
           a.flex_row,
           a.align_center,
           a.gap_sm,
           gtPhone && a.flex_1,
+          a.pointer_events_none,
         ]}>
         <PublicationIcon
           view={view}
           size={32}
-          hovered={hovered}
+          interacted={interacted}
           themeColors={themeColors}
         />
         <View style={[a.flex_1, a.gap_2xs]}>
@@ -553,23 +526,18 @@ export function PublicationFooter({
               a.text_sm,
               a.font_medium,
               t.atoms.text,
-              hovered && a.underline,
+              interacted && a.underline,
             ]}>
             {view.source?.title}
           </Text>
-          <StandardSiteMetaRow
+          <StandardSiteMetaRow type="publication" view={view} />
-            type="publication"
-            view={view}
-            onInteractWithin={onInteractWithin}
-            onInteractWithout={onInteractWithout}
-          />
         </View>
-      </Link>
+      </View>
 
       {!hideSubscribe && (
         <SubscribeButton
           view={view}
-          style={[!gtPhone && [a.w_full, a.justify_center]]}
+          style={[a.z_10, !gtPhone && [a.w_full, a.justify_center]]}
           onPress={onPress}
           onLongPress={onLongPress}
         />