Rework logged out state to preserve routing and work for web

src/view/com/auth/LoggedOut.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import {SafeAreaView} from 'react-native'
+import {observer} from 'mobx-react-lite'
+import {Signin} from 'view/com/auth/Signin'
+import {CreateAccount} from 'view/com/auth/CreateAccount'
+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'
+import {SplashScreen} from './SplashScreen'
+import {CenteredView} from '../util/Views'
+
+enum ScreenState {
+  S_SigninOrCreateAccount,
+  S_Signin,
+  S_CreateAccount,
+}
+
+export const LoggedOut = observer(() => {
+  const pal = usePalette('default')
+  const store = useStores()
+  const {screen} = useAnalytics()
+  const [screenState, setScreenState] = React.useState<ScreenState>(
+    ScreenState.S_SigninOrCreateAccount,
+  )
+
+  React.useEffect(() => {
+    screen('Login')
+    store.shell.setMinimalShellMode(true)
+  }, [store, screen])
+
+  if (
+    store.session.isResumingSession ||
+    screenState === ScreenState.S_SigninOrCreateAccount
+  ) {
+    return (
+      <SplashScreen
+        onPressSignin={() => setScreenState(ScreenState.S_Signin)}
+        onPressCreateAccount={() => setScreenState(ScreenState.S_CreateAccount)}
+      />
+    )
+  }
+
+  return (
+    <CenteredView style={[s.hContentRegion, pal.view]}>
+      <SafeAreaView testID="noSessionView" style={s.hContentRegion}>
+        <ErrorBoundary>
+          {screenState === ScreenState.S_Signin ? (
+            <Signin
+              onPressBack={() =>
+                setScreenState(ScreenState.S_SigninOrCreateAccount)
+              }
+            />
+          ) : undefined}
+          {screenState === ScreenState.S_CreateAccount ? (
+            <CreateAccount
+              onPressBack={() =>
+                setScreenState(ScreenState.S_SigninOrCreateAccount)
+              }
+            />
+          ) : undefined}
+        </ErrorBoundary>
+      </SafeAreaView>
+    </CenteredView>
+  )
+})

src/view/com/auth/Logo.tsx

@@ -1,28 +1,19 @@
 import React from 'react'
-import {StyleSheet} from 'react-native'
-import LinearGradient from 'react-native-linear-gradient'
-import {s, gradients} from 'lib/styles'
+import {StyleSheet, View} from 'react-native'
+import {s, colors} from 'lib/styles'
 import {Text} from '../util/text/Text'
 
 export const LogoTextHero = () => {
   return (
-    <LinearGradient
-      colors={[gradients.blue.start, gradients.blue.end]}
-      start={{x: 0, y: 0}}
-      end={{x: 1, y: 1}}
-      style={[styles.textHero]}>
+    <View style={[styles.textHero]}>
       <Text type="title-lg" style={[s.white, s.bold]}>
         Bluesky
       </Text>
-    </LinearGradient>
+    </View>
   )
 }
 
 const styles = StyleSheet.create({
-  logo: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-  },
   textHero: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -30,5 +21,6 @@ const styles = StyleSheet.create({
     paddingRight: 20,
     paddingVertical: 15,
     marginBottom: 20,
+    backgroundColor: colors.blue3,
   },
 })

src/view/com/auth/SplashScreen.tsx

@@ -0,0 +1,92 @@
+import React from 'react'
+import {SafeAreaView, StyleSheet, TouchableOpacity, View} from 'react-native'
+import Image, {Source as ImageSource} from 'view/com/util/images/Image'
+import {Text} from 'view/com/util/text/Text'
+import {ErrorBoundary} from 'view/com/util/ErrorBoundary'
+import {colors} from 'lib/styles'
+import {usePalette} from 'lib/hooks/usePalette'
+import {CLOUD_SPLASH} from 'lib/assets'
+import {CenteredView} from '../util/Views'
+
+export const SplashScreen = ({
+  onPressSignin,
+  onPressCreateAccount,
+}: {
+  onPressSignin: () => void
+  onPressCreateAccount: () => void
+}) => {
+  const pal = usePalette('default')
+  return (
+    <CenteredView style={styles.container}>
+      <Image source={CLOUD_SPLASH as ImageSource} style={styles.bgImg} />
+      <SafeAreaView testID="noSessionView" style={styles.container}>
+        <ErrorBoundary>
+          <View style={styles.hero}>
+            <View style={styles.heroText}>
+              <Text style={styles.title}>Bluesky</Text>
+            </View>
+          </View>
+          <View testID="signinOrCreateAccount" style={styles.btns}>
+            <TouchableOpacity
+              testID="createAccountButton"
+              style={[pal.view, styles.btn]}
+              onPress={onPressCreateAccount}>
+              <Text style={[pal.link, styles.btnLabel]}>
+                Create a new account
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              testID="signInButton"
+              style={[pal.view, styles.btn]}
+              onPress={onPressSignin}>
+              <Text style={[pal.link, styles.btnLabel]}>Sign in</Text>
+            </TouchableOpacity>
+          </View>
+        </ErrorBoundary>
+      </SafeAreaView>
+    </CenteredView>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: '100%',
+  },
+  hero: {
+    flex: 2,
+    justifyContent: 'center',
+  },
+  bgImg: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+  },
+  heroText: {
+    backgroundColor: colors.white,
+    paddingTop: 10,
+    paddingBottom: 20,
+  },
+  btns: {
+    paddingBottom: 40,
+  },
+  title: {
+    textAlign: 'center',
+    color: colors.blue3,
+    fontSize: 68,
+    fontWeight: 'bold',
+  },
+  btn: {
+    borderRadius: 4,
+    paddingVertical: 16,
+    marginBottom: 20,
+    marginHorizontal: 20,
+    backgroundColor: colors.blue3,
+  },
+  btnLabel: {
+    textAlign: 'center',
+    fontSize: 21,
+    color: colors.white,
+  },
+})

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

@@ -0,0 +1,102 @@
+import React from 'react'
+import {StyleSheet, TouchableOpacity, View} from 'react-native'
+import {Text} from 'view/com/util/text/Text'
+import {TextLink} from '../util/Link'
+import {ErrorBoundary} from 'view/com/util/ErrorBoundary'
+import {s, colors} from 'lib/styles'
+import {usePalette} from 'lib/hooks/usePalette'
+import {CenteredView} from '../util/Views'
+
+export const SplashScreen = ({
+  onPressSignin,
+  onPressCreateAccount,
+}: {
+  onPressSignin: () => void
+  onPressCreateAccount: () => void
+}) => {
+  const pal = usePalette('default')
+  return (
+    <CenteredView style={styles.container}>
+      <View testID="noSessionView" style={styles.containerInner}>
+        <ErrorBoundary>
+          <Text style={styles.title}>Bluesky</Text>
+          <Text style={styles.subtitle}>See what's next</Text>
+          <View testID="signinOrCreateAccount" style={styles.btns}>
+            <TouchableOpacity
+              testID="createAccountButton"
+              style={[styles.btn, {backgroundColor: colors.blue3}]}
+              onPress={onPressCreateAccount}>
+              <Text style={[s.white, styles.btnLabel]}>
+                Create a new account
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              testID="signInButton"
+              style={[styles.btn, pal.btn]}
+              onPress={onPressSignin}>
+              <Text style={[pal.link, styles.btnLabel]}>Sign in</Text>
+            </TouchableOpacity>
+          </View>
+          <Text
+            type="xl"
+            style={[styles.notice, pal.textLight]}
+            lineHeight={1.3}>
+            Bluesky will launch soon.{' '}
+            <TextLink
+              type="xl"
+              text="Join the waitlist"
+              href="#"
+              style={pal.link}
+            />{' '}
+            to try the beta before it's publicly available.
+          </Text>
+        </ErrorBoundary>
+      </View>
+    </CenteredView>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: '100%',
+    backgroundColor: colors.gray1,
+  },
+  containerInner: {
+    backgroundColor: colors.white,
+    paddingVertical: 40,
+    paddingBottom: 50,
+    paddingHorizontal: 20,
+  },
+  title: {
+    textAlign: 'center',
+    color: colors.blue3,
+    fontSize: 68,
+    fontWeight: 'bold',
+    paddingBottom: 10,
+  },
+  subtitle: {
+    textAlign: 'center',
+    color: colors.gray5,
+    fontSize: 52,
+    fontWeight: 'bold',
+    paddingBottom: 30,
+  },
+  btns: {
+    flexDirection: 'row',
+    paddingBottom: 40,
+  },
+  btn: {
+    flex: 1,
+    borderRadius: 30,
+    paddingVertical: 12,
+    marginHorizontal: 10,
+  },
+  btnLabel: {
+    textAlign: 'center',
+    fontSize: 18,
+  },
+  notice: {
+    paddingHorizontal: 40,
+    textAlign: 'center',
+  },
+})

src/view/com/auth/withAuthRequired.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import {ActivityIndicator, StyleSheet, View} from 'react-native'
+import {observer} from 'mobx-react-lite'
+import {useStores} from 'state/index'
+import {LoggedOut} from './LoggedOut'
+import {Text} from '../util/text/Text'
+import {usePalette} from 'lib/hooks/usePalette'
+
+export const withAuthRequired = <P extends object>(
+  Component: React.ComponentType<P>,
+): React.FC<P> =>
+  observer((props: P) => {
+    const store = useStores()
+    if (store.session.isResumingSession) {
+      return <Loading />
+    }
+    if (!store.session.hasSession) {
+      return <LoggedOut />
+    }
+    return <Component {...props} />
+  })
+
+function Loading() {
+  const pal = usePalette('default')
+  return (
+    <View style={[styles.loading, pal.view]}>
+      <ActivityIndicator size="large" />
+      <Text type="2xl" style={[styles.loadingText, pal.textLight]}>
+        Firing up the grill...
+      </Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  loading: {
+    height: '100%',
+    alignContent: 'center',
+    justifyContent: 'center',
+    paddingBottom: 100,
+  },
+  loadingText: {
+    paddingVertical: 20,
+    paddingHorizontal: 20,
+    textAlign: 'center',
+  },
+})