Ensure app clip works even with starter-pack (#5664)

src/view/com/auth/SplashScreen.web.tsx

@@ -9,6 +9,7 @@ import {useKawaiiMode} from '#/state/preferences/kawaii'
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
 import {Logo} from '#/view/icons/Logo'
 import {Logotype} from '#/view/icons/Logotype'
+import {AppClipOverlay} from '#/screens/StarterPack/StarterPackLandingScreen'
 import {atoms as a, useTheme} from '#/alf'
 import {AppLanguageDropdown} from '#/components/AppLanguageDropdown'
 import {Button, ButtonText} from '#/components/Button'
@@ -28,6 +29,15 @@ export const SplashScreen = ({
   const {_} = useLingui()
   const t = useTheme()
   const {isTabletOrMobile: isMobileWeb} = useWebMediaQueries()
+  const [showClipOverlay, setShowClipOverlay] = React.useState(false)
+
+  React.useEffect(() => {
+    const getParams = new URLSearchParams(window.location.search)
+    const clip = getParams.get('clip')
+    if (clip === 'true') {
+      setShowClipOverlay(true)
+    }
+  }, [])
 
   const kawaii = useKawaiiMode()
 
@@ -119,6 +129,10 @@ export const SplashScreen = ({
         </View>
         <Footer />
       </CenteredView>
+      <AppClipOverlay
+        visible={showClipOverlay}
+        setIsVisible={setShowClipOverlay}
+      />
     </>
   )
 }

src/view/screens/Home.tsx

@@ -4,8 +4,15 @@ import {useFocusEffect} from '@react-navigation/native'
 
 import {PROD_DEFAULT_FEED} from '#/lib/constants'
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
+import {useOTAUpdates} from '#/lib/hooks/useOTAUpdates'
 import {useSetTitle} from '#/lib/hooks/useSetTitle'
+import {useRequestNotificationsPermission} from '#/lib/notifications/notifications'
+import {
+  HomeTabNavigatorParams,
+  NativeStackScreenProps,
+} from '#/lib/routes/types'
 import {logEvent, LogEvents} from '#/lib/statsig/statsig'
+import {isWeb} from '#/platform/detection'
 import {emitSoftReset} from '#/state/events'
 import {SavedFeedSourceInfo, usePinnedFeedsInfos} from '#/state/queries/feed'
 import {FeedParams} from '#/state/queries/post-feed'
@@ -13,26 +20,34 @@ import {usePreferencesQuery} from '#/state/queries/preferences'
 import {UsePreferencesQueryResponse} from '#/state/queries/preferences/types'
 import {useSession} from '#/state/session'
 import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from '#/state/shell'
+import {useLoggedOutViewControls} from '#/state/shell/logged-out'
 import {useSelectedFeed, useSetSelectedFeed} from '#/state/shell/selected-feed'
-import {useOTAUpdates} from 'lib/hooks/useOTAUpdates'
-import {useRequestNotificationsPermission} from 'lib/notifications/notifications'
-import {HomeTabNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
-import {FeedPage} from 'view/com/feeds/FeedPage'
-import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager'
-import {CustomFeedEmptyState} from 'view/com/posts/CustomFeedEmptyState'
-import {FollowingEmptyState} from 'view/com/posts/FollowingEmptyState'
-import {FollowingEndOfFeed} from 'view/com/posts/FollowingEndOfFeed'
+import {FeedPage} from '#/view/com/feeds/FeedPage'
+import {Pager, PagerRef, RenderTabBarFnProps} from '#/view/com/pager/Pager'
+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 {HomeHeader} from '../com/home/HomeHeader'
 
 type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home' | 'Start'>
 export function HomeScreen(props: Props) {
+  const {setShowLoggedOut} = useLoggedOutViewControls()
   const {data: preferences} = usePreferencesQuery()
   const {currentAccount} = useSession()
   const {data: pinnedFeedInfos, isLoading: isPinnedFeedsLoading} =
     usePinnedFeedsInfos()
 
   React.useEffect(() => {
+    if (isWeb && !currentAccount) {
+      const getParams = new URLSearchParams(window.location.search)
+      const splash = getParams.get('splash')
+      if (splash === 'true') {
+        setShowLoggedOut(true)
+        return
+      }
+    }
+
     const params = props.route.params
     if (
       currentAccount &&
@@ -45,7 +60,13 @@ export function HomeScreen(props: Props) {
         name: params.name,
       })
     }
-  }, [currentAccount, props.navigation, props.route.name, props.route.params])
+  }, [
+    currentAccount,
+    props.navigation,
+    props.route.name,
+    props.route.params,
+    setShowLoggedOut,
+  ])
 
   if (preferences && pinnedFeedInfos && !isPinnedFeedsLoading) {
     return (