New compose UX for usernames/e164

Co-authored-by: Jamie Kyle <113370520+jamiebuilds-signal@users.noreply.github.com>

ts/components/LeftPane.tsx

@@ -15,11 +15,16 @@ import type { LeftPaneArchivePropsType } from './leftPane/LeftPaneArchiveHelper'
 import { LeftPaneArchiveHelper } from './leftPane/LeftPaneArchiveHelper';
 import type { LeftPaneComposePropsType } from './leftPane/LeftPaneComposeHelper';
 import { LeftPaneComposeHelper } from './leftPane/LeftPaneComposeHelper';
+import type { LeftPaneFindByUsernamePropsType } from './leftPane/LeftPaneFindByUsernameHelper';
+import { LeftPaneFindByUsernameHelper } from './leftPane/LeftPaneFindByUsernameHelper';
+import type { LeftPaneFindByPhoneNumberPropsType } from './leftPane/LeftPaneFindByPhoneNumberHelper';
+import { LeftPaneFindByPhoneNumberHelper } from './leftPane/LeftPaneFindByPhoneNumberHelper';
 import type { LeftPaneChooseGroupMembersPropsType } from './leftPane/LeftPaneChooseGroupMembersHelper';
 import { LeftPaneChooseGroupMembersHelper } from './leftPane/LeftPaneChooseGroupMembersHelper';
 import type { LeftPaneSetGroupMetadataPropsType } from './leftPane/LeftPaneSetGroupMetadataHelper';
 import { LeftPaneSetGroupMetadataHelper } from './leftPane/LeftPaneSetGroupMetadataHelper';
 
+import { LeftPaneMode } from '../types/leftPane';
 import type { LocalizerType, ThemeType } from '../types/Util';
 import { ScrollBehavior } from '../types/Util';
 import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
@@ -52,15 +57,6 @@ import { ContextMenu } from './ContextMenu';
 import { EditState as ProfileEditorEditState } from './ProfileEditor';
 import type { UnreadStats } from '../util/countUnreadStats';
 
-export enum LeftPaneMode {
-  Inbox,
-  Search,
-  Archive,
-  Compose,
-  ChooseGroupMembers,
-  SetGroupMetadata,
-}
-
 export type PropsType = {
   otherTabsUnreadStats: UnreadStats;
   hasExpiredDialog: boolean;
@@ -90,6 +86,12 @@ export type PropsType = {
     | ({
         mode: LeftPaneMode.Compose;
       } & LeftPaneComposePropsType)
+    | ({
+        mode: LeftPaneMode.FindByUsername;
+      } & LeftPaneFindByUsernamePropsType)
+    | ({
+        mode: LeftPaneMode.FindByPhoneNumber;
+      } & LeftPaneFindByPhoneNumberPropsType)
     | ({
         mode: LeftPaneMode.ChooseGroupMembers;
       } & LeftPaneChooseGroupMembersPropsType)
@@ -130,8 +132,11 @@ export type PropsType = {
   setComposeGroupExpireTimer: (_: DurationInSeconds) => void;
   setComposeGroupName: (_: string) => void;
   setComposeSearchTerm: (composeSearchTerm: string) => void;
+  setComposeSelectedRegion: (newRegion: string) => void;
   showArchivedConversations: () => void;
   showChooseGroupMembers: () => void;
+  showFindByUsername: () => void;
+  showFindByPhoneNumber: () => void;
   showConversation: ShowConversationType;
   showInbox: () => void;
   startComposing: () => void;
@@ -218,9 +223,12 @@ export function LeftPane({
   setComposeGroupExpireTimer,
   setComposeGroupName,
   setComposeSearchTerm,
+  setComposeSelectedRegion,
   setIsFetchingUUID,
   showArchivedConversations,
   showChooseGroupMembers,
+  showFindByUsername,
+  showFindByPhoneNumber,
   showConversation,
   showInbox,
   showUserNotFoundModal,
@@ -297,6 +305,32 @@ export function LeftPane({
       helper = composeHelper;
       break;
     }
+    case LeftPaneMode.FindByUsername: {
+      const findByUsernameHelper = new LeftPaneFindByUsernameHelper(
+        modeSpecificProps
+      );
+      shouldRecomputeRowHeights =
+        previousModeSpecificProps.mode === modeSpecificProps.mode
+          ? findByUsernameHelper.shouldRecomputeRowHeights(
+              previousModeSpecificProps
+            )
+          : true;
+      helper = findByUsernameHelper;
+      break;
+    }
+    case LeftPaneMode.FindByPhoneNumber: {
+      const findByPhoneNumberHelper = new LeftPaneFindByPhoneNumberHelper(
+        modeSpecificProps
+      );
+      shouldRecomputeRowHeights =
+        previousModeSpecificProps.mode === modeSpecificProps.mode
+          ? findByPhoneNumberHelper.shouldRecomputeRowHeights(
+              previousModeSpecificProps
+            )
+          : true;
+      helper = findByPhoneNumberHelper;
+      break;
+    }
     case LeftPaneMode.ChooseGroupMembers: {
       const chooseGroupMembersHelper = new LeftPaneChooseGroupMembersHelper(
         modeSpecificProps
@@ -456,6 +490,11 @@ export function LeftPane({
     createGroup,
     i18n,
     startSettingGroupMetadata,
+    lookupConversationWithoutServiceId,
+    showUserNotFoundModal,
+    setIsFetchingUUID,
+    showInbox,
+    showConversation,
   });
 
   const getRow = useMemo(() => helper.getRow.bind(helper), [helper]);
@@ -592,6 +631,8 @@ export function LeftPane({
       hideHeader={
         modeSpecificProps.mode === LeftPaneMode.Archive ||
         modeSpecificProps.mode === LeftPaneMode.Compose ||
+        modeSpecificProps.mode === LeftPaneMode.FindByUsername ||
+        modeSpecificProps.mode === LeftPaneMode.FindByPhoneNumber ||
         modeSpecificProps.mode === LeftPaneMode.ChooseGroupMembers ||
         modeSpecificProps.mode === LeftPaneMode.SetGroupMetadata
       }
@@ -671,6 +712,7 @@ export function LeftPane({
                 setComposeSearchTerm(event.target.value);
               },
               updateSearchTerm,
+              onChangeComposeSelectedRegion: setComposeSelectedRegion,
               showConversation,
             })}
           </NavSidebarSearchHeader>
@@ -735,6 +777,8 @@ export function LeftPane({
                 scrollable={isScrollable}
                 shouldRecomputeRowHeights={shouldRecomputeRowHeights}
                 showChooseGroupMembers={showChooseGroupMembers}
+                showFindByUsername={showFindByUsername}
+                showFindByPhoneNumber={showFindByPhoneNumber}
                 theme={theme}
               />
             </div>