feat:(mobile) Fetch channels and dms list on app homepage

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

@@ -2,9 +2,13 @@ import React from 'react';
 import { Tabs } from 'expo-router';
 import { SvgProps } from 'react-native-svg';
 import HomeIcon from '@assets/icons/HomeIcon.svg';
+import HomeOutlineIcon from '@assets/icons/HomeOutlineIcon.svg';
 import ProfileIcon from '@assets/icons/ProfileIcon.svg';
+import ProfileOutlineIcon from '@assets/icons/ProfileOutlineIcon.svg';
 import ChatIcon from '@assets/icons/ChatIcon.svg';
+import ChatOutlineIcon from '@assets/icons/ChatOutlineIcon.svg';
 import BellIcon from '@assets/icons/BellIcon.svg';
+import BellOutlineIcon from '@assets/icons/BellOutlineIcon.svg';
 import { useColorScheme } from '@hooks/useColorScheme'
 
 export default function TabLayout() {
@@ -14,14 +18,19 @@ export default function TabLayout() {
 
     // Common styles
     const tabBarStyle = {
-        backgroundColor: dark ? 'rgba(12, 10, 21, 0.8)' : 'rgba(255, 255, 255, 0.8)',
+        backgroundColor: dark ? 'rgba(08, 08, 08, 0.8)' : 'rgba(255, 255, 255, 0.8)',
         borderTopWidth: 1,
-        borderTopColor: dark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.05)',
+        borderTopColor: dark ? 'rgba(255, 255, 255, 0.12)' : 'rgba(0, 0, 0, 0.05)',
         paddingTop: 4,
+        shadowColor: dark ? '#000' : '#000',
+        shadowOffset: { width: 0, height: -2 },
+        shadowOpacity: 0.03,
+        shadowRadius: 5,
+        elevation: 5
     }
 
     const headerStyle = {
-        backgroundColor: dark ? 'rgba(12, 10, 21, 0)' : 'rgba(249, 249, 249, 1)',
+        backgroundColor: dark ? 'rgba(08, 08, 08, 0)' : 'rgba(249, 249, 249, 1)',
         borderBottomWidth: 1,
         borderBottomColor: dark ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0)',
     }
@@ -31,23 +40,30 @@ export default function TabLayout() {
     })
 
     const getTabBarIcon =
-        (IconComponent: React.FC<SvgProps>) =>
+        (FilledIcon: React.FC<SvgProps>, OutlineIcon: React.FC<SvgProps>) =>
             ({ color, focused }: { color: string; focused: boolean }) =>
-            (
-                <IconComponent
-                    fill={color}
-                    style={tabBarIconStyle(focused)}
-                    width={24}
-                    height={24}
-                />
-            )
+                focused ? (
+                    <FilledIcon
+                        fill={color}
+                        style={tabBarIconStyle(focused)}
+                        width={24}
+                        height={24}
+                    />
+                ) : (
+                    <OutlineIcon
+                        fill={color}
+                        style={tabBarIconStyle(focused)}
+                        width={24}
+                        height={24}
+                    />
+                )
 
     return (
         <Tabs
             screenOptions={{
                 tabBarStyle,
                 tabBarActiveTintColor: dark ? '#FFFFFF' : colors.primary,
-                tabBarInactiveTintColor: dark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.5)',
+                tabBarInactiveTintColor: dark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.4)',
             }}
         >
             <Tabs.Screen
@@ -56,7 +72,7 @@ export default function TabLayout() {
                     title: 'Home',
                     headerShown: false,
                     headerStyle,
-                    tabBarIcon: getTabBarIcon(HomeIcon),
+                    tabBarIcon: getTabBarIcon(HomeIcon, HomeOutlineIcon),
                 }}
             />
             <Tabs.Screen
@@ -65,7 +81,7 @@ export default function TabLayout() {
                     title: 'DMs',
                     headerShown: false,
                     headerStyle,
-                    tabBarIcon: getTabBarIcon(ChatIcon),
+                    tabBarIcon: getTabBarIcon(ChatIcon, ChatOutlineIcon),
                 }}
             />
             <Tabs.Screen
@@ -74,7 +90,7 @@ export default function TabLayout() {
                     title: 'Activity',
                     headerShown: false,
                     headerStyle,
-                    tabBarIcon: getTabBarIcon(BellIcon),
+                    tabBarIcon: getTabBarIcon(BellIcon, BellOutlineIcon),
                 }}
             />
             <Tabs.Screen
@@ -83,7 +99,7 @@ export default function TabLayout() {
                     title: 'Profile',
                     headerShown: false,
                     headerStyle,
-                    tabBarIcon: getTabBarIcon(ProfileIcon),
+                    tabBarIcon: getTabBarIcon(ProfileIcon, ProfileOutlineIcon),
                 }}
             />
         </Tabs>

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

@@ -8,12 +8,12 @@ const HomeLayout = () => {
     return (
         <Stack screenOptions={{
             headerShadowVisible: false,
-            headerStyle: { backgroundColor: colors.background }
+            headerStyle: { backgroundColor: colors.primary }
         }}>
             <Stack.Screen name='index'
                 options={{
                     title: 'Home',
-                    headerLargeTitle: false
+                    headerShown: false
                 }} />
         </Stack>
     )

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

@@ -1,119 +1,53 @@
-import { View } from 'react-native';
+import { Pressable, SafeAreaView, ScrollView, View } from 'react-native';
 import { ThemeToggle } from '@components/nativewindui/ThemeToggle';
+import { Text } from '@components/nativewindui/Text';
+import { useColorScheme } from '@hooks/useColorScheme';
+import PlusIcon from '@assets/icons/PlusIcon.svg';
+import { SearchInput } from '@components/nativewindui/SearchInput';
 import ChannelList from '@components/features/chat/ChannelList/ChannelList';
-import { useRouter } from 'expo-router';
+import DMList from '@components/features/chat/DMList/DMList';
 
 export default function Home() {
 
-    const router = useRouter()
-    const handleChannelSelect = (channelId: string) => {
-        router.push('../chat/' + channelId)
-    }
+    const { colors } = useColorScheme()
 
     return (
-        <View className="flex flex-col gap-4">
-            <ThemeToggle />
-            <ChannelList
-                channels={[
-                    {
-                        name: "channel_001",
-                        channel_name: "general",
-                        type: "Public",
-                        channel_description: "A channel for general discussions.",
-                        is_direct_message: 0,
-                        is_self_message: 0,
-                        is_archived: 0,
-                        creation: "2024-01-01T12:00:00Z",
-                        owner: "user_001",
-                        last_message_details: {
-                            sender: "user_002",
-                            content: "Hello everyone!",
-                        },
-                        last_message_timestamp: "2024-12-01T10:00:00Z",
-                    },
-                    {
-                        name: "channel_002",
-                        channel_name: "announcements",
-                        type: "Open",
-                        channel_description: "Official announcements and updates.",
-                        is_direct_message: 0,
-                        is_self_message: 0,
-                        is_archived: 0,
-                        creation: "2024-01-10T15:00:00Z",
-                        owner: "user_003",
-                        last_message_details: {
-                            sender: "admin",
-                            content: "Welcome to the new announcements channel!",
-                        },
-                        last_message_timestamp: "2024-12-05T14:30:00Z",
-                    },
-                    {
-                        name: "channel_003",
-                        channel_name: "team-alpha",
-                        type: "Private",
-                        channel_description: "A private channel for Team Alpha members.",
-                        is_direct_message: 0,
-                        is_self_message: 0,
-                        is_archived: 0,
-                        creation: "2024-02-15T10:00:00Z",
-                        owner: "user_004",
-                        last_message_details: {
-                            sender: "user_005",
-                            content: "Let's finalize the project timeline.",
-                        },
-                        last_message_timestamp: "2024-12-10T09:15:00Z",
-                    },
-                    {
-                        name: "channel_004",
-                        channel_name: "support",
-                        type: "Public",
-                        channel_description: "A place to get support and ask questions.",
-                        is_direct_message: 0,
-                        is_self_message: 0,
-                        is_archived: 0,
-                        creation: "2024-03-20T08:30:00Z",
-                        owner: "user_006",
-                        last_message_details: {
-                            sender: "user_007",
-                            content: "Can someone help with deployment?",
-                        },
-                        last_message_timestamp: "2024-12-12T16:45:00Z",
-                    },
-                    {
-                        name: "channel_005",
-                        channel_name: "fun-zone",
-                        type: "Open",
-                        channel_description: "A channel for fun and casual chats.",
-                        is_direct_message: 0,
-                        is_self_message: 0,
-                        is_archived: 0,
-                        creation: "2024-04-01T12:00:00Z",
-                        owner: "user_008",
-                        last_message_details: {
-                            sender: "user_009",
-                            content: "Check out this meme!",
-                        },
-                        last_message_timestamp: "2024-12-15T11:00:00Z",
-                    },
-                    {
-                        name: "channel_006",
-                        channel_name: "dev-discussions",
-                        type: "Private",
-                        channel_description: "Discussions about development and code.",
-                        is_direct_message: 0,
-                        is_self_message: 0,
-                        is_archived: 0,
-                        creation: "2024-05-25T09:00:00Z",
-                        owner: "user_010",
-                        last_message_details: {
-                            sender: "user_011",
-                            content: "Have you seen the latest React update?",
-                        },
-                        last_message_timestamp: "2024-12-18T14:00:00Z",
-                    },
-                ]}
-                onChannelSelect={handleChannelSelect}
-                onLongPress={() => console.log('channel long pressed')} />
-        </View>
+        <SafeAreaView style={{ flex: 1, backgroundColor: colors.primary }}>
+            <View style={{ backgroundColor: colors.primary }} className="flex flex-col px-4 pb-4 pt-2 gap-2">
+                <View className='flex-row items-center justify-between'>
+                    <Pressable onPress={() => console.log('Workspace pressed')}>
+                        <Text className="text-white font-bold">Workspace</Text>
+                    </Pressable>
+                    <ThemeToggle />
+                </View>
+                <SearchInput />
+            </View>
+            <ScrollView style={{ backgroundColor: colors.background }} className="rounded-t-[2rem]">
+                <View className="flex flex-col">
+                    <ChannelList />
+                    <Divider />
+                    <DMList />
+                    <Divider />
+                    <Pressable className='flex-row items-center p-5 rounded-lg'
+                        onPress={() => console.log('Create channel pressed')}>
+                        <PlusIcon fill={colors.icon} height={18} width={18} />
+                        <Text className='ml-3 text-[16px]'>Add teammates</Text>
+                    </Pressable>
+                </View>
+            </ScrollView>
+        </SafeAreaView>
+    )
+}
+
+const Divider = () => {
+    const { colors } = useColorScheme()
+    return (
+        <View
+            style={{
+                borderBottomWidth: 1,
+                borderBottomColor: colors.grey5,
+                marginHorizontal: 16
+            }}
+        />
     )
 }