add tab bar, adjust layout

src/screens/Onboarding/Layout.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {useState} from 'react'
 import {ScrollView, View} from 'react-native'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {msg} from '@lingui/macro'
@@ -12,6 +12,7 @@ import {
   flatten,
   native,
   type TextStyleProp,
+  tokens,
   useBreakpoints,
   useTheme,
   web,
@@ -46,6 +47,8 @@ export function Layout({children}: React.PropsWithChildren<{}>) {
   const paddingTop = gtMobile ? a.py_5xl : a.py_lg
   const dialogLabel = _(msg`Set up your account`)
 
+  const [footerHeight, setFooterHeight] = useState(0)
+
   return (
     <View
       aria-modal
@@ -109,10 +112,16 @@ export function Layout({children}: React.PropsWithChildren<{}>) {
         ref={scrollview}
         style={[a.h_full, a.w_full, {paddingTop: insets.top}]}
         contentContainerStyle={{borderWidth: 0}}
+        scrollIndicatorInsets={{bottom: footerHeight - insets.bottom}}
         // @ts-ignore web only --prf
         dataSet={{'stable-gutters': 1}}>
         <View
-          style={[a.flex_row, a.justify_center, gtMobile ? a.px_5xl : a.px_xl]}>
+          style={[
+            a.flex_row,
+            a.justify_center,
+            gtMobile ? a.px_5xl : a.px_xl,
+            a.debug,
+          ]}>
           <View style={[a.flex_1, {maxWidth: COL_WIDTH}]}>
             <View style={[a.w_full, a.align_center, paddingTop]}>
               <View
@@ -124,7 +133,7 @@ export function Layout({children}: React.PropsWithChildren<{}>) {
                 ]}>
                 {Array(state.totalSteps)
                   .fill(0)
-                  .map((_, i) => (
+                  .map((__, i) => (
                     <View
                       key={i}
                       style={[
@@ -149,12 +158,13 @@ export function Layout({children}: React.PropsWithChildren<{}>) {
               {children}
             </View>
 
-            <View style={{height: 400}} />
+            <View style={{height: 100 + footerHeight}} />
           </View>
         </View>
       </ScrollView>
 
       <View
+        onLayout={evt => setFooterHeight(evt.nativeEvent.layout.height)}
         style={[
           // @ts-ignore web only -prf
           isWeb ? a.fixed : a.absolute,
@@ -167,8 +177,8 @@ export function Layout({children}: React.PropsWithChildren<{}>) {
           isWeb
             ? a.py_2xl
             : {
-                paddingTop: a.pt_lg.paddingTop,
+                paddingTop: tokens.space.md,
-                paddingBottom: insets.bottom + 10,
+                paddingBottom: insets.bottom + tokens.space.md,
               },
         ]}>
         <View

src/screens/Onboarding/StepSuggestedAccounts/index.tsx

@@ -5,30 +5,26 @@ import {useLingui} from '@lingui/react'
 
 import {logger} from '#/logger'
 import {useOnboardingDispatch} from '#/state/shell'
-import {
+import {OnboardingControls} from '#/screens/Onboarding/Layout'
-  DescriptionText,
-  OnboardingControls,
-  TitleText,
-} from '#/screens/Onboarding/Layout'
 import {Context} from '#/screens/Onboarding/state'
-import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {SuggestedAccountsTabBar} from '#/screens/Search/modules/ExploreSuggestedAccounts'
+import {atoms as a, useBreakpoints} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
-import {IconCircle} from '#/components/IconCircle'
 import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as ArrowRotateCounterClockwise} from '#/components/icons/ArrowRotateCounterClockwise'
 import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
-import {EmojiSad_Stroke2_Corner0_Rounded as EmojiSad} from '#/components/icons/Emoji'
-import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Hashtag'
 import {Loader} from '#/components/Loader'
+import {Text} from '#/components/Typography'
 
 export function StepSuggestedAccounts() {
   const {_} = useLingui()
-  const t = useTheme()
   const {gtMobile} = useBreakpoints()
 
   const {dispatch} = useContext(Context)
   const [saving, setSaving] = useState(false)
   const onboardDispatch = useOnboardingDispatch()
 
+  const [selectedInterest, setSelectedInterest] = useState<string | null>(null)
+
   const saveInterests = useCallback(async () => {
     setSaving(true)
 
@@ -48,46 +44,17 @@ export function StepSuggestedAccounts() {
 
   const isError = false
 
-  const title = isError ? (
-    <Trans>Oh no! Something went wrong.</Trans>
-  ) : (
-    <Trans>Suggested Accounts</Trans>
-  )
-  const description = isError ? (
-    <Trans>
-      We weren't able to connect. Please try again to continue setting up your
-      account. If it continues to fail, you can skip this flow.
-    </Trans>
-  ) : (
-    <Trans>We'll use this to help customize your experience.</Trans>
-  )
-
   return (
     <View style={[a.align_start]} testID="onboardingInterests">
-      <IconCircle
+      <Text style={[a.font_heavy, a.text_3xl]}>
-        icon={isError ? EmojiSad : Hashtag}
+        <Trans>Suggested Accounts</Trans>
-        style={[
+      </Text>
-          a.mb_2xl,
+
-          isError
+      <SuggestedAccountsTabBar
-            ? {
+        selectedInterest={selectedInterest}
-                backgroundColor: t.palette.negative_50,
+        onSelectInterest={setSelectedInterest}
-              }
-            : {},
-        ]}
-        iconStyle={[
-          isError
-            ? {
-                color: t.palette.negative_900,
-              }
-            : {},
-        ]}
       />
 
-      <TitleText>{title}</TitleText>
-      <DescriptionText>{description}</DescriptionText>
-
-      <View style={[a.w_full, a.pt_2xl]} />
-
       <OnboardingControls.Portal>
         {isError ? (
           <View style={[a.gap_md, gtMobile ? a.flex_row : a.flex_col]}>