Sloppy feeds

src/components/FeedCard.tsx

@@ -30,7 +30,7 @@ import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash'
 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 =
@@ -89,7 +89,8 @@ export function Link({
         } else {
           precacheList(queryClient, view)
         }
-      }}>
+      }}
+      style={[a.flex_col]}>
       {children}
     </InternalLink>
   )
@@ -100,11 +101,7 @@ export function Outer({children}: {children: React.ReactNode}) {
 }
 
 export function Header({children}: {children: React.ReactNode}) {
-  return (
+  return <View style={[a.flex_row, a.align_center, a.gap_md]}>{children}</View>
-    <View style={[a.flex_1, a.flex_row, a.align_center, a.gap_md]}>
-      {children}
-    </View>
-  )
 }
 
 export type AvatarProps = {src: string | undefined; size?: number}
@@ -198,7 +195,10 @@ export function TitleAndBylinePlaceholder({creator}: {creator?: boolean}) {
   )
 }
 
-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 || ''})
@@ -206,7 +206,29 @@ export function Description({description}: {description?: string}) {
     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/FeedSuggestedFollows/index.tsx

@@ -156,25 +156,26 @@ export function FeedSuggestedFollowsCards() {
     <ScrollView horizontal showsHorizontalScrollIndicator={false}>
       <View style={[a.px_lg, a.pt_md, a.pb_xl, a.flex_row, a.gap_md]}>
         {content}
-      </View>
 
-      <Button
+        <Button
-        label={_(msg`Browse more accounts on our explore page`)}
+          label={_(msg`Browse more accounts on our explore page`)}
-        onPress={() => {
+          onPress={() => {
-          navigation.navigate('SearchTab')
+            navigation.navigate('SearchTab')
-        }}>
+          }}>
-        <CardOuter style={[a.flex_1, t.atoms.bg_contrast_25, {borderWidth: 0}]}>
+          <CardOuter
-          <View style={[a.flex_1, a.justify_center]}>
+            style={[a.flex_1, t.atoms.bg_contrast_25, {borderWidth: 0}]}>
-            <View style={[a.flex_row, a.px_lg]}>
+            <View style={[a.flex_1, a.justify_center]}>
-              <Text style={[a.pr_xl, a.flex_1, a.leading_snug]}>
+              <View style={[a.flex_row, a.px_lg]}>
-                <Trans>Browse more suggestions on our explore page</Trans>
+                <Text style={[a.pr_xl, a.flex_1, a.leading_snug]}>
-              </Text>
+                  <Trans>Browse more suggestions on our explore page</Trans>
+                </Text>
 
-              <Arrow size="xl" />
+                <Arrow size="xl" />
+              </View>
             </View>
-          </View>
+          </CardOuter>
-        </CardOuter>
+        </Button>
-      </Button>
+      </View>
     </ScrollView>
   )
 }

src/components/RichText.tsx

@@ -17,6 +17,19 @@ import {Text, TextProps} from '#/components/Typography'
 
 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,
@@ -29,18 +42,7 @@ export function RichText({
   onLinkPress,
   interactiveStyle,
   emojiMultiplier = 1.85,
-}: TextStyleProp &
+}: RichTextProps) {
-  Pick<TextProps, 'selectable'> & {
-    value: RichTextAPI | string
-    testID?: string
-    numberOfLines?: number
-    disableLinks?: boolean
-    enableTags?: boolean
-    authorHandle?: string
-    onLinkPress?: LinkProps['onPress']
-    interactiveStyle?: TextStyle
-    emojiMultiplier?: number
-  }) {
   const richText = React.useMemo(
     () =>
       value instanceof RichTextAPI ? value : new RichTextAPI({text: value}),

src/components/feedInterstitials/SuggestedFeeds.tsx

@@ -0,0 +1,175 @@
+import React from 'react'
+import {View} from 'react-native'
+import {ScrollView} from 'react-native-gesture-handler'
+import {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 {useModerationOpts} from '#/state/preferences/moderation-opts'
+import {useGetPopularFeedsQuery} from '#/state/queries/feed'
+import {atoms as a, useBreakpoints, useTheme, ViewStyleProp} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import * as FeedCard from '#/components/FeedCard'
+import {ArrowRight_Stroke2_Corner0_Rounded as Arrow} from '#/components/icons/Arrow'
+import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as Refresh} from '#/components/icons/ArrowRotateCounterClockwise'
+import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
+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_contrast_25,
+        !gtMobile && {
+          width: 300,
+        },
+        {
+          borderColor: t.atoms.bg_contrast_25.backgroundColor,
+        },
+        style,
+      ]}>
+      {children}
+    </View>
+  )
+}
+
+export function SuggestedFollowCardSkeleton() {
+  const t = useTheme()
+  return (
+    <CardOuter style={[a.gap_sm, t.atoms.border_contrast_low]}>
+      <FeedCard.Header>
+        <FeedCard.AvatarPlaceholder />
+        <FeedCard.TitleAndBylinePlaceholder />
+      </FeedCard.Header>
+
+      <FeedCard.DescriptionPlaceholder />
+    </CardOuter>
+  )
+}
+
+export function ErrorState({retry}: {retry: () => void}) {
+  const t = useTheme()
+  return (
+    <>
+      <CardOuter>
+        <CircleInfo size="lg" fill={t.palette.negative_400} />
+        <Text style={[a.font_bold]}>Whoops, something went wrong :(</Text>
+        <Button
+          label={'Retry'}
+          size="small"
+          variant="ghost"
+          color="secondary"
+          onPress={retry}>
+          <ButtonText>Retry</ButtonText>
+          <ButtonIcon icon={Refresh} position="right" />
+        </Button>
+      </CardOuter>
+
+      <SuggestedFollowCardSkeleton />
+      <SuggestedFollowCardSkeleton />
+    </>
+  )
+}
+
+export function SuggestedFeedsCards() {
+  const t = useTheme()
+  const {_} = useLingui()
+  const {
+    data,
+    isLoading: isLoadingFeeds,
+    error,
+    refetch,
+  } = useGetPopularFeedsQuery({limit: 3})
+  const moderationOpts = useModerationOpts()
+  const navigation = useNavigation<NavigationProp>()
+  const {gtMobile} = useBreakpoints()
+  const isLoading = isLoadingFeeds || !moderationOpts
+
+  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(3)
+      .fill(0)
+      .map((_, i) => <SuggestedFollowCardSkeleton key={i} />)
+  ) : error || !feeds ? (
+    <ErrorState retry={refetch} />
+  ) : (
+    <>
+      {feeds.map(feed => (
+        <FeedCard.Link key={feed.uri} type="feed" view={feed}>
+          <CardOuter style={[a.flex_1]}>
+            <FeedCard.Outer>
+              <FeedCard.Header>
+                <FeedCard.Avatar src={feed.avatar} />
+                <FeedCard.TitleAndByline
+                  title={feed.displayName}
+                  creator={feed.creator}
+                  type="feed"
+                />
+                <FeedCard.Action pin type="feed" uri={feed.uri} />
+              </FeedCard.Header>
+              <FeedCard.Description
+                description={feed.description}
+                numberOfLines={3}
+              />
+            </FeedCard.Outer>
+          </CardOuter>
+        </FeedCard.Link>
+      ))}
+    </>
+  )
+
+  return gtMobile ? (
+    <View style={[a.flex_1, a.px_lg, a.pt_md, a.pb_xl, a.gap_md]}>
+      {content}
+    </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, t.atoms.bg_contrast_25, {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>
+  )
+}

src/screens/Home/EmptyTimeline.tsx

@@ -5,19 +5,23 @@ import {useLingui} from '@lingui/react'
 
 import {emitSoftReset} from '#/state/events'
 import {CenteredView} from '#/view/com/util/Views'
-import {atoms as a} from '#/alf'
+import {atoms as a, useBreakpoints} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {Divider} from '#/components/Divider'
+import {SuggestedFeedsCards} from '#/components/feedInterstitials/SuggestedFeeds'
 import {FeedSuggestedFollowsCards} from '#/components/FeedSuggestedFollows'
 import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as Refresh} from '#/components/icons/ArrowRotateCounterClockwise'
 import {Text} from '#/components/Typography'
 
 export function EmptyTimeline() {
   const {_} = useLingui()
+  const {gtMobile} = useBreakpoints()
+
+  const sectionPadding = gtMobile ? a.pt_5xl : a.pt_3xl
 
   return (
-    <CenteredView sideBorders style={[a.h_full_vh]}>
+    <CenteredView sideBorders style={[a.flex_1, a.pb_5xl]}>
-      <View style={[a.px_lg, a.pt_3xl]}>
+      <View style={[a.px_lg, sectionPadding]}>
         <Text style={[a.text_2xl, a.font_bold, a.mb_md]}>
           <Trans>Your Following feed is empty :(</Trans>
         </Text>
@@ -60,6 +64,16 @@ export function EmptyTimeline() {
           </Button>
         </View>
       </View>
+
+      <View style={[a.px_lg, sectionPadding]}>
+        <Text style={[a.text_2xl, a.font_bold, a.mb_sm]}>
+          <Trans>You can also explore new feeds</Trans>
+        </Text>
+      </View>
+
+      <View style={[a.flex_row, a.align_start]}>
+        <SuggestedFeedsCards />
+      </View>
     </CenteredView>
   )
 }