chore(client): route names and update initial route

apps/client/app/(home)/_layout.tsx

@@ -0,0 +1,13 @@
+import { Redirect } from 'expo-router'
+import { Stack } from 'expo-router/stack'
+import { useAuth } from '@clerk/clerk-expo'
+
+export default function Layout() {
+  const { isSignedIn } = useAuth()
+
+  if (!isSignedIn) {
+    return <Redirect href={'/auth/sign-in'} />
+  }
+
+  return <Stack screenOptions={{ headerShown: false }} />
+}

apps/client/app/home/index.tsx → apps/client/app/(home)/index.tsx

@@ -8,7 +8,7 @@ export default function Page() {
   const { user } = useUser()
 
   return (
-    <Container className="bg-green-500">
+    <Container className="bg-red-500">
       <SignedIn>
         <Text>Hello {user?.emailAddresses[0].emailAddress}</Text>
         <TouchableOpacity onPress={() => signOut()}>
@@ -22,6 +22,9 @@ export default function Page() {
         <Link href="/auth/sign-up">
           <Text>Sign up</Text>
         </Link>
+        <TouchableOpacity onPress={() => signOut()}>
+          <Text>Sign out</Text>
+        </TouchableOpacity>
       </SignedOut>
     </Container>
   )

apps/client/app/(intro)/index.tsx → apps/client/app/(onboarding)/index.tsx

@@ -7,7 +7,7 @@ export default function Page() {
       <Text className="text-foreground"> text </Text>
       <View>
         <Link href="/auth/sign-in">
-          <Text>Sign in</Text>
+          <Text className="text-primary">Sign in</Text>
         </Link>
         <Link href="/auth/sign-up">
           <Text>Sign up</Text>

apps/client/app/_layout.tsx

@@ -12,7 +12,7 @@ import '../global.css'
 SplashScreen.preventAutoHideAsync()
 
 export const unstable_settings = {
-  initialRouteName: '(intro)',
+  initialRouteName: 'auth',
 }
 
 export default function RootLayout() {
@@ -41,8 +41,8 @@ export default function RootLayout() {
       <ClerkLoaded>
         <ThemeProvider>
           <Stack screenOptions={{ headerShown: false }}>
-            <Stack.Screen name="(intro)" />
-            <Stack.Screen name="home" />
+            <Stack.Screen name="(onboarding)" />
+            <Stack.Screen name="(home)" />
             <Stack.Screen name="auth" />
             <Stack.Screen name="+not-found" />
           </Stack>

apps/client/app/auth/_layout.tsx

@@ -8,5 +8,5 @@ export default function AuthRoutesLayout() {
     return <Redirect href={'/'} />
   }
 
-  return <Stack />
+  return <Stack screenOptions={{ headerShown: false }} />
 }

apps/client/app/auth/index.tsx

@@ -0,0 +1,15 @@
+import { Button, Text, View } from 'react-native'
+import { Container } from '@/components/ui/Container'
+
+export default function Page() {
+  return (
+    <Container className="flex-1 bg-red-500">
+      <View>
+        <Text>Welcome to bolhadev.chat</Text>
+        <Text>Create your account and start learng english asap</Text>
+      </View>
+      <Button title="Sign Up" />
+      <Button title="Sign In" />
+    </Container>
+  )
+}

apps/client/app/auth/sign-in.tsx

@@ -1,6 +1,9 @@
 import { useCallback, useState } from 'react'
 import { Button, Text, TextInput, View } from 'react-native'
 import { Link, useRouter } from 'expo-router'
+import { Camera } from 'lucide-react-native'
+import { Container } from '@/components/ui/Container'
+import { Input, InputField, InputIcon } from '@/components/ui/Input'
 import { useSignIn } from '@clerk/clerk-expo'
 
 export default function Page() {
@@ -10,55 +13,57 @@ export default function Page() {
   const [emailAddress, setEmailAddress] = useState('')
   const [password, setPassword] = useState('')
 
-  // Handle the submission of the sign-in form
   const onSignInPress = useCallback(async () => {
     if (!isLoaded) return
 
-    // Start the sign-in process using the email and password provided
     try {
       const signInAttempt = await signIn.create({
         identifier: emailAddress,
         password,
       })
 
-      // If sign-in process is complete, set the created session as active
-      // and redirect the user
       if (signInAttempt.status === 'complete') {
         await setActive({ session: signInAttempt.createdSessionId })
         router.replace('/')
       } else {
-        // If the status isn't complete, check why. User might need to
-        // complete further steps.
         console.error(JSON.stringify(signInAttempt, null, 2))
       }
     } catch (err) {
-      // See https://clerk.com/docs/custom-flows/error-handling
-      // for more info on error handling
       console.error(JSON.stringify(err, null, 2))
     }
   }, [isLoaded, signIn, emailAddress, password, setActive, router])
 
   return (
-    <View>
-      <TextInput
-        autoCapitalize="none"
-        value={emailAddress}
-        placeholder="Enter email"
-        onChangeText={(emailAddress) => setEmailAddress(emailAddress)}
-      />
-      <TextInput
-        value={password}
-        placeholder="Enter password"
-        secureTextEntry={true}
-        onChangeText={(password) => setPassword(password)}
-      />
-      <Button title="Sign in" onPress={onSignInPress} />
-      <View>
-        <Text>Don't have an account?</Text>
-        <Link href="/sign-up">
-          <Text>Sign up</Text>
-        </Link>
+    <Container className="flex-1 bg-background">
+      <View className="flex-1">
+        <Text>
+          Master English, Transform Your World. The new frontier in
+          collaborative learning.
+        </Text>
       </View>
-    </View>
+      <View className="gap-2">
+        <Input
+          icon={Camera}
+          autoCapitalize="none"
+          value={emailAddress}
+          placeholder="Enter your email"
+          onChangeText={(emailAddress) => setEmailAddress(emailAddress)}
+        />
+        <Input
+          icon={Camera}
+          value={password}
+          placeholder="Enter password"
+          secureTextEntry={true}
+          onChangeText={(password) => setPassword(password)}
+        />
+        <Button title="Sign in" onPress={onSignInPress} />
+        <View>
+          <Text>Don't have an account?</Text>
+          <Link href="/auth/sign-up">
+            <Text>Sign up</Text>
+          </Link>
+        </View>
+      </View>
+    </Container>
   )
 }