Merge pull request #1184 from The-Commit-Company/fetch-channels-and-d…

…ms-list-on-app-homepage

feat(mobile): channel list UI

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

@@ -5,7 +5,7 @@ import HomeIcon from '@assets/icons/HomeIcon.svg';
 import ProfileIcon from '@assets/icons/ProfileIcon.svg';
 import ChatIcon from '@assets/icons/ChatIcon.svg';
 import BellIcon from '@assets/icons/BellIcon.svg';
-import { useColorScheme } from '@lib/useColorScheme'
+import { useColorScheme } from '@hooks/useColorScheme'
 
 export default function TabLayout() {
 

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

@@ -1,4 +1,4 @@
-import { useColorScheme } from '@lib/useColorScheme';
+import { useColorScheme } from '@hooks/useColorScheme';
 import { Stack } from 'expo-router';
 
 const ActivityLayout = () => {

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

@@ -1,4 +1,4 @@
-import { useColorScheme } from '@lib/useColorScheme';
+import { useColorScheme } from '@hooks/useColorScheme';
 import { Stack } from 'expo-router';
 
 const DirectMessagesLayout = () => {

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

@@ -1,4 +1,4 @@
-import { useColorScheme } from '@lib/useColorScheme';
+import { useColorScheme } from '@hooks/useColorScheme';
 import { Stack } from 'expo-router';
 
 const HomeLayout = () => {
@@ -13,7 +13,7 @@ const HomeLayout = () => {
             <Stack.Screen name='index'
                 options={{
                     title: 'Home',
-                    headerLargeTitle: true
+                    headerLargeTitle: false
                 }} />
         </Stack>
     )

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

@@ -1,12 +1,112 @@
 import { View } from 'react-native';
-import { Text } from '@components/nativewindui/Text';
 import { ThemeToggle } from '@components/nativewindui/ThemeToggle';
+import ChannelList from '@components/features/chat/ChannelList/ChannelList';
 
 export default function Home() {
     return (
-        <View className="flex flex-1 items-center justify-center">
-            <Text className="text-4xl font-bold">Home</Text>
+        <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={() => console.log('channel selected')}
+                onLongPress={() => console.log('channel long pressed')} />
         </View>
     )
 }

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

@@ -1,4 +1,4 @@
-import { useColorScheme } from '@lib/useColorScheme';
+import { useColorScheme } from '@hooks/useColorScheme';
 import { Stack } from 'expo-router';
 
 const ProfileLayout = () => {

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

@@ -11,7 +11,7 @@ import {
 } from '@components/nativewindui/List';
 import { Text } from '@components/nativewindui/Text';
 import { cn } from '@lib/cn';
-import { useColorScheme } from '@lib/useColorScheme';
+import { useColorScheme } from '@hooks/useColorScheme';
 import ChevronRightIcon from '@assets/icons/ChevronRightIcon.svg';
 import { FrappeConfig, FrappeContext, useFrappeGetCall } from 'frappe-react-sdk';
 import AsyncStorage from '@react-native-async-storage/async-storage';

apps/mobile/app/_layout.tsx

@@ -4,7 +4,7 @@ import "../global.css";
 import { useEffect } from 'react';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
-import { useColorScheme, useInitialAndroidBarSync } from '@lib/useColorScheme';
+import { useColorScheme, useInitialAndroidBarSync } from '@hooks/useColorScheme';
 import { NAV_THEME } from '@theme/index';
 import { StatusBar } from 'expo-status-bar';
 import { ActionSheetProvider } from '@expo/react-native-action-sheet';

apps/mobile/components/features/chat/ChannelList/ChannelIcon.tsx

@@ -0,0 +1,18 @@
+import GlobeIcon from '@assets/icons/GlobeIcon.svg';
+import HashIcon from '@assets/icons/HashIcon.svg';
+import LockIcon from '@assets/icons/LockIcon.svg';
+
+const iconSize = 18
+
+export const ChannelIcon = ({ type, fill, size = iconSize }: { type: string, fill?: string, size?: number }) => {
+    switch (type) {
+        case 'Open':
+            return <GlobeIcon fill={fill} height={size} width={size} />
+        case 'Private':
+            return <LockIcon fill={fill} height={size} width={size} />
+        case 'Public':
+            return <HashIcon fill={fill} height={size} width={size} />
+        default:
+            return <HashIcon fill={fill} height={size} width={size} />
+    }
+}

apps/mobile/components/features/chat/ChannelList/ChannelList.tsx

@@ -0,0 +1,93 @@
+import React, { useState } from 'react';
+import { View, TouchableOpacity, Pressable, StyleSheet } from 'react-native';
+import { ChannelListItem } from '../../../../types/channels';
+import { ChannelIcon } from './ChannelIcon';
+import { Text } from '@components/nativewindui/Text';
+import ChevronDownIcon from '@assets/icons/ChevronDownIcon.svg';
+import ChevronRightIcon from '@assets/icons/ChevronRightIcon.svg';
+import { useColorScheme } from '@hooks/useColorScheme';
+import PlusIcon from '@assets/icons/PlusIcon.svg';
+
+interface ChannelListProps {
+    channels: ChannelListItem[];
+    onChannelSelect: (channelId: string) => void;
+    onLongPress: (channelId: string) => void;
+}
+
+const ChannelList = ({ channels, onChannelSelect, onLongPress }: ChannelListProps) => {
+
+    const [isExpanded, setIsExpanded] = useState(true)
+    const colors = useColorScheme()
+
+    const toggleAccordion = () => {
+        setIsExpanded((prev) => !prev)
+    }
+
+    return (
+        <View style={styles.container}>
+            <TouchableOpacity onPress={toggleAccordion} style={styles.header} activeOpacity={0.7}>
+                <Text style={styles.headerText}>Channels</Text>
+                {isExpanded ? <ChevronDownIcon fill={colors.colors.icon} /> : <ChevronRightIcon fill={colors.colors.icon} />}
+            </TouchableOpacity>
+            {isExpanded && <>
+                {channels.map((channel) => (
+                    <Pressable
+                        key={channel.name}
+                        onPress={() => onChannelSelect(channel.name)}
+                        onLongPress={() => onLongPress(channel.name)}
+                        style={styles.channelRow}
+                    >
+                        <ChannelIcon type={channel.type} fill={colors.colors.icon} />
+                        <Text style={styles.channelText}>{channel.channel_name}</Text>
+                    </Pressable>
+                ))}
+                <Pressable style={styles.addChannelButton}
+                    onPress={() => console.log('Create channel pressed')}>
+                    <PlusIcon fill={colors.colors.icon} height={18} width={18} />
+                    <Text style={styles.addChannelText}>Add Channel</Text>
+                </Pressable>
+            </>}
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        padding: 10,
+    },
+    header: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingVertical: 12,
+        paddingHorizontal: 10,
+    },
+    headerText: {
+        fontWeight: '600',
+        fontSize: 16,
+    },
+    channelRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 6,
+        paddingHorizontal: 10,
+        borderRadius: 10,
+    },
+    channelText: {
+        marginLeft: 12,
+        fontSize: 16,
+    },
+    addChannelButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 12,
+        paddingHorizontal: 10,
+        borderRadius: 10,
+    },
+    addChannelText: {
+        marginLeft: 12,
+        fontSize: 16,
+    },
+})
+
+export default ChannelList

apps/mobile/components/nativewindui/ActivityIndicator.tsx

@@ -1,5 +1,5 @@
 import { ActivityIndicator as RNActivityIndicator } from 'react-native';
-import { useColorScheme } from '@lib/useColorScheme';
+import { useColorScheme } from '@hooks/useColorScheme';
 
 function ActivityIndicator(props: React.ComponentPropsWithoutRef<typeof RNActivityIndicator>) {
   const { colors } = useColorScheme();

apps/mobile/components/nativewindui/AdaptiveSearchHeader/AdaptiveSearchHeader.ios.tsx

@@ -9,7 +9,7 @@ import type {
   NativeStackNavigationOptions,
   NativeStackNavigationSearchBarOptions,
 } from './types';
-import { useColorScheme } from '@lib/useColorScheme';
+import { useColorScheme } from '@hooks/useColorScheme';
 
 export function AdaptiveSearchHeader(props: AdaptiveSearchHeaderProps) {
   const id = React.useId();

apps/mobile/components/nativewindui/AdaptiveSearchHeader/AdaptiveSearchHeader.tsx

@@ -26,7 +26,7 @@ import type {
 import { Button } from '@components/nativewindui/Button';
 import { Text } from '@components/nativewindui/Text';
 import { cn } from '@lib/cn';
-import { useColorScheme } from '@lib/useColorScheme';
+import { useColorScheme } from '@hooks/useColorScheme';
 
 const SCREEN_OPTIONS = {
   headerShown: false,

apps/mobile/components/nativewindui/Button.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { Platform, Pressable, PressableProps, View, ViewStyle } from 'react-native';
 import { TextClassContext } from '@components/nativewindui/Text';
 import { cn } from '@lib/cn';
-import { useColorScheme } from '@lib/useColorScheme';
+import { useColorScheme } from '@hooks/useColorScheme';
 import { COLORS } from '@theme/colors';
 
 const buttonVariants = cva('flex-row items-center justify-center gap-2', {

apps/mobile/components/nativewindui/DrawerContent.tsx

@@ -6,7 +6,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Text } from '@components/nativewindui/Text';
 import { Button } from '@components/nativewindui/Button';
 import { cn } from '@lib/cn';
-import { useColorScheme } from '@lib/useColorScheme';
+import { useColorScheme } from '@hooks/useColorScheme';
 import { COLORS } from '@theme/colors';
 import CrossIcon from '@assets/icons/CrossIcon.svg';
 import { SvgProps } from 'react-native-svg';

apps/mobile/components/nativewindui/DropdownMenu/DropdownMenu.tsx

@@ -18,7 +18,7 @@ import { ActivityIndicator } from '@components/nativewindui/ActivityIndicator';
 import { Text } from '@components/nativewindui/Text';
 import { Button } from '@components/nativewindui/Button';
 import { cn } from '@lib/cn';
-import { useColorScheme } from '@lib/useColorScheme';
+import { useColorScheme } from '@hooks/useColorScheme';
 
 import CheckIcon from '@assets/icons/CheckIcon.svg';
 import ChevronRightIcon from '@assets/icons/ChevronRightIcon.svg';

apps/mobile/components/nativewindui/Form.tsx

@@ -3,7 +3,7 @@ import { Platform, View, ViewProps, ViewStyle } from 'react-native';
 
 import { Text } from '@components/nativewindui/Text';
 import { cn } from '@lib/cn';
-import { useColorScheme } from '@lib/useColorScheme';
+import { useColorScheme } from '@hooks/useColorScheme';
 
 const Form = React.forwardRef<View, ViewProps>(({ className, ...props }, ref) => {
   return <View ref={ref} className={cn('flex-1 gap-9', className)} {...props} />;

apps/mobile/components/nativewindui/SearchInput/SearchInput.ios.tsx

@@ -21,7 +21,7 @@ import type { SearchInputProps } from './types';
 
 import { Text } from '@components/nativewindui/Text';
 import { cn } from '@lib/cn';
-import { useColorScheme } from '@lib/useColorScheme';
+import { useColorScheme } from '@hooks/useColorScheme';
 
 // Add as class when possible: https://github.com/marklawlor/nativewind/issues/522
 const BORDER_CURVE: ViewStyle = {

apps/mobile/components/nativewindui/SearchInput/SearchInput.tsx

@@ -9,7 +9,7 @@ import CrossIcon from '@assets/icons/CrossIcon.svg';
 
 import { Button } from '@components/nativewindui/Button';
 import { cn } from '@lib/cn';
-import { useColorScheme } from '@lib/useColorScheme';
+import { useColorScheme } from '@hooks/useColorScheme';
 
 const SearchInput = React.forwardRef<React.ElementRef<typeof TextInput>, SearchInputProps>(
   (

apps/mobile/components/nativewindui/TextField/TextField.tsx

@@ -22,7 +22,7 @@ import CrossIcon from '@assets/icons/CrossIcon.svg';
 import type { TextFieldProps, TextFieldRef } from './types';
 
 import { cn } from '@lib/cn';
-import { useColorScheme } from '@lib/useColorScheme';
+import { useColorScheme } from '@hooks/useColorScheme';
 
 const TextField = React.forwardRef<TextFieldRef, TextFieldProps>(
   (