native: integrate new contacts into UI

apps/tlon-mobile/drizzle-studio.config.ts

@@ -2,7 +2,6 @@ import type { Config } from 'drizzle-kit';
 
 export default {
   schema: '../../packages/shared/src/db/schema.ts',
-  driver: 'better-sqlite',
   dialect: 'sqlite',
   dbCredentials: {
     url: (process.env as any).DB_URL ?? '',

apps/tlon-mobile/package.json

@@ -135,7 +135,7 @@
     "connect": "^3.7.0",
     "cross-env": "^7.0.3",
     "dotenv": "^16.0.3",
-    "drizzle-kit": "^0.21.1",
+    "drizzle-kit": "^0.28.0",
     "jest": "^29.7.0",
     "jest-expo": "^50.0.3",
     "jest-fetch-mock": "^3.0.3",

package.json

@@ -53,13 +53,13 @@
       "[email protected]": "patches/[email protected]",
       "[email protected]": "patches/[email protected]",
       "[email protected]": "patches/[email protected]",
-      "[email protected]": "patches/[email protected]",
       "@10play/[email protected]": "patches/@[email protected]",
       "[email protected]": "patches/[email protected]",
       "[email protected]": "patches/[email protected]",
       "@react-navigation/[email protected]": "patches/@[email protected]",
       "@likashefqet/[email protected]": "patches/@[email protected]",
-      "[email protected]": "patches/[email protected]"
+      "[email protected]": "patches/[email protected]",
+      "[email protected]": "patches/[email protected]"
     },
     "allowNonAppliedPatches": true,
     "overrides": {

packages/app/features/settings/EditProfileScreen.tsx

@@ -8,21 +8,30 @@ import {
 } from '@tloncorp/ui';
 import { useCallback } from 'react';
 
+import { useCurrentUserId } from '../../hooks/useCurrentUser';
 import { RootStackParamList } from '../../navigation/types';
 
 type Props = NativeStackScreenProps<RootStackParamList, 'EditProfile'>;
 
-export function EditProfileScreen({ navigation }: Props) {
+export function EditProfileScreen({ route, navigation }: Props) {
+  const currentUserId = useCurrentUserId();
   const { data: groups } = store.useGroups({ includeUnjoined: true });
 
   const onSaveProfile = useCallback(
     (update: api.ProfileUpdate | null) => {
       if (update) {
-        store.updateCurrentUserProfile(update);
+        if (route.params.userId === currentUserId) {
+          store.updateCurrentUserProfile(update);
+        } else {
+          store.updateContactMetadata(route.params.userId, {
+            nickname: update.nickname,
+            avatarImage: update.avatarImage,
+          });
+        }
       }
       navigation.goBack();
     },
-    [navigation]
+    [currentUserId, navigation, route.params.userId]
   );
 
   const onUpdateCoverImage = useCallback((coverImage: string) => {
@@ -39,6 +48,7 @@ export function EditProfileScreen({ navigation }: Props) {
     <GroupsProvider groups={groups ?? []}>
       <AttachmentProvider canUpload={canUpload} uploadAsset={store.uploadAsset}>
         <EditProfileScreenView
+          userId={route.params.userId}
           onGoBack={() => navigation.goBack()}
           onSaveProfile={onSaveProfile}
           onUpdatePinnedGroups={store.updateProfilePinnedGroups}

packages/app/features/settings/ProfileScreen.tsx

@@ -8,6 +8,7 @@ import { useDMLureLink } from '../../hooks/useBranchLink';
 import { useCurrentUserId } from '../../hooks/useCurrentUser';
 import { useHandleLogout } from '../../hooks/useHandleLogout';
 import { useResetDb } from '../../hooks/useResetDb';
+import { useFeatureFlag } from '../../lib/featureFlags';
 import { RootStackParamList } from '../../navigation/types';
 import { getHostingToken, getHostingUserId } from '../../utils/hosting';
 
@@ -17,6 +18,7 @@ export default function ProfileScreen(props: Props) {
   const resetDb = useResetDb();
   const handleLogout = useHandleLogout({ resetDb });
   const currentUserId = useCurrentUserId();
+  const [contactsTabEnabled] = useFeatureFlag('contactsTab');
   const { dmLink } = useDMLureLink();
   const hasHostedAuth = useHasHostedAuth();
   const navigationRef = useMutableRef(props.navigation);
@@ -61,6 +63,14 @@ export default function ProfileScreen(props: Props) {
     navigationRef.current.navigate('Profile');
   }, [navigationRef]);
 
+  const onNavigateToContacts = useCallback(() => {
+    navigationRef.current.navigate('Contacts');
+  }, [navigationRef]);
+
+  const onBack = useCallback(() => {
+    navigationRef.current.goBack();
+  }, [navigationRef]);
+
   return (
     <View backgroundColor="$background" flex={1}>
       <ProfileScreenView
@@ -75,14 +85,20 @@ export default function ProfileScreen(props: Props) {
         onManageAccountPressed={onManageAccountPressed}
         onExperimentalFeaturesPressed={onExperimentalFeaturesPressed}
         dmLink={dmLink}
+        contactsTabEnabled={contactsTabEnabled}
+        onBackPressed={onBack}
       />
-      <NavBarView
-        navigateToHome={onNavigateToHome}
-        navigateToNotifications={onNavigateToNotifications}
-        navigateToProfileSettings={onNavigateToProfileSettings}
-        currentRoute="Profile"
-        currentUserId={currentUserId}
-      />
+      {contactsTabEnabled ? null : (
+        <NavBarView
+          navigateToContacts={onNavigateToContacts}
+          navigateToHome={onNavigateToHome}
+          navigateToNotifications={onNavigateToNotifications}
+          navigateToProfileSettings={onNavigateToProfileSettings}
+          currentRoute="Profile"
+          currentUserId={currentUserId}
+          showContactsTab={contactsTabEnabled}
+        />
+      )}
     </View>
   );
 }

packages/app/features/top/ActivityScreen.tsx

@@ -7,6 +7,8 @@ import { useCallback, useMemo } from 'react';
 
 // import ErrorBoundary from '../../ErrorBoundary';
 import { useCurrentUserId } from '../../hooks/useCurrentUser';
+import { useGroupActions } from '../../hooks/useGroupActions';
+import { useFeatureFlag } from '../../lib/featureFlags';
 import { RootStackParamList } from '../../navigation/types';
 import { screenNameFromChannelId } from '../../navigation/utils';
 
@@ -15,6 +17,8 @@ type Props = NativeStackScreenProps<RootStackParamList, 'Activity'>;
 export function ActivityScreen(props: Props) {
   const isFocused = useIsFocused();
   const currentUserId = useCurrentUserId();
+  const [contactsTabEnabled] = useFeatureFlag('contactsTab');
+  const { performGroupAction } = useGroupActions();
 
   const allFetcher = store.useInfiniteBucketedActivity('all');
   const mentionsFetcher = store.useInfiniteBucketedActivity('mentions');
@@ -67,6 +71,13 @@ export function ActivityScreen(props: Props) {
     [props.navigation]
   );
 
+  const handleGoToUserProfile = useCallback(
+    (userId: string) => {
+      props.navigation.navigate('UserProfile', { userId });
+    },
+    [props.navigation]
+  );
+
   return (
     <View backgroundColor="$background" flex={1}>
       <ActivityScreenView
@@ -75,14 +86,18 @@ export function ActivityScreen(props: Props) {
         goToChannel={handleGoToChannel}
         goToThread={handleGoToThread}
         goToGroup={handleGoToGroup}
+        goToUserProfile={handleGoToUserProfile}
         refresh={handleRefreshActivity}
+        onGroupAction={performGroupAction}
       />
       <NavBarView
+        navigateToContacts={() => props.navigation.navigate('Contacts')}
         navigateToHome={() => props.navigation.navigate('ChatList')}
         navigateToNotifications={() => props.navigation.navigate('Activity')}
         navigateToProfileSettings={() => props.navigation.navigate('Profile')}
         currentRoute="Activity"
         currentUserId={currentUserId}
+        showContactsTab={contactsTabEnabled}
       />
     </View>
   );

packages/app/features/top/ChatListScreen.tsx

@@ -22,6 +22,7 @@ import {
   ScreenHeader,
   View,
   WelcomeSheet,
+  triggerHaptic,
 } from '@tloncorp/ui';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
@@ -54,6 +55,7 @@ export function ChatListScreenView({
   const [screenTitle, setScreenTitle] = useState('Home');
   const [inviteSheetGroup, setInviteSheetGroup] = useState<db.Group | null>();
   const chatOptionsSheetRef = useRef<ChatOptionsSheetMethods>(null);
+  const [contactsTabEnabled] = useFeatureFlag('contactsTab');
   const [longPressedChat, setLongPressedChat] = useState<
     db.Channel | db.Group | null
   >(null);
@@ -289,6 +291,11 @@ export function ChatListScreenView({
     setShowSearchInput(!showSearchInput);
   }, [showSearchInput]);
 
+  const goToContacts = useCallback(() => {
+    triggerHaptic('baseButtonClick');
+    navigation.navigate('Contacts');
+  }, [navigation]);
+
   const handleGroupAction = useCallback(
     (action: GroupPreviewAction, group: db.Group) => {
       performGroupAction(action, group);
@@ -317,6 +324,14 @@ export function ChatListScreenView({
         <View flex={1}>
           <ScreenHeader
             title={notReadyMessage ?? screenTitle}
+            leftControls={
+              contactsTabEnabled ? undefined : (
+                <ScreenHeader.IconButton
+                  type="ChannelMultiDM"
+                  onPress={goToContacts}
+                />
+              )
+            }
             rightControls={
               <>
                 <ScreenHeader.IconButton
@@ -366,6 +381,9 @@ export function ChatListScreenView({
           />
         </View>
         <NavBarView
+          navigateToContacts={() => {
+            navigation.navigate('Contacts');
+          }}
           navigateToHome={() => {
             navigation.navigate('ChatList');
           }}
@@ -377,6 +395,7 @@ export function ChatListScreenView({
           }}
           currentRoute="ChatList"
           currentUserId={currentUser}
+          showContactsTab={contactsTabEnabled}
         />
       </ChatOptionsProvider>
 

packages/app/features/top/ContactsScreen.tsx

@@ -0,0 +1,115 @@
+import type { NativeStackScreenProps } from '@react-navigation/native-stack';
+import * as db from '@tloncorp/shared/db';
+import * as store from '@tloncorp/shared/store';
+import {
+  AppDataContextProvider,
+  ContactsScreenView,
+  NavBarView,
+  ScreenHeader,
+  View,
+  getDisplayName,
+  isWeb,
+  triggerHaptic,
+} from '@tloncorp/ui';
+import { useCallback } from 'react';
+import { Alert } from 'react-native';
+
+import { useCurrentUserId } from '../../hooks/useCurrentUser';
+import { useFeatureFlag } from '../../lib/featureFlags';
+import type { RootStackParamList } from '../../navigation/types';
+
+type Props = NativeStackScreenProps<RootStackParamList, 'Contacts'>;
+
+export default function ContactsScreen(props: Props) {
+  const {
+    navigation: { navigate },
+  } = props;
+
+  const [contactsTabEnabled] = useFeatureFlag('contactsTab');
+  const currentUser = useCurrentUserId();
+
+  const { data: userContacts } = store.useUserContacts();
+  const { data: contacts } = store.useContacts();
+  const { data: suggestions } = store.useSuggestedContacts();
+
+  const onContactPress = useCallback(
+    (contact: db.Contact) => {
+      navigate('UserProfile', { userId: contact.id });
+    },
+    [navigate]
+  );
+
+  const onContactLongPress = useCallback((contact: db.Contact) => {
+    if (!isWeb && contact.isContactSuggestion) {
+      Alert.alert(`Add ${getDisplayName(contact)}?`, '', [
+        {
+          text: 'Cancel',
+          style: 'cancel',
+        },
+        {
+          text: 'Add Contact',
+          style: 'default',
+          onPress: () => {
+            store.addContact(contact.id);
+          },
+        },
+        {
+          text: 'Decline Suggestion',
+          style: 'destructive',
+          onPress: () => {
+            store.removeContactSuggestion(contact.id);
+          },
+        },
+      ]);
+    }
+  }, []);
+
+  const backAction = useCallback(() => {
+    triggerHaptic('baseButtonClick');
+    navigate('ChatList');
+  }, [navigate]);
+
+  return (
+    <AppDataContextProvider contacts={contacts} currentUserId={currentUser}>
+      <View flex={1}>
+        <ScreenHeader
+          title="Contacts"
+          backAction={contactsTabEnabled ? undefined : backAction}
+          rightControls={
+            contactsTabEnabled ? (
+              <ScreenHeader.IconButton
+                type="Settings"
+                onPress={() => {
+                  navigate('Profile');
+                }}
+              />
+            ) : undefined
+          }
+        />
+        <ContactsScreenView
+          contacts={userContacts ?? []}
+          suggestions={suggestions ?? []}
+          onContactPress={onContactPress}
+          onContactLongPress={onContactLongPress}
+        />
+        <NavBarView
+          navigateToContacts={() => {
+            navigate('Contacts');
+          }}
+          navigateToHome={() => {
+            navigate('ChatList');
+          }}
+          navigateToNotifications={() => {
+            navigate('Activity');
+          }}
+          navigateToProfileSettings={() => {
+            navigate('Profile');
+          }}
+          currentRoute="Contacts"
+          currentUserId={currentUser}
+          showContactsTab={contactsTabEnabled}
+        />
+      </View>
+    </AppDataContextProvider>
+  );
+}