feat(routing): add chat and channel routing

apps/mobile/app/[site_id]/(tabs)/home/index.tsx

@@ -1,8 +1,15 @@
 import { View } from 'react-native';
 import { ThemeToggle } from '@components/nativewindui/ThemeToggle';
 import ChannelList from '@components/features/chat/ChannelList/ChannelList';
+import { useRouter } from 'expo-router';
 
 export default function Home() {
+
+    const router = useRouter()
+    const handleChannelSelect = (channelId: string) => {
+        router.push('../chat/' + channelId)
+    }
+
     return (
         <View className="flex flex-col gap-4">
             <ThemeToggle />
@@ -105,7 +112,7 @@ export default function Home() {
                         last_message_timestamp: "2024-12-18T14:00:00Z",
                     },
                 ]}
-                onChannelSelect={() => console.log('channel selected')}
+                onChannelSelect={handleChannelSelect}
                 onLongPress={() => console.log('channel long pressed')} />
         </View>
     )

apps/mobile/app/[site_id]/_layout.tsx

@@ -93,7 +93,7 @@ export default function SiteLayout() {
                     siteName={siteInfo?.sitename}>
                     <Providers>
                         <Stack>
-                            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+                            <Stack.Screen name="(tabs)" options={{ headerShown: false, title: 'Home' }} />
                         </Stack>
                     </Providers>
                 </FrappeProvider>

apps/mobile/app/[site_id]/chat/[id]/_layout.tsx

@@ -0,0 +1,29 @@
+import { useColorScheme } from "@hooks/useColorScheme"
+import { Stack } from "expo-router"
+
+
+const ChatLayout = () => {
+    const { colors } = useColorScheme()
+
+    return (
+        <Stack screenOptions={{
+            headerShadowVisible: false,
+            headerStyle: { backgroundColor: colors.background }
+        }}>
+            <Stack.Screen name='index'
+                options={{
+                    title: 'Chat',
+                    headerLargeTitle: false
+                }}
+            />
+            <Stack.Screen name='channel-settings'
+                options={{
+                    title: 'Channel Settings',
+                    headerLargeTitle: false
+                }}
+            />
+        </Stack>
+    )
+}
+
+export default ChatLayout

apps/mobile/app/[site_id]/chat/[id]/channel-settings.tsx

@@ -0,0 +1,12 @@
+import { View } from "react-native"
+import { Text } from '@components/nativewindui/Text'
+
+const ChannelSettings = () => {
+    return (
+        <View>
+            <Text>Channel Settings</Text>
+        </View>
+    )
+}
+
+export default ChannelSettings

apps/mobile/app/[site_id]/chat/[id]/index.tsx

@@ -0,0 +1,18 @@
+
+
+import { View, Text } from 'react-native'
+import { useLocalSearchParams } from 'expo-router';
+
+const Chat = () => {
+    const { id } = useLocalSearchParams();
+
+    console.log("Channel id: ", id);
+
+    return (
+        <View>
+            <Text>{id}</Text>
+        </View>
+    )
+}
+
+export default Chat

apps/mobile/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
+    "jsx": "react-jsx",
     "strict": true,
     "composite": true,
     "moduleResolution": "bundler",