Guided tour for new users (#4690)

* Add home guided tour (WIP)

* Add web handling of the tour

* Switch to our fork of rn-tourguide

* Bump guided-tour

* Fix alignment on android

* Implement home page tour trigger after account creation

* Add new_user_guided_tour gate

* Add a title line to the tour tooltips

* A11y improvements: proper labels, focus capture, scroll capture

* Silence type error

* Native a11y

* Use FocusScope

* Switch to useWebBodyScrollLock()

---------

Co-authored-by: Eric Bailey <git@esb.lol>

src/view/com/home/HomeHeaderLayoutMobile.tsx

@@ -72,9 +72,11 @@ export function HomeHeaderLayoutMobile({
             {width: 100},
           ]}>
           {IS_DEV && (
-            <Link to="/sys/debug">
-              <ColorPalette size="md" />
-            </Link>
+            <>
+              <Link to="/sys/debug">
+                <ColorPalette size="md" />
+              </Link>
+            </>
           )}
           {hasSession && (
             <Link

src/view/screens/Home.tsx

@@ -28,6 +28,7 @@ import {CustomFeedEmptyState} from 'view/com/posts/CustomFeedEmptyState'
 import {FollowingEmptyState} from 'view/com/posts/FollowingEmptyState'
 import {FollowingEndOfFeed} from 'view/com/posts/FollowingEndOfFeed'
 import {NoFeedsPinned} from '#/screens/Home/NoFeedsPinned'
+import {TOURS, useTriggerTourIfQueued} from '#/tours'
 import {HomeHeader} from '../com/home/HomeHeader'
 
 type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home' | 'Start'>
@@ -86,6 +87,7 @@ function HomeScreenReady({
   const selectedIndex = Math.max(0, maybeFoundIndex)
   const selectedFeed = allFeeds[selectedIndex]
   const requestNotificationsPermission = useRequestNotificationsPermission()
+  const triggerTourIfQueued = useTriggerTourIfQueued(TOURS.HOME)
 
   useSetTitle(pinnedFeedInfos[selectedIndex]?.displayName)
   useOTAUpdates()
@@ -113,10 +115,16 @@ function HomeScreenReady({
     React.useCallback(() => {
       setMinimalShellMode(false)
       setDrawerSwipeDisabled(selectedIndex > 0)
+      triggerTourIfQueued()
       return () => {
         setDrawerSwipeDisabled(false)
       }
-    }, [setDrawerSwipeDisabled, selectedIndex, setMinimalShellMode]),
+    }, [
+      setDrawerSwipeDisabled,
+      selectedIndex,
+      setMinimalShellMode,
+      triggerTourIfQueued,
+    ]),
   )
 
   useFocusEffect(

src/view/screens/Settings/index.tsx

@@ -252,9 +252,10 @@ export function SettingsScreen({}: Props) {
   }, [clearPreferences])
 
   const onPressResetOnboarding = React.useCallback(async () => {
+    navigation.navigate('Home')
     onboardingDispatch({type: 'start'})
     Toast.show(_(msg`Onboarding reset`))
-  }, [onboardingDispatch, _])
+  }, [navigation, onboardingDispatch, _])
 
   const onPressBuildInfo = React.useCallback(() => {
     setStringAsync(

src/view/shell/bottom-bar/BottomBar.tsx

@@ -45,6 +45,7 @@ import {
   Message_Stroke2_Corner0_Rounded as Message,
   Message_Stroke2_Corner0_Rounded_Filled as MessageFilled,
 } from '#/components/icons/Message'
+import {HomeTourExploreWrapper} from '#/tours/HomeTour'
 import {styles} from './BottomBarStyles'
 
 type TabOptions =
@@ -162,17 +163,19 @@ export function BottomBar({navigation}: BottomTabBarProps) {
             <Btn
               testID="bottomBarSearchBtn"
               icon={
-                isAtSearch ? (
-                  <MagnifyingGlassFilled
-                    width={iconWidth + 2}
-                    style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
-                  />
-                ) : (
-                  <MagnifyingGlass
-                    width={iconWidth + 2}
-                    style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
-                  />
-                )
+                <HomeTourExploreWrapper>
+                  {isAtSearch ? (
+                    <MagnifyingGlassFilled
+                      width={iconWidth + 2}
+                      style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
+                    />
+                  ) : (
+                    <MagnifyingGlass
+                      width={iconWidth + 2}
+                      style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
+                    />
+                  )}
+                </HomeTourExploreWrapper>
               }
               onPress={onPressSearch}
               accessibilityRole="search"

src/view/shell/bottom-bar/BottomBarWeb.tsx

@@ -41,6 +41,7 @@ import {
   UserCircle_Filled_Corner0_Rounded as UserCircleFilled,
   UserCircle_Stroke2_Corner0_Rounded as UserCircle,
 } from '#/components/icons/UserCircle'
+import {HomeTourExploreWrapper} from '#/tours/HomeTour'
 import {styles} from './BottomBarStyles'
 
 export function BottomBarWeb() {
@@ -94,10 +95,12 @@ export function BottomBarWeb() {
             {({isActive}) => {
               const Icon = isActive ? MagnifyingGlassFilled : MagnifyingGlass
               return (
-                <Icon
-                  width={iconWidth + 2}
-                  style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
-                />
+                <HomeTourExploreWrapper>
+                  <Icon
+                    width={iconWidth + 2}
+                    style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
+                  />
+                </HomeTourExploreWrapper>
               )
             }}
           </NavItem>

src/view/shell/desktop/LeftNav.tsx

@@ -63,6 +63,7 @@ import {
   UserCircle_Filled_Corner0_Rounded as UserCircleFilled,
   UserCircle_Stroke2_Corner0_Rounded as UserCircle,
 } from '#/components/icons/UserCircle'
+import {HomeTourExploreWrapper} from '#/tours/HomeTour'
 import {router} from '../../../routes'
 
 const NAV_ICON_WIDTH = 28
@@ -340,14 +341,19 @@ export function DesktopLeftNav() {
             iconFilled={<HomeFilled width={NAV_ICON_WIDTH} style={pal.text} />}
             label={_(msg`Home`)}
           />
-          <NavItem
-            href="/search"
-            icon={<MagnifyingGlass style={pal.text} width={NAV_ICON_WIDTH} />}
-            iconFilled={
-              <MagnifyingGlassFilled style={pal.text} width={NAV_ICON_WIDTH} />
-            }
-            label={_(msg`Search`)}
-          />
+          <HomeTourExploreWrapper>
+            <NavItem
+              href="/search"
+              icon={<MagnifyingGlass style={pal.text} width={NAV_ICON_WIDTH} />}
+              iconFilled={
+                <MagnifyingGlassFilled
+                  style={pal.text}
+                  width={NAV_ICON_WIDTH}
+                />
+              }
+              label={_(msg`Search`)}
+            />
+          </HomeTourExploreWrapper>
           <NavItem
             href="/notifications"
             count={numUnreadNotifications}