From 08fe7fb08451d4d286f5013d9ad14b4e32afa50b Mon Sep 17 00:00:00 2001
From: Ansh Nanda <anshnanda10@gmail.com>
Date: Fri, 25 Aug 2023 14:36:10 -0700
Subject: create onboarding model

---
 src/state/models/discovery/onboarding.ts | 63 ++++++++++++++++++++++++++++++++
 src/state/models/root-store.ts           |  6 +++
 2 files changed, 69 insertions(+)
 create mode 100644 src/state/models/discovery/onboarding.ts

(limited to 'src')

diff --git a/src/state/models/discovery/onboarding.ts b/src/state/models/discovery/onboarding.ts
new file mode 100644
index 000000000..c75c49d0b
--- /dev/null
+++ b/src/state/models/discovery/onboarding.ts
@@ -0,0 +1,63 @@
+import {makeAutoObservable} from 'mobx'
+import {RootStoreModel} from '../root-store'
+import {NavigationProp} from 'lib/routes/types'
+import {hasProp} from 'lib/type-guards'
+
+enum OnboardingStep {
+  WELCOME = 'WELCOME',
+  BROWSE_FEEDS = 'BROWSE_FEEDS',
+  COMPLETE = 'COMPLETE',
+}
+
+export class OnboardingModel {
+  // state
+  step: OnboardingStep
+
+  constructor(public rootStore: RootStoreModel) {
+    makeAutoObservable(this, {rootStore: false})
+    this.step = OnboardingStep.WELCOME
+  }
+
+  serialize() {
+    return {
+      step: this.step,
+    }
+  }
+
+  hydrate(v: unknown) {
+    if (typeof v === 'object' && v !== null) {
+      if (hasProp(v, 'step') && typeof v.step === 'string') {
+        this.step = v.step as OnboardingStep
+      }
+    }
+  }
+
+  nextStep(navigation?: NavigationProp) {
+    switch (this.step) {
+      case OnboardingStep.WELCOME:
+        this.step = OnboardingStep.COMPLETE
+        break
+      case OnboardingStep.BROWSE_FEEDS:
+        this.step = OnboardingStep.COMPLETE
+        break
+      case OnboardingStep.COMPLETE:
+        if (!navigation) {
+          throw new Error('Navigation prop required to complete onboarding')
+        }
+        this.complete(navigation)
+        break
+    }
+  }
+
+  complete(navigation: NavigationProp) {
+    navigation.navigate('Home')
+  }
+
+  reset() {
+    this.step = OnboardingStep.WELCOME
+  }
+
+  get isComplete() {
+    return this.step === OnboardingStep.COMPLETE
+  }
+}
diff --git a/src/state/models/root-store.ts b/src/state/models/root-store.ts
index 1d6d3a0d0..6204e0d10 100644
--- a/src/state/models/root-store.ts
+++ b/src/state/models/root-store.ts
@@ -27,6 +27,7 @@ import {reset as resetNavigation} from '../../Navigation'
 // remove after backend testing finishes
 // -prf
 import {applyDebugHeader} from 'lib/api/debug-appview-proxy-header'
+import {OnboardingModel} from './discovery/onboarding'
 
 export const appInfo = z.object({
   build: z.string(),
@@ -44,6 +45,7 @@ export class RootStoreModel {
   shell = new ShellUiModel(this)
   preferences = new PreferencesModel(this)
   me = new MeModel(this)
+  onboarding = new OnboardingModel(this)
   invitedUsers = new InvitedUsers(this)
   handleResolutions = new HandleResolutionsCache()
   profiles = new ProfilesCache(this)
@@ -70,6 +72,7 @@ export class RootStoreModel {
       appInfo: this.appInfo,
       session: this.session.serialize(),
       me: this.me.serialize(),
+      onboarding: this.onboarding.serialize(),
       shell: this.shell.serialize(),
       preferences: this.preferences.serialize(),
       invitedUsers: this.invitedUsers.serialize(),
@@ -88,6 +91,9 @@ export class RootStoreModel {
       if (hasProp(v, 'me')) {
         this.me.hydrate(v.me)
       }
+      if (hasProp(v, 'onboarding')) {
+        this.onboarding.hydrate(v.onboarding)
+      }
       if (hasProp(v, 'session')) {
         this.session.hydrate(v.session)
       }
-- 
cgit 1.4.1


From edfd326069319c80f4825eb33a74295ccf667d71 Mon Sep 17 00:00:00 2001
From: Ansh Nanda <anshnanda10@gmail.com>
Date: Mon, 28 Aug 2023 13:37:44 -0700
Subject: move onboarding to screens

---
 src/Navigation.tsx                                | 15 ++++++
 src/lib/routes/types.ts                           |  5 ++
 src/state/models/discovery/onboarding.ts          | 58 ++++++++++++--------
 src/view/com/auth/onboarding/Onboarding.tsx       | 66 -----------------------
 src/view/com/auth/onboarding/RecommendedFeeds.tsx | 55 +++++++++++++++++++
 src/view/com/auth/onboarding/Welcome.tsx          | 19 ++++++-
 src/view/com/modals/Modal.tsx                     |  4 --
 src/view/com/modals/Modal.web.tsx                 |  3 --
 src/view/com/modals/OnboardingModal.tsx           |  8 ---
 src/view/screens/Home.tsx                         |  8 ++-
 src/view/screens/Settings.tsx                     | 15 ++++++
 11 files changed, 149 insertions(+), 107 deletions(-)
 delete mode 100644 src/view/com/auth/onboarding/Onboarding.tsx
 create mode 100644 src/view/com/auth/onboarding/RecommendedFeeds.tsx
 delete mode 100644 src/view/com/modals/OnboardingModal.tsx

(limited to 'src')

diff --git a/src/Navigation.tsx b/src/Navigation.tsx
index 48bab182d..6ea92e1d4 100644
--- a/src/Navigation.tsx
+++ b/src/Navigation.tsx
@@ -67,6 +67,8 @@ import {getRoutingInstrumentation} from 'lib/sentry'
 import {bskyTitle} from 'lib/strings/headings'
 import {JSX} from 'react/jsx-runtime'
 import {timeout} from 'lib/async/timeout'
+import {Welcome} from 'view/com/auth/onboarding/Welcome'
+import {RecommendedFeeds} from 'view/com/auth/onboarding/RecommendedFeeds'
 
 const navigationRef = createNavigationContainerRef<AllNavigatorParams>()
 
@@ -219,6 +221,18 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
         component={SavedFeeds}
         options={{title: title('Edit My Feeds')}}
       />
+      <Stack.Group
+        screenOptions={{
+          animation: 'slide_from_bottom',
+          presentation: 'modal',
+        }}>
+        <Stack.Screen
+          name="Welcome"
+          component={Welcome}
+          options={{title: title('Welcome')}}
+        />
+        <Stack.Screen name="RecommendedFeeds" component={RecommendedFeeds} />
+      </Stack.Group>
     </>
   )
 }
@@ -254,6 +268,7 @@ function TabsNavigator() {
 
 function HomeTabNavigator() {
   const contentStyle = useColorSchemeStyle(styles.bgLight, styles.bgDark)
+
   return (
     <HomeTab.Navigator
       screenOptions={{
diff --git a/src/lib/routes/types.ts b/src/lib/routes/types.ts
index 4eb5e29d2..633fa57a5 100644
--- a/src/lib/routes/types.ts
+++ b/src/lib/routes/types.ts
@@ -1,5 +1,6 @@
 import {NavigationState, PartialState} from '@react-navigation/native'
 import type {NativeStackNavigationProp} from '@react-navigation/native-stack'
+import {OnboardingScreenSteps} from 'state/models/discovery/onboarding'
 
 export type {NativeStackScreenProps} from '@react-navigation/native-stack'
 
@@ -29,6 +30,10 @@ export type CommonNavigatorParams = {
   CopyrightPolicy: undefined
   AppPasswords: undefined
   SavedFeeds: undefined
+} & OnboardingScreenParams
+
+export type OnboardingScreenParams = {
+  [K in keyof typeof OnboardingScreenSteps]: undefined
 }
 
 export type BottomTabNavigatorParams = CommonNavigatorParams & {
diff --git a/src/state/models/discovery/onboarding.ts b/src/state/models/discovery/onboarding.ts
index c75c49d0b..ddae235ca 100644
--- a/src/state/models/discovery/onboarding.ts
+++ b/src/state/models/discovery/onboarding.ts
@@ -3,19 +3,22 @@ import {RootStoreModel} from '../root-store'
 import {NavigationProp} from 'lib/routes/types'
 import {hasProp} from 'lib/type-guards'
 
-enum OnboardingStep {
-  WELCOME = 'WELCOME',
-  BROWSE_FEEDS = 'BROWSE_FEEDS',
-  COMPLETE = 'COMPLETE',
-}
+export const OnboardingScreenSteps = {
+  Welcome: 'Welcome',
+  RecommendedFeeds: 'RecommendedFeeds',
+  Complete: 'Complete',
+} as const
 
+type OnboardingStep =
+  (typeof OnboardingScreenSteps)[keyof typeof OnboardingScreenSteps]
+const OnboardingStepsArray = Object.values(OnboardingScreenSteps)
 export class OnboardingModel {
   // state
   step: OnboardingStep
 
   constructor(public rootStore: RootStoreModel) {
     makeAutoObservable(this, {rootStore: false})
-    this.step = OnboardingStep.WELCOME
+    this.step = 'Welcome'
   }
 
   serialize() {
@@ -26,26 +29,31 @@ export class OnboardingModel {
 
   hydrate(v: unknown) {
     if (typeof v === 'object' && v !== null) {
-      if (hasProp(v, 'step') && typeof v.step === 'string') {
+      if (
+        hasProp(v, 'step') &&
+        typeof v.step === 'string' &&
+        OnboardingStepsArray.includes(v.step as OnboardingStep)
+      ) {
         this.step = v.step as OnboardingStep
       }
     }
+    // if there is no valid state, we'll just reset
+    this.reset()
   }
 
-  nextStep(navigation?: NavigationProp) {
-    switch (this.step) {
-      case OnboardingStep.WELCOME:
-        this.step = OnboardingStep.COMPLETE
-        break
-      case OnboardingStep.BROWSE_FEEDS:
-        this.step = OnboardingStep.COMPLETE
-        break
-      case OnboardingStep.COMPLETE:
-        if (!navigation) {
-          throw new Error('Navigation prop required to complete onboarding')
-        }
-        this.complete(navigation)
-        break
+  nextScreenName() {
+    console.log('currentScreen', this.step)
+    if (this.step === 'Welcome') {
+      this.step = 'RecommendedFeeds'
+      return this.step
+    } else if (this.step === 'RecommendedFeeds') {
+      this.step = 'Complete'
+      return this.step
+    } else if (this.step === 'Complete') {
+      return 'Home'
+    } else {
+      // if we get here, we're in an invalid state, let's just go Home
+      return 'Home'
     }
   }
 
@@ -54,10 +62,14 @@ export class OnboardingModel {
   }
 
   reset() {
-    this.step = OnboardingStep.WELCOME
+    this.step = 'Welcome'
   }
 
   get isComplete() {
-    return this.step === OnboardingStep.COMPLETE
+    return this.step === 'Complete'
+  }
+
+  get isRemaining() {
+    return !this.isComplete
   }
 }
diff --git a/src/view/com/auth/onboarding/Onboarding.tsx b/src/view/com/auth/onboarding/Onboarding.tsx
deleted file mode 100644
index 28e4419d7..000000000
--- a/src/view/com/auth/onboarding/Onboarding.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from 'react'
-import {StyleSheet, View} from 'react-native'
-import {usePalette} from 'lib/hooks/usePalette'
-import {Welcome} from './Welcome'
-import {useStores} from 'state/index'
-import {track} from 'lib/analytics/analytics'
-
-enum OnboardingStep {
-  WELCOME = 'WELCOME',
-  // SELECT_INTERESTS = 'SELECT_INTERESTS',
-  COMPLETE = 'COMPLETE',
-}
-type OnboardingState = {
-  currentStep: OnboardingStep
-}
-type Action = {type: 'NEXT_STEP'}
-const initialState: OnboardingState = {
-  currentStep: OnboardingStep.WELCOME,
-}
-const reducer = (state: OnboardingState, action: Action): OnboardingState => {
-  switch (action.type) {
-    case 'NEXT_STEP':
-      switch (state.currentStep) {
-        case OnboardingStep.WELCOME:
-          track('Onboarding:Begin')
-          return {...state, currentStep: OnboardingStep.COMPLETE}
-        case OnboardingStep.COMPLETE:
-          track('Onboarding:Complete')
-          return state
-        default:
-          return state
-      }
-    default:
-      return state
-  }
-}
-
-export const Onboarding = () => {
-  const pal = usePalette('default')
-  const rootStore = useStores()
-  const [state, dispatch] = React.useReducer(reducer, initialState)
-  const next = React.useCallback(
-    () => dispatch({type: 'NEXT_STEP'}),
-    [dispatch],
-  )
-
-  React.useEffect(() => {
-    if (state.currentStep === OnboardingStep.COMPLETE) {
-      // navigate to home
-      rootStore.shell.closeModal()
-    }
-  }, [state.currentStep, rootStore.shell])
-
-  return (
-    <View style={[pal.view, styles.container]}>
-      {state.currentStep === OnboardingStep.WELCOME && <Welcome next={next} />}
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingHorizontal: 20,
-  },
-})
diff --git a/src/view/com/auth/onboarding/RecommendedFeeds.tsx b/src/view/com/auth/onboarding/RecommendedFeeds.tsx
new file mode 100644
index 000000000..d3aacb70b
--- /dev/null
+++ b/src/view/com/auth/onboarding/RecommendedFeeds.tsx
@@ -0,0 +1,55 @@
+import React from 'react'
+import {StyleSheet, View} from 'react-native'
+import {Text} from 'view/com/util/text/Text'
+import {usePalette} from 'lib/hooks/usePalette'
+import {Button} from 'view/com/util/forms/Button'
+import {NativeStackScreenProps} from '@react-navigation/native-stack'
+import {HomeTabNavigatorParams} from 'lib/routes/types'
+import {useStores} from 'state/index'
+import {observer} from 'mobx-react-lite'
+
+type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'RecommendedFeeds'>
+export const RecommendedFeeds = observer(({navigation}: Props) => {
+  const pal = usePalette('default')
+  const store = useStores()
+
+  const next = () => {
+    const nextScreenName = store.onboarding.nextScreenName()
+    console.log('nextScreenName', store.onboarding.nextScreenName())
+    if (nextScreenName) {
+      navigation.navigate(nextScreenName)
+    }
+  }
+
+  return (
+    <View style={[styles.container]}>
+      <View testID="recommendedFeedsScreen">
+        <Text type="lg-bold" style={[pal.text]}>
+          Check out some recommended feeds. Click + to add them to your list of
+          pinned feeds.
+        </Text>
+      </View>
+
+      <Button
+        onPress={next}
+        label="Continue"
+        testID="continueBtn"
+        labelStyle={styles.buttonText}
+      />
+    </View>
+  )
+})
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginVertical: 60,
+    marginHorizontal: 16,
+    justifyContent: 'space-between',
+  },
+  buttonText: {
+    textAlign: 'center',
+    fontSize: 18,
+    marginVertical: 4,
+  },
+})
diff --git a/src/view/com/auth/onboarding/Welcome.tsx b/src/view/com/auth/onboarding/Welcome.tsx
index 87435c88a..5b663fe16 100644
--- a/src/view/com/auth/onboarding/Welcome.tsx
+++ b/src/view/com/auth/onboarding/Welcome.tsx
@@ -5,9 +5,23 @@ import {s} from 'lib/styles'
 import {usePalette} from 'lib/hooks/usePalette'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {Button} from 'view/com/util/forms/Button'
+import {NativeStackScreenProps} from '@react-navigation/native-stack'
+import {HomeTabNavigatorParams} from 'lib/routes/types'
+import {useStores} from 'state/index'
+import {observer} from 'mobx-react-lite'
 
-export const Welcome = ({next}: {next: () => void}) => {
+type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Welcome'>
+export const Welcome = observer(({navigation}: Props) => {
   const pal = usePalette('default')
+  const store = useStores()
+
+  const next = () => {
+    const nextScreenName = store.onboarding.nextScreenName()
+    if (nextScreenName) {
+      navigation.navigate(nextScreenName)
+    }
+  }
+
   return (
     <View style={[styles.container]}>
       <View testID="welcomeScreen">
@@ -60,12 +74,13 @@ export const Welcome = ({next}: {next: () => void}) => {
       />
     </View>
   )
-}
+})
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     marginVertical: 60,
+    marginHorizontal: 16,
     justifyContent: 'space-between',
   },
   title: {
diff --git a/src/view/com/modals/Modal.tsx b/src/view/com/modals/Modal.tsx
index efd06412d..dd45262be 100644
--- a/src/view/com/modals/Modal.tsx
+++ b/src/view/com/modals/Modal.tsx
@@ -29,7 +29,6 @@ import * as ContentFilteringSettingsModal from './ContentFilteringSettings'
 import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings'
 import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings'
 import * as PreferencesHomeFeed from './PreferencesHomeFeed'
-import * as OnboardingModal from './OnboardingModal'
 import * as ModerationDetailsModal from './ModerationDetails'
 
 const DEFAULT_SNAPPOINTS = ['90%']
@@ -134,9 +133,6 @@ export const ModalsContainer = observer(function ModalsContainer() {
   } else if (activeModal?.name === 'preferences-home-feed') {
     snapPoints = PreferencesHomeFeed.snapPoints
     element = <PreferencesHomeFeed.Component />
-  } else if (activeModal?.name === 'onboarding') {
-    snapPoints = OnboardingModal.snapPoints
-    element = <OnboardingModal.Component />
   } else if (activeModal?.name === 'moderation-details') {
     snapPoints = ModerationDetailsModal.snapPoints
     element = <ModerationDetailsModal.Component {...activeModal} />
diff --git a/src/view/com/modals/Modal.web.tsx b/src/view/com/modals/Modal.web.tsx
index 687c4fba3..6aef1b71c 100644
--- a/src/view/com/modals/Modal.web.tsx
+++ b/src/view/com/modals/Modal.web.tsx
@@ -26,7 +26,6 @@ import * as AddAppPassword from './AddAppPasswords'
 import * as ContentFilteringSettingsModal from './ContentFilteringSettings'
 import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings'
 import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings'
-import * as OnboardingModal from './OnboardingModal'
 import * as ModerationDetailsModal from './ModerationDetails'
 
 import * as PreferencesHomeFeed from './PreferencesHomeFeed'
@@ -109,8 +108,6 @@ function Modal({modal}: {modal: ModalIface}) {
     element = <EditImageModal.Component {...modal} />
   } else if (modal.name === 'preferences-home-feed') {
     element = <PreferencesHomeFeed.Component />
-  } else if (modal.name === 'onboarding') {
-    element = <OnboardingModal.Component />
   } else if (modal.name === 'moderation-details') {
     element = <ModerationDetailsModal.Component {...modal} />
   } else {
diff --git a/src/view/com/modals/OnboardingModal.tsx b/src/view/com/modals/OnboardingModal.tsx
deleted file mode 100644
index c70f4fd62..000000000
--- a/src/view/com/modals/OnboardingModal.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react'
-import {Onboarding} from '../auth/onboarding/Onboarding'
-
-export const snapPoints = ['90%']
-
-export function Component() {
-  return <Onboarding />
-}
diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
index 9259d4bea..f2aa208c3 100644
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -31,7 +31,7 @@ const POLL_FREQ = 30e3 // 30sec
 
 type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>
 export const HomeScreen = withAuthRequired(
-  observer((_opts: Props) => {
+  observer(({navigation}: Props) => {
     const store = useStores()
     const pagerRef = React.useRef<PagerRef>(null)
     const [selectedPage, setSelectedPage] = React.useState(0)
@@ -40,6 +40,12 @@ export const HomeScreen = withAuthRequired(
       string[]
     >([])
 
+    React.useEffect(() => {
+      if (store.onboarding.isRemaining) {
+        navigation.navigate('Welcome')
+      }
+    }, [store.onboarding.isRemaining, navigation])
+
     React.useEffect(() => {
       const {pinned} = store.me.savedFeeds
 
diff --git a/src/view/screens/Settings.tsx b/src/view/screens/Settings.tsx
index f1d4767f3..4a2c1c16a 100644
--- a/src/view/screens/Settings.tsx
+++ b/src/view/screens/Settings.tsx
@@ -162,6 +162,11 @@ export const SettingsScreen = withAuthRequired(
       Toast.show('Preferences reset')
     }, [store])
 
+    const onPressResetOnboarding = React.useCallback(async () => {
+      store.onboarding.reset()
+      Toast.show('Onboarding reset')
+    }, [store])
+
     const onPressBuildInfo = React.useCallback(() => {
       Clipboard.setString(
         `Build version: ${AppInfo.appVersion}; Platform: ${Platform.OS}`,
@@ -535,6 +540,16 @@ export const SettingsScreen = withAuthRequired(
                   Reset preferences state
                 </Text>
               </TouchableOpacity>
+              <TouchableOpacity
+                style={[pal.view, styles.linkCardNoIcon]}
+                onPress={onPressResetOnboarding}
+                accessibilityRole="button"
+                accessibilityHint="Reset onboarding"
+                accessibilityLabel="Resets the onboarding state">
+                <Text type="lg" style={pal.text}>
+                  Reset onboarding state
+                </Text>
+              </TouchableOpacity>
             </>
           ) : null}
           <View style={[styles.footer]}>
-- 
cgit 1.4.1


From c4cf288296927a2b39a11af83856dacb8dfad636 Mon Sep 17 00:00:00 2001
From: Ansh Nanda <anshnanda10@gmail.com>
Date: Mon, 28 Aug 2023 13:39:24 -0700
Subject: remove logs

---
 src/state/models/discovery/onboarding.ts          | 1 -
 src/view/com/auth/onboarding/RecommendedFeeds.tsx | 1 -
 2 files changed, 2 deletions(-)

(limited to 'src')

diff --git a/src/state/models/discovery/onboarding.ts b/src/state/models/discovery/onboarding.ts
index ddae235ca..8e7a0a7b9 100644
--- a/src/state/models/discovery/onboarding.ts
+++ b/src/state/models/discovery/onboarding.ts
@@ -42,7 +42,6 @@ export class OnboardingModel {
   }
 
   nextScreenName() {
-    console.log('currentScreen', this.step)
     if (this.step === 'Welcome') {
       this.step = 'RecommendedFeeds'
       return this.step
diff --git a/src/view/com/auth/onboarding/RecommendedFeeds.tsx b/src/view/com/auth/onboarding/RecommendedFeeds.tsx
index d3aacb70b..1936f4234 100644
--- a/src/view/com/auth/onboarding/RecommendedFeeds.tsx
+++ b/src/view/com/auth/onboarding/RecommendedFeeds.tsx
@@ -15,7 +15,6 @@ export const RecommendedFeeds = observer(({navigation}: Props) => {
 
   const next = () => {
     const nextScreenName = store.onboarding.nextScreenName()
-    console.log('nextScreenName', store.onboarding.nextScreenName())
     if (nextScreenName) {
       navigation.navigate(nextScreenName)
     }
-- 
cgit 1.4.1


From 3f1b313fa4abd966367327aa352567ecf8d52f2d Mon Sep 17 00:00:00 2001
From: Ansh Nanda <anshnanda10@gmail.com>
Date: Mon, 28 Aug 2023 15:41:02 -0700
Subject: add custom feed discovery to onboarding

---
 src/Navigation.tsx                                |  34 +++--
 src/lib/analytics/types.ts                        |   1 +
 src/state/models/discovery/onboarding.ts          |  29 ++--
 src/view/com/auth/onboarding/RecommendedFeeds.tsx | 160 ++++++++++++++++++++--
 src/view/com/auth/onboarding/Welcome.tsx          |  38 ++++-
 src/view/index.ts                                 |   2 +
 6 files changed, 225 insertions(+), 39 deletions(-)

(limited to 'src')

diff --git a/src/Navigation.tsx b/src/Navigation.tsx
index 6ea92e1d4..058a15fa2 100644
--- a/src/Navigation.tsx
+++ b/src/Navigation.tsx
@@ -67,7 +67,7 @@ import {getRoutingInstrumentation} from 'lib/sentry'
 import {bskyTitle} from 'lib/strings/headings'
 import {JSX} from 'react/jsx-runtime'
 import {timeout} from 'lib/async/timeout'
-import {Welcome} from 'view/com/auth/onboarding/Welcome'
+import {Welcome, WelcomeHeaderRight} from 'view/com/auth/onboarding/Welcome'
 import {RecommendedFeeds} from 'view/com/auth/onboarding/RecommendedFeeds'
 
 const navigationRef = createNavigationContainerRef<AllNavigatorParams>()
@@ -221,18 +221,26 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
         component={SavedFeeds}
         options={{title: title('Edit My Feeds')}}
       />
-      <Stack.Group
-        screenOptions={{
-          animation: 'slide_from_bottom',
-          presentation: 'modal',
-        }}>
-        <Stack.Screen
-          name="Welcome"
-          component={Welcome}
-          options={{title: title('Welcome')}}
-        />
-        <Stack.Screen name="RecommendedFeeds" component={RecommendedFeeds} />
-      </Stack.Group>
+      <Stack.Screen
+        name="Welcome"
+        component={Welcome}
+        options={{
+          title: title('Welcome'),
+          presentation: 'card',
+          headerShown: true,
+          headerTransparent: true,
+          headerTitle: '',
+          headerBackVisible: false,
+          headerRight: props => <WelcomeHeaderRight {...props} />,
+        }}
+      />
+      <Stack.Screen
+        name="RecommendedFeeds"
+        component={RecommendedFeeds}
+        options={{
+          title: title('Recommended Feeds'),
+        }}
+      />
     </>
   )
 }
diff --git a/src/lib/analytics/types.ts b/src/lib/analytics/types.ts
index f876c6d53..d56e1b615 100644
--- a/src/lib/analytics/types.ts
+++ b/src/lib/analytics/types.ts
@@ -122,6 +122,7 @@ interface TrackPropertiesMap {
   // ONBOARDING events
   'Onboarding:Begin': {}
   'Onboarding:Complete': {}
+  'Onboarding:Skipped': {}
 }
 
 interface ScreenPropertiesMap {
diff --git a/src/state/models/discovery/onboarding.ts b/src/state/models/discovery/onboarding.ts
index 8e7a0a7b9..52521f578 100644
--- a/src/state/models/discovery/onboarding.ts
+++ b/src/state/models/discovery/onboarding.ts
@@ -1,12 +1,12 @@
 import {makeAutoObservable} from 'mobx'
 import {RootStoreModel} from '../root-store'
-import {NavigationProp} from 'lib/routes/types'
 import {hasProp} from 'lib/type-guards'
+import {track} from 'lib/analytics/analytics'
 
 export const OnboardingScreenSteps = {
   Welcome: 'Welcome',
   RecommendedFeeds: 'RecommendedFeeds',
-  Complete: 'Complete',
+  Home: 'Home',
 } as const
 
 type OnboardingStep =
@@ -34,6 +34,7 @@ export class OnboardingModel {
         typeof v.step === 'string' &&
         OnboardingStepsArray.includes(v.step as OnboardingStep)
       ) {
+        console.log('hydrating onboarding', v.step)
         this.step = v.step as OnboardingStep
       }
     }
@@ -41,31 +42,33 @@ export class OnboardingModel {
     this.reset()
   }
 
-  nextScreenName() {
-    if (this.step === 'Welcome') {
+  nextScreenName(currentScreenName?: OnboardingStep) {
+    if (currentScreenName === 'Welcome' || this.step === 'Welcome') {
       this.step = 'RecommendedFeeds'
       return this.step
-    } else if (this.step === 'RecommendedFeeds') {
-      this.step = 'Complete'
+    } else if (
+      this.step === 'RecommendedFeeds' ||
+      currentScreenName === 'RecommendedFeeds'
+    ) {
+      this.step = 'Home'
       return this.step
-    } else if (this.step === 'Complete') {
-      return 'Home'
     } else {
       // if we get here, we're in an invalid state, let's just go Home
       return 'Home'
     }
   }
 
-  complete(navigation: NavigationProp) {
-    navigation.navigate('Home')
-  }
-
   reset() {
     this.step = 'Welcome'
   }
 
+  skip() {
+    track('Onboarding:Skipped')
+    this.step = 'Home'
+  }
+
   get isComplete() {
-    return this.step === 'Complete'
+    return this.step === 'Home'
   }
 
   get isRemaining() {
diff --git a/src/view/com/auth/onboarding/RecommendedFeeds.tsx b/src/view/com/auth/onboarding/RecommendedFeeds.tsx
index 1936f4234..88fb200c6 100644
--- a/src/view/com/auth/onboarding/RecommendedFeeds.tsx
+++ b/src/view/com/auth/onboarding/RecommendedFeeds.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {StyleSheet, View} from 'react-native'
+import {FlatList, StyleSheet, View} from 'react-native'
 import {Text} from 'view/com/util/text/Text'
 import {usePalette} from 'lib/hooks/usePalette'
 import {Button} from 'view/com/util/forms/Button'
@@ -7,6 +7,117 @@ import {NativeStackScreenProps} from '@react-navigation/native-stack'
 import {HomeTabNavigatorParams} from 'lib/routes/types'
 import {useStores} from 'state/index'
 import {observer} from 'mobx-react-lite'
+import {CustomFeed} from 'view/com/feeds/CustomFeed'
+import {useCustomFeed} from 'lib/hooks/useCustomFeed'
+import {makeRecordUri} from 'lib/strings/url-helpers'
+import {ViewHeader} from 'view/com/util/ViewHeader'
+
+const TEMPORARY_RECOMMENDED_FEEDS = [
+  {
+    did: 'did:plc:hsqwcidfez66lwm3gxhfv5in',
+    rkey: 'aaaf2pqeodmpy',
+  },
+  {
+    did: 'did:plc:gekdk2nd47gkk3utfz2xf7cn',
+    rkey: 'aaap4tbjcfe5y',
+  },
+  {
+    did: 'did:plc:5rw2on4i56btlcajojaxwcat',
+    rkey: 'aaao6g552b33o',
+  },
+  {
+    did: 'did:plc:jfhpnnst6flqway4eaeqzj2a',
+    rkey: 'for-science',
+  },
+  {
+    did: 'did:plc:7q4nnnxawajbfaq7to5dpbsy',
+    rkey: 'bsky-news',
+  },
+  {
+    did: 'did:plc:jcoy7v3a2t4rcfdh6i4kza25',
+    rkey: 'astro',
+  },
+  {
+    did: 'did:plc:tenurhgjptubkk5zf5qhi3og',
+    rkey: 'h-nba',
+  },
+  {
+    did: 'did:plc:vpkhqolt662uhesyj6nxm7ys',
+    rkey: 'devfeed',
+  },
+  {
+    did: 'did:plc:cndfx4udwgvpjaakvxvh7wm5',
+    rkey: 'flipboard-tech',
+  },
+  {
+    did: 'did:plc:w4xbfzo7kqfes5zb7r6qv3rw',
+    rkey: 'blacksky',
+  },
+  {
+    did: 'did:plc:lptjvw6ut224kwrj7ub3sqbe',
+    rkey: 'aaaotfjzjplna',
+  },
+  {
+    did: 'did:plc:gkvpokm7ec5j5yxls6xk4e3z',
+    rkey: 'formula-one',
+  },
+  {
+    did: 'did:plc:q6gjnaw2blty4crticxkmujt',
+    rkey: 'positivifeed',
+  },
+  {
+    did: 'did:plc:l72uci4styb4jucsgcrrj5ap',
+    rkey: 'aaao5dzfm36u4',
+  },
+  {
+    did: 'did:plc:k3jkadxv5kkjgs6boyon7m6n',
+    rkey: 'aaaavlyvqzst2',
+  },
+  {
+    did: 'did:plc:nkahctfdi6bxk72umytfwghw',
+    rkey: 'aaado2uvfsc6w',
+  },
+  {
+    did: 'did:plc:epihigio3d7un7u3gpqiy5gv',
+    rkey: 'aaaekwsc7zsvs',
+  },
+  {
+    did: 'did:plc:qiknc4t5rq7yngvz7g4aezq7',
+    rkey: 'aaaejxlobe474',
+  },
+  {
+    did: 'did:plc:mlq4aycufcuolr7ax6sezpc4',
+    rkey: 'aaaoudweck6uy',
+  },
+  {
+    did: 'did:plc:rcez5hcvq3vzlu5x7xrjyccg',
+    rkey: 'aaadzjxbcddzi',
+  },
+  {
+    did: 'did:plc:lnxbuzaenlwjrncx6sc4cfdr',
+    rkey: 'aaab2vesjtszc',
+  },
+  {
+    did: 'did:plc:x3cya3wkt4n6u4ihmvpsc5if',
+    rkey: 'aaacynbxwimok',
+  },
+  {
+    did: 'did:plc:abv47bjgzjgoh3yrygwoi36x',
+    rkey: 'aaagt6amuur5e',
+  },
+  {
+    did: 'did:plc:ffkgesg3jsv2j7aagkzrtcvt',
+    rkey: 'aaacjerk7gwek',
+  },
+  {
+    did: 'did:plc:geoqe3qls5mwezckxxsewys2',
+    rkey: 'aaai43yetqshu',
+  },
+  {
+    did: 'did:plc:2wqomm3tjqbgktbrfwgvrw34',
+    rkey: 'authors',
+  },
+]
 
 type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'RecommendedFeeds'>
 export const RecommendedFeeds = observer(({navigation}: Props) => {
@@ -14,41 +125,68 @@ export const RecommendedFeeds = observer(({navigation}: Props) => {
   const store = useStores()
 
   const next = () => {
-    const nextScreenName = store.onboarding.nextScreenName()
+    const nextScreenName = store.onboarding.nextScreenName('RecommendedFeeds')
     if (nextScreenName) {
       navigation.navigate(nextScreenName)
     }
   }
 
   return (
-    <View style={[styles.container]}>
-      <View testID="recommendedFeedsScreen">
-        <Text type="lg-bold" style={[pal.text]}>
-          Check out some recommended feeds. Click + to add them to your list of
-          pinned feeds.
-        </Text>
-      </View>
+    <View style={[styles.container]} testID="recommendedFeedsScreen">
+      <ViewHeader title="Recommended Feeds" canGoBack />
+      <Text type="lg-medium" style={[pal.text, styles.header]}>
+        Check out some recommended feeds. Click + to add them to your list of
+        pinned feeds.
+      </Text>
+
+      <FlatList
+        data={TEMPORARY_RECOMMENDED_FEEDS}
+        renderItem={({item}) => <Item item={item} />}
+        keyExtractor={item => item.did + item.rkey}
+        style={{flex: 1}}
+      />
 
       <Button
         onPress={next}
         label="Continue"
         testID="continueBtn"
+        style={styles.button}
         labelStyle={styles.buttonText}
       />
     </View>
   )
 })
 
+type ItemProps = {
+  did: string
+  rkey: string
+}
+
+const Item = ({item}: {item: ItemProps}) => {
+  const uri = makeRecordUri(item.did, 'app.bsky.feed.generator', item.rkey)
+  const data = useCustomFeed(uri)
+  if (!data) return null
+  return (
+    <CustomFeed item={data} key={uri} showDescription showLikes showSaveBtn />
+  )
+}
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    marginVertical: 60,
     marginHorizontal: 16,
     justifyContent: 'space-between',
   },
+  header: {
+    marginBottom: 16,
+  },
+  button: {
+    marginBottom: 48,
+    marginTop: 16,
+  },
   buttonText: {
     textAlign: 'center',
     fontSize: 18,
-    marginVertical: 4,
+    paddingVertical: 4,
   },
 })
diff --git a/src/view/com/auth/onboarding/Welcome.tsx b/src/view/com/auth/onboarding/Welcome.tsx
index 5b663fe16..cb3a2307a 100644
--- a/src/view/com/auth/onboarding/Welcome.tsx
+++ b/src/view/com/auth/onboarding/Welcome.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {StyleSheet, View} from 'react-native'
+import {Pressable, StyleSheet, View} from 'react-native'
 import {Text} from 'view/com/util/text/Text'
 import {s} from 'lib/styles'
 import {usePalette} from 'lib/hooks/usePalette'
@@ -9,14 +9,23 @@ import {NativeStackScreenProps} from '@react-navigation/native-stack'
 import {HomeTabNavigatorParams} from 'lib/routes/types'
 import {useStores} from 'state/index'
 import {observer} from 'mobx-react-lite'
+import {HeaderButtonProps} from '@react-navigation/native-stack/lib/typescript/src/types'
+import {NavigationProp, useNavigation} from '@react-navigation/native'
 
 type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Welcome'>
 export const Welcome = observer(({navigation}: Props) => {
   const pal = usePalette('default')
   const store = useStores()
 
+  // make sure bottom nav is hidden
+  React.useEffect(() => {
+    if (!store.shell.minimalShellMode) {
+      store.shell.setMinimalShellMode(true)
+    }
+  }, [store.shell.minimalShellMode, store])
+
   const next = () => {
-    const nextScreenName = store.onboarding.nextScreenName()
+    const nextScreenName = store.onboarding.nextScreenName('Welcome')
     if (nextScreenName) {
       navigation.navigate(nextScreenName)
     }
@@ -76,6 +85,31 @@ export const Welcome = observer(({navigation}: Props) => {
   )
 })
 
+export const WelcomeHeaderRight = (props: HeaderButtonProps) => {
+  const {canGoBack} = props
+  const pal = usePalette('default')
+  const navigation = useNavigation<NavigationProp<HomeTabNavigatorParams>>()
+  const store = useStores()
+  return (
+    <Pressable
+      accessibilityRole="button"
+      style={[s.flexRow, s.alignCenter]}
+      onPress={() => {
+        if (canGoBack) {
+          store.onboarding.skip()
+          navigation.goBack()
+        }
+      }}>
+      <Text style={[pal.link]}>Skip</Text>
+      <FontAwesomeIcon
+        icon={'chevron-right'}
+        size={14}
+        color={pal.colors.link}
+      />
+    </Pressable>
+  )
+}
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
diff --git a/src/view/index.ts b/src/view/index.ts
index 1c3dc3937..2e4c08ec7 100644
--- a/src/view/index.ts
+++ b/src/view/index.ts
@@ -92,6 +92,7 @@ import {faPlay} from '@fortawesome/free-solid-svg-icons/faPlay'
 import {faPause} from '@fortawesome/free-solid-svg-icons/faPause'
 import {faThumbtack} from '@fortawesome/free-solid-svg-icons/faThumbtack'
 import {faList} from '@fortawesome/free-solid-svg-icons/faList'
+import {faChevronRight} from '@fortawesome/free-solid-svg-icons/faChevronRight'
 
 export function setup() {
   library.add(
@@ -187,5 +188,6 @@ export function setup() {
     faPlay,
     faPause,
     faList,
+    faChevronRight,
   )
 }
-- 
cgit 1.4.1


From b2dd4ea0f5c2913ad1ca71755913855b7ac0a021 Mon Sep 17 00:00:00 2001
From: Ansh Nanda <anshnanda10@gmail.com>
Date: Mon, 28 Aug 2023 15:50:51 -0700
Subject: fix onboarding stuck on welcome

---
 src/state/models/discovery/onboarding.ts | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/state/models/discovery/onboarding.ts b/src/state/models/discovery/onboarding.ts
index 52521f578..9b49beaf4 100644
--- a/src/state/models/discovery/onboarding.ts
+++ b/src/state/models/discovery/onboarding.ts
@@ -14,14 +14,18 @@ type OnboardingStep =
 const OnboardingStepsArray = Object.values(OnboardingScreenSteps)
 export class OnboardingModel {
   // state
-  step: OnboardingStep
+  step: OnboardingStep = 'Welcome'
 
   constructor(public rootStore: RootStoreModel) {
-    makeAutoObservable(this, {rootStore: false})
-    this.step = 'Welcome'
+    makeAutoObservable(this, {
+      rootStore: false,
+      hydrate: false,
+      serialize: false,
+    })
   }
 
-  serialize() {
+  serialize(): unknown {
+    console.log('serializing onboarding', this.step)
     return {
       step: this.step,
     }
@@ -37,9 +41,10 @@ export class OnboardingModel {
         console.log('hydrating onboarding', v.step)
         this.step = v.step as OnboardingStep
       }
+    } else {
+      // if there is no valid state, we'll just reset
+      this.reset()
     }
-    // if there is no valid state, we'll just reset
-    this.reset()
   }
 
   nextScreenName(currentScreenName?: OnboardingStep) {
-- 
cgit 1.4.1


From a231fdf64e2b2801b055e355dddcef06dfb3f47e Mon Sep 17 00:00:00 2001
From: Ansh Nanda <anshnanda10@gmail.com>
Date: Mon, 28 Aug 2023 17:51:26 -0700
Subject: track onboarding steps

---
 src/state/models/discovery/onboarding.ts | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'src')

diff --git a/src/state/models/discovery/onboarding.ts b/src/state/models/discovery/onboarding.ts
index 9b49beaf4..02a7b7a0b 100644
--- a/src/state/models/discovery/onboarding.ts
+++ b/src/state/models/discovery/onboarding.ts
@@ -49,12 +49,14 @@ export class OnboardingModel {
 
   nextScreenName(currentScreenName?: OnboardingStep) {
     if (currentScreenName === 'Welcome' || this.step === 'Welcome') {
+      track('Onboarding:Begin')
       this.step = 'RecommendedFeeds'
       return this.step
     } else if (
       this.step === 'RecommendedFeeds' ||
       currentScreenName === 'RecommendedFeeds'
     ) {
+      track('Onboarding:Complete')
       this.step = 'Home'
       return this.step
     } else {
-- 
cgit 1.4.1


From bcef7400db65b1a1ce01c655bc0e16530254de5a Mon Sep 17 00:00:00 2001
From: Ansh Nanda <anshnanda10@gmail.com>
Date: Mon, 28 Aug 2023 18:47:56 -0700
Subject: simplify onboarding model function naming

---
 src/state/models/discovery/onboarding.ts          | 9 +++++++--
 src/view/com/auth/onboarding/RecommendedFeeds.tsx | 2 +-
 src/view/com/auth/onboarding/Welcome.tsx          | 2 +-
 src/view/screens/Home.tsx                         | 4 ++--
 4 files changed, 11 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/state/models/discovery/onboarding.ts b/src/state/models/discovery/onboarding.ts
index 02a7b7a0b..cb0c21371 100644
--- a/src/state/models/discovery/onboarding.ts
+++ b/src/state/models/discovery/onboarding.ts
@@ -47,7 +47,12 @@ export class OnboardingModel {
     }
   }
 
-  nextScreenName(currentScreenName?: OnboardingStep) {
+  /**
+   * Returns the name of the next screen in the onboarding process based on the current step or screen name provided.
+   * @param {OnboardingStep} [currentScreenName]
+   * @returns name of next screen in the onboarding process
+   */
+  next(currentScreenName?: OnboardingStep) {
     if (currentScreenName === 'Welcome' || this.step === 'Welcome') {
       track('Onboarding:Begin')
       this.step = 'RecommendedFeeds'
@@ -78,7 +83,7 @@ export class OnboardingModel {
     return this.step === 'Home'
   }
 
-  get isRemaining() {
+  get isActive() {
     return !this.isComplete
   }
 }
diff --git a/src/view/com/auth/onboarding/RecommendedFeeds.tsx b/src/view/com/auth/onboarding/RecommendedFeeds.tsx
index 88fb200c6..2f4c63daf 100644
--- a/src/view/com/auth/onboarding/RecommendedFeeds.tsx
+++ b/src/view/com/auth/onboarding/RecommendedFeeds.tsx
@@ -125,7 +125,7 @@ export const RecommendedFeeds = observer(({navigation}: Props) => {
   const store = useStores()
 
   const next = () => {
-    const nextScreenName = store.onboarding.nextScreenName('RecommendedFeeds')
+    const nextScreenName = store.onboarding.next('RecommendedFeeds')
     if (nextScreenName) {
       navigation.navigate(nextScreenName)
     }
diff --git a/src/view/com/auth/onboarding/Welcome.tsx b/src/view/com/auth/onboarding/Welcome.tsx
index cb3a2307a..a1e97a32f 100644
--- a/src/view/com/auth/onboarding/Welcome.tsx
+++ b/src/view/com/auth/onboarding/Welcome.tsx
@@ -25,7 +25,7 @@ export const Welcome = observer(({navigation}: Props) => {
   }, [store.shell.minimalShellMode, store])
 
   const next = () => {
-    const nextScreenName = store.onboarding.nextScreenName('Welcome')
+    const nextScreenName = store.onboarding.next('Welcome')
     if (nextScreenName) {
       navigation.navigate(nextScreenName)
     }
diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
index f2aa208c3..7017c698c 100644
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -41,10 +41,10 @@ export const HomeScreen = withAuthRequired(
     >([])
 
     React.useEffect(() => {
-      if (store.onboarding.isRemaining) {
+      if (store.onboarding.isActive) {
         navigation.navigate('Welcome')
       }
-    }, [store.onboarding.isRemaining, navigation])
+    }, [store.onboarding.isActive, navigation])
 
     React.useEffect(() => {
       const {pinned} = store.me.savedFeeds
-- 
cgit 1.4.1


From 8f0f3be8fb6255df5be6b4650b0770e7829e1a60 Mon Sep 17 00:00:00 2001
From: Ansh Nanda <anshnanda10@gmail.com>
Date: Mon, 28 Aug 2023 18:53:58 -0700
Subject: start onboarding only for new account creations

---
 src/state/models/discovery/onboarding.ts | 26 +++++++++++++++-----------
 src/state/models/ui/create-account.ts    |  4 ++--
 src/state/models/ui/shell.ts             |  7 -------
 3 files changed, 17 insertions(+), 20 deletions(-)

(limited to 'src')

diff --git a/src/state/models/discovery/onboarding.ts b/src/state/models/discovery/onboarding.ts
index cb0c21371..664dc874c 100644
--- a/src/state/models/discovery/onboarding.ts
+++ b/src/state/models/discovery/onboarding.ts
@@ -14,7 +14,7 @@ type OnboardingStep =
 const OnboardingStepsArray = Object.values(OnboardingScreenSteps)
 export class OnboardingModel {
   // state
-  step: OnboardingStep = 'Welcome'
+  step: OnboardingStep = 'Home'
 
   constructor(public rootStore: RootStoreModel) {
     makeAutoObservable(this, {
@@ -25,7 +25,6 @@ export class OnboardingModel {
   }
 
   serialize(): unknown {
-    console.log('serializing onboarding', this.step)
     return {
       step: this.step,
     }
@@ -38,7 +37,6 @@ export class OnboardingModel {
         typeof v.step === 'string' &&
         OnboardingStepsArray.includes(v.step as OnboardingStep)
       ) {
-        console.log('hydrating onboarding', v.step)
         this.step = v.step as OnboardingStep
       }
     } else {
@@ -53,16 +51,12 @@ export class OnboardingModel {
    * @returns name of next screen in the onboarding process
    */
   next(currentScreenName?: OnboardingStep) {
-    if (currentScreenName === 'Welcome' || this.step === 'Welcome') {
-      track('Onboarding:Begin')
+    currentScreenName = currentScreenName || this.step
+    if (currentScreenName === 'Welcome') {
       this.step = 'RecommendedFeeds'
       return this.step
-    } else if (
-      this.step === 'RecommendedFeeds' ||
-      currentScreenName === 'RecommendedFeeds'
-    ) {
-      track('Onboarding:Complete')
-      this.step = 'Home'
+    } else if (this.step === 'RecommendedFeeds') {
+      this.finish()
       return this.step
     } else {
       // if we get here, we're in an invalid state, let's just go Home
@@ -70,6 +64,16 @@ export class OnboardingModel {
     }
   }
 
+  start() {
+    this.step = 'Welcome'
+    track('Onboarding:Begin')
+  }
+
+  finish() {
+    this.step = 'Home'
+    track('Onboarding:Complete')
+  }
+
   reset() {
     this.step = 'Welcome'
   }
diff --git a/src/state/models/ui/create-account.ts b/src/state/models/ui/create-account.ts
index 04e1554c6..d9d4f51b9 100644
--- a/src/state/models/ui/create-account.ts
+++ b/src/state/models/ui/create-account.ts
@@ -109,10 +109,10 @@ export class CreateAccountModel {
     this.setError('')
     this.setIsProcessing(true)
 
-    // open the onboarding modal after the session is created
+    // open the onboarding screens after the session is created
     const sessionReadySub = this.rootStore.onSessionReady(() => {
       sessionReadySub.remove()
-      this.rootStore.shell.openModal({name: 'onboarding'})
+      this.rootStore.onboarding.start()
     })
 
     try {
diff --git a/src/state/models/ui/shell.ts b/src/state/models/ui/shell.ts
index 6f6ed06bc..a64047f9f 100644
--- a/src/state/models/ui/shell.ts
+++ b/src/state/models/ui/shell.ts
@@ -140,10 +140,6 @@ export interface PreferencesHomeFeed {
   name: 'preferences-home-feed'
 }
 
-export interface OnboardingModal {
-  name: 'onboarding'
-}
-
 export type Modal =
   // Account
   | AddAppPasswordModal
@@ -176,9 +172,6 @@ export type Modal =
   | WaitlistModal
   | InviteCodesModal
 
-  // Onboarding
-  | OnboardingModal
-
   // Generic
   | ConfirmModal
 
-- 
cgit 1.4.1


From 742440c22d9c7e671ef38f0a50dcd9397557cac6 Mon Sep 17 00:00:00 2001
From: Ansh Nanda <anshnanda10@gmail.com>
Date: Mon, 28 Aug 2023 18:55:40 -0700
Subject: add more tracking

---
 src/lib/analytics/types.ts               | 1 +
 src/state/models/discovery/onboarding.ts | 5 +++--
 2 files changed, 4 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/lib/analytics/types.ts b/src/lib/analytics/types.ts
index d56e1b615..5f9437319 100644
--- a/src/lib/analytics/types.ts
+++ b/src/lib/analytics/types.ts
@@ -123,6 +123,7 @@ interface TrackPropertiesMap {
   'Onboarding:Begin': {}
   'Onboarding:Complete': {}
   'Onboarding:Skipped': {}
+  'Onboarding:Reset': {}
 }
 
 interface ScreenPropertiesMap {
diff --git a/src/state/models/discovery/onboarding.ts b/src/state/models/discovery/onboarding.ts
index 664dc874c..09c9eac04 100644
--- a/src/state/models/discovery/onboarding.ts
+++ b/src/state/models/discovery/onboarding.ts
@@ -14,7 +14,7 @@ type OnboardingStep =
 const OnboardingStepsArray = Object.values(OnboardingScreenSteps)
 export class OnboardingModel {
   // state
-  step: OnboardingStep = 'Home'
+  step: OnboardingStep = 'Home' // default state to skip onboarding, only enabled for new users by calling start()
 
   constructor(public rootStore: RootStoreModel) {
     makeAutoObservable(this, {
@@ -76,11 +76,12 @@ export class OnboardingModel {
 
   reset() {
     this.step = 'Welcome'
+    track('Onboarding:Reset')
   }
 
   skip() {
-    track('Onboarding:Skipped')
     this.step = 'Home'
+    track('Onboarding:Skipped')
   }
 
   get isComplete() {
-- 
cgit 1.4.1


From bf37913701836091b3e902694d72d190eeca5ec9 Mon Sep 17 00:00:00 2001
From: Ansh Nanda <anshnanda10@gmail.com>
Date: Tue, 29 Aug 2023 12:16:26 -0700
Subject: fix onboarding on web

---
 src/Navigation.tsx                                | 14 ++--
 src/lib/hooks/useOnboarding.ts                    | 23 +++++++
 src/state/models/ui/shell.ts                      |  7 ++
 src/view/com/auth/onboarding/RecommendedFeeds.tsx | 34 +++++----
 src/view/com/auth/onboarding/Welcome.tsx          | 84 +++++++++--------------
 src/view/com/modals/Modal.web.tsx                 | 10 ++-
 src/view/com/modals/OnboardingModal.tsx           | 40 +++++++++++
 src/view/com/util/ViewHeader.tsx                  | 74 ++++++++++++--------
 src/view/screens/Home.tsx                         | 10 +--
 src/view/screens/onboarding/RecommendedFeeds.tsx  | 20 ++++++
 src/view/screens/onboarding/Welcome.tsx           | 32 +++++++++
 11 files changed, 235 insertions(+), 113 deletions(-)
 create mode 100644 src/lib/hooks/useOnboarding.ts
 create mode 100644 src/view/com/modals/OnboardingModal.tsx
 create mode 100644 src/view/screens/onboarding/RecommendedFeeds.tsx
 create mode 100644 src/view/screens/onboarding/Welcome.tsx

(limited to 'src')

diff --git a/src/Navigation.tsx b/src/Navigation.tsx
index 058a15fa2..334370ab0 100644
--- a/src/Navigation.tsx
+++ b/src/Navigation.tsx
@@ -67,8 +67,8 @@ import {getRoutingInstrumentation} from 'lib/sentry'
 import {bskyTitle} from 'lib/strings/headings'
 import {JSX} from 'react/jsx-runtime'
 import {timeout} from 'lib/async/timeout'
-import {Welcome, WelcomeHeaderRight} from 'view/com/auth/onboarding/Welcome'
-import {RecommendedFeeds} from 'view/com/auth/onboarding/RecommendedFeeds'
+import {RecommendedFeedsScreen} from 'view/screens/onboarding/RecommendedFeeds'
+import {WelcomeScreen} from 'view/screens/onboarding/Welcome'
 
 const navigationRef = createNavigationContainerRef<AllNavigatorParams>()
 
@@ -223,20 +223,16 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
       />
       <Stack.Screen
         name="Welcome"
-        component={Welcome}
+        component={WelcomeScreen}
         options={{
           title: title('Welcome'),
           presentation: 'card',
-          headerShown: true,
-          headerTransparent: true,
-          headerTitle: '',
-          headerBackVisible: false,
-          headerRight: props => <WelcomeHeaderRight {...props} />,
+          gestureEnabled: false,
         }}
       />
       <Stack.Screen
         name="RecommendedFeeds"
-        component={RecommendedFeeds}
+        component={RecommendedFeedsScreen}
         options={{
           title: title('Recommended Feeds'),
         }}
diff --git a/src/lib/hooks/useOnboarding.ts b/src/lib/hooks/useOnboarding.ts
new file mode 100644
index 000000000..cdf24bc14
--- /dev/null
+++ b/src/lib/hooks/useOnboarding.ts
@@ -0,0 +1,23 @@
+import React from 'react'
+import {useStores} from 'state/index'
+import {useNavigation} from '@react-navigation/native'
+import {NavigationProp} from 'lib/routes/types'
+import {isNative, isWeb} from 'platform/detection'
+
+export function useOnboarding() {
+  const store = useStores()
+  const navigation = useNavigation<NavigationProp>()
+
+  React.useEffect(() => {
+    if (store.onboarding.isActive) {
+      if (isWeb) {
+        store.shell.openModal({name: 'onboarding'})
+        return
+      }
+      if (isNative) {
+        navigation.navigate('Welcome')
+        return
+      }
+    }
+  }, [store.onboarding.isActive, navigation, store.shell])
+}
diff --git a/src/state/models/ui/shell.ts b/src/state/models/ui/shell.ts
index a64047f9f..4c36dfdc6 100644
--- a/src/state/models/ui/shell.ts
+++ b/src/state/models/ui/shell.ts
@@ -140,6 +140,10 @@ export interface PreferencesHomeFeed {
   name: 'preferences-home-feed'
 }
 
+export interface OnboardingModal {
+  name: 'onboarding'
+}
+
 export type Modal =
   // Account
   | AddAppPasswordModal
@@ -175,6 +179,9 @@ export type Modal =
   // Generic
   | ConfirmModal
 
+  // Onboarding (only used on web)
+  | OnboardingModal
+
 interface LightboxModel {}
 
 export class ProfileImageLightbox implements LightboxModel {
diff --git a/src/view/com/auth/onboarding/RecommendedFeeds.tsx b/src/view/com/auth/onboarding/RecommendedFeeds.tsx
index 2f4c63daf..fa9d69f98 100644
--- a/src/view/com/auth/onboarding/RecommendedFeeds.tsx
+++ b/src/view/com/auth/onboarding/RecommendedFeeds.tsx
@@ -3,14 +3,12 @@ import {FlatList, StyleSheet, View} from 'react-native'
 import {Text} from 'view/com/util/text/Text'
 import {usePalette} from 'lib/hooks/usePalette'
 import {Button} from 'view/com/util/forms/Button'
-import {NativeStackScreenProps} from '@react-navigation/native-stack'
-import {HomeTabNavigatorParams} from 'lib/routes/types'
-import {useStores} from 'state/index'
 import {observer} from 'mobx-react-lite'
 import {CustomFeed} from 'view/com/feeds/CustomFeed'
 import {useCustomFeed} from 'lib/hooks/useCustomFeed'
 import {makeRecordUri} from 'lib/strings/url-helpers'
 import {ViewHeader} from 'view/com/util/ViewHeader'
+import {isDesktopWeb} from 'platform/detection'
 
 const TEMPORARY_RECOMMENDED_FEEDS = [
   {
@@ -119,21 +117,15 @@ const TEMPORARY_RECOMMENDED_FEEDS = [
   },
 ]
 
-type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'RecommendedFeeds'>
-export const RecommendedFeeds = observer(({navigation}: Props) => {
+type Props = {
+  next: () => void
+}
+export const RecommendedFeeds = observer(({next}: Props) => {
   const pal = usePalette('default')
-  const store = useStores()
-
-  const next = () => {
-    const nextScreenName = store.onboarding.next('RecommendedFeeds')
-    if (nextScreenName) {
-      navigation.navigate(nextScreenName)
-    }
-  }
 
   return (
     <View style={[styles.container]} testID="recommendedFeedsScreen">
-      <ViewHeader title="Recommended Feeds" canGoBack />
+      <ViewHeader title="Recommended Feeds" canGoBack={true} />
       <Text type="lg-medium" style={[pal.text, styles.header]}>
         Check out some recommended feeds. Click + to add them to your list of
         pinned feeds.
@@ -167,7 +159,19 @@ const Item = ({item}: {item: ItemProps}) => {
   const data = useCustomFeed(uri)
   if (!data) return null
   return (
-    <CustomFeed item={data} key={uri} showDescription showLikes showSaveBtn />
+    <CustomFeed
+      item={data}
+      key={uri}
+      showDescription
+      showLikes
+      showSaveBtn
+      style={[
+        {
+          // @ts-ignore
+          cursor: isDesktopWeb ? 'pointer' : 'auto',
+        },
+      ]}
+    />
   )
 }
 
diff --git a/src/view/com/auth/onboarding/Welcome.tsx b/src/view/com/auth/onboarding/Welcome.tsx
index a1e97a32f..a322e4d4f 100644
--- a/src/view/com/auth/onboarding/Welcome.tsx
+++ b/src/view/com/auth/onboarding/Welcome.tsx
@@ -5,40 +5,45 @@ import {s} from 'lib/styles'
 import {usePalette} from 'lib/hooks/usePalette'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {Button} from 'view/com/util/forms/Button'
-import {NativeStackScreenProps} from '@react-navigation/native-stack'
-import {HomeTabNavigatorParams} from 'lib/routes/types'
-import {useStores} from 'state/index'
 import {observer} from 'mobx-react-lite'
-import {HeaderButtonProps} from '@react-navigation/native-stack/lib/typescript/src/types'
-import {NavigationProp, useNavigation} from '@react-navigation/native'
+import {ViewHeader} from 'view/com/util/ViewHeader'
+import {isDesktopWeb} from 'platform/detection'
 
-type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Welcome'>
-export const Welcome = observer(({navigation}: Props) => {
-  const pal = usePalette('default')
-  const store = useStores()
-
-  // make sure bottom nav is hidden
-  React.useEffect(() => {
-    if (!store.shell.minimalShellMode) {
-      store.shell.setMinimalShellMode(true)
-    }
-  }, [store.shell.minimalShellMode, store])
+type Props = {
+  next: () => void
+  skip: () => void
+}
 
-  const next = () => {
-    const nextScreenName = store.onboarding.next('Welcome')
-    if (nextScreenName) {
-      navigation.navigate(nextScreenName)
-    }
-  }
+export const Welcome = observer(({next, skip}: Props) => {
+  const pal = usePalette('default')
 
   return (
-    <View style={[styles.container]}>
-      <View testID="welcomeScreen">
+    <View style={[styles.container]} testID="welcomeOnboarding">
+      <ViewHeader
+        showOnDesktop
+        showBorder={false}
+        showBackButton={false}
+        title=""
+        renderButton={() => {
+          return (
+            <Pressable
+              accessibilityRole="button"
+              style={[s.flexRow, s.alignCenter]}
+              onPress={skip}>
+              <Text style={[pal.link]}>Skip</Text>
+              <FontAwesomeIcon
+                icon={'chevron-right'}
+                size={14}
+                color={pal.colors.link}
+              />
+            </Pressable>
+          )
+        }}
+      />
+      <View>
         <Text style={[pal.text, styles.title]}>Welcome to </Text>
         <Text style={[pal.text, pal.link, styles.title]}>Bluesky</Text>
-
         <View style={styles.spacer} />
-
         <View style={[styles.row]}>
           <FontAwesomeIcon icon={'globe'} size={36} color={pal.colors.link} />
           <View style={[styles.rowText]}>
@@ -85,35 +90,10 @@ export const Welcome = observer(({navigation}: Props) => {
   )
 })
 
-export const WelcomeHeaderRight = (props: HeaderButtonProps) => {
-  const {canGoBack} = props
-  const pal = usePalette('default')
-  const navigation = useNavigation<NavigationProp<HomeTabNavigatorParams>>()
-  const store = useStores()
-  return (
-    <Pressable
-      accessibilityRole="button"
-      style={[s.flexRow, s.alignCenter]}
-      onPress={() => {
-        if (canGoBack) {
-          store.onboarding.skip()
-          navigation.goBack()
-        }
-      }}>
-      <Text style={[pal.link]}>Skip</Text>
-      <FontAwesomeIcon
-        icon={'chevron-right'}
-        size={14}
-        color={pal.colors.link}
-      />
-    </Pressable>
-  )
-}
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    marginVertical: 60,
+    marginBottom: isDesktopWeb ? 30 : 60,
     marginHorizontal: 16,
     justifyContent: 'space-between',
   },
diff --git a/src/view/com/modals/Modal.web.tsx b/src/view/com/modals/Modal.web.tsx
index 6aef1b71c..20da99e81 100644
--- a/src/view/com/modals/Modal.web.tsx
+++ b/src/view/com/modals/Modal.web.tsx
@@ -27,7 +27,7 @@ import * as ContentFilteringSettingsModal from './ContentFilteringSettings'
 import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings'
 import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings'
 import * as ModerationDetailsModal from './ModerationDetails'
-
+import * as OnboardingModal from './OnboardingModal'
 import * as PreferencesHomeFeed from './PreferencesHomeFeed'
 
 export const ModalsContainer = observer(function ModalsContainer() {
@@ -55,7 +55,11 @@ function Modal({modal}: {modal: ModalIface}) {
   }
 
   const onPressMask = () => {
-    if (modal.name === 'crop-image' || modal.name === 'edit-image') {
+    if (
+      modal.name === 'crop-image' ||
+      modal.name === 'edit-image' ||
+      modal.name === 'onboarding'
+    ) {
       return // dont close on mask presses during crop
     }
     store.shell.closeModal()
@@ -110,6 +114,8 @@ function Modal({modal}: {modal: ModalIface}) {
     element = <PreferencesHomeFeed.Component />
   } else if (modal.name === 'moderation-details') {
     element = <ModerationDetailsModal.Component {...modal} />
+  } else if (modal.name === 'onboarding') {
+    element = <OnboardingModal.Component />
   } else {
     return null
   }
diff --git a/src/view/com/modals/OnboardingModal.tsx b/src/view/com/modals/OnboardingModal.tsx
new file mode 100644
index 000000000..3862736cf
--- /dev/null
+++ b/src/view/com/modals/OnboardingModal.tsx
@@ -0,0 +1,40 @@
+import React from 'react'
+import {StyleSheet, View} from 'react-native'
+import {useStores} from 'state/index'
+
+import {usePalette} from 'lib/hooks/usePalette'
+import {isDesktopWeb} from 'platform/detection'
+import {Welcome} from '../auth/onboarding/Welcome'
+import {observer} from 'mobx-react-lite'
+import {RecommendedFeeds} from '../auth/onboarding/RecommendedFeeds'
+
+export const snapPoints = ['90%']
+
+export const Component = observer(({}: {}) => {
+  const pal = usePalette('default')
+  const store = useStores()
+
+  const next = () => {
+    const nextScreenName = store.onboarding.next()
+    if (nextScreenName === 'Home') {
+      store.shell.closeModal()
+    }
+  }
+
+  return (
+    <View style={[styles.container, pal.view]} testID="onboardingModal">
+      {store.onboarding.step === 'Welcome' ? <Welcome next={next} /> : null}
+      {store.onboarding.step === 'RecommendedFeeds' ? (
+        <RecommendedFeeds next={next} />
+      ) : null}
+    </View>
+  )
+})
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingBottom: isDesktopWeb ? 0 : 50,
+    maxHeight: '750px',
+  },
+})
diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx
index f5a921ac0..47e631072 100644
--- a/src/view/com/util/ViewHeader.tsx
+++ b/src/view/com/util/ViewHeader.tsx
@@ -17,6 +17,7 @@ const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20}
 export const ViewHeader = observer(function ({
   title,
   canGoBack,
+  showBackButton = true,
   hideOnScroll,
   showOnDesktop,
   showBorder,
@@ -24,6 +25,7 @@ export const ViewHeader = observer(function ({
 }: {
   title: string
   canGoBack?: boolean
+  showBackButton?: boolean
   hideOnScroll?: boolean
   showOnDesktop?: boolean
   showBorder?: boolean
@@ -49,7 +51,13 @@ export const ViewHeader = observer(function ({
 
   if (isDesktopWeb) {
     if (showOnDesktop) {
-      return <DesktopWebHeader title={title} renderButton={renderButton} />
+      return (
+        <DesktopWebHeader
+          title={title}
+          renderButton={renderButton}
+          showBorder={showBorder}
+        />
+      )
     }
     return null
   } else {
@@ -59,30 +67,32 @@ export const ViewHeader = observer(function ({
 
     return (
       <Container hideOnScroll={hideOnScroll || false} showBorder={showBorder}>
-        <TouchableOpacity
-          testID="viewHeaderDrawerBtn"
-          onPress={canGoBack ? onPressBack : onPressMenu}
-          hitSlop={BACK_HITSLOP}
-          style={canGoBack ? styles.backBtn : styles.backBtnWide}
-          accessibilityRole="button"
-          accessibilityLabel={canGoBack ? 'Back' : 'Menu'}
-          accessibilityHint={
-            canGoBack ? '' : 'Access navigation links and settings'
-          }>
-          {canGoBack ? (
-            <FontAwesomeIcon
-              size={18}
-              icon="angle-left"
-              style={[styles.backIcon, pal.text]}
-            />
-          ) : (
-            <FontAwesomeIcon
-              size={18}
-              icon="bars"
-              style={[styles.backIcon, pal.textLight]}
-            />
-          )}
-        </TouchableOpacity>
+        {showBackButton ? (
+          <TouchableOpacity
+            testID="viewHeaderDrawerBtn"
+            onPress={canGoBack ? onPressBack : onPressMenu}
+            hitSlop={BACK_HITSLOP}
+            style={canGoBack ? styles.backBtn : styles.backBtnWide}
+            accessibilityRole="button"
+            accessibilityLabel={canGoBack ? 'Back' : 'Menu'}
+            accessibilityHint={
+              canGoBack ? '' : 'Access navigation links and settings'
+            }>
+            {canGoBack ? (
+              <FontAwesomeIcon
+                size={18}
+                icon="angle-left"
+                style={[styles.backIcon, pal.text]}
+              />
+            ) : (
+              <FontAwesomeIcon
+                size={18}
+                icon="bars"
+                style={[styles.backIcon, pal.textLight]}
+              />
+            )}
+          </TouchableOpacity>
+        ) : null}
         <View style={styles.titleContainer} pointerEvents="none">
           <Text type="title" style={[pal.text, styles.title]}>
             {title}
@@ -101,13 +111,23 @@ export const ViewHeader = observer(function ({
 function DesktopWebHeader({
   title,
   renderButton,
+  showBorder = true,
 }: {
   title: string
   renderButton?: () => JSX.Element
+  showBorder?: boolean
 }) {
   const pal = usePalette('default')
   return (
-    <CenteredView style={[styles.header, styles.desktopHeader, pal.border]}>
+    <CenteredView
+      style={[
+        styles.header,
+        styles.desktopHeader,
+        pal.border,
+        {
+          borderBottomWidth: showBorder ? 1 : 0,
+        },
+      ]}>
       <View style={styles.titleContainer} pointerEvents="none">
         <Text type="title-lg" style={[pal.text, styles.title]}>
           {title}
@@ -195,13 +215,11 @@ const styles = StyleSheet.create({
     width: '100%',
   },
   desktopHeader: {
-    borderBottomWidth: 1,
     paddingVertical: 12,
   },
   border: {
     borderBottomWidth: 1,
   },
-
   titleContainer: {
     marginLeft: 'auto',
     marginRight: 'auto',
diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
index 7017c698c..4397200e4 100644
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -21,6 +21,7 @@ import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {ComposeIcon2} from 'lib/icons'
 import {isDesktopWeb, isMobileWebMediaQuery, isWeb} from 'platform/detection'
+import {useOnboarding} from 'lib/hooks/useOnboarding'
 
 const HEADER_OFFSET_MOBILE = 78
 const HEADER_OFFSET_DESKTOP = 50
@@ -31,7 +32,7 @@ const POLL_FREQ = 30e3 // 30sec
 
 type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>
 export const HomeScreen = withAuthRequired(
-  observer(({navigation}: Props) => {
+  observer(({}: Props) => {
     const store = useStores()
     const pagerRef = React.useRef<PagerRef>(null)
     const [selectedPage, setSelectedPage] = React.useState(0)
@@ -39,12 +40,7 @@ export const HomeScreen = withAuthRequired(
     const [requestedCustomFeeds, setRequestedCustomFeeds] = React.useState<
       string[]
     >([])
-
-    React.useEffect(() => {
-      if (store.onboarding.isActive) {
-        navigation.navigate('Welcome')
-      }
-    }, [store.onboarding.isActive, navigation])
+    useOnboarding()
 
     React.useEffect(() => {
       const {pinned} = store.me.savedFeeds
diff --git a/src/view/screens/onboarding/RecommendedFeeds.tsx b/src/view/screens/onboarding/RecommendedFeeds.tsx
new file mode 100644
index 000000000..d27278456
--- /dev/null
+++ b/src/view/screens/onboarding/RecommendedFeeds.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import {NativeStackScreenProps} from '@react-navigation/native-stack'
+import {HomeTabNavigatorParams} from 'lib/routes/types'
+import {useStores} from 'state/index'
+import {observer} from 'mobx-react-lite'
+import {RecommendedFeeds} from 'view/com/auth/onboarding/RecommendedFeeds'
+
+type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'RecommendedFeeds'>
+export const RecommendedFeedsScreen = observer(({navigation}: Props) => {
+  const store = useStores()
+
+  const next = () => {
+    const nextScreenName = store.onboarding.next('RecommendedFeeds')
+    if (nextScreenName) {
+      navigation.navigate(nextScreenName)
+    }
+  }
+
+  return <RecommendedFeeds next={next} />
+})
diff --git a/src/view/screens/onboarding/Welcome.tsx b/src/view/screens/onboarding/Welcome.tsx
new file mode 100644
index 000000000..ea3e5ed77
--- /dev/null
+++ b/src/view/screens/onboarding/Welcome.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import {NativeStackScreenProps} from '@react-navigation/native-stack'
+import {HomeTabNavigatorParams} from 'lib/routes/types'
+import {useStores} from 'state/index'
+import {observer} from 'mobx-react-lite'
+import {Welcome} from 'view/com/auth/onboarding/Welcome'
+
+type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Welcome'>
+export const WelcomeScreen = observer(({navigation}: Props) => {
+  const store = useStores()
+
+  // make sure bottom nav is hidden
+  React.useEffect(() => {
+    if (!store.shell.minimalShellMode) {
+      store.shell.setMinimalShellMode(true)
+    }
+  }, [store.shell.minimalShellMode, store])
+
+  const next = () => {
+    const nextScreenName = store.onboarding.next('Welcome')
+    if (nextScreenName) {
+      navigation.navigate(nextScreenName)
+    }
+  }
+
+  const skip = () => {
+    store.onboarding.skip()
+    navigation.navigate('Home')
+  }
+
+  return <Welcome next={next} skip={skip} />
+})
-- 
cgit 1.4.1


From 5d9534ca7258e6165e537b89d999a8c494501dc0 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Tue, 29 Aug 2023 20:20:51 -0700
Subject: Move onboarding to the withAuthRequired HOC

---
 src/Navigation.tsx                      | 18 ---------------
 src/lib/hooks/useOnboarding.ts          | 23 -------------------
 src/lib/routes/types.ts                 |  5 -----
 src/state/models/ui/shell.ts            |  7 ------
 src/view/com/auth/Onboarding.tsx        | 40 +++++++++++++++++++++++++++++++++
 src/view/com/auth/withAuthRequired.tsx  |  4 ++++
 src/view/com/modals/Modal.web.tsx       |  9 +-------
 src/view/com/modals/OnboardingModal.tsx | 40 ---------------------------------
 src/view/screens/Home.tsx               |  2 --
 9 files changed, 45 insertions(+), 103 deletions(-)
 delete mode 100644 src/lib/hooks/useOnboarding.ts
 create mode 100644 src/view/com/auth/Onboarding.tsx
 delete mode 100644 src/view/com/modals/OnboardingModal.tsx

(limited to 'src')

diff --git a/src/Navigation.tsx b/src/Navigation.tsx
index 334370ab0..d45376ef1 100644
--- a/src/Navigation.tsx
+++ b/src/Navigation.tsx
@@ -67,8 +67,6 @@ import {getRoutingInstrumentation} from 'lib/sentry'
 import {bskyTitle} from 'lib/strings/headings'
 import {JSX} from 'react/jsx-runtime'
 import {timeout} from 'lib/async/timeout'
-import {RecommendedFeedsScreen} from 'view/screens/onboarding/RecommendedFeeds'
-import {WelcomeScreen} from 'view/screens/onboarding/Welcome'
 
 const navigationRef = createNavigationContainerRef<AllNavigatorParams>()
 
@@ -221,22 +219,6 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
         component={SavedFeeds}
         options={{title: title('Edit My Feeds')}}
       />
-      <Stack.Screen
-        name="Welcome"
-        component={WelcomeScreen}
-        options={{
-          title: title('Welcome'),
-          presentation: 'card',
-          gestureEnabled: false,
-        }}
-      />
-      <Stack.Screen
-        name="RecommendedFeeds"
-        component={RecommendedFeedsScreen}
-        options={{
-          title: title('Recommended Feeds'),
-        }}
-      />
     </>
   )
 }
diff --git a/src/lib/hooks/useOnboarding.ts b/src/lib/hooks/useOnboarding.ts
deleted file mode 100644
index cdf24bc14..000000000
--- a/src/lib/hooks/useOnboarding.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react'
-import {useStores} from 'state/index'
-import {useNavigation} from '@react-navigation/native'
-import {NavigationProp} from 'lib/routes/types'
-import {isNative, isWeb} from 'platform/detection'
-
-export function useOnboarding() {
-  const store = useStores()
-  const navigation = useNavigation<NavigationProp>()
-
-  React.useEffect(() => {
-    if (store.onboarding.isActive) {
-      if (isWeb) {
-        store.shell.openModal({name: 'onboarding'})
-        return
-      }
-      if (isNative) {
-        navigation.navigate('Welcome')
-        return
-      }
-    }
-  }, [store.onboarding.isActive, navigation, store.shell])
-}
diff --git a/src/lib/routes/types.ts b/src/lib/routes/types.ts
index 633fa57a5..4eb5e29d2 100644
--- a/src/lib/routes/types.ts
+++ b/src/lib/routes/types.ts
@@ -1,6 +1,5 @@
 import {NavigationState, PartialState} from '@react-navigation/native'
 import type {NativeStackNavigationProp} from '@react-navigation/native-stack'
-import {OnboardingScreenSteps} from 'state/models/discovery/onboarding'
 
 export type {NativeStackScreenProps} from '@react-navigation/native-stack'
 
@@ -30,10 +29,6 @@ export type CommonNavigatorParams = {
   CopyrightPolicy: undefined
   AppPasswords: undefined
   SavedFeeds: undefined
-} & OnboardingScreenParams
-
-export type OnboardingScreenParams = {
-  [K in keyof typeof OnboardingScreenSteps]: undefined
 }
 
 export type BottomTabNavigatorParams = CommonNavigatorParams & {
diff --git a/src/state/models/ui/shell.ts b/src/state/models/ui/shell.ts
index 4c36dfdc6..a64047f9f 100644
--- a/src/state/models/ui/shell.ts
+++ b/src/state/models/ui/shell.ts
@@ -140,10 +140,6 @@ export interface PreferencesHomeFeed {
   name: 'preferences-home-feed'
 }
 
-export interface OnboardingModal {
-  name: 'onboarding'
-}
-
 export type Modal =
   // Account
   | AddAppPasswordModal
@@ -179,9 +175,6 @@ export type Modal =
   // Generic
   | ConfirmModal
 
-  // Onboarding (only used on web)
-  | OnboardingModal
-
 interface LightboxModel {}
 
 export class ProfileImageLightbox implements LightboxModel {
diff --git a/src/view/com/auth/Onboarding.tsx b/src/view/com/auth/Onboarding.tsx
new file mode 100644
index 000000000..f43d5d93a
--- /dev/null
+++ b/src/view/com/auth/Onboarding.tsx
@@ -0,0 +1,40 @@
+import React from 'react'
+import {SafeAreaView} from 'react-native'
+import {observer} from 'mobx-react-lite'
+import {ErrorBoundary} from 'view/com/util/ErrorBoundary'
+import {s} from 'lib/styles'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useStores} from 'state/index'
+import {useAnalytics} from 'lib/analytics/analytics'
+import {CenteredView} from '../util/Views'
+import {Welcome} from './onboarding/Welcome'
+import {RecommendedFeeds} from './onboarding/RecommendedFeeds'
+
+export const Onboarding = observer(() => {
+  const pal = usePalette('default')
+  const store = useStores()
+  const {screen} = useAnalytics()
+
+  React.useEffect(() => {
+    screen('Onboarding')
+    store.shell.setMinimalShellMode(true)
+  }, [store, screen])
+
+  const next = () => store.onboarding.next()
+  const skip = () => store.onboarding.skip()
+
+  return (
+    <CenteredView style={[s.hContentRegion, pal.view]}>
+      <SafeAreaView testID="noSessionView" style={s.hContentRegion}>
+        <ErrorBoundary>
+          {store.onboarding.step === 'Welcome' && (
+            <Welcome skip={skip} next={next} />
+          )}
+          {store.onboarding.step === 'RecommendedFeeds' && (
+            <RecommendedFeeds next={next} />
+          )}
+        </ErrorBoundary>
+      </SafeAreaView>
+    </CenteredView>
+  )
+})
diff --git a/src/view/com/auth/withAuthRequired.tsx b/src/view/com/auth/withAuthRequired.tsx
index 8e57669be..c81c2d5df 100644
--- a/src/view/com/auth/withAuthRequired.tsx
+++ b/src/view/com/auth/withAuthRequired.tsx
@@ -9,6 +9,7 @@ import {observer} from 'mobx-react-lite'
 import {useStores} from 'state/index'
 import {CenteredView} from '../util/Views'
 import {LoggedOut} from './LoggedOut'
+import {Onboarding} from './Onboarding'
 import {Text} from '../util/text/Text'
 import {usePalette} from 'lib/hooks/usePalette'
 import {STATUS_PAGE_URL} from 'lib/constants'
@@ -24,6 +25,9 @@ export const withAuthRequired = <P extends object>(
     if (!store.session.hasSession) {
       return <LoggedOut />
     }
+    if (store.onboarding.isActive) {
+      return <Onboarding />
+    }
     return <Component {...props} />
   })
 
diff --git a/src/view/com/modals/Modal.web.tsx b/src/view/com/modals/Modal.web.tsx
index 20da99e81..3aeddeb6b 100644
--- a/src/view/com/modals/Modal.web.tsx
+++ b/src/view/com/modals/Modal.web.tsx
@@ -27,7 +27,6 @@ import * as ContentFilteringSettingsModal from './ContentFilteringSettings'
 import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings'
 import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings'
 import * as ModerationDetailsModal from './ModerationDetails'
-import * as OnboardingModal from './OnboardingModal'
 import * as PreferencesHomeFeed from './PreferencesHomeFeed'
 
 export const ModalsContainer = observer(function ModalsContainer() {
@@ -55,11 +54,7 @@ function Modal({modal}: {modal: ModalIface}) {
   }
 
   const onPressMask = () => {
-    if (
-      modal.name === 'crop-image' ||
-      modal.name === 'edit-image' ||
-      modal.name === 'onboarding'
-    ) {
+    if (modal.name === 'crop-image' || modal.name === 'edit-image') {
       return // dont close on mask presses during crop
     }
     store.shell.closeModal()
@@ -114,8 +109,6 @@ function Modal({modal}: {modal: ModalIface}) {
     element = <PreferencesHomeFeed.Component />
   } else if (modal.name === 'moderation-details') {
     element = <ModerationDetailsModal.Component {...modal} />
-  } else if (modal.name === 'onboarding') {
-    element = <OnboardingModal.Component />
   } else {
     return null
   }
diff --git a/src/view/com/modals/OnboardingModal.tsx b/src/view/com/modals/OnboardingModal.tsx
deleted file mode 100644
index 3862736cf..000000000
--- a/src/view/com/modals/OnboardingModal.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react'
-import {StyleSheet, View} from 'react-native'
-import {useStores} from 'state/index'
-
-import {usePalette} from 'lib/hooks/usePalette'
-import {isDesktopWeb} from 'platform/detection'
-import {Welcome} from '../auth/onboarding/Welcome'
-import {observer} from 'mobx-react-lite'
-import {RecommendedFeeds} from '../auth/onboarding/RecommendedFeeds'
-
-export const snapPoints = ['90%']
-
-export const Component = observer(({}: {}) => {
-  const pal = usePalette('default')
-  const store = useStores()
-
-  const next = () => {
-    const nextScreenName = store.onboarding.next()
-    if (nextScreenName === 'Home') {
-      store.shell.closeModal()
-    }
-  }
-
-  return (
-    <View style={[styles.container, pal.view]} testID="onboardingModal">
-      {store.onboarding.step === 'Welcome' ? <Welcome next={next} /> : null}
-      {store.onboarding.step === 'RecommendedFeeds' ? (
-        <RecommendedFeeds next={next} />
-      ) : null}
-    </View>
-  )
-})
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingBottom: isDesktopWeb ? 0 : 50,
-    maxHeight: '750px',
-  },
-})
diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
index 4397200e4..7262756d3 100644
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -21,7 +21,6 @@ import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {ComposeIcon2} from 'lib/icons'
 import {isDesktopWeb, isMobileWebMediaQuery, isWeb} from 'platform/detection'
-import {useOnboarding} from 'lib/hooks/useOnboarding'
 
 const HEADER_OFFSET_MOBILE = 78
 const HEADER_OFFSET_DESKTOP = 50
@@ -40,7 +39,6 @@ export const HomeScreen = withAuthRequired(
     const [requestedCustomFeeds, setRequestedCustomFeeds] = React.useState<
       string[]
     >([])
-    useOnboarding()
 
     React.useEffect(() => {
       const {pinned} = store.me.savedFeeds
-- 
cgit 1.4.1


From 5e765bf1cb29d30d627552da84d02594f506af1f Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Tue, 29 Aug 2023 22:56:13 -0700
Subject: Rework web onboarding

---
 src/lib/constants.ts                               | 107 +++++++++++
 src/state/models/feeds/custom-feed.ts              |  13 ++
 src/view/com/auth/Onboarding.tsx                   |  23 +--
 src/view/com/auth/onboarding/RecommendedFeeds.tsx  | 110 +----------
 .../com/auth/onboarding/RecommendedFeeds.web.tsx   | 214 +++++++++++++++++++++
 src/view/com/auth/onboarding/Welcome.tsx           |   8 +-
 src/view/com/auth/onboarding/Welcome.web.tsx       | 123 ++++++++++++
 src/view/com/util/layouts/TitleColumnLayout.tsx    |  62 ++++++
 src/view/shell/index.web.tsx                       |   5 +-
 9 files changed, 539 insertions(+), 126 deletions(-)
 create mode 100644 src/view/com/auth/onboarding/RecommendedFeeds.web.tsx
 create mode 100644 src/view/com/auth/onboarding/Welcome.web.tsx
 create mode 100644 src/view/com/util/layouts/TitleColumnLayout.tsx

(limited to 'src')

diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 001cdf8c3..94551e6ef 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -148,3 +148,110 @@ export const HITSLOP_10 = createHitslop(10)
 export const HITSLOP_20 = createHitslop(20)
 export const HITSLOP_30 = createHitslop(30)
 export const BACK_HITSLOP = HITSLOP_30
+
+export const RECOMMENDED_FEEDS = [
+  {
+    did: 'did:plc:hsqwcidfez66lwm3gxhfv5in',
+    rkey: 'aaaf2pqeodmpy',
+  },
+  {
+    did: 'did:plc:gekdk2nd47gkk3utfz2xf7cn',
+    rkey: 'aaap4tbjcfe5y',
+  },
+  {
+    did: 'did:plc:5rw2on4i56btlcajojaxwcat',
+    rkey: 'aaao6g552b33o',
+  },
+  {
+    did: 'did:plc:jfhpnnst6flqway4eaeqzj2a',
+    rkey: 'for-science',
+  },
+  {
+    did: 'did:plc:7q4nnnxawajbfaq7to5dpbsy',
+    rkey: 'bsky-news',
+  },
+  {
+    did: 'did:plc:jcoy7v3a2t4rcfdh6i4kza25',
+    rkey: 'astro',
+  },
+  {
+    did: 'did:plc:tenurhgjptubkk5zf5qhi3og',
+    rkey: 'h-nba',
+  },
+  {
+    did: 'did:plc:vpkhqolt662uhesyj6nxm7ys',
+    rkey: 'devfeed',
+  },
+  {
+    did: 'did:plc:cndfx4udwgvpjaakvxvh7wm5',
+    rkey: 'flipboard-tech',
+  },
+  {
+    did: 'did:plc:w4xbfzo7kqfes5zb7r6qv3rw',
+    rkey: 'blacksky',
+  },
+  {
+    did: 'did:plc:lptjvw6ut224kwrj7ub3sqbe',
+    rkey: 'aaaotfjzjplna',
+  },
+  {
+    did: 'did:plc:gkvpokm7ec5j5yxls6xk4e3z',
+    rkey: 'formula-one',
+  },
+  {
+    did: 'did:plc:q6gjnaw2blty4crticxkmujt',
+    rkey: 'positivifeed',
+  },
+  {
+    did: 'did:plc:l72uci4styb4jucsgcrrj5ap',
+    rkey: 'aaao5dzfm36u4',
+  },
+  {
+    did: 'did:plc:k3jkadxv5kkjgs6boyon7m6n',
+    rkey: 'aaaavlyvqzst2',
+  },
+  {
+    did: 'did:plc:nkahctfdi6bxk72umytfwghw',
+    rkey: 'aaado2uvfsc6w',
+  },
+  {
+    did: 'did:plc:epihigio3d7un7u3gpqiy5gv',
+    rkey: 'aaaekwsc7zsvs',
+  },
+  {
+    did: 'did:plc:qiknc4t5rq7yngvz7g4aezq7',
+    rkey: 'aaaejxlobe474',
+  },
+  {
+    did: 'did:plc:mlq4aycufcuolr7ax6sezpc4',
+    rkey: 'aaaoudweck6uy',
+  },
+  {
+    did: 'did:plc:rcez5hcvq3vzlu5x7xrjyccg',
+    rkey: 'aaadzjxbcddzi',
+  },
+  {
+    did: 'did:plc:lnxbuzaenlwjrncx6sc4cfdr',
+    rkey: 'aaab2vesjtszc',
+  },
+  {
+    did: 'did:plc:x3cya3wkt4n6u4ihmvpsc5if',
+    rkey: 'aaacynbxwimok',
+  },
+  {
+    did: 'did:plc:abv47bjgzjgoh3yrygwoi36x',
+    rkey: 'aaagt6amuur5e',
+  },
+  {
+    did: 'did:plc:ffkgesg3jsv2j7aagkzrtcvt',
+    rkey: 'aaacjerk7gwek',
+  },
+  {
+    did: 'did:plc:geoqe3qls5mwezckxxsewys2',
+    rkey: 'aaai43yetqshu',
+  },
+  {
+    did: 'did:plc:2wqomm3tjqbgktbrfwgvrw34',
+    rkey: 'authors',
+  },
+]
diff --git a/src/state/models/feeds/custom-feed.ts b/src/state/models/feeds/custom-feed.ts
index 3c6d52755..2de4534e7 100644
--- a/src/state/models/feeds/custom-feed.ts
+++ b/src/state/models/feeds/custom-feed.ts
@@ -67,6 +67,19 @@ export class CustomFeedModel {
     }
   }
 
+  async pin() {
+    try {
+      await this.rootStore.preferences.addPinnedFeed(this.uri)
+    } catch (error) {
+      this.rootStore.log.error('Failed to pin feed', error)
+    } finally {
+      track('CustomFeed:Pin', {
+        name: this.data.displayName,
+        uri: this.uri,
+      })
+    }
+  }
+
   async unsave() {
     try {
       await this.rootStore.preferences.removeSavedFeed(this.uri)
diff --git a/src/view/com/auth/Onboarding.tsx b/src/view/com/auth/Onboarding.tsx
index f43d5d93a..2f0acfc47 100644
--- a/src/view/com/auth/Onboarding.tsx
+++ b/src/view/com/auth/Onboarding.tsx
@@ -6,7 +6,6 @@ import {s} from 'lib/styles'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useStores} from 'state/index'
 import {useAnalytics} from 'lib/analytics/analytics'
-import {CenteredView} from '../util/Views'
 import {Welcome} from './onboarding/Welcome'
 import {RecommendedFeeds} from './onboarding/RecommendedFeeds'
 
@@ -24,17 +23,15 @@ export const Onboarding = observer(() => {
   const skip = () => store.onboarding.skip()
 
   return (
-    <CenteredView style={[s.hContentRegion, pal.view]}>
-      <SafeAreaView testID="noSessionView" style={s.hContentRegion}>
-        <ErrorBoundary>
-          {store.onboarding.step === 'Welcome' && (
-            <Welcome skip={skip} next={next} />
-          )}
-          {store.onboarding.step === 'RecommendedFeeds' && (
-            <RecommendedFeeds next={next} />
-          )}
-        </ErrorBoundary>
-      </SafeAreaView>
-    </CenteredView>
+    <SafeAreaView testID="onboardingView" style={[s.hContentRegion, pal.view]}>
+      <ErrorBoundary>
+        {store.onboarding.step === 'Welcome' && (
+          <Welcome skip={skip} next={next} />
+        )}
+        {store.onboarding.step === 'RecommendedFeeds' && (
+          <RecommendedFeeds next={next} />
+        )}
+      </ErrorBoundary>
+    </SafeAreaView>
   )
 })
diff --git a/src/view/com/auth/onboarding/RecommendedFeeds.tsx b/src/view/com/auth/onboarding/RecommendedFeeds.tsx
index fa9d69f98..f6b40b88d 100644
--- a/src/view/com/auth/onboarding/RecommendedFeeds.tsx
+++ b/src/view/com/auth/onboarding/RecommendedFeeds.tsx
@@ -9,113 +9,7 @@ import {useCustomFeed} from 'lib/hooks/useCustomFeed'
 import {makeRecordUri} from 'lib/strings/url-helpers'
 import {ViewHeader} from 'view/com/util/ViewHeader'
 import {isDesktopWeb} from 'platform/detection'
-
-const TEMPORARY_RECOMMENDED_FEEDS = [
-  {
-    did: 'did:plc:hsqwcidfez66lwm3gxhfv5in',
-    rkey: 'aaaf2pqeodmpy',
-  },
-  {
-    did: 'did:plc:gekdk2nd47gkk3utfz2xf7cn',
-    rkey: 'aaap4tbjcfe5y',
-  },
-  {
-    did: 'did:plc:5rw2on4i56btlcajojaxwcat',
-    rkey: 'aaao6g552b33o',
-  },
-  {
-    did: 'did:plc:jfhpnnst6flqway4eaeqzj2a',
-    rkey: 'for-science',
-  },
-  {
-    did: 'did:plc:7q4nnnxawajbfaq7to5dpbsy',
-    rkey: 'bsky-news',
-  },
-  {
-    did: 'did:plc:jcoy7v3a2t4rcfdh6i4kza25',
-    rkey: 'astro',
-  },
-  {
-    did: 'did:plc:tenurhgjptubkk5zf5qhi3og',
-    rkey: 'h-nba',
-  },
-  {
-    did: 'did:plc:vpkhqolt662uhesyj6nxm7ys',
-    rkey: 'devfeed',
-  },
-  {
-    did: 'did:plc:cndfx4udwgvpjaakvxvh7wm5',
-    rkey: 'flipboard-tech',
-  },
-  {
-    did: 'did:plc:w4xbfzo7kqfes5zb7r6qv3rw',
-    rkey: 'blacksky',
-  },
-  {
-    did: 'did:plc:lptjvw6ut224kwrj7ub3sqbe',
-    rkey: 'aaaotfjzjplna',
-  },
-  {
-    did: 'did:plc:gkvpokm7ec5j5yxls6xk4e3z',
-    rkey: 'formula-one',
-  },
-  {
-    did: 'did:plc:q6gjnaw2blty4crticxkmujt',
-    rkey: 'positivifeed',
-  },
-  {
-    did: 'did:plc:l72uci4styb4jucsgcrrj5ap',
-    rkey: 'aaao5dzfm36u4',
-  },
-  {
-    did: 'did:plc:k3jkadxv5kkjgs6boyon7m6n',
-    rkey: 'aaaavlyvqzst2',
-  },
-  {
-    did: 'did:plc:nkahctfdi6bxk72umytfwghw',
-    rkey: 'aaado2uvfsc6w',
-  },
-  {
-    did: 'did:plc:epihigio3d7un7u3gpqiy5gv',
-    rkey: 'aaaekwsc7zsvs',
-  },
-  {
-    did: 'did:plc:qiknc4t5rq7yngvz7g4aezq7',
-    rkey: 'aaaejxlobe474',
-  },
-  {
-    did: 'did:plc:mlq4aycufcuolr7ax6sezpc4',
-    rkey: 'aaaoudweck6uy',
-  },
-  {
-    did: 'did:plc:rcez5hcvq3vzlu5x7xrjyccg',
-    rkey: 'aaadzjxbcddzi',
-  },
-  {
-    did: 'did:plc:lnxbuzaenlwjrncx6sc4cfdr',
-    rkey: 'aaab2vesjtszc',
-  },
-  {
-    did: 'did:plc:x3cya3wkt4n6u4ihmvpsc5if',
-    rkey: 'aaacynbxwimok',
-  },
-  {
-    did: 'did:plc:abv47bjgzjgoh3yrygwoi36x',
-    rkey: 'aaagt6amuur5e',
-  },
-  {
-    did: 'did:plc:ffkgesg3jsv2j7aagkzrtcvt',
-    rkey: 'aaacjerk7gwek',
-  },
-  {
-    did: 'did:plc:geoqe3qls5mwezckxxsewys2',
-    rkey: 'aaai43yetqshu',
-  },
-  {
-    did: 'did:plc:2wqomm3tjqbgktbrfwgvrw34',
-    rkey: 'authors',
-  },
-]
+import {RECOMMENDED_FEEDS} from 'lib/constants'
 
 type Props = {
   next: () => void
@@ -132,7 +26,7 @@ export const RecommendedFeeds = observer(({next}: Props) => {
       </Text>
 
       <FlatList
-        data={TEMPORARY_RECOMMENDED_FEEDS}
+        data={RECOMMENDED_FEEDS}
         renderItem={({item}) => <Item item={item} />}
         keyExtractor={item => item.did + item.rkey}
         style={{flex: 1}}
diff --git a/src/view/com/auth/onboarding/RecommendedFeeds.web.tsx b/src/view/com/auth/onboarding/RecommendedFeeds.web.tsx
new file mode 100644
index 000000000..9038c7a5a
--- /dev/null
+++ b/src/view/com/auth/onboarding/RecommendedFeeds.web.tsx
@@ -0,0 +1,214 @@
+import React from 'react'
+import {FlatList, StyleSheet, View} from 'react-native'
+import {observer} from 'mobx-react-lite'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {Text} from 'view/com/util/text/Text'
+import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout'
+import {UserAvatar} from 'view/com/util/UserAvatar'
+import {Button} from 'view/com/util/forms/Button'
+import * as Toast from 'view/com/util/Toast'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useCustomFeed} from 'lib/hooks/useCustomFeed'
+import {makeRecordUri} from 'lib/strings/url-helpers'
+import {sanitizeHandle} from 'lib/strings/handles'
+import {HeartIcon} from 'lib/icons'
+import {RECOMMENDED_FEEDS} from 'lib/constants'
+
+type Props = {
+  next: () => void
+}
+export const RecommendedFeeds = observer(({next}: Props) => {
+  const pal = usePalette('default')
+
+  const title = (
+    <>
+      <Text style={[pal.textLight, styles.title1]}>Choose your</Text>
+      <Text style={[pal.link, styles.title2]}>Recomended</Text>
+      <Text style={[pal.link, styles.title2]}>Feeds</Text>
+      <Text type="2xl-medium" style={[pal.textLight, styles.description]}>
+        Feeds are created by users to curate content. Choose some feeds that you
+        find interesting.
+      </Text>
+      <View
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'flex-end',
+          marginTop: 20,
+        }}>
+        <Button onPress={next} testID="continueBtn">
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              paddingLeft: 2,
+              gap: 6,
+            }}>
+            <Text
+              type="2xl-medium"
+              style={{color: '#fff', position: 'relative', top: -1}}>
+              Done
+            </Text>
+            <FontAwesomeIcon icon="angle-right" color="#fff" size={14} />
+          </View>
+        </Button>
+      </View>
+    </>
+  )
+
+  return (
+    <TitleColumnLayout
+      testID="recommendedFeedsScreen"
+      title={title}
+      horizontal
+      titleStyle={{minWidth: 470}}
+      contentStyle={{paddingHorizontal: 0}}>
+      <FlatList
+        data={RECOMMENDED_FEEDS}
+        renderItem={({item}) => <Item {...item} />}
+        keyExtractor={item => item.did + item.rkey}
+        style={{flex: 1}}
+      />
+    </TitleColumnLayout>
+  )
+})
+
+const Item = observer(({did, rkey}: {did: string; rkey: string}) => {
+  const pal = usePalette('default')
+  const uri = makeRecordUri(did, 'app.bsky.feed.generator', rkey)
+  const item = useCustomFeed(uri)
+  if (!item) return null
+  const onToggle = async () => {
+    if (item.isSaved) {
+      try {
+        await item.unsave()
+      } catch (e) {
+        Toast.show('There was an issue contacting your server')
+        console.error('Failed to unsave feed', {e})
+      }
+    } else {
+      try {
+        await item.save()
+        await item.pin()
+      } catch (e) {
+        Toast.show('There was an issue contacting your server')
+        console.error('Failed to pin feed', {e})
+      }
+    }
+  }
+  return (
+    <View testID={`feed-${item.displayName}`}>
+      <View
+        style={[
+          pal.border,
+          {
+            flexDirection: 'row',
+            gap: 18,
+            maxWidth: 670,
+            borderRightWidth: 1,
+            paddingHorizontal: 24,
+            paddingVertical: 24,
+            borderTopWidth: 1,
+          },
+        ]}>
+        <View style={{marginTop: 2}}>
+          <UserAvatar type="algo" size={42} avatar={item.data.avatar} />
+        </View>
+        <View>
+          <Text
+            type="2xl-bold"
+            numberOfLines={1}
+            style={[pal.text, {fontSize: 19}]}>
+            {item.displayName}
+          </Text>
+
+          <Text style={[pal.textLight, {marginBottom: 8}]} numberOfLines={1}>
+            by {sanitizeHandle(item.data.creator.handle, '@')}
+          </Text>
+
+          {item.data.description ? (
+            <Text
+              type="xl"
+              style={[pal.text, {maxWidth: 550, marginBottom: 18}]}
+              numberOfLines={6}>
+              {item.data.description}
+            </Text>
+          ) : null}
+
+          <View style={{flexDirection: 'row', alignItems: 'center', gap: 12}}>
+            <Button
+              type="inverted"
+              style={{paddingVertical: 6}}
+              onPress={onToggle}>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  paddingRight: 2,
+                  gap: 6,
+                }}>
+                {item.isSaved ? (
+                  <>
+                    <FontAwesomeIcon
+                      icon="check"
+                      size={16}
+                      color={pal.colors.textInverted}
+                    />
+                    <Text type="lg-medium" style={pal.textInverted}>
+                      Added
+                    </Text>
+                  </>
+                ) : (
+                  <>
+                    <FontAwesomeIcon
+                      icon="plus"
+                      size={16}
+                      color={pal.colors.textInverted}
+                    />
+                    <Text type="lg-medium" style={pal.textInverted}>
+                      Add
+                    </Text>
+                  </>
+                )}
+              </View>
+            </Button>
+
+            <View style={{flexDirection: 'row', gap: 4}}>
+              <HeartIcon
+                size={16}
+                strokeWidth={2.5}
+                style={[pal.textLight, {position: 'relative', top: 2}]}
+              />
+              <Text type="lg-medium" style={[pal.text, pal.textLight]}>
+                {item.data.likeCount || 0}
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  )
+})
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginHorizontal: 16,
+    justifyContent: 'space-between',
+  },
+  title1: {
+    fontSize: 36,
+    fontWeight: '800',
+    textAlign: 'right',
+  },
+  title2: {
+    fontSize: 58,
+    fontWeight: '800',
+    textAlign: 'right',
+  },
+  description: {
+    maxWidth: 400,
+    marginTop: 10,
+    marginLeft: 'auto',
+    textAlign: 'right',
+  },
+})
diff --git a/src/view/com/auth/onboarding/Welcome.tsx b/src/view/com/auth/onboarding/Welcome.tsx
index a322e4d4f..6f95c0853 100644
--- a/src/view/com/auth/onboarding/Welcome.tsx
+++ b/src/view/com/auth/onboarding/Welcome.tsx
@@ -41,8 +41,10 @@ export const Welcome = observer(({next, skip}: Props) => {
         }}
       />
       <View>
-        <Text style={[pal.text, styles.title]}>Welcome to </Text>
-        <Text style={[pal.text, pal.link, styles.title]}>Bluesky</Text>
+        <Text style={[pal.text, styles.title]}>
+          Welcome to{' '}
+          <Text style={[pal.text, pal.link, styles.title]}>Bluesky</Text>
+        </Text>
         <View style={styles.spacer} />
         <View style={[styles.row]}>
           <FontAwesomeIcon icon={'globe'} size={36} color={pal.colors.link} />
@@ -98,7 +100,7 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
   },
   title: {
-    fontSize: 48,
+    fontSize: 42,
     fontWeight: '800',
   },
   row: {
diff --git a/src/view/com/auth/onboarding/Welcome.web.tsx b/src/view/com/auth/onboarding/Welcome.web.tsx
new file mode 100644
index 000000000..af3ca7074
--- /dev/null
+++ b/src/view/com/auth/onboarding/Welcome.web.tsx
@@ -0,0 +1,123 @@
+import React from 'react'
+import {StyleSheet, View} from 'react-native'
+import {useMediaQuery} from 'react-responsive'
+import {Text} from 'view/com/util/text/Text'
+import {s} from 'lib/styles'
+import {usePalette} from 'lib/hooks/usePalette'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout'
+import {Button} from 'view/com/util/forms/Button'
+import {observer} from 'mobx-react-lite'
+
+type Props = {
+  next: () => void
+  skip: () => void
+}
+
+export const Welcome = observer(({next}: Props) => {
+  const pal = usePalette('default')
+  const horizontal = useMediaQuery({
+    query: '(min-width: 1230px)',
+  })
+  const title = (
+    <>
+      <Text
+        style={[
+          pal.textLight,
+          {
+            fontSize: 36,
+            fontWeight: '800',
+            textAlign: horizontal ? 'right' : 'left',
+          },
+        ]}>
+        Welcome to
+      </Text>
+      <Text
+        style={[
+          pal.link,
+          {
+            fontSize: 72,
+            fontWeight: '800',
+            textAlign: horizontal ? 'right' : 'left',
+          },
+        ]}>
+        Bluesky
+      </Text>
+    </>
+  )
+  return (
+    <TitleColumnLayout
+      testID="welcomeOnboarding"
+      title={title}
+      horizontal={horizontal}
+      titleStyle={horizontal ? {paddingBottom: 160} : undefined}>
+      <View style={[styles.row]}>
+        <FontAwesomeIcon icon={'globe'} size={36} color={pal.colors.link} />
+        <View style={[styles.rowText]}>
+          <Text type="xl-bold" style={[pal.text]}>
+            Bluesky is public.
+          </Text>
+          <Text type="xl" style={[pal.text, s.pt2]}>
+            Your posts, likes, and blocks are public. Mutes are private.
+          </Text>
+        </View>
+      </View>
+      <View style={[styles.row]}>
+        <FontAwesomeIcon icon={'at'} size={36} color={pal.colors.link} />
+        <View style={[styles.rowText]}>
+          <Text type="xl-bold" style={[pal.text]}>
+            Bluesky is open.
+          </Text>
+          <Text type="xl" style={[pal.text, s.pt2]}>
+            Never lose access to your followers and data.
+          </Text>
+        </View>
+      </View>
+      <View style={[styles.row]}>
+        <FontAwesomeIcon icon={'gear'} size={36} color={pal.colors.link} />
+        <View style={[styles.rowText]}>
+          <Text type="xl-bold" style={[pal.text]}>
+            Bluesky is flexible.
+          </Text>
+          <Text type="xl" style={[pal.text, s.pt2]}>
+            Choose the algorithms that power your experience with custom feeds.
+          </Text>
+        </View>
+      </View>
+      <View style={styles.spacer} />
+      <View style={{flexDirection: 'row'}}>
+        <Button onPress={next} testID="continueBtn">
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              paddingLeft: 2,
+              gap: 6,
+            }}>
+            <Text
+              type="2xl-medium"
+              style={{color: '#fff', position: 'relative', top: -1}}>
+              Next
+            </Text>
+            <FontAwesomeIcon icon="angle-right" color="#fff" size={14} />
+          </View>
+        </Button>
+      </View>
+    </TitleColumnLayout>
+  )
+})
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    columnGap: 20,
+    alignItems: 'center',
+    marginVertical: 20,
+  },
+  rowText: {
+    flex: 1,
+  },
+  spacer: {
+    height: 20,
+  },
+})
diff --git a/src/view/com/util/layouts/TitleColumnLayout.tsx b/src/view/com/util/layouts/TitleColumnLayout.tsx
new file mode 100644
index 000000000..3ca10868e
--- /dev/null
+++ b/src/view/com/util/layouts/TitleColumnLayout.tsx
@@ -0,0 +1,62 @@
+import React from 'react'
+import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
+import {usePalette} from 'lib/hooks/usePalette'
+
+interface Props {
+  testID?: string
+  title: React.Component
+  horizontal: boolean
+  titleStyle?: StyleProp<ViewStyle>
+  contentStyle?: StyleProp<ViewStyle>
+}
+
+export function TitleColumnLayout({
+  testID,
+  title,
+  horizontal,
+  children,
+  titleStyle,
+  contentStyle,
+}: React.PropsWithChildren<Props>) {
+  const pal = usePalette('default')
+
+  const layoutStyles = horizontal ? styles2Column : styles1Column
+  return (
+    <View testID={testID} style={layoutStyles.container}>
+      <View style={[layoutStyles.title, pal.viewLight, titleStyle]}>
+        {title}
+      </View>
+      <View style={[layoutStyles.content, contentStyle]}>{children}</View>
+    </View>
+  )
+}
+
+const styles2Column = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    height: '100%',
+  },
+  title: {
+    flex: 1,
+    paddingHorizontal: 40,
+    paddingBottom: 80,
+    justifyContent: 'center',
+  },
+  content: {
+    flex: 2,
+    paddingHorizontal: 40,
+    justifyContent: 'center',
+  },
+})
+
+const styles1Column = StyleSheet.create({
+  container: {},
+  title: {
+    paddingHorizontal: 40,
+    paddingVertical: 40,
+  },
+  content: {
+    paddingHorizontal: 40,
+    paddingVertical: 40,
+  },
+})
diff --git a/src/view/shell/index.web.tsx b/src/view/shell/index.web.tsx
index 16ed17a5b..9ad8007f6 100644
--- a/src/view/shell/index.web.tsx
+++ b/src/view/shell/index.web.tsx
@@ -20,7 +20,6 @@ import {NavigationProp} from 'lib/routes/types'
 const ShellInner = observer(() => {
   const store = useStores()
   const {isDesktop} = useWebMediaQueries()
-
   const navigator = useNavigation<NavigationProp>()
 
   useEffect(() => {
@@ -29,6 +28,8 @@ const ShellInner = observer(() => {
     })
   }, [navigator, store.shell])
 
+  const showSideNavs =
+    isDesktop && store.session.hasSession && !store.onboarding.isActive
   return (
     <>
       <View style={s.hContentRegion}>
@@ -36,7 +37,7 @@ const ShellInner = observer(() => {
           <FlatNavigator />
         </ErrorBoundary>
       </View>
-      {isDesktop && store.session.hasSession && (
+      {showSideNavs && (
         <>
           <DesktopLeftNav />
           <DesktopRightNav />
-- 
cgit 1.4.1


From b847917969a2b86388ca88a84d6c8616bc40aeaf Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Tue, 29 Aug 2023 23:02:37 -0700
Subject: Tweaks to mobile onboard

---
 src/view/com/auth/onboarding/RecommendedFeeds.tsx | 9 +++++----
 src/view/com/util/ViewHeader.tsx                  | 4 ++--
 2 files changed, 7 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/view/com/auth/onboarding/RecommendedFeeds.tsx b/src/view/com/auth/onboarding/RecommendedFeeds.tsx
index f6b40b88d..4a3200168 100644
--- a/src/view/com/auth/onboarding/RecommendedFeeds.tsx
+++ b/src/view/com/auth/onboarding/RecommendedFeeds.tsx
@@ -19,9 +19,9 @@ export const RecommendedFeeds = observer(({next}: Props) => {
 
   return (
     <View style={[styles.container]} testID="recommendedFeedsScreen">
-      <ViewHeader title="Recommended Feeds" canGoBack={true} />
+      <ViewHeader title="Recommended Feeds" showBackButton={false} />
       <Text type="lg-medium" style={[pal.text, styles.header]}>
-        Check out some recommended feeds. Click + to add them to your list of
+        Check out some recommended feeds. Tap + to add them to your list of
         pinned feeds.
       </Text>
 
@@ -72,14 +72,15 @@ const Item = ({item}: {item: ItemProps}) => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    marginHorizontal: 16,
     justifyContent: 'space-between',
   },
   header: {
     marginBottom: 16,
+    marginHorizontal: 16,
   },
   button: {
-    marginBottom: 48,
+    marginBottom: 24,
+    marginHorizontal: 16,
     marginTop: 16,
   },
   buttonText: {
diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx
index 47e631072..7482db8eb 100644
--- a/src/view/com/util/ViewHeader.tsx
+++ b/src/view/com/util/ViewHeader.tsx
@@ -100,9 +100,9 @@ export const ViewHeader = observer(function ({
         </View>
         {renderButton ? (
           renderButton()
-        ) : (
+        ) : showBackButton ? (
           <View style={canGoBack ? styles.backBtn : styles.backBtnWide} />
-        )}
+        ) : null}
       </Container>
     )
   }
-- 
cgit 1.4.1


From cd8ae1298e6ef67e5c40cdde24449b49ae2d914b Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Wed, 30 Aug 2023 10:56:07 -0700
Subject: Tweak dark mode on web

---
 src/view/com/util/layouts/TitleColumnLayout.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/view/com/util/layouts/TitleColumnLayout.tsx b/src/view/com/util/layouts/TitleColumnLayout.tsx
index 3ca10868e..7047446e3 100644
--- a/src/view/com/util/layouts/TitleColumnLayout.tsx
+++ b/src/view/com/util/layouts/TitleColumnLayout.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
 import {usePalette} from 'lib/hooks/usePalette'
+import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
 
 interface Props {
   testID?: string
@@ -19,14 +20,20 @@ export function TitleColumnLayout({
   contentStyle,
 }: React.PropsWithChildren<Props>) {
   const pal = usePalette('default')
+  const titleBg = useColorSchemeStyle(pal.viewLight, pal.view)
+  const contentBg = useColorSchemeStyle(pal.view, {
+    backgroundColor: pal.colors.background,
+    borderColor: pal.colors.border,
+    borderLeftWidth: 1,
+  })
 
   const layoutStyles = horizontal ? styles2Column : styles1Column
   return (
     <View testID={testID} style={layoutStyles.container}>
-      <View style={[layoutStyles.title, pal.viewLight, titleStyle]}>
-        {title}
+      <View style={[layoutStyles.title, titleBg, titleStyle]}>{title}</View>
+      <View style={[layoutStyles.content, contentBg, contentStyle]}>
+        {children}
       </View>
-      <View style={[layoutStyles.content, contentStyle]}>{children}</View>
     </View>
   )
 }
-- 
cgit 1.4.1


From 05d1d8d8a4565e7d042f8c09760186b4037dcd2f Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Wed, 30 Aug 2023 14:57:03 -0700
Subject: Fix onboarding on mobile web

---
 src/view/com/auth/onboarding/RecommendedFeeds.tsx  | 101 +---------
 .../com/auth/onboarding/RecommendedFeeds.web.tsx   | 214 ---------------------
 .../auth/onboarding/RecommendedFeedsDesktop.tsx    | 214 +++++++++++++++++++++
 .../com/auth/onboarding/RecommendedFeedsMobile.tsx |  95 +++++++++
 src/view/com/auth/onboarding/Welcome.tsx           | 133 +------------
 src/view/com/auth/onboarding/Welcome.web.tsx       | 123 ------------
 src/view/com/auth/onboarding/WelcomeDesktop.tsx    | 123 ++++++++++++
 src/view/com/auth/onboarding/WelcomeMobile.tsx     | 123 ++++++++++++
 src/view/com/util/layouts/withBreakpoints.tsx      |  22 +++
 9 files changed, 597 insertions(+), 551 deletions(-)
 delete mode 100644 src/view/com/auth/onboarding/RecommendedFeeds.web.tsx
 create mode 100644 src/view/com/auth/onboarding/RecommendedFeedsDesktop.tsx
 create mode 100644 src/view/com/auth/onboarding/RecommendedFeedsMobile.tsx
 delete mode 100644 src/view/com/auth/onboarding/Welcome.web.tsx
 create mode 100644 src/view/com/auth/onboarding/WelcomeDesktop.tsx
 create mode 100644 src/view/com/auth/onboarding/WelcomeMobile.tsx
 create mode 100644 src/view/com/util/layouts/withBreakpoints.tsx

(limited to 'src')

diff --git a/src/view/com/auth/onboarding/RecommendedFeeds.tsx b/src/view/com/auth/onboarding/RecommendedFeeds.tsx
index 4a3200168..76204ce31 100644
--- a/src/view/com/auth/onboarding/RecommendedFeeds.tsx
+++ b/src/view/com/auth/onboarding/RecommendedFeeds.tsx
@@ -1,91 +1,10 @@
-import React from 'react'
-import {FlatList, StyleSheet, View} from 'react-native'
-import {Text} from 'view/com/util/text/Text'
-import {usePalette} from 'lib/hooks/usePalette'
-import {Button} from 'view/com/util/forms/Button'
-import {observer} from 'mobx-react-lite'
-import {CustomFeed} from 'view/com/feeds/CustomFeed'
-import {useCustomFeed} from 'lib/hooks/useCustomFeed'
-import {makeRecordUri} from 'lib/strings/url-helpers'
-import {ViewHeader} from 'view/com/util/ViewHeader'
-import {isDesktopWeb} from 'platform/detection'
-import {RECOMMENDED_FEEDS} from 'lib/constants'
-
-type Props = {
-  next: () => void
-}
-export const RecommendedFeeds = observer(({next}: Props) => {
-  const pal = usePalette('default')
-
-  return (
-    <View style={[styles.container]} testID="recommendedFeedsScreen">
-      <ViewHeader title="Recommended Feeds" showBackButton={false} />
-      <Text type="lg-medium" style={[pal.text, styles.header]}>
-        Check out some recommended feeds. Tap + to add them to your list of
-        pinned feeds.
-      </Text>
-
-      <FlatList
-        data={RECOMMENDED_FEEDS}
-        renderItem={({item}) => <Item item={item} />}
-        keyExtractor={item => item.did + item.rkey}
-        style={{flex: 1}}
-      />
-
-      <Button
-        onPress={next}
-        label="Continue"
-        testID="continueBtn"
-        style={styles.button}
-        labelStyle={styles.buttonText}
-      />
-    </View>
-  )
-})
-
-type ItemProps = {
-  did: string
-  rkey: string
-}
-
-const Item = ({item}: {item: ItemProps}) => {
-  const uri = makeRecordUri(item.did, 'app.bsky.feed.generator', item.rkey)
-  const data = useCustomFeed(uri)
-  if (!data) return null
-  return (
-    <CustomFeed
-      item={data}
-      key={uri}
-      showDescription
-      showLikes
-      showSaveBtn
-      style={[
-        {
-          // @ts-ignore
-          cursor: isDesktopWeb ? 'pointer' : 'auto',
-        },
-      ]}
-    />
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'space-between',
-  },
-  header: {
-    marginBottom: 16,
-    marginHorizontal: 16,
-  },
-  button: {
-    marginBottom: 24,
-    marginHorizontal: 16,
-    marginTop: 16,
-  },
-  buttonText: {
-    textAlign: 'center',
-    fontSize: 18,
-    paddingVertical: 4,
-  },
-})
+import 'react'
+import {withBreakpoints} from 'view/com/util/layouts/withBreakpoints'
+import {RecommendedFeedsDesktop} from './RecommendedFeedsDesktop'
+import {RecommendedFeedsMobile} from './RecommendedFeedsMobile'
+
+export const RecommendedFeeds = withBreakpoints(
+  RecommendedFeedsMobile,
+  RecommendedFeedsMobile,
+  RecommendedFeedsDesktop,
+)
diff --git a/src/view/com/auth/onboarding/RecommendedFeeds.web.tsx b/src/view/com/auth/onboarding/RecommendedFeeds.web.tsx
deleted file mode 100644
index 9038c7a5a..000000000
--- a/src/view/com/auth/onboarding/RecommendedFeeds.web.tsx
+++ /dev/null
@@ -1,214 +0,0 @@
-import React from 'react'
-import {FlatList, StyleSheet, View} from 'react-native'
-import {observer} from 'mobx-react-lite'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {Text} from 'view/com/util/text/Text'
-import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout'
-import {UserAvatar} from 'view/com/util/UserAvatar'
-import {Button} from 'view/com/util/forms/Button'
-import * as Toast from 'view/com/util/Toast'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useCustomFeed} from 'lib/hooks/useCustomFeed'
-import {makeRecordUri} from 'lib/strings/url-helpers'
-import {sanitizeHandle} from 'lib/strings/handles'
-import {HeartIcon} from 'lib/icons'
-import {RECOMMENDED_FEEDS} from 'lib/constants'
-
-type Props = {
-  next: () => void
-}
-export const RecommendedFeeds = observer(({next}: Props) => {
-  const pal = usePalette('default')
-
-  const title = (
-    <>
-      <Text style={[pal.textLight, styles.title1]}>Choose your</Text>
-      <Text style={[pal.link, styles.title2]}>Recomended</Text>
-      <Text style={[pal.link, styles.title2]}>Feeds</Text>
-      <Text type="2xl-medium" style={[pal.textLight, styles.description]}>
-        Feeds are created by users to curate content. Choose some feeds that you
-        find interesting.
-      </Text>
-      <View
-        style={{
-          flexDirection: 'row',
-          justifyContent: 'flex-end',
-          marginTop: 20,
-        }}>
-        <Button onPress={next} testID="continueBtn">
-          <View
-            style={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              paddingLeft: 2,
-              gap: 6,
-            }}>
-            <Text
-              type="2xl-medium"
-              style={{color: '#fff', position: 'relative', top: -1}}>
-              Done
-            </Text>
-            <FontAwesomeIcon icon="angle-right" color="#fff" size={14} />
-          </View>
-        </Button>
-      </View>
-    </>
-  )
-
-  return (
-    <TitleColumnLayout
-      testID="recommendedFeedsScreen"
-      title={title}
-      horizontal
-      titleStyle={{minWidth: 470}}
-      contentStyle={{paddingHorizontal: 0}}>
-      <FlatList
-        data={RECOMMENDED_FEEDS}
-        renderItem={({item}) => <Item {...item} />}
-        keyExtractor={item => item.did + item.rkey}
-        style={{flex: 1}}
-      />
-    </TitleColumnLayout>
-  )
-})
-
-const Item = observer(({did, rkey}: {did: string; rkey: string}) => {
-  const pal = usePalette('default')
-  const uri = makeRecordUri(did, 'app.bsky.feed.generator', rkey)
-  const item = useCustomFeed(uri)
-  if (!item) return null
-  const onToggle = async () => {
-    if (item.isSaved) {
-      try {
-        await item.unsave()
-      } catch (e) {
-        Toast.show('There was an issue contacting your server')
-        console.error('Failed to unsave feed', {e})
-      }
-    } else {
-      try {
-        await item.save()
-        await item.pin()
-      } catch (e) {
-        Toast.show('There was an issue contacting your server')
-        console.error('Failed to pin feed', {e})
-      }
-    }
-  }
-  return (
-    <View testID={`feed-${item.displayName}`}>
-      <View
-        style={[
-          pal.border,
-          {
-            flexDirection: 'row',
-            gap: 18,
-            maxWidth: 670,
-            borderRightWidth: 1,
-            paddingHorizontal: 24,
-            paddingVertical: 24,
-            borderTopWidth: 1,
-          },
-        ]}>
-        <View style={{marginTop: 2}}>
-          <UserAvatar type="algo" size={42} avatar={item.data.avatar} />
-        </View>
-        <View>
-          <Text
-            type="2xl-bold"
-            numberOfLines={1}
-            style={[pal.text, {fontSize: 19}]}>
-            {item.displayName}
-          </Text>
-
-          <Text style={[pal.textLight, {marginBottom: 8}]} numberOfLines={1}>
-            by {sanitizeHandle(item.data.creator.handle, '@')}
-          </Text>
-
-          {item.data.description ? (
-            <Text
-              type="xl"
-              style={[pal.text, {maxWidth: 550, marginBottom: 18}]}
-              numberOfLines={6}>
-              {item.data.description}
-            </Text>
-          ) : null}
-
-          <View style={{flexDirection: 'row', alignItems: 'center', gap: 12}}>
-            <Button
-              type="inverted"
-              style={{paddingVertical: 6}}
-              onPress={onToggle}>
-              <View
-                style={{
-                  flexDirection: 'row',
-                  alignItems: 'center',
-                  paddingRight: 2,
-                  gap: 6,
-                }}>
-                {item.isSaved ? (
-                  <>
-                    <FontAwesomeIcon
-                      icon="check"
-                      size={16}
-                      color={pal.colors.textInverted}
-                    />
-                    <Text type="lg-medium" style={pal.textInverted}>
-                      Added
-                    </Text>
-                  </>
-                ) : (
-                  <>
-                    <FontAwesomeIcon
-                      icon="plus"
-                      size={16}
-                      color={pal.colors.textInverted}
-                    />
-                    <Text type="lg-medium" style={pal.textInverted}>
-                      Add
-                    </Text>
-                  </>
-                )}
-              </View>
-            </Button>
-
-            <View style={{flexDirection: 'row', gap: 4}}>
-              <HeartIcon
-                size={16}
-                strokeWidth={2.5}
-                style={[pal.textLight, {position: 'relative', top: 2}]}
-              />
-              <Text type="lg-medium" style={[pal.text, pal.textLight]}>
-                {item.data.likeCount || 0}
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-  )
-})
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginHorizontal: 16,
-    justifyContent: 'space-between',
-  },
-  title1: {
-    fontSize: 36,
-    fontWeight: '800',
-    textAlign: 'right',
-  },
-  title2: {
-    fontSize: 58,
-    fontWeight: '800',
-    textAlign: 'right',
-  },
-  description: {
-    maxWidth: 400,
-    marginTop: 10,
-    marginLeft: 'auto',
-    textAlign: 'right',
-  },
-})
diff --git a/src/view/com/auth/onboarding/RecommendedFeedsDesktop.tsx b/src/view/com/auth/onboarding/RecommendedFeedsDesktop.tsx
new file mode 100644
index 000000000..d305f4a82
--- /dev/null
+++ b/src/view/com/auth/onboarding/RecommendedFeedsDesktop.tsx
@@ -0,0 +1,214 @@
+import React from 'react'
+import {FlatList, StyleSheet, View} from 'react-native'
+import {observer} from 'mobx-react-lite'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {Text} from 'view/com/util/text/Text'
+import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout'
+import {UserAvatar} from 'view/com/util/UserAvatar'
+import {Button} from 'view/com/util/forms/Button'
+import * as Toast from 'view/com/util/Toast'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useCustomFeed} from 'lib/hooks/useCustomFeed'
+import {makeRecordUri} from 'lib/strings/url-helpers'
+import {sanitizeHandle} from 'lib/strings/handles'
+import {HeartIcon} from 'lib/icons'
+import {RECOMMENDED_FEEDS} from 'lib/constants'
+
+type Props = {
+  next: () => void
+}
+export const RecommendedFeedsDesktop = observer(({next}: Props) => {
+  const pal = usePalette('default')
+
+  const title = (
+    <>
+      <Text style={[pal.textLight, styles.title1]}>Choose your</Text>
+      <Text style={[pal.link, styles.title2]}>Recomended</Text>
+      <Text style={[pal.link, styles.title2]}>Feeds</Text>
+      <Text type="2xl-medium" style={[pal.textLight, styles.description]}>
+        Feeds are created by users to curate content. Choose some feeds that you
+        find interesting.
+      </Text>
+      <View
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'flex-end',
+          marginTop: 20,
+        }}>
+        <Button onPress={next} testID="continueBtn">
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              paddingLeft: 2,
+              gap: 6,
+            }}>
+            <Text
+              type="2xl-medium"
+              style={{color: '#fff', position: 'relative', top: -1}}>
+              Done
+            </Text>
+            <FontAwesomeIcon icon="angle-right" color="#fff" size={14} />
+          </View>
+        </Button>
+      </View>
+    </>
+  )
+
+  return (
+    <TitleColumnLayout
+      testID="recommendedFeedsScreen"
+      title={title}
+      horizontal
+      titleStyle={{minWidth: 470}}
+      contentStyle={{paddingHorizontal: 0}}>
+      <FlatList
+        data={RECOMMENDED_FEEDS}
+        renderItem={({item}) => <Item {...item} />}
+        keyExtractor={item => item.did + item.rkey}
+        style={{flex: 1}}
+      />
+    </TitleColumnLayout>
+  )
+})
+
+const Item = observer(({did, rkey}: {did: string; rkey: string}) => {
+  const pal = usePalette('default')
+  const uri = makeRecordUri(did, 'app.bsky.feed.generator', rkey)
+  const item = useCustomFeed(uri)
+  if (!item) return null
+  const onToggle = async () => {
+    if (item.isSaved) {
+      try {
+        await item.unsave()
+      } catch (e) {
+        Toast.show('There was an issue contacting your server')
+        console.error('Failed to unsave feed', {e})
+      }
+    } else {
+      try {
+        await item.save()
+        await item.pin()
+      } catch (e) {
+        Toast.show('There was an issue contacting your server')
+        console.error('Failed to pin feed', {e})
+      }
+    }
+  }
+  return (
+    <View testID={`feed-${item.displayName}`}>
+      <View
+        style={[
+          pal.border,
+          {
+            flexDirection: 'row',
+            gap: 18,
+            maxWidth: 670,
+            borderRightWidth: 1,
+            paddingHorizontal: 24,
+            paddingVertical: 24,
+            borderTopWidth: 1,
+          },
+        ]}>
+        <View style={{marginTop: 2}}>
+          <UserAvatar type="algo" size={42} avatar={item.data.avatar} />
+        </View>
+        <View>
+          <Text
+            type="2xl-bold"
+            numberOfLines={1}
+            style={[pal.text, {fontSize: 19}]}>
+            {item.displayName}
+          </Text>
+
+          <Text style={[pal.textLight, {marginBottom: 8}]} numberOfLines={1}>
+            by {sanitizeHandle(item.data.creator.handle, '@')}
+          </Text>
+
+          {item.data.description ? (
+            <Text
+              type="xl"
+              style={[pal.text, {maxWidth: 550, marginBottom: 18}]}
+              numberOfLines={6}>
+              {item.data.description}
+            </Text>
+          ) : null}
+
+          <View style={{flexDirection: 'row', alignItems: 'center', gap: 12}}>
+            <Button
+              type="inverted"
+              style={{paddingVertical: 6}}
+              onPress={onToggle}>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  paddingRight: 2,
+                  gap: 6,
+                }}>
+                {item.isSaved ? (
+                  <>
+                    <FontAwesomeIcon
+                      icon="check"
+                      size={16}
+                      color={pal.colors.textInverted}
+                    />
+                    <Text type="lg-medium" style={pal.textInverted}>
+                      Added
+                    </Text>
+                  </>
+                ) : (
+                  <>
+                    <FontAwesomeIcon
+                      icon="plus"
+                      size={16}
+                      color={pal.colors.textInverted}
+                    />
+                    <Text type="lg-medium" style={pal.textInverted}>
+                      Add
+                    </Text>
+                  </>
+                )}
+              </View>
+            </Button>
+
+            <View style={{flexDirection: 'row', gap: 4}}>
+              <HeartIcon
+                size={16}
+                strokeWidth={2.5}
+                style={[pal.textLight, {position: 'relative', top: 2}]}
+              />
+              <Text type="lg-medium" style={[pal.text, pal.textLight]}>
+                {item.data.likeCount || 0}
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  )
+})
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginHorizontal: 16,
+    justifyContent: 'space-between',
+  },
+  title1: {
+    fontSize: 36,
+    fontWeight: '800',
+    textAlign: 'right',
+  },
+  title2: {
+    fontSize: 58,
+    fontWeight: '800',
+    textAlign: 'right',
+  },
+  description: {
+    maxWidth: 400,
+    marginTop: 10,
+    marginLeft: 'auto',
+    textAlign: 'right',
+  },
+})
diff --git a/src/view/com/auth/onboarding/RecommendedFeedsMobile.tsx b/src/view/com/auth/onboarding/RecommendedFeedsMobile.tsx
new file mode 100644
index 000000000..b84b75df7
--- /dev/null
+++ b/src/view/com/auth/onboarding/RecommendedFeedsMobile.tsx
@@ -0,0 +1,95 @@
+import React from 'react'
+import {FlatList, StyleSheet, View} from 'react-native'
+import {Text} from 'view/com/util/text/Text'
+import {usePalette} from 'lib/hooks/usePalette'
+import {Button} from 'view/com/util/forms/Button'
+import {observer} from 'mobx-react-lite'
+import {CustomFeed} from 'view/com/feeds/CustomFeed'
+import {useCustomFeed} from 'lib/hooks/useCustomFeed'
+import {makeRecordUri} from 'lib/strings/url-helpers'
+import {ViewHeader} from 'view/com/util/ViewHeader'
+import {isDesktopWeb} from 'platform/detection'
+import {RECOMMENDED_FEEDS} from 'lib/constants'
+
+type Props = {
+  next: () => void
+}
+export const RecommendedFeedsMobile = observer(({next}: Props) => {
+  const pal = usePalette('default')
+
+  return (
+    <View style={[styles.container]} testID="recommendedFeedsScreen">
+      <ViewHeader
+        title="Recommended Feeds"
+        showBackButton={false}
+        showOnDesktop
+      />
+      <Text type="lg-medium" style={[pal.text, styles.header]}>
+        Check out some recommended feeds. Tap + to add them to your list of
+        pinned feeds.
+      </Text>
+
+      <FlatList
+        data={RECOMMENDED_FEEDS}
+        renderItem={({item}) => <Item item={item} />}
+        keyExtractor={item => item.did + item.rkey}
+        style={{flex: 1}}
+      />
+
+      <Button
+        onPress={next}
+        label="Continue"
+        testID="continueBtn"
+        style={styles.button}
+        labelStyle={styles.buttonText}
+      />
+    </View>
+  )
+})
+
+type ItemProps = {
+  did: string
+  rkey: string
+}
+
+const Item = ({item}: {item: ItemProps}) => {
+  const uri = makeRecordUri(item.did, 'app.bsky.feed.generator', item.rkey)
+  const data = useCustomFeed(uri)
+  if (!data) return null
+  return (
+    <CustomFeed
+      item={data}
+      key={uri}
+      showDescription
+      showLikes
+      showSaveBtn
+      style={[
+        {
+          // @ts-ignore
+          cursor: isDesktopWeb ? 'pointer' : 'auto',
+        },
+      ]}
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+  header: {
+    marginBottom: 16,
+    marginHorizontal: 16,
+  },
+  button: {
+    marginBottom: 24,
+    marginHorizontal: 16,
+    marginTop: 16,
+  },
+  buttonText: {
+    textAlign: 'center',
+    fontSize: 18,
+    paddingVertical: 4,
+  },
+})
diff --git a/src/view/com/auth/onboarding/Welcome.tsx b/src/view/com/auth/onboarding/Welcome.tsx
index 6f95c0853..b44b58f84 100644
--- a/src/view/com/auth/onboarding/Welcome.tsx
+++ b/src/view/com/auth/onboarding/Welcome.tsx
@@ -1,123 +1,10 @@
-import React from 'react'
-import {Pressable, StyleSheet, View} from 'react-native'
-import {Text} from 'view/com/util/text/Text'
-import {s} from 'lib/styles'
-import {usePalette} from 'lib/hooks/usePalette'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {Button} from 'view/com/util/forms/Button'
-import {observer} from 'mobx-react-lite'
-import {ViewHeader} from 'view/com/util/ViewHeader'
-import {isDesktopWeb} from 'platform/detection'
-
-type Props = {
-  next: () => void
-  skip: () => void
-}
-
-export const Welcome = observer(({next, skip}: Props) => {
-  const pal = usePalette('default')
-
-  return (
-    <View style={[styles.container]} testID="welcomeOnboarding">
-      <ViewHeader
-        showOnDesktop
-        showBorder={false}
-        showBackButton={false}
-        title=""
-        renderButton={() => {
-          return (
-            <Pressable
-              accessibilityRole="button"
-              style={[s.flexRow, s.alignCenter]}
-              onPress={skip}>
-              <Text style={[pal.link]}>Skip</Text>
-              <FontAwesomeIcon
-                icon={'chevron-right'}
-                size={14}
-                color={pal.colors.link}
-              />
-            </Pressable>
-          )
-        }}
-      />
-      <View>
-        <Text style={[pal.text, styles.title]}>
-          Welcome to{' '}
-          <Text style={[pal.text, pal.link, styles.title]}>Bluesky</Text>
-        </Text>
-        <View style={styles.spacer} />
-        <View style={[styles.row]}>
-          <FontAwesomeIcon icon={'globe'} size={36} color={pal.colors.link} />
-          <View style={[styles.rowText]}>
-            <Text type="lg-bold" style={[pal.text]}>
-              Bluesky is public.
-            </Text>
-            <Text type="lg-thin" style={[pal.text, s.pt2]}>
-              Your posts, likes, and blocks are public. Mutes are private.
-            </Text>
-          </View>
-        </View>
-        <View style={[styles.row]}>
-          <FontAwesomeIcon icon={'at'} size={36} color={pal.colors.link} />
-          <View style={[styles.rowText]}>
-            <Text type="lg-bold" style={[pal.text]}>
-              Bluesky is open.
-            </Text>
-            <Text type="lg-thin" style={[pal.text, s.pt2]}>
-              Never lose access to your followers and data.
-            </Text>
-          </View>
-        </View>
-        <View style={[styles.row]}>
-          <FontAwesomeIcon icon={'gear'} size={36} color={pal.colors.link} />
-          <View style={[styles.rowText]}>
-            <Text type="lg-bold" style={[pal.text]}>
-              Bluesky is flexible.
-            </Text>
-            <Text type="lg-thin" style={[pal.text, s.pt2]}>
-              Choose the algorithms that power your experience with custom
-              feeds.
-            </Text>
-          </View>
-        </View>
-      </View>
-
-      <Button
-        onPress={next}
-        label="Continue"
-        testID="continueBtn"
-        labelStyle={styles.buttonText}
-      />
-    </View>
-  )
-})
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginBottom: isDesktopWeb ? 30 : 60,
-    marginHorizontal: 16,
-    justifyContent: 'space-between',
-  },
-  title: {
-    fontSize: 42,
-    fontWeight: '800',
-  },
-  row: {
-    flexDirection: 'row',
-    columnGap: 20,
-    alignItems: 'center',
-    marginVertical: 20,
-  },
-  rowText: {
-    flex: 1,
-  },
-  spacer: {
-    height: 20,
-  },
-  buttonText: {
-    textAlign: 'center',
-    fontSize: 18,
-    marginVertical: 4,
-  },
-})
+import 'react'
+import {withBreakpoints} from 'view/com/util/layouts/withBreakpoints'
+import {WelcomeDesktop} from './WelcomeDesktop'
+import {WelcomeMobile} from './WelcomeMobile'
+
+export const Welcome = withBreakpoints(
+  WelcomeMobile,
+  WelcomeDesktop,
+  WelcomeDesktop,
+)
diff --git a/src/view/com/auth/onboarding/Welcome.web.tsx b/src/view/com/auth/onboarding/Welcome.web.tsx
deleted file mode 100644
index af3ca7074..000000000
--- a/src/view/com/auth/onboarding/Welcome.web.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import React from 'react'
-import {StyleSheet, View} from 'react-native'
-import {useMediaQuery} from 'react-responsive'
-import {Text} from 'view/com/util/text/Text'
-import {s} from 'lib/styles'
-import {usePalette} from 'lib/hooks/usePalette'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout'
-import {Button} from 'view/com/util/forms/Button'
-import {observer} from 'mobx-react-lite'
-
-type Props = {
-  next: () => void
-  skip: () => void
-}
-
-export const Welcome = observer(({next}: Props) => {
-  const pal = usePalette('default')
-  const horizontal = useMediaQuery({
-    query: '(min-width: 1230px)',
-  })
-  const title = (
-    <>
-      <Text
-        style={[
-          pal.textLight,
-          {
-            fontSize: 36,
-            fontWeight: '800',
-            textAlign: horizontal ? 'right' : 'left',
-          },
-        ]}>
-        Welcome to
-      </Text>
-      <Text
-        style={[
-          pal.link,
-          {
-            fontSize: 72,
-            fontWeight: '800',
-            textAlign: horizontal ? 'right' : 'left',
-          },
-        ]}>
-        Bluesky
-      </Text>
-    </>
-  )
-  return (
-    <TitleColumnLayout
-      testID="welcomeOnboarding"
-      title={title}
-      horizontal={horizontal}
-      titleStyle={horizontal ? {paddingBottom: 160} : undefined}>
-      <View style={[styles.row]}>
-        <FontAwesomeIcon icon={'globe'} size={36} color={pal.colors.link} />
-        <View style={[styles.rowText]}>
-          <Text type="xl-bold" style={[pal.text]}>
-            Bluesky is public.
-          </Text>
-          <Text type="xl" style={[pal.text, s.pt2]}>
-            Your posts, likes, and blocks are public. Mutes are private.
-          </Text>
-        </View>
-      </View>
-      <View style={[styles.row]}>
-        <FontAwesomeIcon icon={'at'} size={36} color={pal.colors.link} />
-        <View style={[styles.rowText]}>
-          <Text type="xl-bold" style={[pal.text]}>
-            Bluesky is open.
-          </Text>
-          <Text type="xl" style={[pal.text, s.pt2]}>
-            Never lose access to your followers and data.
-          </Text>
-        </View>
-      </View>
-      <View style={[styles.row]}>
-        <FontAwesomeIcon icon={'gear'} size={36} color={pal.colors.link} />
-        <View style={[styles.rowText]}>
-          <Text type="xl-bold" style={[pal.text]}>
-            Bluesky is flexible.
-          </Text>
-          <Text type="xl" style={[pal.text, s.pt2]}>
-            Choose the algorithms that power your experience with custom feeds.
-          </Text>
-        </View>
-      </View>
-      <View style={styles.spacer} />
-      <View style={{flexDirection: 'row'}}>
-        <Button onPress={next} testID="continueBtn">
-          <View
-            style={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              paddingLeft: 2,
-              gap: 6,
-            }}>
-            <Text
-              type="2xl-medium"
-              style={{color: '#fff', position: 'relative', top: -1}}>
-              Next
-            </Text>
-            <FontAwesomeIcon icon="angle-right" color="#fff" size={14} />
-          </View>
-        </Button>
-      </View>
-    </TitleColumnLayout>
-  )
-})
-
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-    columnGap: 20,
-    alignItems: 'center',
-    marginVertical: 20,
-  },
-  rowText: {
-    flex: 1,
-  },
-  spacer: {
-    height: 20,
-  },
-})
diff --git a/src/view/com/auth/onboarding/WelcomeDesktop.tsx b/src/view/com/auth/onboarding/WelcomeDesktop.tsx
new file mode 100644
index 000000000..e63693443
--- /dev/null
+++ b/src/view/com/auth/onboarding/WelcomeDesktop.tsx
@@ -0,0 +1,123 @@
+import React from 'react'
+import {StyleSheet, View} from 'react-native'
+import {useMediaQuery} from 'react-responsive'
+import {Text} from 'view/com/util/text/Text'
+import {s} from 'lib/styles'
+import {usePalette} from 'lib/hooks/usePalette'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout'
+import {Button} from 'view/com/util/forms/Button'
+import {observer} from 'mobx-react-lite'
+
+type Props = {
+  next: () => void
+  skip: () => void
+}
+
+export const WelcomeDesktop = observer(({next}: Props) => {
+  const pal = usePalette('default')
+  const horizontal = useMediaQuery({
+    query: '(min-width: 1230px)',
+  })
+  const title = (
+    <>
+      <Text
+        style={[
+          pal.textLight,
+          {
+            fontSize: 36,
+            fontWeight: '800',
+            textAlign: horizontal ? 'right' : 'left',
+          },
+        ]}>
+        Welcome to
+      </Text>
+      <Text
+        style={[
+          pal.link,
+          {
+            fontSize: 72,
+            fontWeight: '800',
+            textAlign: horizontal ? 'right' : 'left',
+          },
+        ]}>
+        Bluesky
+      </Text>
+    </>
+  )
+  return (
+    <TitleColumnLayout
+      testID="welcomeOnboarding"
+      title={title}
+      horizontal={horizontal}
+      titleStyle={horizontal ? {paddingBottom: 160} : undefined}>
+      <View style={[styles.row]}>
+        <FontAwesomeIcon icon={'globe'} size={36} color={pal.colors.link} />
+        <View style={[styles.rowText]}>
+          <Text type="xl-bold" style={[pal.text]}>
+            Bluesky is public.
+          </Text>
+          <Text type="xl" style={[pal.text, s.pt2]}>
+            Your posts, likes, and blocks are public. Mutes are private.
+          </Text>
+        </View>
+      </View>
+      <View style={[styles.row]}>
+        <FontAwesomeIcon icon={'at'} size={36} color={pal.colors.link} />
+        <View style={[styles.rowText]}>
+          <Text type="xl-bold" style={[pal.text]}>
+            Bluesky is open.
+          </Text>
+          <Text type="xl" style={[pal.text, s.pt2]}>
+            Never lose access to your followers and data.
+          </Text>
+        </View>
+      </View>
+      <View style={[styles.row]}>
+        <FontAwesomeIcon icon={'gear'} size={36} color={pal.colors.link} />
+        <View style={[styles.rowText]}>
+          <Text type="xl-bold" style={[pal.text]}>
+            Bluesky is flexible.
+          </Text>
+          <Text type="xl" style={[pal.text, s.pt2]}>
+            Choose the algorithms that power your experience with custom feeds.
+          </Text>
+        </View>
+      </View>
+      <View style={styles.spacer} />
+      <View style={{flexDirection: 'row'}}>
+        <Button onPress={next} testID="continueBtn">
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              paddingLeft: 2,
+              gap: 6,
+            }}>
+            <Text
+              type="2xl-medium"
+              style={{color: '#fff', position: 'relative', top: -1}}>
+              Next
+            </Text>
+            <FontAwesomeIcon icon="angle-right" color="#fff" size={14} />
+          </View>
+        </Button>
+      </View>
+    </TitleColumnLayout>
+  )
+})
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    columnGap: 20,
+    alignItems: 'center',
+    marginVertical: 20,
+  },
+  rowText: {
+    flex: 1,
+  },
+  spacer: {
+    height: 20,
+  },
+})
diff --git a/src/view/com/auth/onboarding/WelcomeMobile.tsx b/src/view/com/auth/onboarding/WelcomeMobile.tsx
new file mode 100644
index 000000000..eb72de836
--- /dev/null
+++ b/src/view/com/auth/onboarding/WelcomeMobile.tsx
@@ -0,0 +1,123 @@
+import React from 'react'
+import {Pressable, StyleSheet, View} from 'react-native'
+import {Text} from 'view/com/util/text/Text'
+import {s} from 'lib/styles'
+import {usePalette} from 'lib/hooks/usePalette'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {Button} from 'view/com/util/forms/Button'
+import {observer} from 'mobx-react-lite'
+import {ViewHeader} from 'view/com/util/ViewHeader'
+import {isDesktopWeb} from 'platform/detection'
+
+type Props = {
+  next: () => void
+  skip: () => void
+}
+
+export const WelcomeMobile = observer(({next, skip}: Props) => {
+  const pal = usePalette('default')
+
+  return (
+    <View style={[styles.container]} testID="welcomeOnboarding">
+      <ViewHeader
+        showOnDesktop
+        showBorder={false}
+        showBackButton={false}
+        title=""
+        renderButton={() => {
+          return (
+            <Pressable
+              accessibilityRole="button"
+              style={[s.flexRow, s.alignCenter]}
+              onPress={skip}>
+              <Text style={[pal.link]}>Skip</Text>
+              <FontAwesomeIcon
+                icon={'chevron-right'}
+                size={14}
+                color={pal.colors.link}
+              />
+            </Pressable>
+          )
+        }}
+      />
+      <View>
+        <Text style={[pal.text, styles.title]}>
+          Welcome to{' '}
+          <Text style={[pal.text, pal.link, styles.title]}>Bluesky</Text>
+        </Text>
+        <View style={styles.spacer} />
+        <View style={[styles.row]}>
+          <FontAwesomeIcon icon={'globe'} size={36} color={pal.colors.link} />
+          <View style={[styles.rowText]}>
+            <Text type="lg-bold" style={[pal.text]}>
+              Bluesky is public.
+            </Text>
+            <Text type="lg-thin" style={[pal.text, s.pt2]}>
+              Your posts, likes, and blocks are public. Mutes are private.
+            </Text>
+          </View>
+        </View>
+        <View style={[styles.row]}>
+          <FontAwesomeIcon icon={'at'} size={36} color={pal.colors.link} />
+          <View style={[styles.rowText]}>
+            <Text type="lg-bold" style={[pal.text]}>
+              Bluesky is open.
+            </Text>
+            <Text type="lg-thin" style={[pal.text, s.pt2]}>
+              Never lose access to your followers and data.
+            </Text>
+          </View>
+        </View>
+        <View style={[styles.row]}>
+          <FontAwesomeIcon icon={'gear'} size={36} color={pal.colors.link} />
+          <View style={[styles.rowText]}>
+            <Text type="lg-bold" style={[pal.text]}>
+              Bluesky is flexible.
+            </Text>
+            <Text type="lg-thin" style={[pal.text, s.pt2]}>
+              Choose the algorithms that power your experience with custom
+              feeds.
+            </Text>
+          </View>
+        </View>
+      </View>
+
+      <Button
+        onPress={next}
+        label="Continue"
+        testID="continueBtn"
+        labelStyle={styles.buttonText}
+      />
+    </View>
+  )
+})
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginBottom: isDesktopWeb ? 30 : 60,
+    marginHorizontal: 16,
+    justifyContent: 'space-between',
+  },
+  title: {
+    fontSize: 42,
+    fontWeight: '800',
+  },
+  row: {
+    flexDirection: 'row',
+    columnGap: 20,
+    alignItems: 'center',
+    marginVertical: 20,
+  },
+  rowText: {
+    flex: 1,
+  },
+  spacer: {
+    height: 20,
+  },
+  buttonText: {
+    textAlign: 'center',
+    fontSize: 18,
+    marginVertical: 4,
+  },
+})
diff --git a/src/view/com/util/layouts/withBreakpoints.tsx b/src/view/com/util/layouts/withBreakpoints.tsx
new file mode 100644
index 000000000..4214c1040
--- /dev/null
+++ b/src/view/com/util/layouts/withBreakpoints.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import {useMediaQuery} from 'react-responsive'
+import {isNative} from 'platform/detection'
+
+export const withBreakpoints =
+  <P extends object>(
+    Mobile: React.ComponentType<P>,
+    Tablet: React.ComponentType<P>,
+    Desktop: React.ComponentType<P>,
+  ): React.FC<P> =>
+  (props: P) => {
+    const isTabletOrMobile = useMediaQuery({query: '(max-width: 1224px)'})
+    const isMobile = useMediaQuery({query: '(max-width: 800px)'})
+
+    if (isMobile || isNative) {
+      return <Mobile {...props} />
+    }
+    if (isTabletOrMobile) {
+      return <Tablet {...props} />
+    }
+    return <Desktop {...props} />
+  }
-- 
cgit 1.4.1


From 8ed6e72ea4a5b6546ecbbee6aa4233ee6b3aed21 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Wed, 30 Aug 2023 15:15:10 -0700
Subject: More fixes to mobile onboard

---
 src/lib/hooks/useWebMediaQueries.tsx               |  10 +-
 src/view/com/auth/onboarding/RecommendedFeeds.tsx  |   3 +-
 .../auth/onboarding/RecommendedFeedsDesktop.tsx    | 126 +-----------------
 .../com/auth/onboarding/RecommendedFeedsItem.tsx   | 142 +++++++++++++++++++++
 .../com/auth/onboarding/RecommendedFeedsMobile.tsx |  39 +-----
 .../com/auth/onboarding/RecommendedFeedsTablet.tsx |  91 +++++++++++++
 src/view/com/util/layouts/withBreakpoints.tsx      |   5 +-
 src/view/shell/index.web.tsx                       |   3 +-
 8 files changed, 254 insertions(+), 165 deletions(-)
 create mode 100644 src/view/com/auth/onboarding/RecommendedFeedsItem.tsx
 create mode 100644 src/view/com/auth/onboarding/RecommendedFeedsTablet.tsx

(limited to 'src')

diff --git a/src/lib/hooks/useWebMediaQueries.tsx b/src/lib/hooks/useWebMediaQueries.tsx
index 441585442..fd7e383f0 100644
--- a/src/lib/hooks/useWebMediaQueries.tsx
+++ b/src/lib/hooks/useWebMediaQueries.tsx
@@ -1,8 +1,14 @@
 import {useMediaQuery} from 'react-responsive'
+import {isNative} from 'platform/detection'
 
 export function useWebMediaQueries() {
   const isDesktop = useMediaQuery({
-    query: '(min-width: 1230px)',
+    query: '(min-width: 1224px)',
   })
-  return {isDesktop}
+  const isTabletOrMobile = useMediaQuery({query: '(max-width: 1224px)'})
+  const isMobile = useMediaQuery({query: '(max-width: 800px)'})
+  if (isNative) {
+    return {isMobile: true, isTabletOrMobile: true, isDesktop: false}
+  }
+  return {isMobile, isTabletOrMobile, isDesktop}
 }
diff --git a/src/view/com/auth/onboarding/RecommendedFeeds.tsx b/src/view/com/auth/onboarding/RecommendedFeeds.tsx
index 76204ce31..12c984e71 100644
--- a/src/view/com/auth/onboarding/RecommendedFeeds.tsx
+++ b/src/view/com/auth/onboarding/RecommendedFeeds.tsx
@@ -1,10 +1,11 @@
 import 'react'
 import {withBreakpoints} from 'view/com/util/layouts/withBreakpoints'
 import {RecommendedFeedsDesktop} from './RecommendedFeedsDesktop'
+import {RecommendedFeedsTablet} from './RecommendedFeedsTablet'
 import {RecommendedFeedsMobile} from './RecommendedFeedsMobile'
 
 export const RecommendedFeeds = withBreakpoints(
   RecommendedFeedsMobile,
-  RecommendedFeedsMobile,
+  RecommendedFeedsTablet,
   RecommendedFeedsDesktop,
 )
diff --git a/src/view/com/auth/onboarding/RecommendedFeedsDesktop.tsx b/src/view/com/auth/onboarding/RecommendedFeedsDesktop.tsx
index d305f4a82..937313bc6 100644
--- a/src/view/com/auth/onboarding/RecommendedFeedsDesktop.tsx
+++ b/src/view/com/auth/onboarding/RecommendedFeedsDesktop.tsx
@@ -4,14 +4,9 @@ import {observer} from 'mobx-react-lite'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {Text} from 'view/com/util/text/Text'
 import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout'
-import {UserAvatar} from 'view/com/util/UserAvatar'
 import {Button} from 'view/com/util/forms/Button'
-import * as Toast from 'view/com/util/Toast'
+import {RecommendedFeedsItem} from './RecommendedFeedsItem'
 import {usePalette} from 'lib/hooks/usePalette'
-import {useCustomFeed} from 'lib/hooks/useCustomFeed'
-import {makeRecordUri} from 'lib/strings/url-helpers'
-import {sanitizeHandle} from 'lib/strings/handles'
-import {HeartIcon} from 'lib/icons'
 import {RECOMMENDED_FEEDS} from 'lib/constants'
 
 type Props = {
@@ -64,7 +59,7 @@ export const RecommendedFeedsDesktop = observer(({next}: Props) => {
       contentStyle={{paddingHorizontal: 0}}>
       <FlatList
         data={RECOMMENDED_FEEDS}
-        renderItem={({item}) => <Item {...item} />}
+        renderItem={({item}) => <RecommendedFeedsItem {...item} />}
         keyExtractor={item => item.did + item.rkey}
         style={{flex: 1}}
       />
@@ -72,123 +67,6 @@ export const RecommendedFeedsDesktop = observer(({next}: Props) => {
   )
 })
 
-const Item = observer(({did, rkey}: {did: string; rkey: string}) => {
-  const pal = usePalette('default')
-  const uri = makeRecordUri(did, 'app.bsky.feed.generator', rkey)
-  const item = useCustomFeed(uri)
-  if (!item) return null
-  const onToggle = async () => {
-    if (item.isSaved) {
-      try {
-        await item.unsave()
-      } catch (e) {
-        Toast.show('There was an issue contacting your server')
-        console.error('Failed to unsave feed', {e})
-      }
-    } else {
-      try {
-        await item.save()
-        await item.pin()
-      } catch (e) {
-        Toast.show('There was an issue contacting your server')
-        console.error('Failed to pin feed', {e})
-      }
-    }
-  }
-  return (
-    <View testID={`feed-${item.displayName}`}>
-      <View
-        style={[
-          pal.border,
-          {
-            flexDirection: 'row',
-            gap: 18,
-            maxWidth: 670,
-            borderRightWidth: 1,
-            paddingHorizontal: 24,
-            paddingVertical: 24,
-            borderTopWidth: 1,
-          },
-        ]}>
-        <View style={{marginTop: 2}}>
-          <UserAvatar type="algo" size={42} avatar={item.data.avatar} />
-        </View>
-        <View>
-          <Text
-            type="2xl-bold"
-            numberOfLines={1}
-            style={[pal.text, {fontSize: 19}]}>
-            {item.displayName}
-          </Text>
-
-          <Text style={[pal.textLight, {marginBottom: 8}]} numberOfLines={1}>
-            by {sanitizeHandle(item.data.creator.handle, '@')}
-          </Text>
-
-          {item.data.description ? (
-            <Text
-              type="xl"
-              style={[pal.text, {maxWidth: 550, marginBottom: 18}]}
-              numberOfLines={6}>
-              {item.data.description}
-            </Text>
-          ) : null}
-
-          <View style={{flexDirection: 'row', alignItems: 'center', gap: 12}}>
-            <Button
-              type="inverted"
-              style={{paddingVertical: 6}}
-              onPress={onToggle}>
-              <View
-                style={{
-                  flexDirection: 'row',
-                  alignItems: 'center',
-                  paddingRight: 2,
-                  gap: 6,
-                }}>
-                {item.isSaved ? (
-                  <>
-                    <FontAwesomeIcon
-                      icon="check"
-                      size={16}
-                      color={pal.colors.textInverted}
-                    />
-                    <Text type="lg-medium" style={pal.textInverted}>
-                      Added
-                    </Text>
-                  </>
-                ) : (
-                  <>
-                    <FontAwesomeIcon
-                      icon="plus"
-                      size={16}
-                      color={pal.colors.textInverted}
-                    />
-                    <Text type="lg-medium" style={pal.textInverted}>
-                      Add
-                    </Text>
-                  </>
-                )}
-              </View>
-            </Button>
-
-            <View style={{flexDirection: 'row', gap: 4}}>
-              <HeartIcon
-                size={16}
-                strokeWidth={2.5}
-                style={[pal.textLight, {position: 'relative', top: 2}]}
-              />
-              <Text type="lg-medium" style={[pal.text, pal.textLight]}>
-                {item.data.likeCount || 0}
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-  )
-})
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,
diff --git a/src/view/com/auth/onboarding/RecommendedFeedsItem.tsx b/src/view/com/auth/onboarding/RecommendedFeedsItem.tsx
new file mode 100644
index 000000000..d16b3213e
--- /dev/null
+++ b/src/view/com/auth/onboarding/RecommendedFeedsItem.tsx
@@ -0,0 +1,142 @@
+import React from 'react'
+import {View} from 'react-native'
+import {observer} from 'mobx-react-lite'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {Text} from 'view/com/util/text/Text'
+import {Button} from 'view/com/util/forms/Button'
+import {UserAvatar} from 'view/com/util/UserAvatar'
+import * as Toast from 'view/com/util/Toast'
+import {HeartIcon} from 'lib/icons'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useCustomFeed} from 'lib/hooks/useCustomFeed'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {makeRecordUri} from 'lib/strings/url-helpers'
+import {sanitizeHandle} from 'lib/strings/handles'
+
+export const RecommendedFeedsItem = observer(
+  ({did, rkey}: {did: string; rkey: string}) => {
+    const {isMobile} = useWebMediaQueries()
+    const pal = usePalette('default')
+    const uri = makeRecordUri(did, 'app.bsky.feed.generator', rkey)
+    const item = useCustomFeed(uri)
+    if (!item) return null
+    const onToggle = async () => {
+      if (item.isSaved) {
+        try {
+          await item.unsave()
+        } catch (e) {
+          Toast.show('There was an issue contacting your server')
+          console.error('Failed to unsave feed', {e})
+        }
+      } else {
+        try {
+          await item.save()
+          await item.pin()
+        } catch (e) {
+          Toast.show('There was an issue contacting your server')
+          console.error('Failed to pin feed', {e})
+        }
+      }
+    }
+    return (
+      <View testID={`feed-${item.displayName}`}>
+        <View
+          style={[
+            pal.border,
+            {
+              flex: isMobile ? 1 : undefined,
+              flexDirection: 'row',
+              gap: 18,
+              maxWidth: isMobile ? undefined : 670,
+              borderRightWidth: isMobile ? undefined : 1,
+              paddingHorizontal: 24,
+              paddingVertical: isMobile ? 12 : 24,
+              borderTopWidth: 1,
+            },
+          ]}>
+          <View style={{marginTop: 2}}>
+            <UserAvatar type="algo" size={42} avatar={item.data.avatar} />
+          </View>
+          <View style={{flex: isMobile ? 1 : undefined}}>
+            <Text
+              type="2xl-bold"
+              numberOfLines={1}
+              style={[pal.text, {fontSize: 19}]}>
+              {item.displayName}
+            </Text>
+
+            <Text style={[pal.textLight, {marginBottom: 8}]} numberOfLines={1}>
+              by {sanitizeHandle(item.data.creator.handle, '@')}
+            </Text>
+
+            {item.data.description ? (
+              <Text
+                type="xl"
+                style={[
+                  pal.text,
+                  {
+                    flex: isMobile ? 1 : undefined,
+                    maxWidth: 550,
+                    marginBottom: 18,
+                  },
+                ]}
+                numberOfLines={6}>
+                {item.data.description}
+              </Text>
+            ) : null}
+
+            <View style={{flexDirection: 'row', alignItems: 'center', gap: 12}}>
+              <Button
+                type="inverted"
+                style={{paddingVertical: 6}}
+                onPress={onToggle}>
+                <View
+                  style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    paddingRight: 2,
+                    gap: 6,
+                  }}>
+                  {item.isSaved ? (
+                    <>
+                      <FontAwesomeIcon
+                        icon="check"
+                        size={16}
+                        color={pal.colors.textInverted}
+                      />
+                      <Text type="lg-medium" style={pal.textInverted}>
+                        Added
+                      </Text>
+                    </>
+                  ) : (
+                    <>
+                      <FontAwesomeIcon
+                        icon="plus"
+                        size={16}
+                        color={pal.colors.textInverted}
+                      />
+                      <Text type="lg-medium" style={pal.textInverted}>
+                        Add
+                      </Text>
+                    </>
+                  )}
+                </View>
+              </Button>
+
+              <View style={{flexDirection: 'row', gap: 4}}>
+                <HeartIcon
+                  size={16}
+                  strokeWidth={2.5}
+                  style={[pal.textLight, {position: 'relative', top: 2}]}
+                />
+                <Text type="lg-medium" style={[pal.text, pal.textLight]}>
+                  {item.data.likeCount || 0}
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    )
+  },
+)
diff --git a/src/view/com/auth/onboarding/RecommendedFeedsMobile.tsx b/src/view/com/auth/onboarding/RecommendedFeedsMobile.tsx
index b84b75df7..a3e379883 100644
--- a/src/view/com/auth/onboarding/RecommendedFeedsMobile.tsx
+++ b/src/view/com/auth/onboarding/RecommendedFeedsMobile.tsx
@@ -1,14 +1,11 @@
 import React from 'react'
 import {FlatList, StyleSheet, View} from 'react-native'
+import {observer} from 'mobx-react-lite'
 import {Text} from 'view/com/util/text/Text'
-import {usePalette} from 'lib/hooks/usePalette'
 import {Button} from 'view/com/util/forms/Button'
-import {observer} from 'mobx-react-lite'
-import {CustomFeed} from 'view/com/feeds/CustomFeed'
-import {useCustomFeed} from 'lib/hooks/useCustomFeed'
-import {makeRecordUri} from 'lib/strings/url-helpers'
 import {ViewHeader} from 'view/com/util/ViewHeader'
-import {isDesktopWeb} from 'platform/detection'
+import {RecommendedFeedsItem} from './RecommendedFeedsItem'
+import {usePalette} from 'lib/hooks/usePalette'
 import {RECOMMENDED_FEEDS} from 'lib/constants'
 
 type Props = {
@@ -31,7 +28,7 @@ export const RecommendedFeedsMobile = observer(({next}: Props) => {
 
       <FlatList
         data={RECOMMENDED_FEEDS}
-        renderItem={({item}) => <Item item={item} />}
+        renderItem={({item}) => <RecommendedFeedsItem {...item} />}
         keyExtractor={item => item.did + item.rkey}
         style={{flex: 1}}
       />
@@ -47,32 +44,6 @@ export const RecommendedFeedsMobile = observer(({next}: Props) => {
   )
 })
 
-type ItemProps = {
-  did: string
-  rkey: string
-}
-
-const Item = ({item}: {item: ItemProps}) => {
-  const uri = makeRecordUri(item.did, 'app.bsky.feed.generator', item.rkey)
-  const data = useCustomFeed(uri)
-  if (!data) return null
-  return (
-    <CustomFeed
-      item={data}
-      key={uri}
-      showDescription
-      showLikes
-      showSaveBtn
-      style={[
-        {
-          // @ts-ignore
-          cursor: isDesktopWeb ? 'pointer' : 'auto',
-        },
-      ]}
-    />
-  )
-}
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -83,7 +54,7 @@ const styles = StyleSheet.create({
     marginHorizontal: 16,
   },
   button: {
-    marginBottom: 24,
+    marginBottom: 16,
     marginHorizontal: 16,
     marginTop: 16,
   },
diff --git a/src/view/com/auth/onboarding/RecommendedFeedsTablet.tsx b/src/view/com/auth/onboarding/RecommendedFeedsTablet.tsx
new file mode 100644
index 000000000..bc2e57ade
--- /dev/null
+++ b/src/view/com/auth/onboarding/RecommendedFeedsTablet.tsx
@@ -0,0 +1,91 @@
+import React from 'react'
+import {FlatList, StyleSheet, View} from 'react-native'
+import {observer} from 'mobx-react-lite'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {Text} from 'view/com/util/text/Text'
+import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout'
+import {Button} from 'view/com/util/forms/Button'
+import {RecommendedFeedsItem} from './RecommendedFeedsItem'
+import {usePalette} from 'lib/hooks/usePalette'
+import {RECOMMENDED_FEEDS} from 'lib/constants'
+
+type Props = {
+  next: () => void
+}
+export const RecommendedFeedsTablet = observer(({next}: Props) => {
+  const pal = usePalette('default')
+
+  const title = (
+    <>
+      <Text style={[pal.textLight, styles.title1]}>Choose your</Text>
+      <Text style={[pal.link, styles.title2]}>Recomended</Text>
+      <Text style={[pal.link, styles.title2]}>Feeds</Text>
+      <Text type="2xl-medium" style={[pal.textLight, styles.description]}>
+        Feeds are created by users to curate content. Choose some feeds that you
+        find interesting.
+      </Text>
+      <View
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'flex-end',
+          marginTop: 20,
+        }}>
+        <Button onPress={next} testID="continueBtn">
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              paddingLeft: 2,
+              gap: 6,
+            }}>
+            <Text
+              type="2xl-medium"
+              style={{color: '#fff', position: 'relative', top: -1}}>
+              Done
+            </Text>
+            <FontAwesomeIcon icon="angle-right" color="#fff" size={14} />
+          </View>
+        </Button>
+      </View>
+    </>
+  )
+
+  return (
+    <TitleColumnLayout
+      testID="recommendedFeedsScreen"
+      title={title}
+      horizontal
+      contentStyle={{paddingHorizontal: 0}}>
+      <FlatList
+        data={RECOMMENDED_FEEDS}
+        renderItem={({item}) => <RecommendedFeedsItem {...item} />}
+        keyExtractor={item => item.did + item.rkey}
+        style={{flex: 1}}
+      />
+    </TitleColumnLayout>
+  )
+})
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginHorizontal: 16,
+    justifyContent: 'space-between',
+  },
+  title1: {
+    fontSize: 24,
+    fontWeight: '800',
+    textAlign: 'right',
+  },
+  title2: {
+    fontSize: 36,
+    fontWeight: '800',
+    textAlign: 'right',
+  },
+  description: {
+    maxWidth: 400,
+    marginTop: 10,
+    marginLeft: 'auto',
+    textAlign: 'right',
+  },
+})
diff --git a/src/view/com/util/layouts/withBreakpoints.tsx b/src/view/com/util/layouts/withBreakpoints.tsx
index 4214c1040..dc3f50dc9 100644
--- a/src/view/com/util/layouts/withBreakpoints.tsx
+++ b/src/view/com/util/layouts/withBreakpoints.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
-import {useMediaQuery} from 'react-responsive'
 import {isNative} from 'platform/detection'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 
 export const withBreakpoints =
   <P extends object>(
@@ -9,8 +9,7 @@ export const withBreakpoints =
     Desktop: React.ComponentType<P>,
   ): React.FC<P> =>
   (props: P) => {
-    const isTabletOrMobile = useMediaQuery({query: '(max-width: 1224px)'})
-    const isMobile = useMediaQuery({query: '(max-width: 800px)'})
+    const {isMobile, isTabletOrMobile} = useWebMediaQueries()
 
     if (isMobile || isNative) {
       return <Mobile {...props} />
diff --git a/src/view/shell/index.web.tsx b/src/view/shell/index.web.tsx
index 9ad8007f6..e36439c82 100644
--- a/src/view/shell/index.web.tsx
+++ b/src/view/shell/index.web.tsx
@@ -28,6 +28,7 @@ const ShellInner = observer(() => {
     })
   }, [navigator, store.shell])
 
+  const showBottomBar = !isDesktop && !store.onboarding.isActive
   const showSideNavs =
     isDesktop && store.session.hasSession && !store.onboarding.isActive
   return (
@@ -52,7 +53,7 @@ const ShellInner = observer(() => {
         onPost={store.shell.composerOpts?.onPost}
         mention={store.shell.composerOpts?.mention}
       />
-      {!isDesktop && <BottomBarWeb />}
+      {showBottomBar && <BottomBarWeb />}
       <ModalsContainer />
       <Lightbox />
       {!isDesktop && store.shell.isDrawerOpen && (
-- 
cgit 1.4.1


From 3fa9b6daba1950c79a69cd0806627e38a30cac6b Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Wed, 30 Aug 2023 15:30:26 -0700
Subject: Fix types and remove dead code

---
 src/view/com/auth/Onboarding.tsx                 |  7 ------
 src/view/com/util/layouts/TitleColumnLayout.tsx  |  2 +-
 src/view/screens/onboarding/RecommendedFeeds.tsx | 20 ---------------
 src/view/screens/onboarding/Welcome.tsx          | 32 ------------------------
 4 files changed, 1 insertion(+), 60 deletions(-)
 delete mode 100644 src/view/screens/onboarding/RecommendedFeeds.tsx
 delete mode 100644 src/view/screens/onboarding/Welcome.tsx

(limited to 'src')

diff --git a/src/view/com/auth/Onboarding.tsx b/src/view/com/auth/Onboarding.tsx
index 2f0acfc47..429fdddb3 100644
--- a/src/view/com/auth/Onboarding.tsx
+++ b/src/view/com/auth/Onboarding.tsx
@@ -5,19 +5,12 @@ import {ErrorBoundary} from 'view/com/util/ErrorBoundary'
 import {s} from 'lib/styles'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useStores} from 'state/index'
-import {useAnalytics} from 'lib/analytics/analytics'
 import {Welcome} from './onboarding/Welcome'
 import {RecommendedFeeds} from './onboarding/RecommendedFeeds'
 
 export const Onboarding = observer(() => {
   const pal = usePalette('default')
   const store = useStores()
-  const {screen} = useAnalytics()
-
-  React.useEffect(() => {
-    screen('Onboarding')
-    store.shell.setMinimalShellMode(true)
-  }, [store, screen])
 
   const next = () => store.onboarding.next()
   const skip = () => store.onboarding.skip()
diff --git a/src/view/com/util/layouts/TitleColumnLayout.tsx b/src/view/com/util/layouts/TitleColumnLayout.tsx
index 7047446e3..49ad9fcdb 100644
--- a/src/view/com/util/layouts/TitleColumnLayout.tsx
+++ b/src/view/com/util/layouts/TitleColumnLayout.tsx
@@ -5,7 +5,7 @@ import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
 
 interface Props {
   testID?: string
-  title: React.Component
+  title: JSX.Element
   horizontal: boolean
   titleStyle?: StyleProp<ViewStyle>
   contentStyle?: StyleProp<ViewStyle>
diff --git a/src/view/screens/onboarding/RecommendedFeeds.tsx b/src/view/screens/onboarding/RecommendedFeeds.tsx
deleted file mode 100644
index d27278456..000000000
--- a/src/view/screens/onboarding/RecommendedFeeds.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react'
-import {NativeStackScreenProps} from '@react-navigation/native-stack'
-import {HomeTabNavigatorParams} from 'lib/routes/types'
-import {useStores} from 'state/index'
-import {observer} from 'mobx-react-lite'
-import {RecommendedFeeds} from 'view/com/auth/onboarding/RecommendedFeeds'
-
-type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'RecommendedFeeds'>
-export const RecommendedFeedsScreen = observer(({navigation}: Props) => {
-  const store = useStores()
-
-  const next = () => {
-    const nextScreenName = store.onboarding.next('RecommendedFeeds')
-    if (nextScreenName) {
-      navigation.navigate(nextScreenName)
-    }
-  }
-
-  return <RecommendedFeeds next={next} />
-})
diff --git a/src/view/screens/onboarding/Welcome.tsx b/src/view/screens/onboarding/Welcome.tsx
deleted file mode 100644
index ea3e5ed77..000000000
--- a/src/view/screens/onboarding/Welcome.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react'
-import {NativeStackScreenProps} from '@react-navigation/native-stack'
-import {HomeTabNavigatorParams} from 'lib/routes/types'
-import {useStores} from 'state/index'
-import {observer} from 'mobx-react-lite'
-import {Welcome} from 'view/com/auth/onboarding/Welcome'
-
-type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Welcome'>
-export const WelcomeScreen = observer(({navigation}: Props) => {
-  const store = useStores()
-
-  // make sure bottom nav is hidden
-  React.useEffect(() => {
-    if (!store.shell.minimalShellMode) {
-      store.shell.setMinimalShellMode(true)
-    }
-  }, [store.shell.minimalShellMode, store])
-
-  const next = () => {
-    const nextScreenName = store.onboarding.next('Welcome')
-    if (nextScreenName) {
-      navigation.navigate(nextScreenName)
-    }
-  }
-
-  const skip = () => {
-    store.onboarding.skip()
-    navigation.navigate('Home')
-  }
-
-  return <Welcome next={next} skip={skip} />
-})
-- 
cgit 1.4.1


From 8bc8dcc094cd21daec639ff8db5ebb08dc5fe92f Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Wed, 30 Aug 2023 16:13:09 -0700
Subject: Simplify the RecommendedFeeds with breakpoint components

---
 src/view/com/auth/onboarding/RecommendedFeeds.tsx  | 187 +++++++++++++++++++--
 .../auth/onboarding/RecommendedFeedsDesktop.tsx    |  92 ----------
 .../com/auth/onboarding/RecommendedFeedsMobile.tsx |  66 --------
 .../com/auth/onboarding/RecommendedFeedsTablet.tsx |  91 ----------
 src/view/com/util/layouts/Breakpoints.tsx          |   8 +
 src/view/com/util/layouts/Breakpoints.web.tsx      |  20 +++
 6 files changed, 204 insertions(+), 260 deletions(-)
 delete mode 100644 src/view/com/auth/onboarding/RecommendedFeedsDesktop.tsx
 delete mode 100644 src/view/com/auth/onboarding/RecommendedFeedsMobile.tsx
 delete mode 100644 src/view/com/auth/onboarding/RecommendedFeedsTablet.tsx
 create mode 100644 src/view/com/util/layouts/Breakpoints.tsx
 create mode 100644 src/view/com/util/layouts/Breakpoints.web.tsx

(limited to 'src')

diff --git a/src/view/com/auth/onboarding/RecommendedFeeds.tsx b/src/view/com/auth/onboarding/RecommendedFeeds.tsx
index 12c984e71..28dc2cdd0 100644
--- a/src/view/com/auth/onboarding/RecommendedFeeds.tsx
+++ b/src/view/com/auth/onboarding/RecommendedFeeds.tsx
@@ -1,11 +1,176 @@
-import 'react'
-import {withBreakpoints} from 'view/com/util/layouts/withBreakpoints'
-import {RecommendedFeedsDesktop} from './RecommendedFeedsDesktop'
-import {RecommendedFeedsTablet} from './RecommendedFeedsTablet'
-import {RecommendedFeedsMobile} from './RecommendedFeedsMobile'
-
-export const RecommendedFeeds = withBreakpoints(
-  RecommendedFeedsMobile,
-  RecommendedFeedsTablet,
-  RecommendedFeedsDesktop,
-)
+import React from 'react'
+import {FlatList, StyleSheet, View} from 'react-native'
+import {observer} from 'mobx-react-lite'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {TabletOrDesktop, Mobile} from 'view/com/util/layouts/Breakpoints'
+import {Text} from 'view/com/util/text/Text'
+import {ViewHeader} from 'view/com/util/ViewHeader'
+import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout'
+import {Button} from 'view/com/util/forms/Button'
+import {RecommendedFeedsItem} from './RecommendedFeedsItem'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {usePalette} from 'lib/hooks/usePalette'
+import {RECOMMENDED_FEEDS} from 'lib/constants'
+
+type Props = {
+  next: () => void
+}
+export const RecommendedFeeds = observer(({next}: Props) => {
+  const pal = usePalette('default')
+  const {isTabletOrMobile} = useWebMediaQueries()
+
+  const title = (
+    <>
+      <Text
+        style={[
+          pal.textLight,
+          tdStyles.title1,
+          isTabletOrMobile && tdStyles.title1Small,
+        ]}>
+        Choose your
+      </Text>
+      <Text
+        style={[
+          pal.link,
+          tdStyles.title2,
+          isTabletOrMobile && tdStyles.title2Small,
+        ]}>
+        Recomended
+      </Text>
+      <Text
+        style={[
+          pal.link,
+          tdStyles.title2,
+          isTabletOrMobile && tdStyles.title2Small,
+        ]}>
+        Feeds
+      </Text>
+      <Text type="2xl-medium" style={[pal.textLight, tdStyles.description]}>
+        Feeds are created by users to curate content. Choose some feeds that you
+        find interesting.
+      </Text>
+      <View
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'flex-end',
+          marginTop: 20,
+        }}>
+        <Button onPress={next} testID="continueBtn">
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              paddingLeft: 2,
+              gap: 6,
+            }}>
+            <Text
+              type="2xl-medium"
+              style={{color: '#fff', position: 'relative', top: -1}}>
+              Done
+            </Text>
+            <FontAwesomeIcon icon="angle-right" color="#fff" size={14} />
+          </View>
+        </Button>
+      </View>
+    </>
+  )
+
+  return (
+    <>
+      <TabletOrDesktop>
+        <TitleColumnLayout
+          testID="recommendedFeedsScreen"
+          title={title}
+          horizontal
+          titleStyle={isTabletOrMobile ? undefined : {minWidth: 470}}
+          contentStyle={{paddingHorizontal: 0}}>
+          <FlatList
+            data={RECOMMENDED_FEEDS}
+            renderItem={({item}) => <RecommendedFeedsItem {...item} />}
+            keyExtractor={item => item.did + item.rkey}
+            style={{flex: 1}}
+          />
+        </TitleColumnLayout>
+      </TabletOrDesktop>
+      <Mobile>
+        <View style={[mStyles.container]} testID="recommendedFeedsScreen">
+          <ViewHeader
+            title="Recommended Feeds"
+            showBackButton={false}
+            showOnDesktop
+          />
+          <Text type="lg-medium" style={[pal.text, mStyles.header]}>
+            Check out some recommended feeds. Tap + to add them to your list of
+            pinned feeds.
+          </Text>
+
+          <FlatList
+            data={RECOMMENDED_FEEDS}
+            renderItem={({item}) => <RecommendedFeedsItem {...item} />}
+            keyExtractor={item => item.did + item.rkey}
+            style={{flex: 1}}
+          />
+
+          <Button
+            onPress={next}
+            label="Continue"
+            testID="continueBtn"
+            style={mStyles.button}
+            labelStyle={mStyles.buttonText}
+          />
+        </View>
+      </Mobile>
+    </>
+  )
+})
+
+const tdStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginHorizontal: 16,
+    justifyContent: 'space-between',
+  },
+  title1: {
+    fontSize: 36,
+    fontWeight: '800',
+    textAlign: 'right',
+  },
+  title1Small: {
+    fontSize: 24,
+  },
+  title2: {
+    fontSize: 58,
+    fontWeight: '800',
+    textAlign: 'right',
+  },
+  title2Small: {
+    fontSize: 36,
+  },
+  description: {
+    maxWidth: 400,
+    marginTop: 10,
+    marginLeft: 'auto',
+    textAlign: 'right',
+  },
+})
+
+const mStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+  header: {
+    marginBottom: 16,
+    marginHorizontal: 16,
+  },
+  button: {
+    marginBottom: 16,
+    marginHorizontal: 16,
+    marginTop: 16,
+  },
+  buttonText: {
+    textAlign: 'center',
+    fontSize: 18,
+    paddingVertical: 4,
+  },
+})
diff --git a/src/view/com/auth/onboarding/RecommendedFeedsDesktop.tsx b/src/view/com/auth/onboarding/RecommendedFeedsDesktop.tsx
deleted file mode 100644
index 937313bc6..000000000
--- a/src/view/com/auth/onboarding/RecommendedFeedsDesktop.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import React from 'react'
-import {FlatList, StyleSheet, View} from 'react-native'
-import {observer} from 'mobx-react-lite'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {Text} from 'view/com/util/text/Text'
-import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout'
-import {Button} from 'view/com/util/forms/Button'
-import {RecommendedFeedsItem} from './RecommendedFeedsItem'
-import {usePalette} from 'lib/hooks/usePalette'
-import {RECOMMENDED_FEEDS} from 'lib/constants'
-
-type Props = {
-  next: () => void
-}
-export const RecommendedFeedsDesktop = observer(({next}: Props) => {
-  const pal = usePalette('default')
-
-  const title = (
-    <>
-      <Text style={[pal.textLight, styles.title1]}>Choose your</Text>
-      <Text style={[pal.link, styles.title2]}>Recomended</Text>
-      <Text style={[pal.link, styles.title2]}>Feeds</Text>
-      <Text type="2xl-medium" style={[pal.textLight, styles.description]}>
-        Feeds are created by users to curate content. Choose some feeds that you
-        find interesting.
-      </Text>
-      <View
-        style={{
-          flexDirection: 'row',
-          justifyContent: 'flex-end',
-          marginTop: 20,
-        }}>
-        <Button onPress={next} testID="continueBtn">
-          <View
-            style={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              paddingLeft: 2,
-              gap: 6,
-            }}>
-            <Text
-              type="2xl-medium"
-              style={{color: '#fff', position: 'relative', top: -1}}>
-              Done
-            </Text>
-            <FontAwesomeIcon icon="angle-right" color="#fff" size={14} />
-          </View>
-        </Button>
-      </View>
-    </>
-  )
-
-  return (
-    <TitleColumnLayout
-      testID="recommendedFeedsScreen"
-      title={title}
-      horizontal
-      titleStyle={{minWidth: 470}}
-      contentStyle={{paddingHorizontal: 0}}>
-      <FlatList
-        data={RECOMMENDED_FEEDS}
-        renderItem={({item}) => <RecommendedFeedsItem {...item} />}
-        keyExtractor={item => item.did + item.rkey}
-        style={{flex: 1}}
-      />
-    </TitleColumnLayout>
-  )
-})
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginHorizontal: 16,
-    justifyContent: 'space-between',
-  },
-  title1: {
-    fontSize: 36,
-    fontWeight: '800',
-    textAlign: 'right',
-  },
-  title2: {
-    fontSize: 58,
-    fontWeight: '800',
-    textAlign: 'right',
-  },
-  description: {
-    maxWidth: 400,
-    marginTop: 10,
-    marginLeft: 'auto',
-    textAlign: 'right',
-  },
-})
diff --git a/src/view/com/auth/onboarding/RecommendedFeedsMobile.tsx b/src/view/com/auth/onboarding/RecommendedFeedsMobile.tsx
deleted file mode 100644
index a3e379883..000000000
--- a/src/view/com/auth/onboarding/RecommendedFeedsMobile.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from 'react'
-import {FlatList, StyleSheet, View} from 'react-native'
-import {observer} from 'mobx-react-lite'
-import {Text} from 'view/com/util/text/Text'
-import {Button} from 'view/com/util/forms/Button'
-import {ViewHeader} from 'view/com/util/ViewHeader'
-import {RecommendedFeedsItem} from './RecommendedFeedsItem'
-import {usePalette} from 'lib/hooks/usePalette'
-import {RECOMMENDED_FEEDS} from 'lib/constants'
-
-type Props = {
-  next: () => void
-}
-export const RecommendedFeedsMobile = observer(({next}: Props) => {
-  const pal = usePalette('default')
-
-  return (
-    <View style={[styles.container]} testID="recommendedFeedsScreen">
-      <ViewHeader
-        title="Recommended Feeds"
-        showBackButton={false}
-        showOnDesktop
-      />
-      <Text type="lg-medium" style={[pal.text, styles.header]}>
-        Check out some recommended feeds. Tap + to add them to your list of
-        pinned feeds.
-      </Text>
-
-      <FlatList
-        data={RECOMMENDED_FEEDS}
-        renderItem={({item}) => <RecommendedFeedsItem {...item} />}
-        keyExtractor={item => item.did + item.rkey}
-        style={{flex: 1}}
-      />
-
-      <Button
-        onPress={next}
-        label="Continue"
-        testID="continueBtn"
-        style={styles.button}
-        labelStyle={styles.buttonText}
-      />
-    </View>
-  )
-})
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'space-between',
-  },
-  header: {
-    marginBottom: 16,
-    marginHorizontal: 16,
-  },
-  button: {
-    marginBottom: 16,
-    marginHorizontal: 16,
-    marginTop: 16,
-  },
-  buttonText: {
-    textAlign: 'center',
-    fontSize: 18,
-    paddingVertical: 4,
-  },
-})
diff --git a/src/view/com/auth/onboarding/RecommendedFeedsTablet.tsx b/src/view/com/auth/onboarding/RecommendedFeedsTablet.tsx
deleted file mode 100644
index bc2e57ade..000000000
--- a/src/view/com/auth/onboarding/RecommendedFeedsTablet.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import React from 'react'
-import {FlatList, StyleSheet, View} from 'react-native'
-import {observer} from 'mobx-react-lite'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {Text} from 'view/com/util/text/Text'
-import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout'
-import {Button} from 'view/com/util/forms/Button'
-import {RecommendedFeedsItem} from './RecommendedFeedsItem'
-import {usePalette} from 'lib/hooks/usePalette'
-import {RECOMMENDED_FEEDS} from 'lib/constants'
-
-type Props = {
-  next: () => void
-}
-export const RecommendedFeedsTablet = observer(({next}: Props) => {
-  const pal = usePalette('default')
-
-  const title = (
-    <>
-      <Text style={[pal.textLight, styles.title1]}>Choose your</Text>
-      <Text style={[pal.link, styles.title2]}>Recomended</Text>
-      <Text style={[pal.link, styles.title2]}>Feeds</Text>
-      <Text type="2xl-medium" style={[pal.textLight, styles.description]}>
-        Feeds are created by users to curate content. Choose some feeds that you
-        find interesting.
-      </Text>
-      <View
-        style={{
-          flexDirection: 'row',
-          justifyContent: 'flex-end',
-          marginTop: 20,
-        }}>
-        <Button onPress={next} testID="continueBtn">
-          <View
-            style={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              paddingLeft: 2,
-              gap: 6,
-            }}>
-            <Text
-              type="2xl-medium"
-              style={{color: '#fff', position: 'relative', top: -1}}>
-              Done
-            </Text>
-            <FontAwesomeIcon icon="angle-right" color="#fff" size={14} />
-          </View>
-        </Button>
-      </View>
-    </>
-  )
-
-  return (
-    <TitleColumnLayout
-      testID="recommendedFeedsScreen"
-      title={title}
-      horizontal
-      contentStyle={{paddingHorizontal: 0}}>
-      <FlatList
-        data={RECOMMENDED_FEEDS}
-        renderItem={({item}) => <RecommendedFeedsItem {...item} />}
-        keyExtractor={item => item.did + item.rkey}
-        style={{flex: 1}}
-      />
-    </TitleColumnLayout>
-  )
-})
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginHorizontal: 16,
-    justifyContent: 'space-between',
-  },
-  title1: {
-    fontSize: 24,
-    fontWeight: '800',
-    textAlign: 'right',
-  },
-  title2: {
-    fontSize: 36,
-    fontWeight: '800',
-    textAlign: 'right',
-  },
-  description: {
-    maxWidth: 400,
-    marginTop: 10,
-    marginLeft: 'auto',
-    textAlign: 'right',
-  },
-})
diff --git a/src/view/com/util/layouts/Breakpoints.tsx b/src/view/com/util/layouts/Breakpoints.tsx
new file mode 100644
index 000000000..51c3ccd5a
--- /dev/null
+++ b/src/view/com/util/layouts/Breakpoints.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+
+export const Desktop = ({}: React.PropsWithChildren<{}>) => null
+export const TabletOrDesktop = ({}: React.PropsWithChildren<{}>) => null
+export const Tablet = ({}: React.PropsWithChildren<{}>) => null
+export const TabletOrMobile = ({children}: React.PropsWithChildren<{}>) =>
+  children
+export const Mobile = ({children}: React.PropsWithChildren<{}>) => children
diff --git a/src/view/com/util/layouts/Breakpoints.web.tsx b/src/view/com/util/layouts/Breakpoints.web.tsx
new file mode 100644
index 000000000..7031a1735
--- /dev/null
+++ b/src/view/com/util/layouts/Breakpoints.web.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import MediaQuery from 'react-responsive'
+
+export const Desktop = ({children}: React.PropsWithChildren<{}>) => (
+  <MediaQuery minWidth={1224}>{children}</MediaQuery>
+)
+export const TabletOrDesktop = ({children}: React.PropsWithChildren<{}>) => (
+  <MediaQuery minWidth={800}>{children}</MediaQuery>
+)
+export const Tablet = ({children}: React.PropsWithChildren<{}>) => (
+  <MediaQuery minWidth={800} maxWidth={1224}>
+    {children}
+  </MediaQuery>
+)
+export const TabletOrMobile = ({children}: React.PropsWithChildren<{}>) => (
+  <MediaQuery maxWidth={1224}>{children}</MediaQuery>
+)
+export const Mobile = ({children}: React.PropsWithChildren<{}>) => (
+  <MediaQuery maxWidth={800}>{children}</MediaQuery>
+)
-- 
cgit 1.4.1


From 59dcedeea25804188b3503dbf166fa794af20612 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Wed, 30 Aug 2023 16:15:06 -0700
Subject: Fix: remove bottom bar during onboard

---
 src/view/com/auth/Onboarding.tsx | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'src')

diff --git a/src/view/com/auth/Onboarding.tsx b/src/view/com/auth/Onboarding.tsx
index 429fdddb3..065d4d244 100644
--- a/src/view/com/auth/Onboarding.tsx
+++ b/src/view/com/auth/Onboarding.tsx
@@ -12,6 +12,10 @@ export const Onboarding = observer(() => {
   const pal = usePalette('default')
   const store = useStores()
 
+  React.useEffect(() => {
+    store.shell.setMinimalShellMode(true)
+  }, [store])
+
   const next = () => store.onboarding.next()
   const skip = () => store.onboarding.skip()
 
-- 
cgit 1.4.1