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/view/com/modals/OnboardingModal.tsx | 8 --------
 1 file changed, 8 deletions(-)
 delete mode 100644 src/view/com/modals/OnboardingModal.tsx

(limited to 'src/view/com/modals/OnboardingModal.tsx')

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 />
-}
-- 
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/view/com/modals/OnboardingModal.tsx')

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/view/com/modals/OnboardingModal.tsx')

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

