[D1X] Add interstitials, component tweaks, placeholders (#4697)

* Add interstitials, component tweaks, placeholders

* Tweak feed card styles

* Port over same fix to ProfileCard

* Add browse more link on desktop

* Rm Gemfile

* Update logContext

* Update logContext

* Add click metric to cards

* Pass through props to ProfileCard.Link

* 2-up grid for profile cards on desktop web

* Add secondary_inverted button color

* Use inverted button color

* Adjust follow button layout

* Update skeleton

* Use round button

* Translate

assets/icons/arrowRight_stroke2_corner0_rounded.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M21 12a1 1 0 0 1-.293.707l-6 6a1 1 0 0 1-1.414-1.414L17.586 13H4a1 1 0 1 1 0-2h13.586l-4.293-4.293a1 1 0 0 1 1.414-1.414l6 6A1 1 0 0 1 21 12Z" clip-rule="evenodd"/></svg>

src/components/Button.tsx

···
 export type ButtonColor =
   | 'primary'
   | 'secondary'
+  | 'secondary_inverted'
   | 'negative'
   | 'gradient_sky'
   | 'gradient_midnight'
···
             })
           }
         }
+      } else if (color === 'secondary_inverted') {
+        if (variant === 'solid') {
+          if (!disabled) {
+            baseStyles.push({
+              backgroundColor: t.palette.contrast_900,
+            })
+            hoverStyles.push({
+              backgroundColor: t.palette.contrast_950,
+            })
+          } else {
+            baseStyles.push({
+              backgroundColor: t.palette.contrast_700,
+            })
+          }
+        } else if (variant === 'outline') {
+          baseStyles.push(a.border, t.atoms.bg, {
+            borderWidth: 1,
+          })
+
+          if (!disabled) {
+            baseStyles.push(a.border, {
+              borderColor: t.palette.contrast_300,
+            })
+            hoverStyles.push(t.atoms.bg_contrast_50)
+          } else {
+            baseStyles.push(a.border, {
+              borderColor: t.palette.contrast_200,
+            })
+          }
+        } else if (variant === 'ghost') {
+          if (!disabled) {
+            baseStyles.push(t.atoms.bg)
+            hoverStyles.push({
+              backgroundColor: t.palette.contrast_25,
+            })
+          }
+        }
       } else if (color === 'negative') {
         if (variant === 'solid') {
           if (!disabled) {
···
         const gradient = {
           primary: tokens.gradients.sky,
           secondary: tokens.gradients.sky,
+          secondary_inverted: tokens.gradients.sky,
           negative: tokens.gradients.sky,
           gradient_sky: tokens.gradients.sky,
           gradient_midnight: tokens.gradients.midnight,
···
         if (!disabled) {
           baseStyles.push({
             color: t.palette.contrast_700,
+          })
+        } else {
+          baseStyles.push({
+            color: t.palette.contrast_400,
+          })
+        }
+      } else if (variant === 'outline') {
+        if (!disabled) {
+          baseStyles.push({
+            color: t.palette.contrast_600,
+          })
+        } else {
+          baseStyles.push({
+            color: t.palette.contrast_300,
+          })
+        }
+      } else if (variant === 'ghost') {
+        if (!disabled) {
+          baseStyles.push({
+            color: t.palette.contrast_600,
+          })
+        } else {
+          baseStyles.push({
+            color: t.palette.contrast_300,
+          })
+        }
+      }
+    } else if (color === 'secondary_inverted') {
+      if (variant === 'solid' || variant === 'gradient') {
+        if (!disabled) {
+          baseStyles.push({
+            color: t.palette.white,
           })
         } else {
           baseStyles.push({

src/components/FeedCard.tsx

···
 import {Link as InternalLink, LinkProps} from '#/components/Link'
 import {Loader} from '#/components/Loader'
 import * as Prompt from '#/components/Prompt'
-import {RichText} from '#/components/RichText'
+import {RichText, RichTextProps} from '#/components/RichText'
 import {Text} from '#/components/Typography'
 
 type Props = {
···
   }, [view, queryClient])
 
   return (
-    <InternalLink to={href} {...props}>
+    <InternalLink to={href} style={[a.flex_col]} {...props}>
       {children}
     </InternalLink>
   )
 }
 
 export function Outer({children}: {children: React.ReactNode}) {
-  return <View style={[a.flex_1, a.gap_md]}>{children}</View>
+  return <View style={[a.w_full, a.gap_md]}>{children}</View>
 }
 
 export function Header({children}: {children: React.ReactNode}) {
-  return (
-    <View style={[a.flex_1, a.flex_row, a.align_center, a.gap_md]}>
-      {children}
-    </View>
-  )
+  return <View style={[a.flex_row, a.align_center, a.gap_md]}>{children}</View>
 }
 
 export type AvatarProps = {src: string | undefined; size?: number}
···
   )
 }
 
-export function Description({description}: {description?: string}) {
+export function Description({
+  description,
+  ...rest
+}: {description?: string} & Partial<RichTextProps>) {
   const rt = React.useMemo(() => {
     if (!description) return
     const rt = new RichTextApi({text: description || ''})
···
     return rt
   }, [description])
   if (!rt) return null
-  return <RichText value={rt} style={[a.leading_snug]} disableLinks />
+  return <RichText value={rt} style={[a.leading_snug]} disableLinks {...rest} />
+}
+
+export function DescriptionPlaceholder() {
+  const t = useTheme()
+  return (
+    <View style={[a.gap_xs]}>
+      <View
+        style={[a.rounded_xs, a.w_full, t.atoms.bg_contrast_50, {height: 12}]}
+      />
+      <View
+        style={[a.rounded_xs, a.w_full, t.atoms.bg_contrast_50, {height: 12}]}
+      />
+      <View
+        style={[
+          a.rounded_xs,
+          a.w_full,
+          t.atoms.bg_contrast_50,
+          {height: 12, width: 100},
+        ]}
+      />
+    </View>
+  )
 }
 
 export function Likes({count}: {count: number}) {

src/components/FeedInterstitials.tsx

···
+import React from 'react'
+import {View} from 'react-native'
+import {ScrollView} from 'react-native-gesture-handler'
+import {AppBskyActorDefs, AppBskyFeedDefs} from '@atproto/api'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useNavigation} from '@react-navigation/native'
+
+import {NavigationProp} from '#/lib/routes/types'
+import {logEvent} from '#/lib/statsig/statsig'
+import {useModerationOpts} from '#/state/preferences/moderation-opts'
+import {useGetPopularFeedsQuery} from '#/state/queries/feed'
+import {useSuggestedFollowsQuery} from '#/state/queries/suggested-follows'
+import {atoms as a, useBreakpoints, useTheme, ViewStyleProp, web} from '#/alf'
+import {Button} from '#/components/Button'
+import * as FeedCard from '#/components/FeedCard'
+import {ArrowRight_Stroke2_Corner0_Rounded as Arrow} from '#/components/icons/Arrow'
+import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Hashtag'
+import {PersonPlus_Stroke2_Corner0_Rounded as Person} from '#/components/icons/Person'
+import {InlineLinkText} from '#/components/Link'
+import * as ProfileCard from '#/components/ProfileCard'
+import {Text} from '#/components/Typography'
+
+function CardOuter({
+  children,
+  style,
+}: {children: React.ReactNode | React.ReactNode[]} & ViewStyleProp) {
+  const t = useTheme()
+  const {gtMobile} = useBreakpoints()
+  return (
+    <View
+      style={[
+        a.w_full,
+        a.p_lg,
+        a.rounded_md,
+        a.border,
+        t.atoms.bg,
+        t.atoms.border_contrast_low,
+        !gtMobile && {
+          width: 300,
+        },
+        style,
+      ]}>
+      {children}
+    </View>
+  )
+}
+
+export function SuggestedFollowPlaceholder() {
+  const t = useTheme()
+  return (
+    <CardOuter style={[a.gap_sm, t.atoms.border_contrast_low]}>
+      <ProfileCard.Header>
+        <ProfileCard.AvatarPlaceholder />
+      </ProfileCard.Header>
+
+      <View style={[a.py_xs]}>
+        <ProfileCard.NameAndHandlePlaceholder />
+      </View>
+
+      <ProfileCard.DescriptionPlaceholder />
+    </CardOuter>
+  )
+}
+
+export function SuggestedFeedsCardPlaceholder() {
+  const t = useTheme()
+  return (
+    <CardOuter style={[a.gap_sm, t.atoms.border_contrast_low]}>
+      <FeedCard.Header>
+        <FeedCard.AvatarPlaceholder />
+        <FeedCard.TitleAndBylinePlaceholder creator />
+      </FeedCard.Header>
+
+      <FeedCard.DescriptionPlaceholder />
+    </CardOuter>
+  )
+}
+
+export function SuggestedFollows() {
+  const t = useTheme()
+  const {_} = useLingui()
+  const {
+    isLoading: isSuggestionsLoading,
+    data,
+    error,
+  } = useSuggestedFollowsQuery({limit: 6})
+  const moderationOpts = useModerationOpts()
+  const navigation = useNavigation<NavigationProp>()
+  const {gtMobile} = useBreakpoints()
+  const isLoading = isSuggestionsLoading || !moderationOpts
+  const maxLength = gtMobile ? 4 : 6
+
+  const profiles: AppBskyActorDefs.ProfileViewBasic[] = []
+  if (data) {
+    // Currently the responses contain duplicate items.
+    // Needs to be fixed on backend, but let's dedupe to be safe.
+    let seen = new Set()
+    for (const page of data.pages) {
+      for (const actor of page.actors) {
+        if (!seen.has(actor.did)) {
+          seen.add(actor.did)
+          profiles.push(actor)
+        }
+      }
+    }
+  }
+
+  const content = isLoading ? (
+    Array(maxLength)
+      .fill(0)
+      .map((_, i) => (
+        <View
+          key={i}
+          style={[gtMobile && web([a.flex_0, {width: 'calc(50% - 6px)'}])]}>
+          <SuggestedFollowPlaceholder />
+        </View>
+      ))
+  ) : error || !profiles.length ? null : (
+    <>
+      {profiles.slice(0, maxLength).map(profile => (
+        <ProfileCard.Link
+          key={profile.did}
+          did={profile.handle}
+          onPress={() => {
+            logEvent('feed:interstitial:profileCard:press', {})
+          }}
+          style={[
+            a.flex_1,
+            gtMobile && web([a.flex_0, {width: 'calc(50% - 6px)'}]),
+          ]}>
+          {({hovered, pressed}) => (
+            <CardOuter
+              style={[
+                a.flex_1,
+                (hovered || pressed) && t.atoms.border_contrast_high,
+              ]}>
+              <ProfileCard.Outer>
+                <ProfileCard.Header>
+                  <ProfileCard.Avatar
+                    profile={profile}
+                    moderationOpts={moderationOpts}
+                  />
+                  <ProfileCard.NameAndHandle
+                    profile={profile}
+                    moderationOpts={moderationOpts}
+                  />
+                  <ProfileCard.FollowButton
+                    profile={profile}
+                    logContext="FeedInterstitial"
+                    color="secondary_inverted"
+                    shape="round"
+                  />
+                </ProfileCard.Header>
+                <ProfileCard.Description profile={profile} />
+              </ProfileCard.Outer>
+            </CardOuter>
+          )}
+        </ProfileCard.Link>
+      ))}
+    </>
+  )
+
+  return error ? null : (
+    <View
+      style={[a.border_t, t.atoms.border_contrast_low, t.atoms.bg_contrast_25]}>
+      <View style={[a.pt_2xl, a.px_lg, a.flex_row, a.pb_xs]}>
+        <Text
+          style={[
+            a.flex_1,
+            a.text_lg,
+            a.font_bold,
+            t.atoms.text_contrast_medium,
+          ]}>
+          <Trans>Suggested for you</Trans>
+        </Text>
+        <Person fill={t.atoms.text_contrast_low.color} />
+      </View>
+
+      {gtMobile ? (
+        <View style={[a.flex_1, a.px_lg, a.pt_md, a.pb_xl, a.gap_md]}>
+          <View style={[a.flex_1, a.flex_row, a.flex_wrap, a.gap_md]}>
+            {content}
+          </View>
+
+          <View
+            style={[
+              a.flex_row,
+              a.justify_end,
+              a.align_center,
+              a.pt_xs,
+              a.gap_md,
+            ]}>
+            <InlineLinkText to="/search" style={[t.atoms.text_contrast_medium]}>
+              <Trans>Browse more suggestions</Trans>
+            </InlineLinkText>
+            <Arrow size="sm" fill={t.atoms.text_contrast_medium.color} />
+          </View>
+        </View>
+      ) : (
+        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+          <View style={[a.px_lg, a.pt_md, a.pb_xl, a.flex_row, a.gap_md]}>
+            {content}
+
+            <Button
+              label={_(msg`Browse more accounts on our explore page`)}
+              onPress={() => {
+                navigation.navigate('SearchTab')
+              }}>
+              <CardOuter style={[a.flex_1, {borderWidth: 0}]}>
+                <View style={[a.flex_1, a.justify_center]}>
+                  <View style={[a.flex_row, a.px_lg]}>
+                    <Text style={[a.pr_xl, a.flex_1, a.leading_snug]}>
+                      <Trans>Browse more suggestions on our explore page</Trans>
+                    </Text>
+
+                    <Arrow size="xl" />
+                  </View>
+                </View>
+              </CardOuter>
+            </Button>
+          </View>
+        </ScrollView>
+      )}
+    </View>
+  )
+}
+
+export function SuggestedFeeds() {
+  const numFeedsToDisplay = 3
+  const t = useTheme()
+  const {_} = useLingui()
+  const {data, isLoading, error} = useGetPopularFeedsQuery({
+    limit: numFeedsToDisplay,
+  })
+  const navigation = useNavigation<NavigationProp>()
+  const {gtMobile} = useBreakpoints()
+
+  const feeds = React.useMemo(() => {
+    const items: AppBskyFeedDefs.GeneratorView[] = []
+
+    if (!data) return items
+
+    for (const page of data.pages) {
+      for (const feed of page.feeds) {
+        items.push(feed)
+      }
+    }
+
+    return items
+  }, [data])
+
+  const content = isLoading ? (
+    Array(numFeedsToDisplay)
+      .fill(0)
+      .map((_, i) => <SuggestedFeedsCardPlaceholder key={i} />)
+  ) : error || !feeds ? null : (
+    <>
+      {feeds.slice(0, numFeedsToDisplay).map(feed => (
+        <FeedCard.Link
+          key={feed.uri}
+          view={feed}
+          onPress={() => {
+            logEvent('feed:interstitial:feedCard:press', {})
+          }}>
+          {({hovered, pressed}) => (
+            <CardOuter
+              style={[
+                a.flex_1,
+                (hovered || pressed) && t.atoms.border_contrast_high,
+              ]}>
+              <FeedCard.Outer>
+                <FeedCard.Header>
+                  <FeedCard.Avatar src={feed.avatar} />
+                  <FeedCard.TitleAndByline
+                    title={feed.displayName}
+                    creator={feed.creator}
+                  />
+                </FeedCard.Header>
+                <FeedCard.Description
+                  description={feed.description}
+                  numberOfLines={3}
+                />
+              </FeedCard.Outer>
+            </CardOuter>
+          )}
+        </FeedCard.Link>
+      ))}
+    </>
+  )
+
+  return error ? null : (
+    <View
+      style={[a.border_t, t.atoms.border_contrast_low, t.atoms.bg_contrast_25]}>
+      <View style={[a.pt_2xl, a.px_lg, a.flex_row, a.pb_xs]}>
+        <Text
+          style={[
+            a.flex_1,
+            a.text_lg,
+            a.font_bold,
+            t.atoms.text_contrast_medium,
+          ]}>
+          <Trans>Some other feeds you might like</Trans>
+        </Text>
+        <Hashtag fill={t.atoms.text_contrast_low.color} />
+      </View>
+
+      {gtMobile ? (
+        <View style={[a.flex_1, a.px_lg, a.pt_md, a.pb_xl, a.gap_md]}>
+          {content}
+
+          <View
+            style={[
+              a.flex_row,
+              a.justify_end,
+              a.align_center,
+              a.pt_xs,
+              a.gap_md,
+            ]}>
+            <InlineLinkText to="/search" style={[t.atoms.text_contrast_medium]}>
+              <Trans>Browse more suggestions</Trans>
+            </InlineLinkText>
+            <Arrow size="sm" fill={t.atoms.text_contrast_medium.color} />
+          </View>
+        </View>
+      ) : (
+        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+          <View style={[a.px_lg, a.pt_md, a.pb_xl, a.flex_row, a.gap_md]}>
+            {content}
+
+            <Button
+              label={_(msg`Browse more feeds on our explore page`)}
+              onPress={() => {
+                navigation.navigate('SearchTab')
+              }}
+              style={[a.flex_col]}>
+              <CardOuter style={[a.flex_1]}>
+                <View style={[a.flex_1, a.justify_center]}>
+                  <View style={[a.flex_row, a.px_lg]}>
+                    <Text style={[a.pr_xl, a.flex_1, a.leading_snug]}>
+                      <Trans>Browse more suggestions on our explore page</Trans>
+                    </Text>
+
+                    <Arrow size="xl" />
+                  </View>
+                </View>
+              </CardOuter>
+            </Button>
+          </View>
+        </ScrollView>
+      )}
+    </View>
+  )
+}

src/components/ProfileCard.tsx

···
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {LogEvents} from '#/lib/statsig/statsig'
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {useProfileFollowMutationQueue} from '#/state/queries/profile'
 import {sanitizeHandle} from 'lib/strings/handles'
···
 }: {
   children: React.ReactElement | React.ReactElement[]
 }) {
-  return <View style={[a.flex_1, a.gap_xs]}>{children}</View>
+  return <View style={[a.w_full, a.flex_1, a.gap_xs]}>{children}</View>
 }
 
 export function Header({
···
 }: {
   children: React.ReactElement | React.ReactElement[]
 }) {
-  return <View style={[a.flex_row, a.gap_sm]}>{children}</View>
+  return <View style={[a.flex_row, a.align_center, a.gap_sm]}>{children}</View>
 }
 
-export function Link({did, children}: {did: string} & Omit<LinkProps, 'to'>) {
+export function Link({
+  did,
+  children,
+  style,
+  ...rest
+}: {did: string} & Omit<LinkProps, 'to'>) {
   return (
     <InternalLink
       to={{
         screen: 'Profile',
         params: {name: did},
-      }}>
+      }}
+      style={[a.flex_col, style]}
+      {...rest}>
       {children}
     </InternalLink>
   )
···
   )
 }
 
+export function AvatarPlaceholder() {
+  const t = useTheme()
+  return (
+    <View
+      style={[
+        a.rounded_full,
+        t.atoms.bg_contrast_50,
+        {
+          width: 42,
+          height: 42,
+        },
+      ]}
+    />
+  )
+}
+
 export function NameAndHandle({
   profile,
   moderationOpts,
···
   )
 }
 
+export function NameAndHandlePlaceholder() {
+  const t = useTheme()
+
+  return (
+    <View style={[a.flex_1, a.gap_xs]}>
+      <View
+        style={[
+          a.rounded_xs,
+          t.atoms.bg_contrast_50,
+          {
+            width: '60%',
+            height: 14,
+          },
+        ]}
+      />
+
+      <View
+        style={[
+          a.rounded_xs,
+          t.atoms.bg_contrast_50,
+          {
+            width: '40%',
+            height: 10,
+          },
+        ]}
+      />
+    </View>
+  )
+}
+
 export function Description({
   profile: profileUnshadowed,
 }: {
···
   )
 }
 
+export function DescriptionPlaceholder() {
+  const t = useTheme()
+  return (
+    <View style={[a.gap_xs]}>
+      <View
+        style={[a.rounded_xs, a.w_full, t.atoms.bg_contrast_50, {height: 12}]}
+      />
+      <View
+        style={[a.rounded_xs, a.w_full, t.atoms.bg_contrast_50, {height: 12}]}
+      />
+      <View
+        style={[
+          a.rounded_xs,
+          a.w_full,
+          t.atoms.bg_contrast_50,
+          {height: 12, width: 100},
+        ]}
+      />
+    </View>
+  )
+}
+
 export type FollowButtonProps = {
   profile: AppBskyActorDefs.ProfileViewBasic
-  logContext: 'ProfileCard' | 'StarterPackProfilesList'
+  logContext: LogEvents['profile:follow']['logContext'] &
+    LogEvents['profile:unfollow']['logContext']
 } & Partial<ButtonProps>
 
 export function FollowButton(props: FollowButtonProps) {

src/components/RichText.tsx

···
 
 const WORD_WRAP = {wordWrap: 1}
 
+export type RichTextProps = TextStyleProp &
+  Pick<TextProps, 'selectable'> & {
+    value: RichTextAPI | string
+    testID?: string
+    numberOfLines?: number
+    disableLinks?: boolean
+    enableTags?: boolean
+    authorHandle?: string
+    onLinkPress?: LinkProps['onPress']
+    interactiveStyle?: TextStyle
+    emojiMultiplier?: number
+  }
+
 export function RichText({
   testID,
   value,
···
   onLinkPress,
   interactiveStyle,
   emojiMultiplier = 1.85,
-}: TextStyleProp &
-  Pick<TextProps, 'selectable'> & {
-    value: RichTextAPI | string
-    testID?: string
-    numberOfLines?: number
-    disableLinks?: boolean
-    enableTags?: boolean
-    authorHandle?: string
-    onLinkPress?: LinkProps['onPress']
-    interactiveStyle?: TextStyle
-    emojiMultiplier?: number
-  }) {
+}: RichTextProps) {
   const richText = React.useMemo(
     () =>
       value instanceof RichTextAPI ? value : new RichTextAPI({text: value}),

src/components/icons/Arrow.tsx

···
   path: 'M3 12a1 1 0 0 1 .293-.707l6-6a1 1 0 0 1 1.414 1.414L6.414 11H20a1 1 0 1 1 0 2H6.414l4.293 4.293a1 1 0 0 1-1.414 1.414l-6-6A1 1 0 0 1 3 12Z',
 })
 
+export const ArrowRight_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M21 12a1 1 0 0 1-.293.707l-6 6a1 1 0 0 1-1.414-1.414L17.586 13H4a1 1 0 1 1 0-2h13.586l-4.293-4.293a1 1 0 0 1 1.414-1.414l6 6A1 1 0 0 1 21 12Z',
+})
+
 export const ArrowBottom_Stroke2_Corner0_Rounded = createSinglePathSVG({
   path: 'M12 21a1 1 0 0 1-.707-.293l-6-6a1 1 0 1 1 1.414-1.414L11 17.586V4a1 1 0 1 1 2 0v13.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-6 6A1 1 0 0 1 12 21Z',
 })

src/lib/statsig/events.ts

···
       | 'ProfileHoverCard'
       | 'AvatarButton'
       | 'StarterPackProfilesList'
+      | 'FeedInterstitial'
   }
   'profile:unfollow': {
     logContext:
···
       | 'Chat'
       | 'AvatarButton'
       | 'StarterPackProfilesList'
+      | 'FeedInterstitial'
   }
   'chat:create': {
     logContext: 'ProfileHeader' | 'NewChatDialog' | 'SendViaChatDialog'
···
   'starterPack:opened': {
     starterPack: string
   }
+
+  'feed:interstitial:profileCard:press': {}
+  'feed:interstitial:feedCard:press': {}
 
   'test:all:always': {}
   'test:all:sometimes': {}

src/view/screens/Feeds.tsx

···
   const t = useTheme()
 
   const commonStyle = [
+    a.w_full,
     a.flex_1,
     a.px_lg,
     a.py_md,

src/view/screens/Storybook/Buttons.tsx

···
       <H1>Buttons</H1>
 
       <View style={[a.flex_row, a.flex_wrap, a.gap_md, a.align_start]}>
-        {['primary', 'secondary', 'negative'].map(color => (
+        {['primary', 'secondary', 'secondary_inverted'].map(color => (
           <View key={color} style={[a.gap_md, a.align_start]}>
             {['solid', 'outline', 'ghost'].map(variant => (
               <React.Fragment key={variant}>