From fdd1f5af05e2afcd84bdf649afaf189768a40825 Mon Sep 17 00:00:00 2001 From: Janhvi Patil Date: Thu, 19 Dec 2024 19:04:39 +0530 Subject: [PATCH 1/6] wip(mobile): updated tab bar icons --- apps/mobile/app/[site_id]/(tabs)/_layout.tsx | 6 +++++- apps/mobile/assets/icons/BellOutlineIcon.svg | 1 + apps/mobile/assets/icons/ChatOutlineIcon.svg | 1 + apps/mobile/assets/icons/HomeIcon.svg | 2 +- apps/mobile/assets/icons/HomeOutlineIcon.svg | 1 + apps/mobile/assets/icons/ProfileOutlineIcon.svg | 1 + 6 files changed, 10 insertions(+), 2 deletions(-) create mode 100644 apps/mobile/assets/icons/BellOutlineIcon.svg create mode 100644 apps/mobile/assets/icons/ChatOutlineIcon.svg create mode 100644 apps/mobile/assets/icons/HomeOutlineIcon.svg create mode 100644 apps/mobile/assets/icons/ProfileOutlineIcon.svg diff --git a/apps/mobile/app/[site_id]/(tabs)/_layout.tsx b/apps/mobile/app/[site_id]/(tabs)/_layout.tsx index 6c18015b..af179568 100644 --- a/apps/mobile/app/[site_id]/(tabs)/_layout.tsx +++ b/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() { @@ -45,7 +49,7 @@ export default function TabLayout() { return ( \ No newline at end of file diff --git a/apps/mobile/assets/icons/ChatOutlineIcon.svg b/apps/mobile/assets/icons/ChatOutlineIcon.svg new file mode 100644 index 00000000..8c361929 --- /dev/null +++ b/apps/mobile/assets/icons/ChatOutlineIcon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/mobile/assets/icons/HomeIcon.svg b/apps/mobile/assets/icons/HomeIcon.svg index da1088a9..fed5cc35 100644 --- a/apps/mobile/assets/icons/HomeIcon.svg +++ b/apps/mobile/assets/icons/HomeIcon.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/apps/mobile/assets/icons/HomeOutlineIcon.svg b/apps/mobile/assets/icons/HomeOutlineIcon.svg new file mode 100644 index 00000000..554c6eb7 --- /dev/null +++ b/apps/mobile/assets/icons/HomeOutlineIcon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/mobile/assets/icons/ProfileOutlineIcon.svg b/apps/mobile/assets/icons/ProfileOutlineIcon.svg new file mode 100644 index 00000000..d9120d93 --- /dev/null +++ b/apps/mobile/assets/icons/ProfileOutlineIcon.svg @@ -0,0 +1 @@ + \ No newline at end of file From 2d5f2881a800e3324b0ef21a055b2d03300ef676 Mon Sep 17 00:00:00 2001 From: Janhvi Patil Date: Fri, 20 Dec 2024 00:00:36 +0530 Subject: [PATCH 2/6] feat(mobile): added DM list UI --- apps/mobile/app/[site_id]/(tabs)/_layout.tsx | 48 +-- .../app/[site_id]/(tabs)/home/_layout.tsx | 4 +- .../app/[site_id]/(tabs)/home/index.tsx | 304 ++++++++++++------ .../features/chat/ChannelList/ChannelList.tsx | 4 +- .../features/chat/DMList/DMList.tsx | 85 +++++ .../components/nativewindui/ThemeToggle.tsx | 4 +- apps/mobile/types/channels.ts | 7 +- 7 files changed, 330 insertions(+), 126 deletions(-) create mode 100644 apps/mobile/components/features/chat/DMList/DMList.tsx diff --git a/apps/mobile/app/[site_id]/(tabs)/_layout.tsx b/apps/mobile/app/[site_id]/(tabs)/_layout.tsx index af179568..ca5c2064 100644 --- a/apps/mobile/app/[site_id]/(tabs)/_layout.tsx +++ b/apps/mobile/app/[site_id]/(tabs)/_layout.tsx @@ -18,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)', } @@ -35,23 +40,30 @@ export default function TabLayout() { }) const getTabBarIcon = - (IconComponent: React.FC) => + (FilledIcon: React.FC, OutlineIcon: React.FC) => ({ color, focused }: { color: string; focused: boolean }) => - ( - - ) + focused ? ( + + ) : ( + + ) return ( diff --git a/apps/mobile/app/[site_id]/(tabs)/home/_layout.tsx b/apps/mobile/app/[site_id]/(tabs)/home/_layout.tsx index 22a4a853..29f5c09c 100644 --- a/apps/mobile/app/[site_id]/(tabs)/home/_layout.tsx +++ b/apps/mobile/app/[site_id]/(tabs)/home/_layout.tsx @@ -8,12 +8,12 @@ const HomeLayout = () => { return ( ) diff --git a/apps/mobile/app/[site_id]/(tabs)/home/index.tsx b/apps/mobile/app/[site_id]/(tabs)/home/index.tsx index 3ef82c41..f9131fd8 100644 --- a/apps/mobile/app/[site_id]/(tabs)/home/index.tsx +++ b/apps/mobile/app/[site_id]/(tabs)/home/index.tsx @@ -1,112 +1,214 @@ -import { View } from 'react-native'; +import { Pressable, SafeAreaView, ScrollView, View } from 'react-native'; import { ThemeToggle } from '@components/nativewindui/ThemeToggle'; import ChannelList from '@components/features/chat/ChannelList/ChannelList'; +import { Text } from '@components/nativewindui/Text'; +import { useColorScheme } from '@hooks/useColorScheme'; +import DMList from '@components/features/chat/DMList/DMList'; +import PlusIcon from '@assets/icons/PlusIcon.svg'; export default function Home() { + + const { colors } = useColorScheme() + return ( - - - + + console.log('Workspace pressed')}> + Workspace + + + + + + console.log('channel selected')} + onLongPress={() => console.log('channel long pressed')} /> + + console.log('channel selected')} - onLongPress={() => console.log('channel long pressed')} /> - + ]} + onDMSelect={() => console.log('dm selected')} /> + + console.log('Create channel pressed')}> + + Add teammates + + + + + ) +} + +const Divider = () => { + const { colors } = useColorScheme() + return ( + ) } \ No newline at end of file diff --git a/apps/mobile/components/features/chat/ChannelList/ChannelList.tsx b/apps/mobile/components/features/chat/ChannelList/ChannelList.tsx index a133d63c..70be428d 100644 --- a/apps/mobile/components/features/chat/ChannelList/ChannelList.tsx +++ b/apps/mobile/components/features/chat/ChannelList/ChannelList.tsx @@ -44,7 +44,7 @@ const ChannelList = ({ channels, onChannelSelect, onLongPress }: ChannelListProp console.log('Create channel pressed')}> - Add Channel + Add channel } @@ -80,7 +80,7 @@ const styles = StyleSheet.create({ addChannelButton: { flexDirection: 'row', alignItems: 'center', - paddingVertical: 12, + paddingVertical: 10, paddingHorizontal: 10, borderRadius: 10, }, diff --git a/apps/mobile/components/features/chat/DMList/DMList.tsx b/apps/mobile/components/features/chat/DMList/DMList.tsx new file mode 100644 index 00000000..85153da1 --- /dev/null +++ b/apps/mobile/components/features/chat/DMList/DMList.tsx @@ -0,0 +1,85 @@ +import React, { useState } from 'react'; +import { View, Pressable, StyleSheet, TouchableOpacity, Platform } from 'react-native'; +import { Text } from '@components/nativewindui/Text'; +import { DMChannelListItem } from '../../../../types/channels'; +import { Avatar, AvatarFallback } from '@components/nativewindui/Avatar'; +import { useColorScheme } from '@hooks/useColorScheme'; +import ChevronDownIcon from '@assets/icons/ChevronDownIcon.svg'; +import ChevronRightIcon from '@assets/icons/ChevronRightIcon.svg'; +import { cn } from '@lib/cn'; + +interface DMListProps { + dms: DMChannelListItem[]; + onDMSelect: (userId: string) => void; +} + +const DMList = ({ dms, onDMSelect }: DMListProps) => { + + const [isExpanded, setIsExpanded] = useState(true) + const colors = useColorScheme() + + const toggleAccordion = () => { + setIsExpanded((prev) => !prev) + } + + return ( + + + Direct Messages + {isExpanded ? : } + + {isExpanded && <> + {dms.map((dm) => ( + onDMSelect(dm.name)} + style={styles.dmChannelRow} + > + + + + {dm.channel_name.charAt(0) + dm.channel_name.charAt(1)} + + + + {dm.channel_name} + + ))} + } + + ) +} + +const styles = StyleSheet.create({ + container: { + padding: 10, + }, + header: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + paddingVertical: 12, + paddingHorizontal: 10, + }, + headerText: { + fontWeight: '600', + fontSize: 16, + }, + dmChannelRow: { + flexDirection: 'row', + alignItems: 'center', + paddingVertical: 6, + paddingHorizontal: 10, + borderRadius: 10, + }, + dmChannelText: { + marginLeft: 12, + fontSize: 16, + }, +}) + +export default DMList; diff --git a/apps/mobile/components/nativewindui/ThemeToggle.tsx b/apps/mobile/components/nativewindui/ThemeToggle.tsx index 2acd12fd..277ca97d 100644 --- a/apps/mobile/components/nativewindui/ThemeToggle.tsx +++ b/apps/mobile/components/nativewindui/ThemeToggle.tsx @@ -24,12 +24,12 @@ export function ThemeToggle() { {colorScheme === 'dark' ? ({ pressed }) => ( - + ) : ({ pressed }) => ( - + )} diff --git a/apps/mobile/types/channels.ts b/apps/mobile/types/channels.ts index 6fa122cf..d8bcfe1c 100644 --- a/apps/mobile/types/channels.ts +++ b/apps/mobile/types/channels.ts @@ -29,4 +29,9 @@ export interface RavenChannel { export type ChannelListItem = Pick \ No newline at end of file + 'is_archived' | 'creation' | 'owner' | 'last_message_details' | 'last_message_timestamp'> + +export interface DMChannelListItem extends ChannelListItem { + peer_user_id: string, + is_direct_message: 1, +} \ No newline at end of file From 8caf6ab27ef562b6e1d37caa8a389fcc78d261ee Mon Sep 17 00:00:00 2001 From: Janhvi Patil Date: Fri, 20 Dec 2024 00:55:57 +0530 Subject: [PATCH 3/6] feat(mobile): added search input in homepage --- .../app/[site_id]/(tabs)/home/index.tsx | 32 ++++++------------- .../SearchInput/SearchInput.ios.tsx | 21 ++++++------ .../nativewindui/SearchInput/SearchInput.tsx | 8 ++--- apps/mobile/theme/colors.ts | 8 +++-- 4 files changed, 32 insertions(+), 37 deletions(-) diff --git a/apps/mobile/app/[site_id]/(tabs)/home/index.tsx b/apps/mobile/app/[site_id]/(tabs)/home/index.tsx index f9131fd8..0d04e504 100644 --- a/apps/mobile/app/[site_id]/(tabs)/home/index.tsx +++ b/apps/mobile/app/[site_id]/(tabs)/home/index.tsx @@ -5,6 +5,7 @@ import { Text } from '@components/nativewindui/Text'; import { useColorScheme } from '@hooks/useColorScheme'; import DMList from '@components/features/chat/DMList/DMList'; import PlusIcon from '@assets/icons/PlusIcon.svg'; +import { SearchInput } from '@components/nativewindui/SearchInput'; export default function Home() { @@ -12,11 +13,14 @@ export default function Home() { return ( - - console.log('Workspace pressed')}> - Workspace - - + + + console.log('Workspace pressed')}> + Workspace + + + + @@ -86,22 +90,6 @@ export default function Home() { }, 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", @@ -196,7 +184,7 @@ export default function Home() { - + ) } diff --git a/apps/mobile/components/nativewindui/SearchInput/SearchInput.ios.tsx b/apps/mobile/components/nativewindui/SearchInput/SearchInput.ios.tsx index 204d0f96..d2be82b6 100644 --- a/apps/mobile/components/nativewindui/SearchInput/SearchInput.ios.tsx +++ b/apps/mobile/components/nativewindui/SearchInput/SearchInput.ios.tsx @@ -23,7 +23,6 @@ import { Text } from '@components/nativewindui/Text'; import { cn } from '@lib/cn'; import { useColorScheme } from '@hooks/useColorScheme'; -// Add as class when possible: https://github.com/marklawlor/nativewind/issues/522 const BORDER_CURVE: ViewStyle = { borderCurve: 'continuous', }; @@ -34,7 +33,7 @@ const SearchInput = React.forwardRef, SearchI value: valueProp, onChangeText: onChangeTextProp, onFocus: onFocusProp, - placeholder = 'Search...', + placeholder = 'Jump to or search...', cancelText = 'Cancel', containerClassName, iconContainerClassName, @@ -45,6 +44,7 @@ const SearchInput = React.forwardRef, SearchI ref ) => { const { colors } = useColorScheme(); + const inputRef = useAugmentedRef({ ref, methods: { focus, blur, clear } }); const [showCancel, setShowCancel] = React.useState(false); const showCancelDerivedValue = useDerivedValue(() => showCancel, [showCancel]); @@ -58,7 +58,6 @@ const SearchInput = React.forwardRef, SearchI const rootStyle = useAnimatedStyle(() => { if (_WORKLET) { - // safely use measure const measurement = measure(animatedRef); return { paddingRight: showCancelDerivedValue.value @@ -72,9 +71,9 @@ const SearchInput = React.forwardRef, SearchI : withTiming(0), }; }); + const buttonStyle3 = useAnimatedStyle(() => { if (_WORKLET) { - // safely use measure const measurement = measure(animatedRef); return { position: 'absolute', @@ -126,20 +125,23 @@ const SearchInput = React.forwardRef, SearchI + className={cn( + 'bg-card/15 flex-1 flex-row rounded-lg', + containerClassName + )}> - + , SearchI onFocus={onFocus} clearButtonMode="while-editing" role="searchbox" + placeholderTextColor={colors.greyText} {...props} /> @@ -163,7 +166,7 @@ const SearchInput = React.forwardRef, SearchI disabled={!showCancel} pointerEvents={!showCancel ? 'none' : 'auto'} className="flex-1 justify-center active:opacity-50"> - {cancelText} + {cancelText} diff --git a/apps/mobile/components/nativewindui/SearchInput/SearchInput.tsx b/apps/mobile/components/nativewindui/SearchInput/SearchInput.tsx index 2d6fcceb..dd0734c7 100644 --- a/apps/mobile/components/nativewindui/SearchInput/SearchInput.tsx +++ b/apps/mobile/components/nativewindui/SearchInput/SearchInput.tsx @@ -16,7 +16,7 @@ const SearchInput = React.forwardRef, SearchI { value: valueProp, onChangeText: onChangeTextProp, - placeholder = 'Search...', + placeholder = 'Jump to or search...', cancelText = 'Cancel', containerClassName, iconContainerClassName, @@ -55,7 +55,7 @@ const SearchInput = React.forwardRef, SearchI )} onPress={focus}> - + @@ -63,7 +63,7 @@ const SearchInput = React.forwardRef, SearchI ref={inputRef} placeholder={placeholder} className={cn('text-foreground flex-1 rounded-r-full p-2 text-[17px]', className)} - placeholderTextColor={colors.grey2} + placeholderTextColor={colors.greyText} value={value} onChangeText={onChangeText} role="searchbox" @@ -73,7 +73,7 @@ const SearchInput = React.forwardRef, SearchI {!!value && ( - + )} diff --git a/apps/mobile/theme/colors.ts b/apps/mobile/theme/colors.ts index 2d07f918..3a7d5fa0 100644 --- a/apps/mobile/theme/colors.ts +++ b/apps/mobile/theme/colors.ts @@ -15,6 +15,7 @@ const IOS_SYSTEM_COLORS = { root: 'rgb(255, 255, 255)', card: 'rgb(255, 255, 255)', icon: '#1C2024', + greyText: 'rgb(175, 176, 180)', destructive: 'rgb(255, 56, 43)', primary: '#5753C6', }, @@ -25,11 +26,12 @@ const IOS_SYSTEM_COLORS = { grey3: 'rgb(70, 70, 73)', grey2: 'rgb(99, 99, 102)', grey: 'rgb(142, 142, 147)', - background: 'rgb(0, 0, 0)', + background: 'rgb(10, 10, 10)', foreground: 'rgb(255, 255, 255)', root: 'rgb(0, 0, 0)', card: 'rgb(21, 21, 24)', icon: '#B9BBC6', + greyText: 'rgb(175, 176, 180)', destructive: 'rgb(254, 67, 54)', primary: '#5753C6', }, @@ -50,6 +52,7 @@ const ANDROID_COLORS = { root: 'rgb(255, 255, 255)', card: 'rgb(255, 255, 255)', icon: '#1C2024', + greyText: 'rgb(175, 176, 180)', destructive: 'rgb(186, 26, 26)', primary: '#5753C6', }, @@ -60,11 +63,12 @@ const ANDROID_COLORS = { grey3: 'rgb(54, 57, 66)', grey2: 'rgb(139, 144, 160)', grey: 'rgb(193, 198, 215)', - background: 'rgb(0, 0, 0)', + background: 'rgb(10, 10, 10)', foreground: 'rgb(255, 255, 255)', root: 'rgb(0, 0, 0)', card: 'rgb(16, 19, 27)', icon: '#B9BBC6', + greyText: 'rgb(175, 176, 180)', destructive: 'rgb(147, 0, 10)', primary: '#5753C6', }, From a5ade500f00e97c2d2bc5669f1567d27c22ff4f1 Mon Sep 17 00:00:00 2001 From: Janhvi Patil Date: Fri, 20 Dec 2024 15:24:16 +0530 Subject: [PATCH 4/6] wip(mobile): channel list --- .../app/[site_id]/(tabs)/home/index.tsx | 151 +----------------- .../features/chat/ChannelList/ChannelList.tsx | 12 +- .../features/chat/DMList/DMList.tsx | 13 +- apps/mobile/theme/colors.ts | 4 +- apps/mobile/types/channels.ts | 37 ----- 5 files changed, 26 insertions(+), 191 deletions(-) delete mode 100644 apps/mobile/types/channels.ts diff --git a/apps/mobile/app/[site_id]/(tabs)/home/index.tsx b/apps/mobile/app/[site_id]/(tabs)/home/index.tsx index 0d04e504..8f6ac28f 100644 --- a/apps/mobile/app/[site_id]/(tabs)/home/index.tsx +++ b/apps/mobile/app/[site_id]/(tabs)/home/index.tsx @@ -25,156 +25,11 @@ export default function Home() { console.log('channel selected')} onLongPress={() => console.log('channel long pressed')} /> - console.log('dm selected')} /> - + ) } diff --git a/apps/mobile/components/features/chat/ChannelList/ChannelList.tsx b/apps/mobile/components/features/chat/ChannelList/ChannelList.tsx index 70be428d..424e6c35 100644 --- a/apps/mobile/components/features/chat/ChannelList/ChannelList.tsx +++ b/apps/mobile/components/features/chat/ChannelList/ChannelList.tsx @@ -1,15 +1,23 @@ 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'; +import { RavenChannel } from '@raven/types/RavenChannelManagement/RavenChannel'; + +export type ChannelListItem = Pick + +export interface ChannelWithUnreadCount extends ChannelListItem { + unread_count: number +} interface ChannelListProps { - channels: ChannelListItem[]; + channels: ChannelWithUnreadCount[]; onChannelSelect: (channelId: string) => void; onLongPress: (channelId: string) => void; } diff --git a/apps/mobile/components/features/chat/DMList/DMList.tsx b/apps/mobile/components/features/chat/DMList/DMList.tsx index 85153da1..83a6bece 100644 --- a/apps/mobile/components/features/chat/DMList/DMList.tsx +++ b/apps/mobile/components/features/chat/DMList/DMList.tsx @@ -1,15 +1,24 @@ import React, { useState } from 'react'; import { View, Pressable, StyleSheet, TouchableOpacity, Platform } from 'react-native'; import { Text } from '@components/nativewindui/Text'; -import { DMChannelListItem } from '../../../../types/channels'; import { Avatar, AvatarFallback } from '@components/nativewindui/Avatar'; import { useColorScheme } from '@hooks/useColorScheme'; import ChevronDownIcon from '@assets/icons/ChevronDownIcon.svg'; import ChevronRightIcon from '@assets/icons/ChevronRightIcon.svg'; import { cn } from '@lib/cn'; +import { ChannelListItem } from '../ChannelList/ChannelList'; + +export interface DMChannelListItem extends ChannelListItem { + peer_user_id: string, + is_direct_message: 1, +} + +export interface DMChannelWithUnreadCount extends DMChannelListItem { + unread_count: number +} interface DMListProps { - dms: DMChannelListItem[]; + dms: DMChannelWithUnreadCount[]; onDMSelect: (userId: string) => void; } diff --git a/apps/mobile/theme/colors.ts b/apps/mobile/theme/colors.ts index 3a7d5fa0..a55d823e 100644 --- a/apps/mobile/theme/colors.ts +++ b/apps/mobile/theme/colors.ts @@ -21,7 +21,7 @@ const IOS_SYSTEM_COLORS = { }, dark: { grey6: 'rgb(21, 21, 24)', - grey5: 'rgb(40, 40, 42)', + grey5: 'rgb(30, 30, 32)', grey4: 'rgb(55, 55, 57)', grey3: 'rgb(70, 70, 73)', grey2: 'rgb(99, 99, 102)', @@ -58,7 +58,7 @@ const ANDROID_COLORS = { }, dark: { grey6: 'rgb(16, 19, 27)', - grey5: 'rgb(39, 42, 50)', + grey5: 'rgb(30, 30, 32)', grey4: 'rgb(49, 53, 61)', grey3: 'rgb(54, 57, 66)', grey2: 'rgb(139, 144, 160)', diff --git a/apps/mobile/types/channels.ts b/apps/mobile/types/channels.ts deleted file mode 100644 index d8bcfe1c..00000000 --- a/apps/mobile/types/channels.ts +++ /dev/null @@ -1,37 +0,0 @@ -export interface RavenChannel { - creation: string - name: string - modified: string - owner: string - modified_by: string - docstatus: 0 | 1 | 2 - parent?: string - parentfield?: string - parenttype?: string - idx?: number - /** Channel Name : Data */ - channel_name: string - /** Channel Description : Data */ - channel_description?: string - /** Type : Select */ - type: "Private" | "Public" | "Open" - /** Is Direct Message : Check */ - is_direct_message?: 0 | 1 - /** Is Self Message : Check */ - is_self_message?: 0 | 1 - /** Is Archived : Check */ - is_archived?: 0 | 1 - /** Last Message Timestamp : Datetime */ - last_message_timestamp?: string - /** Last Message Details : JSON */ - last_message_details?: any -} - -export type ChannelListItem = Pick - -export interface DMChannelListItem extends ChannelListItem { - peer_user_id: string, - is_direct_message: 1, -} \ No newline at end of file From 57283642c7c8a237b42389008e98bbef7e979275 Mon Sep 17 00:00:00 2001 From: Janhvi Patil Date: Fri, 20 Dec 2024 17:59:55 +0530 Subject: [PATCH 5/6] enhancement(mobile): updated styles for channel/ dm lists --- .../app/[site_id]/(tabs)/home/index.tsx | 12 +- .../features/chat/ChannelList/ChannelList.tsx | 104 +----------------- .../chat/ChannelList/ChannelListUI.tsx | 91 +++++++++++++++ .../features/chat/DMList/DMList.tsx | 97 +--------------- .../features/chat/DMList/DMListUI.tsx | 74 +++++++++++++ .../lib/hooks/useGetDirectMessageChannels.ts | 19 ++++ 6 files changed, 200 insertions(+), 197 deletions(-) create mode 100644 apps/mobile/components/features/chat/ChannelList/ChannelListUI.tsx create mode 100644 apps/mobile/components/features/chat/DMList/DMListUI.tsx create mode 100644 packages/lib/hooks/useGetDirectMessageChannels.ts diff --git a/apps/mobile/app/[site_id]/(tabs)/home/index.tsx b/apps/mobile/app/[site_id]/(tabs)/home/index.tsx index 8f6ac28f..b8f5b0c5 100644 --- a/apps/mobile/app/[site_id]/(tabs)/home/index.tsx +++ b/apps/mobile/app/[site_id]/(tabs)/home/index.tsx @@ -1,11 +1,11 @@ import { Pressable, SafeAreaView, ScrollView, View } from 'react-native'; import { ThemeToggle } from '@components/nativewindui/ThemeToggle'; -import ChannelList from '@components/features/chat/ChannelList/ChannelList'; import { Text } from '@components/nativewindui/Text'; import { useColorScheme } from '@hooks/useColorScheme'; -import DMList from '@components/features/chat/DMList/DMList'; 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() { @@ -24,13 +24,9 @@ export default function Home() { - console.log('channel selected')} - onLongPress={() => console.log('channel long pressed')} /> + - console.log('dm selected')} /> + console.log('Create channel pressed')}> diff --git a/apps/mobile/components/features/chat/ChannelList/ChannelList.tsx b/apps/mobile/components/features/chat/ChannelList/ChannelList.tsx index 424e6c35..3bb31042 100644 --- a/apps/mobile/components/features/chat/ChannelList/ChannelList.tsx +++ b/apps/mobile/components/features/chat/ChannelList/ChannelList.tsx @@ -1,101 +1,9 @@ -import React, { useState } from 'react'; -import { View, TouchableOpacity, Pressable, StyleSheet } from 'react-native'; -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'; -import { RavenChannel } from '@raven/types/RavenChannelManagement/RavenChannel'; +import useGetChannels from '@raven/lib/hooks/useGetChannels'; +import ChannelListUI from './ChannelListUI'; -export type ChannelListItem = Pick - -export interface ChannelWithUnreadCount extends ChannelListItem { - unread_count: number -} - -interface ChannelListProps { - channels: ChannelWithUnreadCount[]; - onChannelSelect: (channelId: string) => void; - onLongPress: (channelId: string) => void; +const ChannelList = () => { + const { channels } = useGetChannels({ showArchived: false }) + return } -const ChannelList = ({ channels, onChannelSelect, onLongPress }: ChannelListProps) => { - - const [isExpanded, setIsExpanded] = useState(true) - const colors = useColorScheme() - - const toggleAccordion = () => { - setIsExpanded((prev) => !prev) - } - - return ( - - - Channels - {isExpanded ? : } - - {isExpanded && <> - {channels.map((channel) => ( - onChannelSelect(channel.name)} - onLongPress={() => onLongPress(channel.name)} - style={styles.channelRow} - > - - {channel.channel_name} - - ))} - console.log('Create channel pressed')}> - - Add channel - - } - - ) -} - -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: 10, - paddingHorizontal: 10, - borderRadius: 10, - }, - addChannelText: { - marginLeft: 12, - fontSize: 16, - }, -}) - -export default ChannelList +export default ChannelList \ No newline at end of file diff --git a/apps/mobile/components/features/chat/ChannelList/ChannelListUI.tsx b/apps/mobile/components/features/chat/ChannelList/ChannelListUI.tsx new file mode 100644 index 00000000..2c3ac880 --- /dev/null +++ b/apps/mobile/components/features/chat/ChannelList/ChannelListUI.tsx @@ -0,0 +1,91 @@ +import React, { useState } from 'react'; +import { View, TouchableOpacity, Pressable, StyleSheet } from 'react-native'; +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'; +import { ChannelListItem } from '@raven/types/common/ChannelListItem'; + +interface ChannelListUIProps { + channels: ChannelListItem[]; +} + +const ChannelListUI = ({ channels }: ChannelListUIProps) => { + + const [isExpanded, setIsExpanded] = useState(true) + const colors = useColorScheme() + + const toggleAccordion = () => { + setIsExpanded((prev) => !prev) + } + + return ( + + + Channels + {isExpanded ? : } + + {isExpanded && <> + {channels.map((channel) => )} + console.log('Create channel pressed')}> + + Add channel + + } + + ) +} + +const ChannelListRow = ({ channel }: { channel: ChannelListItem }) => { + const colors = useColorScheme() + return ( + console.log(`channel selected - ${channel.name}`)} + onLongPress={() => console.log(`channel long pressed - ${channel.name}`)} + // Use tailwind classes for layout and ios:active state + className="flex-row items-center px-3 py-2 rounded-lg ios:active:bg-gray-200" + // Add a subtle ripple effect on Android + android_ripple={{ color: 'rgba(0,0,0,0.1)', borderless: false }} + > + + {channel.channel_name} + + ) +} + +const styles = StyleSheet.create({ + container: { + padding: 10, + }, + header: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + paddingVertical: 12, + paddingHorizontal: 10, + }, + headerText: { + fontWeight: '600', + fontSize: 16, + }, + channelText: { + marginLeft: 12, + fontSize: 16, + }, + addChannelButton: { + flexDirection: 'row', + alignItems: 'center', + paddingVertical: 10, + paddingHorizontal: 10, + borderRadius: 10, + }, + addChannelText: { + marginLeft: 12, + fontSize: 16, + }, +}) + +export default ChannelListUI \ No newline at end of file diff --git a/apps/mobile/components/features/chat/DMList/DMList.tsx b/apps/mobile/components/features/chat/DMList/DMList.tsx index 83a6bece..d0722aeb 100644 --- a/apps/mobile/components/features/chat/DMList/DMList.tsx +++ b/apps/mobile/components/features/chat/DMList/DMList.tsx @@ -1,94 +1,9 @@ -import React, { useState } from 'react'; -import { View, Pressable, StyleSheet, TouchableOpacity, Platform } from 'react-native'; -import { Text } from '@components/nativewindui/Text'; -import { Avatar, AvatarFallback } from '@components/nativewindui/Avatar'; -import { useColorScheme } from '@hooks/useColorScheme'; -import ChevronDownIcon from '@assets/icons/ChevronDownIcon.svg'; -import ChevronRightIcon from '@assets/icons/ChevronRightIcon.svg'; -import { cn } from '@lib/cn'; -import { ChannelListItem } from '../ChannelList/ChannelList'; +import useGetDirectMessageChannels from '@raven/lib/hooks/useGetDirectMessageChannels'; +import DMListUI from './DMListUI'; -export interface DMChannelListItem extends ChannelListItem { - peer_user_id: string, - is_direct_message: 1, +const DMList = () => { + const { dmChannels } = useGetDirectMessageChannels() + return } -export interface DMChannelWithUnreadCount extends DMChannelListItem { - unread_count: number -} - -interface DMListProps { - dms: DMChannelWithUnreadCount[]; - onDMSelect: (userId: string) => void; -} - -const DMList = ({ dms, onDMSelect }: DMListProps) => { - - const [isExpanded, setIsExpanded] = useState(true) - const colors = useColorScheme() - - const toggleAccordion = () => { - setIsExpanded((prev) => !prev) - } - - return ( - - - Direct Messages - {isExpanded ? : } - - {isExpanded && <> - {dms.map((dm) => ( - onDMSelect(dm.name)} - style={styles.dmChannelRow} - > - - - - {dm.channel_name.charAt(0) + dm.channel_name.charAt(1)} - - - - {dm.channel_name} - - ))} - } - - ) -} - -const styles = StyleSheet.create({ - container: { - padding: 10, - }, - header: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - paddingVertical: 12, - paddingHorizontal: 10, - }, - headerText: { - fontWeight: '600', - fontSize: 16, - }, - dmChannelRow: { - flexDirection: 'row', - alignItems: 'center', - paddingVertical: 6, - paddingHorizontal: 10, - borderRadius: 10, - }, - dmChannelText: { - marginLeft: 12, - fontSize: 16, - }, -}) - -export default DMList; +export default DMList \ No newline at end of file diff --git a/apps/mobile/components/features/chat/DMList/DMListUI.tsx b/apps/mobile/components/features/chat/DMList/DMListUI.tsx new file mode 100644 index 00000000..bfedded8 --- /dev/null +++ b/apps/mobile/components/features/chat/DMList/DMListUI.tsx @@ -0,0 +1,74 @@ +import React, { useState } from 'react'; +import { View, Pressable, StyleSheet, TouchableOpacity } from 'react-native'; +import { Text } from '@components/nativewindui/Text'; +import { useColorScheme } from '@hooks/useColorScheme'; +import ChevronDownIcon from '@assets/icons/ChevronDownIcon.svg'; +import ChevronRightIcon from '@assets/icons/ChevronRightIcon.svg'; +import { DMChannelListItem } from '@raven/types/common/ChannelListItem'; +import { useGetUser } from '@raven/lib/hooks/useGetUser'; +import UserAvatar from '@components/layout/UserAvatar'; + +interface DMListUIProps { + dms: DMChannelListItem[] +} + +const DMListUI = ({ dms }: DMListUIProps) => { + + const [isExpanded, setIsExpanded] = useState(true) + const colors = useColorScheme() + + const toggleAccordion = () => { + setIsExpanded((prev) => !prev) + } + + return ( + + + Direct Messages + {isExpanded ? : } + + {isExpanded && <> + {dms.map((dm) => )} + } + + ) +} + +const DMListRow = ({ dm }: { dm: DMChannelListItem }) => { + const user = useGetUser(dm.peer_user_id) + return ( + console.log(`dm selected with ${dm.name}`)} + // Use tailwind classes for layout and ios:active state + className="flex-row items-center px-3 py-2 rounded-lg ios:active:bg-gray-200" + // Add a subtle ripple effect on Android + android_ripple={{ color: 'rgba(0,0,0,0.1)', borderless: false }} + > + + {user?.full_name} + + ) +} + +const styles = StyleSheet.create({ + container: { + padding: 10, + }, + header: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + paddingVertical: 12, + paddingHorizontal: 10, + }, + headerText: { + fontWeight: '600', + fontSize: 16, + }, + dmChannelText: { + marginLeft: 12, + fontSize: 16, + }, +}) + +export default DMListUI; \ No newline at end of file diff --git a/packages/lib/hooks/useGetDirectMessageChannels.ts b/packages/lib/hooks/useGetDirectMessageChannels.ts new file mode 100644 index 00000000..3770cd9d --- /dev/null +++ b/packages/lib/hooks/useGetDirectMessageChannels.ts @@ -0,0 +1,19 @@ +import { useContext } from 'react' +import { ChannelListContext } from '../providers/ChannelListProvider' + +/** + * Hook to get the DM channels from the channel list provider. Also returns if the channel list is loading or not. + * @param props + * @returns + */ +const useGetDirectMessageChannels = () => { + + const channelListContextData = useContext(ChannelListContext) + + return { + dmChannels: channelListContextData?.dm_channels ?? [], + isLoading: channelListContextData?.isLoading ?? false + } +} + +export default useGetDirectMessageChannels \ No newline at end of file From 8c55fd3ab7a057001a65c823e487aa5e751119e9 Mon Sep 17 00:00:00 2001 From: Janhvi Patil Date: Fri, 20 Dec 2024 18:35:53 +0530 Subject: [PATCH 6/6] fix: routing for channels in homepage --- .../chat/ChannelList/ChannelListUI.tsx | 5 ++-- .../features/chat/DMList/DMListUI.tsx | 25 +++++++++++-------- apps/mobile/theme/colors.ts | 4 +++ 3 files changed, 20 insertions(+), 14 deletions(-) diff --git a/apps/mobile/components/features/chat/ChannelList/ChannelListUI.tsx b/apps/mobile/components/features/chat/ChannelList/ChannelListUI.tsx index 023ad9d8..8ce478a3 100644 --- a/apps/mobile/components/features/chat/ChannelList/ChannelListUI.tsx +++ b/apps/mobile/components/features/chat/ChannelList/ChannelListUI.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; import { View, TouchableOpacity, Pressable, StyleSheet } from 'react-native'; import { ChannelIcon } from './ChannelIcon'; import { Text } from '@components/nativewindui/Text'; @@ -45,10 +45,9 @@ const ChannelListRow = ({ channel }: { channel: ChannelListItem }) => { return ( console.log(`channel selected - ${channel.name}`)} onLongPress={() => console.log(`channel long pressed - ${channel.name}`)} // Use tailwind classes for layout and ios:active state - className="flex-row items-center px-3 py-2 rounded-lg ios:active:bg-gray-200" + className={`flex-row items-center px-3 py-2 rounded-lg ios:active:bg-[${colors.colors.linkColor}] ios:active:dark:bg-[${colors.colors.linkColor}]`} // Add a subtle ripple effect on Android android_ripple={{ color: 'rgba(0,0,0,0.1)', borderless: false }} > diff --git a/apps/mobile/components/features/chat/DMList/DMListUI.tsx b/apps/mobile/components/features/chat/DMList/DMListUI.tsx index bfedded8..003291e6 100644 --- a/apps/mobile/components/features/chat/DMList/DMListUI.tsx +++ b/apps/mobile/components/features/chat/DMList/DMListUI.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; import { View, Pressable, StyleSheet, TouchableOpacity } from 'react-native'; import { Text } from '@components/nativewindui/Text'; import { useColorScheme } from '@hooks/useColorScheme'; @@ -7,6 +7,7 @@ import ChevronRightIcon from '@assets/icons/ChevronRightIcon.svg'; import { DMChannelListItem } from '@raven/types/common/ChannelListItem'; import { useGetUser } from '@raven/lib/hooks/useGetUser'; import UserAvatar from '@components/layout/UserAvatar'; +import { Link } from 'expo-router'; interface DMListUIProps { dms: DMChannelListItem[] @@ -36,17 +37,19 @@ const DMListUI = ({ dms }: DMListUIProps) => { const DMListRow = ({ dm }: { dm: DMChannelListItem }) => { const user = useGetUser(dm.peer_user_id) + const colors = useColorScheme() return ( - console.log(`dm selected with ${dm.name}`)} - // Use tailwind classes for layout and ios:active state - className="flex-row items-center px-3 py-2 rounded-lg ios:active:bg-gray-200" - // Add a subtle ripple effect on Android - android_ripple={{ color: 'rgba(0,0,0,0.1)', borderless: false }} - > - - {user?.full_name} - + + + + {user?.full_name} + + ) } diff --git a/apps/mobile/theme/colors.ts b/apps/mobile/theme/colors.ts index a55d823e..272306c4 100644 --- a/apps/mobile/theme/colors.ts +++ b/apps/mobile/theme/colors.ts @@ -18,6 +18,7 @@ const IOS_SYSTEM_COLORS = { greyText: 'rgb(175, 176, 180)', destructive: 'rgb(255, 56, 43)', primary: '#5753C6', + linkColor: '#E6E6EB', }, dark: { grey6: 'rgb(21, 21, 24)', @@ -34,6 +35,7 @@ const IOS_SYSTEM_COLORS = { greyText: 'rgb(175, 176, 180)', destructive: 'rgb(254, 67, 54)', primary: '#5753C6', + linkColor: '#1A1A1A', }, } as const; @@ -55,6 +57,7 @@ const ANDROID_COLORS = { greyText: 'rgb(175, 176, 180)', destructive: 'rgb(186, 26, 26)', primary: '#5753C6', + linkColor: '#E6E6EB', }, dark: { grey6: 'rgb(16, 19, 27)', @@ -71,6 +74,7 @@ const ANDROID_COLORS = { greyText: 'rgb(175, 176, 180)', destructive: 'rgb(147, 0, 10)', primary: '#5753C6', + linkColor: '#1A1A1A', }, } as const;