Skip to content

Commit

Permalink
Merge branch 'mobile-app' into rav-22-image-viewer
Browse files Browse the repository at this point in the history
  • Loading branch information
TITANiumRox committed Dec 20, 2024
2 parents 3222034 + 13d9127 commit 4d934a5
Show file tree
Hide file tree
Showing 24 changed files with 421 additions and 320 deletions.
131 changes: 75 additions & 56 deletions apps/mobile/app/[site_id]/(tabs)/_layout.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
import React from 'react';
import { Tabs } from 'expo-router';
import { Stack, 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() {
Expand All @@ -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)',
}
Expand All @@ -31,61 +40,71 @@ 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)',
}}
>
<Tabs.Screen
name="home"
options={{
title: 'Home',
headerShown: false,
headerStyle,
tabBarIcon: getTabBarIcon(HomeIcon),
}}
/>
<Tabs.Screen
name="direct-messages"
options={{
title: 'DMs',
headerShown: false,
headerStyle,
tabBarIcon: getTabBarIcon(ChatIcon),
}}
/>
<Tabs.Screen
name="activity"
options={{
title: 'Activity',
headerShown: false,
headerStyle,
tabBarIcon: getTabBarIcon(BellIcon),
}}
/>
<Tabs.Screen
name="profile"
options={{
title: 'Profile',
headerShown: false,
headerStyle,
tabBarIcon: getTabBarIcon(ProfileIcon),
<>
<Stack.Screen options={{ headerShown: false, title: 'Home' }} />
<Tabs
screenOptions={{
tabBarStyle,
tabBarActiveTintColor: dark ? '#FFFFFF' : colors.primary,
tabBarInactiveTintColor: dark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.4)',
}}
/>
</Tabs>
>
<Tabs.Screen
name="home"
options={{
title: 'Home',
headerShown: false,
headerStyle,
tabBarIcon: getTabBarIcon(HomeIcon, HomeOutlineIcon),
}}
/>
<Tabs.Screen
name="direct-messages"
options={{
title: 'DMs',
headerShown: false,
headerStyle,
tabBarIcon: getTabBarIcon(ChatIcon, ChatOutlineIcon),
}}
/>
<Tabs.Screen
name="activity"
options={{
title: 'Activity',
headerShown: false,
headerStyle,
tabBarIcon: getTabBarIcon(BellIcon, BellOutlineIcon),
}}
/>
<Tabs.Screen
name="profile"
options={{
title: 'Profile',
headerShown: false,
headerStyle,
tabBarIcon: getTabBarIcon(ProfileIcon, ProfileOutlineIcon),
}}
/>
</Tabs>
</>
)
}
4 changes: 2 additions & 2 deletions apps/mobile/app/[site_id]/(tabs)/home/_layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
Expand Down
151 changes: 46 additions & 105 deletions apps/mobile/app/[site_id]/(tabs)/home/index.tsx
Original file line number Diff line number Diff line change
@@ -1,112 +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 DMList from '@components/features/chat/DMList/DMList';

export default function Home() {

const { colors } = useColorScheme()

return (
<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 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>
<View
style={{
borderBottomWidth: 1,
borderBottomColor: colors.grey5,
marginHorizontal: 16
}}
/>
)
}
8 changes: 4 additions & 4 deletions apps/mobile/app/[site_id]/_layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { FrappeProvider } from "frappe-react-sdk";
import FullPageLoader from "@components/layout/FullPageLoader";
import { getAccessToken, getSiteFromStorage, getTokenEndpoint, storeAccessToken } from "@lib/auth";
import Providers from "@lib/Providers";
import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";

export default function SiteLayout() {

Expand Down Expand Up @@ -80,7 +81,6 @@ export default function SiteLayout() {
}, [site_id])

return <>
<Stack.Screen options={{ headerShown: false }} />
{loading ? <FullPageLoader /> :
<SiteContext.Provider value={siteInfo}>
<FrappeProvider
Expand All @@ -92,9 +92,9 @@ export default function SiteLayout() {
}}
siteName={siteInfo?.sitename}>
<Providers>
<Stack>
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
</Stack>
<BottomSheetModalProvider>
<Stack />
</BottomSheetModalProvider>
</Providers>
</FrappeProvider>
</SiteContext.Provider>
Expand Down
17 changes: 17 additions & 0 deletions apps/mobile/app/[site_id]/chat/[id]/channel-settings.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { View } from "react-native"
import { Text } from '@components/nativewindui/Text'
import { Stack } from "expo-router"

const ChannelSettings = () => {
return (
<View>
<Stack.Screen options={{
title: 'Channel Settings',
headerLargeTitle: true
}} />
<Text>Channel Settings</Text>
</View>
)
}

export default ChannelSettings
Loading

0 comments on commit 4d934a5

Please sign in to comment.