Removes Inbox Backbone view

_locales/en/messages.json

@@ -862,9 +862,6 @@
     "message": "what's new",
     "description": "Clickable link that displays the latest release notes"
   },
-  "selectAContact": {
-    "message": "Select a contact or group to start chatting."
-  },
   "typingAlt": {
     "message": "Typing animation for this conversation",
     "description": "Used as the 'title' attribute for the typing animation"

background.html

@@ -106,24 +106,6 @@
       </div>
     </script>
 
-    <script type="text/x-tmpl-mustache" id="two-column">
-      <div class='module-title-bar-drag-area'></div>
-
-      <div class='left-pane-placeholder'></div>
-
-      <div class='conversation-stack'>
-        <div class='no-conversation-open'>
-          <div class="module-splash-screen__logo module-img--128 module-logo-blue"></div>
-          <h3>{{ welcomeToSignal }}</h3>
-          <p class="whats-new-placeholder"></p>
-          <p>{{ selectAContact }}</p>
-        </div>
-        <div id="toast"></div>
-      </div>
-
-      <div class='lightbox-container'></div>
-    </script>
-
     <script type="text/x-tmpl-mustache" id="conversation">
       <div class="ConversationView__template"></div>
     </script>

test/index.html

@@ -26,24 +26,6 @@
       </div>
     </script>
 
-    <script type="text/x-tmpl-mustache" id="two-column">
-      <div class='module-title-bar-drag-area'></div>
-
-      <div class='left-pane-placeholder'></div>
-
-      <div class='conversation-stack'>
-        <div class='no-conversation-open'>
-          <div class="module-splash-screen__logo module-img--128 module-logo-blue"></div>
-          <h3>{{ welcomeToSignal }}</h3>
-          <p class="whats-new-placeholder"></p>
-          <p>{{ selectAContact }}</p>
-        </div>
-        <div id="toast"></div>
-      </div>
-
-      <div class='lightbox-container'></div>
-    </script>
-
     <script type="text/x-tmpl-mustache" id="conversation">
       <div id="ConversationView__template"></div>
     </script>

ts/backbone/index.ts

@@ -1,6 +0,0 @@
-// Copyright 2018-2020 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-import * as Views from './views';
-
-export { Views };

ts/backbone/views/Lightbox.ts

@@ -1,25 +0,0 @@
-// Copyright 2018-2020 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-export const show = (element: HTMLElement): void => {
-  const container: HTMLDivElement | null = document.querySelector(
-    '.lightbox-container'
-  );
-  if (!container) {
-    throw new TypeError("'.lightbox-container' is required");
-  }
-  container.innerHTML = '';
-  container.style.display = 'block';
-  container.appendChild(element);
-};
-
-export const hide = (): void => {
-  const container: HTMLDivElement | null = document.querySelector(
-    '.lightbox-container'
-  );
-  if (!container) {
-    return;
-  }
-  container.innerHTML = '';
-  container.style.display = 'none';
-};

ts/backbone/views/index.ts

@@ -1,6 +0,0 @@
-// Copyright 2018-2020 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-import * as Lightbox from './Lightbox';
-
-export { Lightbox };

ts/background.ts

@@ -1508,6 +1508,10 @@ export async function startApp(): Promise<void> {
         (key === 'c' || key === 'C')
       ) {
         conversation.trigger('unload', 'keyboard shortcut close');
+        window.reduxActions.conversations.showConversation({
+          conversationId: undefined,
+          messageId: undefined,
+        });
         event.preventDefault();
         event.stopPropagation();
         return;

ts/components/App.tsx

@@ -48,30 +48,35 @@ export const App = ({
   appView,
   cancelConversationVerification,
   conversationsStoppingSend,
-  hasInitialLoadCompleted,
+  executeMenuAction,
+  executeMenuRole,
   getPreferredBadge,
+  hasInitialLoadCompleted,
   i18n,
   isCustomizingPreferredReactions,
-  isShowingStoriesView,
-  isMaximized,
   isFullScreen,
+  isMaximized,
+  isShowingStoriesView,
   isWindows11,
-  menuOptions,
-  platform,
   localeMessages,
+  menuOptions,
+  openInbox,
+  platform,
+  registerSingleDevice,
   renderCallManager,
   renderCustomizingPreferredReactionsModal,
   renderGlobalModalContainer,
+  renderLeftPane,
   renderSafetyNumber,
-  openInbox,
   renderStories,
   requestVerification,
-  registerSingleDevice,
+  selectedConversationId,
+  selectedMessage,
+  showConversation,
+  showWhatsNewModal,
   theme,
-  verifyConversationsStoppingSend,
-  executeMenuAction,
-  executeMenuRole,
   titleBarDoubleClick,
+  verifyConversationsStoppingSend,
 }: PropsType): JSX.Element => {
   let contents;
 
@@ -101,7 +106,12 @@ export const App = ({
         renderCustomizingPreferredReactionsModal={
           renderCustomizingPreferredReactionsModal
         }
+        renderLeftPane={renderLeftPane}
         renderSafetyNumber={renderSafetyNumber}
+        selectedConversationId={selectedConversationId}
+        selectedMessage={selectedMessage}
+        showConversation={showConversation}
+        showWhatsNewModal={showWhatsNewModal}
         theme={theme}
         verifyConversationsStoppingSend={verifyConversationsStoppingSend}
       />

ts/components/ConversationList.stories.tsx

@@ -79,8 +79,8 @@ const Wrapper = ({
           getPreferredBadge={() => undefined}
           i18n={i18n}
           id={id}
-          openConversationInternal={action('openConversationInternal')}
           sentAt={1587358800000}
+          showConversation={action('showConversation')}
           snippet="Lorem <<left>>ipsum<<right>> wow"
           theme={ThemeType.light}
           to={defaultConversations[1]}

ts/components/ConversationList.tsx

@@ -16,6 +16,7 @@ import { ScrollBehavior } from '../types/Util';
 import { getConversationListWidthBreakpoint } from './_util';
 import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
 import type { LookupConversationWithoutUuidActionsType } from '../util/lookupConversationWithoutUuid';
+import type { ShowConversationType } from '../state/ducks/conversations';
 
 import type { PropsData as ConversationListItemPropsType } from './conversationList/ConversationListItem';
 import { ConversationListItem } from './conversationList/ConversationListItem';
@@ -154,7 +155,7 @@ export type PropsType = {
   onSelectConversation: (conversationId: string, messageId?: string) => void;
   renderMessageSearchResult: (id: string) => JSX.Element;
   showChooseGroupMembers: () => void;
-  showConversation: (conversationId: string) => void;
+  showConversation: ShowConversationType;
 } & LookupConversationWithoutUuidActionsType;
 
 const NORMAL_ROW_HEIGHT = 76;

ts/components/Inbox.tsx

@@ -2,22 +2,25 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import type { ReactNode } from 'react';
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
-import type * as Backbone from 'backbone';
+
-import type { SafetyNumberProps } from './SafetyNumberChangeDialog';
+import type { ConversationModel } from '../models/conversations';
-import { SafetyNumberChangeDialog } from './SafetyNumberChangeDialog';
+import type {
-import type { ConversationType } from '../state/ducks/conversations';
+  ConversationType,
-import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
+  ShowConversationType,
+} from '../state/ducks/conversations';
+import type { ConversationView } from '../views/conversation_view';
 import type { LocalizerType, ThemeType } from '../types/Util';
+import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
+import type { SafetyNumberProps } from './SafetyNumberChangeDialog';
 
-type InboxViewType = Backbone.View & {
+import * as log from '../logging/log';
-  onEmpty?: () => void;
+import { SECOND } from '../util/durations';
-};
+import { SafetyNumberChangeDialog } from './SafetyNumberChangeDialog';
-
+import { ToastStickerPackInstallFailed } from './ToastStickerPackInstallFailed';
-type InboxViewOptionsType = Backbone.ViewOptions & {
+import { WhatsNewLink } from './WhatsNewLink';
-  initialLoadComplete: boolean;
+import { showToast } from '../util/showToast';
-  window: typeof window;
+import { strictAssert } from '../util/assert';
-};
 
 export type PropsType = {
   cancelConversationVerification: () => void;
@@ -27,7 +30,12 @@ export type PropsType = {
   i18n: LocalizerType;
   isCustomizingPreferredReactions: boolean;
   renderCustomizingPreferredReactionsModal: () => JSX.Element;
+  renderLeftPane: () => JSX.Element;
   renderSafetyNumber: (props: SafetyNumberProps) => JSX.Element;
+  selectedConversationId?: string;
+  selectedMessage?: string;
+  showConversation: ShowConversationType;
+  showWhatsNewModal: () => unknown;
   theme: ThemeType;
   verifyConversationsStoppingSend: () => void;
 };
@@ -40,38 +48,182 @@ export const Inbox = ({
   i18n,
   isCustomizingPreferredReactions,
   renderCustomizingPreferredReactionsModal,
+  renderLeftPane,
   renderSafetyNumber,
+  selectedConversationId,
+  selectedMessage,
+  showConversation,
+  showWhatsNewModal,
   theme,
   verifyConversationsStoppingSend,
 }: PropsType): JSX.Element => {
-  const hostRef = useRef<HTMLDivElement | null>(null);
+  const [loadingMessageCount, setLoadingMessageCount] = useState(0);
-  const viewRef = useRef<InboxViewType | undefined>(undefined);
+  const [internalHasInitialLoadCompleted, setInternalHasInitialLoadCompleted] =
+    useState(hasInitialLoadCompleted);
+
+  const conversationMountRef = useRef<HTMLDivElement | null>(null);
+  const conversationViewRef = useRef<ConversationView | null>(null);
+
+  const [prevConversation, setPrevConversation] = useState<
+    ConversationModel | undefined
+  >();
 
   useEffect(() => {
-    const viewOptions: InboxViewOptionsType = {
+    if (!selectedConversationId) {
-      el: hostRef.current,
+      return;
-      initialLoadComplete: false,
+    }
-      window,
-    };
-    const view = new window.Whisper.InboxView(viewOptions);
 
-    viewRef.current = view;
+    const conversation = window.ConversationController.get(
+      selectedConversationId
+    );
+    strictAssert(conversation, 'Conversation must be found');
+
+    conversation.setMarkedUnread(false);
+
+    if (!prevConversation || prevConversation.id !== selectedConversationId) {
+      // We create a mount point because when calling .remove() on the Backbone
+      // view it'll also remove the mount point along with it.
+      const viewMountNode = document.createElement('div');
+      conversationMountRef.current?.appendChild(viewMountNode);
+
+      // Make sure to unload the previous conversation along with calling
+      // Backbone's remove so that it is taken out of the DOM.
+      if (prevConversation) {
+        prevConversation.trigger('unload', 'opened another conversation');
+      }
+      conversationViewRef.current?.remove();
+
+      // Can't import ConversationView directly because conversation_view
+      // needs access to window.Signal first.
+      const view = new window.Whisper.ConversationView({
+        el: viewMountNode,
+        model: conversation,
+      });
+      conversationViewRef.current = view;
+
+      setPrevConversation(conversation);
+
+      conversation.trigger('opened', selectedMessage);
+    } else if (selectedMessage) {
+      conversation.trigger('scroll-to-message', selectedMessage);
+    }
+
+    // Make sure poppers are positioned properly
+    window.dispatchEvent(new Event('resize'));
+  }, [prevConversation, selectedConversationId, selectedMessage]);
+
+  // Whenever the selectedConversationId is cleared we should also ensure
+  // that prevConversation is cleared too.
+  useEffect(() => {
+    if (prevConversation && !selectedConversationId) {
+      setPrevConversation(undefined);
+    }
+  }, [prevConversation, selectedConversationId]);
+
+  useEffect(() => {
+    function refreshConversation({
+      newId,
+      oldId,
+    }: {
+      newId: string;
+      oldId: string;
+    }) {
+      if (prevConversation && prevConversation.get('id') === oldId) {
+        showConversation({ conversationId: newId });
+      }
+    }
+
+    // Close current opened conversation to reload the group information once
+    // linked.
+    function unload() {
+      if (!prevConversation) {
+        return;
+      }
+      prevConversation.trigger('unload', 'force unload requested');
+    }
+
+    function onShowConversation(id: string, messageId?: string): void {
+      showConversation({ conversationId: id, messageId });
+    }
+
+    function packInstallFailed() {
+      showToast(ToastStickerPackInstallFailed);
+    }
+
+    window.Whisper.events.on('loadingProgress', setLoadingMessageCount);
+    window.Whisper.events.on('pack-install-failed', packInstallFailed);
+    window.Whisper.events.on('refreshConversation', refreshConversation);
+    window.Whisper.events.on('setupAsNewDevice', unload);
+    window.Whisper.events.on('showConversation', onShowConversation);
 
     return () => {
-      // [`Backbone.View.prototype.remove`][0] removes the DOM element and stops listening
+      window.Whisper.events.off('loadingProgress', setLoadingMessageCount);
-      //   to event listeners. Because React will do the first, we only want to do the
+      window.Whisper.events.off('pack-install-failed', packInstallFailed);
-      //   second.
+      window.Whisper.events.off('refreshConversation', refreshConversation);
-      // [0]: https://github.com/jashkenas/backbone/blob/153dc41616a1f2663e4a86b705fefd412ecb4a7a/backbone.js#L1336-L1342
+      window.Whisper.events.off('setupAsNewDevice', unload);
-      viewRef.current?.stopListening();
+      window.Whisper.events.off('showConversation', onShowConversation);
-      viewRef.current = undefined;
     };
-  }, []);
+  }, [prevConversation, showConversation]);
 
   useEffect(() => {
-    if (hasInitialLoadCompleted && viewRef.current && viewRef.current.onEmpty) {
+    if (internalHasInitialLoadCompleted) {
-      viewRef.current.onEmpty();
+      return;
+    }
+
+    const interval = setInterval(() => {
+      const status = window.getSocketStatus();
+      switch (status) {
+        case 'CONNECTING':
+          break;
+        case 'OPEN':
+          // if we've connected, we can wait for real empty event
+          clearInterval(interval);
+          break;
+        case 'CLOSING':
+        case 'CLOSED':
+          clearInterval(interval);
+          // if we failed to connect, we pretend we loaded
+          setInternalHasInitialLoadCompleted(true);
+          break;
+        default:
+          log.warn(
+            `startConnectionListener: Found unexpected socket status ${status}; setting load to done manually.`
+          );
+          setInternalHasInitialLoadCompleted(true);
+          break;
+      }
+    }, SECOND);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [internalHasInitialLoadCompleted]);
+
+  useEffect(() => {
+    setInternalHasInitialLoadCompleted(hasInitialLoadCompleted);
+  }, [hasInitialLoadCompleted]);
+
+  if (!internalHasInitialLoadCompleted) {
+    return (
+      <div className="app-loading-screen">
+        <div className="module-title-bar-drag-area" />
+
+        <div className="content">
+          <div className="module-splash-screen__logo module-img--150" />
+          <div className="container">
+            <span className="dot" />
+            <span className="dot" />
+            <span className="dot" />
+          </div>
+          <div className="message">
+            {loadingMessageCount
+              ? i18n('loadingMessages', [String(loadingMessageCount)])
+              : i18n('loading')}
+          </div>
+        </div>
+      </div>
+    );
   }
-  }, [hasInitialLoadCompleted, viewRef]);
 
   let activeModal: ReactNode;
   if (conversationsStoppingSend.length) {
@@ -94,7 +246,28 @@ export const Inbox = ({
 
   return (
     <>
-      <div className="Inbox" ref={hostRef} />
+      <div className="Inbox">
+        <div className="module-title-bar-drag-area" />
+
+        <div className="left-pane-wrapper">{renderLeftPane()}</div>
+
+        <div className="conversation-stack">
+          <div id="toast" />
+          <div className="conversation" ref={conversationMountRef} />
+          {!prevConversation && (
+            <div className="no-conversation-open">
+              <div className="module-splash-screen__logo module-img--128 module-logo-blue" />
+              <h3>{i18n('welcomeToSignal')}</h3>
+              <p className="whats-new-placeholder">
+                <WhatsNewLink
+                  i18n={i18n}
+                  showWhatsNewModal={showWhatsNewModal}
+                />
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
       {activeModal}
     </>
   );

ts/components/LeftPane.stories.tsx

@@ -124,7 +124,6 @@ const useProps = (overrideProps: Partial<PropsType> = {}): PropsType => {
     getPreferredBadge: () => undefined,
     i18n,
     preferredWidthFromStorage: 320,
-    openConversationInternal: action('openConversationInternal'),
     regionCode: 'US',
     challengeStatus: select(
       'challengeStatus',
@@ -148,7 +147,7 @@ const useProps = (overrideProps: Partial<PropsType> = {}): PropsType => {
         getPreferredBadge={() => undefined}
         i18n={i18n}
         id={id}
-        openConversationInternal={action('openConversationInternal')}
+        showConversation={action('showConversation')}
         sentAt={1587358800000}
         snippet="Lorem <<left>>ipsum<<right>> wow"
         theme={ThemeType.light}

ts/components/LeftPane.tsx

@@ -39,7 +39,7 @@ import {
   getWidthFromPreferredWidth,
 } from '../util/leftPaneWidth';
 import type { LookupConversationWithoutUuidActionsType } from '../util/lookupConversationWithoutUuid';
-import type { OpenConversationInternalType } from '../state/ducks/conversations';
+import type { ShowConversationType } from '../state/ducks/conversations';
 
 import { ConversationList } from './ConversationList';
 import { ContactCheckboxDisabledReason } from './conversationList/ContactCheckbox';
@@ -99,25 +99,25 @@ export type PropsType = {
   clearSearch: () => void;
   closeMaximumGroupSizeModal: () => void;
   closeRecommendedGroupSizeModal: () => void;
-  createGroup: () => void;
-  openConversationInternal: OpenConversationInternalType;
-  savePreferredLeftPaneWidth: (_: number) => void;
-  searchInConversation: (conversationId: string) => unknown;
-  setComposeSearchTerm: (composeSearchTerm: string) => void;
-  setComposeGroupAvatar: (_: undefined | Uint8Array) => void;
-  setComposeGroupName: (_: string) => void;
-  setComposeGroupExpireTimer: (_: number) => void;
-  showArchivedConversations: () => void;
-  showInbox: () => void;
-  startComposing: () => void;
-  startSearch: () => unknown;
-  showChooseGroupMembers: () => void;
-  startSettingGroupMetadata: () => void;
-  toggleConversationInChooseMembers: (conversationId: string) => void;
   composeDeleteAvatarFromDisk: DeleteAvatarFromDiskActionType;
   composeReplaceAvatar: ReplaceAvatarActionType;
   composeSaveAvatarToDisk: SaveAvatarToDiskActionType;
+  createGroup: () => void;
+  savePreferredLeftPaneWidth: (_: number) => void;
+  searchInConversation: (conversationId: string) => unknown;
+  setComposeGroupAvatar: (_: undefined | Uint8Array) => void;
+  setComposeGroupExpireTimer: (_: number) => void;
+  setComposeGroupName: (_: string) => void;
+  setComposeSearchTerm: (composeSearchTerm: string) => void;
+  showArchivedConversations: () => void;
+  showChooseGroupMembers: () => void;
+  showConversation: ShowConversationType;
+  showInbox: () => void;
+  startComposing: () => void;
+  startSearch: () => unknown;
+  startSettingGroupMetadata: () => void;
   toggleComposeEditingAvatar: () => unknown;
+  toggleConversationInChooseMembers: (conversationId: string) => void;
   updateSearchTerm: (_: string) => void;
 
   // Render Props
@@ -137,8 +137,6 @@ export type PropsType = {
   ) => JSX.Element;
   renderCaptchaDialog: (props: { onSkip(): void }) => JSX.Element;
   renderCrashReportDialog: () => JSX.Element;
-
-  showConversation: (conversationId: string) => void;
 } & LookupConversationWithoutUuidActionsType;
 
 export const LeftPane: React.FC<PropsType> = ({
@@ -156,7 +154,6 @@ export const LeftPane: React.FC<PropsType> = ({
   getPreferredBadge,
   i18n,
   modeSpecificProps,
-  openConversationInternal,
   preferredWidthFromStorage,
   renderCaptchaDialog,
   renderCrashReportDialog,
@@ -363,7 +360,7 @@ export const LeftPane: React.FC<PropsType> = ({
 
       if (conversationToOpen) {
         const { conversationId, messageId } = conversationToOpen;
-        openConversationInternal({ conversationId, messageId });
+        showConversation({ conversationId, messageId });
         if (openedByNumber) {
           clearSearch();
         }
@@ -383,16 +380,16 @@ export const LeftPane: React.FC<PropsType> = ({
       document.removeEventListener('keydown', onKeyDown);
     };
   }, [
+    clearSearch,
     helper,
-    openConversationInternal,
     searchInConversation,
     selectedConversationId,
     selectedMessageId,
     showChooseGroupMembers,
+    showConversation,
     showInbox,
     startComposing,
     startSearch,
-    clearSearch,
   ]);
 
   const requiresFullWidth = helper.requiresFullWidth();
@@ -488,13 +485,13 @@ export const LeftPane: React.FC<PropsType> = ({
 
   const onSelectConversation = useCallback(
     (conversationId: string, messageId?: string) => {
-      openConversationInternal({
+      showConversation({
         conversationId,
         messageId,
         switchToAssociatedView: true,
       });
     },
-    [openConversationInternal]
+    [showConversation]
   );
 
   const previousSelectedConversationId = usePrevious(
@@ -555,7 +552,7 @@ export const LeftPane: React.FC<PropsType> = ({
           setComposeSearchTerm(event.target.value);
         },
         updateSearchTerm,
-        openConversationInternal,
+        showConversation,
       })}
       <div className="module-left-pane__dialogs">
         {renderExpiredBuildDialog({

ts/components/LeftPaneSearchInput.tsx

@@ -4,7 +4,7 @@
 import React, { useEffect, useRef } from 'react';
 import type {
   ConversationType,
-  OpenConversationInternalType,
+  ShowConversationType,
 } from '../state/ducks/conversations';
 import type { LocalizerType } from '../types/Util';
 import { Avatar, AvatarSize } from './Avatar';
@@ -20,10 +20,10 @@ type PropsType = {
   searchTerm: string;
   startSearchCounter: number;
   updateSearchTerm: (searchTerm: string) => void;
-  openConversationInternal: OpenConversationInternalType;
+  showConversation: ShowConversationType;
   onEnterKeyDown?: (
     clearSearch: () => void,
-    openConversationInternal: OpenConversationInternalType
+    showConversation: ShowConversationType
   ) => void;
 };
 
@@ -36,7 +36,7 @@ export const LeftPaneSearchInput = ({
   searchTerm,
   startSearchCounter,
   updateSearchTerm,
-  openConversationInternal,
+  showConversation,
   onEnterKeyDown,
 }: PropsType): JSX.Element => {
   const inputRef = useRef<null | HTMLInputElement>(null);
@@ -103,7 +103,7 @@ export const LeftPaneSearchInput = ({
       }}
       onKeyDown={event => {
         if (onEnterKeyDown && event.key === 'Enter') {
-          onEnterKeyDown(clearSearch, openConversationInternal);
+          onEnterKeyDown(clearSearch, showConversation);
           event.preventDefault();
           event.stopPropagation();
         }

ts/components/Stories.stories.tsx

@@ -81,10 +81,10 @@ function getAttachmentWithThumbnail(url: string): AttachmentType {
 const getDefaultProps = (): PropsType => ({
   hiddenStories: [],
   i18n,
-  openConversationInternal: action('openConversationInternal'),
   preferredWidthFromStorage: 380,
   queueStoryDownload: action('queueStoryDownload'),
   renderStoryViewer: () => <div />,
+  showConversation: action('showConversation'),
   stories: [
     createStory({
       attachment: getAttachmentWithThumbnail(

ts/components/Stories.tsx

@@ -7,6 +7,7 @@ import classNames from 'classnames';
 import type { ConversationStoryType } from './StoryListItem';
 import type { LocalizerType } from '../types/Util';
 import type { PropsType as SmartStoryViewerPropsType } from '../state/smart/StoryViewer';
+import type { ShowConversationType } from '../state/ducks/conversations';
 import { StoriesPane } from './StoriesPane';
 import { Theme, themeClassName } from '../util/theme';
 import { getWidthFromPreferredWidth } from '../util/leftPaneWidth';
@@ -16,9 +17,9 @@ export type PropsType = {
   hiddenStories: Array<ConversationStoryType>;
   i18n: LocalizerType;
   preferredWidthFromStorage: number;
-  openConversationInternal: (_: { conversationId: string }) => unknown;
-  renderStoryViewer: (props: SmartStoryViewerPropsType) => JSX.Element;
   queueStoryDownload: (storyId: string) => unknown;
+  renderStoryViewer: (props: SmartStoryViewerPropsType) => JSX.Element;
+  showConversation: ShowConversationType;
   stories: Array<ConversationStoryType>;
   toggleHideStories: (conversationId: string) => unknown;
   toggleStoriesView: () => unknown;
@@ -27,10 +28,10 @@ export type PropsType = {
 export const Stories = ({
   hiddenStories,
   i18n,
-  openConversationInternal,
   preferredWidthFromStorage,
   queueStoryDownload,
   renderStoryViewer,
+  showConversation,
   stories,
   toggleHideStories,
   toggleStoriesView,
@@ -119,8 +120,8 @@ export const Stories = ({
               });
               setConversationIdToView(clickedIdToView);
             }}
-            openConversationInternal={openConversationInternal}
             queueStoryDownload={queueStoryDownload}
+            showConversation={showConversation}
             stories={stories}
             toggleHideStories={toggleHideStories}
             toggleStoriesView={toggleStoriesView}

ts/components/StoriesPane.tsx

@@ -7,6 +7,7 @@ import classNames from 'classnames';
 import { isNotNil } from '../util/isNotNil';
 import type { ConversationStoryType, StoryViewType } from './StoryListItem';
 import type { LocalizerType } from '../types/Util';
+import type { ShowConversationType } from '../state/ducks/conversations';
 import { SearchInput } from './SearchInput';
 import { StoryListItem } from './StoryListItem';
 
@@ -53,8 +54,8 @@ export type PropsType = {
   hiddenStories: Array<ConversationStoryType>;
   i18n: LocalizerType;
   onStoryClicked: (conversationId: string) => unknown;
-  openConversationInternal: (_: { conversationId: string }) => unknown;
   queueStoryDownload: (storyId: string) => unknown;
+  showConversation: ShowConversationType;
   stories: Array<ConversationStoryType>;
   toggleHideStories: (conversationId: string) => unknown;
   toggleStoriesView: () => unknown;
@@ -64,8 +65,8 @@ export const StoriesPane = ({
   hiddenStories,
   i18n,
   onStoryClicked,
-  openConversationInternal,
   queueStoryDownload,
+  showConversation,
   stories,
   toggleHideStories,
   toggleStoriesView,
@@ -121,7 +122,7 @@ export const StoriesPane = ({
             }}
             onHideStory={toggleHideStories}
             onGoToConversation={conversationId => {
-              openConversationInternal({ conversationId });
+              showConversation({ conversationId });
               toggleStoriesView();
             }}
             queueStoryDownload={queueStoryDownload}
@@ -150,7 +151,7 @@ export const StoriesPane = ({
                   }}
                   onHideStory={toggleHideStories}
                   onGoToConversation={conversationId => {
-                    openConversationInternal({ conversationId });
+                    showConversation({ conversationId });
                     toggleStoriesView();
                   }}
                   queueStoryDownload={queueStoryDownload}

ts/components/conversation/ContactModal.stories.tsx

@@ -44,8 +44,8 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   i18n,
   isAdmin: boolean('isAdmin', overrideProps.isAdmin || false),
   isMember: boolean('isMember', overrideProps.isMember || true),
-  openConversationInternal: action('openConversationInternal'),
   removeMemberFromGroup: action('removeMemberFromGroup'),
+  showConversation: action('showConversation'),
   theme: ThemeType.light,
   toggleSafetyNumberModal: action('toggleSafetyNumberModal'),
   toggleAdmin: action('toggleAdmin'),

ts/components/conversation/ContactModal.tsx

@@ -9,7 +9,10 @@ import { missingCaseError } from '../../util/missingCaseError';
 import { About } from './About';
 import { Avatar } from '../Avatar';
 import { AvatarLightbox } from '../AvatarLightbox';
-import type { ConversationType } from '../../state/ducks/conversations';
+import type {
+  ConversationType,
+  ShowConversationType,
+} from '../../state/ducks/conversations';
 import { Modal } from '../Modal';
 import type { LocalizerType, ThemeType } from '../../types/Util';
 import { BadgeDialog } from '../BadgeDialog';
@@ -32,14 +35,8 @@ export type PropsDataType = {
 
 type PropsActionType = {
   hideContactModal: () => void;
-  openConversationInternal: (
-    options: Readonly<{
-      conversationId: string;
-      messageId?: string;
-      switchToAssociatedView?: boolean;
-    }>
-  ) => void;
   removeMemberFromGroup: (conversationId: string, contactId: string) => void;
+  showConversation: ShowConversationType;
   toggleAdmin: (conversationId: string, contactId: string) => void;
   toggleSafetyNumberModal: (conversationId: string) => unknown;
   updateConversationModelSharedGroups: (conversationId: string) => void;
@@ -69,8 +66,8 @@ export const ContactModal = ({
   i18n,
   isAdmin,
   isMember,
-  openConversationInternal,
   removeMemberFromGroup,
+  showConversation,
   theme,
   toggleAdmin,
   toggleSafetyNumberModal,
@@ -205,7 +202,7 @@ export const ContactModal = ({
                 className="ContactModal__button ContactModal__send-message"
                 onClick={() => {
                   hideContactModal();
-                  openConversationInternal({ conversationId: contact.id });
+                  showConversation({ conversationId: contact.id });
                 }}
               >
                 <div className="ContactModal__bubble-icon">

ts/components/conversationList/MessageSearchResult.stories.tsx

@@ -53,7 +53,7 @@ const useProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   to: overrideProps.to as PropsType['to'],
   getPreferredBadge: overrideProps.getPreferredBadge || (() => undefined),
   isSelected: boolean('isSelected', overrideProps.isSelected || false),
-  openConversationInternal: action('openConversationInternal'),
+  showConversation: action('showConversation'),
   isSearchingInConversation: boolean(
     'isSearchingInConversation',
     overrideProps.isSearchingInConversation || false

ts/components/conversationList/MessageSearchResult.tsx

@@ -15,7 +15,10 @@ import type {
   ThemeType,
 } from '../../types/Util';
 import { BaseConversationListItem } from './BaseConversationListItem';
-import type { ConversationType } from '../../state/ducks/conversations';
+import type {
+  ConversationType,
+  ShowConversationType,
+} from '../../state/ducks/conversations';
 import type { PreferredBadgeSelectorType } from '../../state/selectors/badges';
 
 export type PropsDataType = {
@@ -58,10 +61,7 @@ export type PropsDataType = {
 type PropsHousekeepingType = {
   getPreferredBadge: PreferredBadgeSelectorType;
   i18n: LocalizerType;
-  openConversationInternal: (_: {
+  showConversation: ShowConversationType;
-    conversationId: string;
-    messageId?: string;
-  }) => void;
   theme: ThemeType;
 };
 
@@ -147,15 +147,15 @@ export const MessageSearchResult: FunctionComponent<PropsType> = React.memo(
     getPreferredBadge,
     i18n,
     id,
-    openConversationInternal,
     sentAt,
+    showConversation,
     snippet,
     theme,
     to,
   }) {
     const onClickItem = useCallback(() => {
-      openConversationInternal({ conversationId, messageId: id });
+      showConversation({ conversationId, messageId: id });
-    }, [openConversationInternal, conversationId, id]);
+    }, [showConversation, conversationId, id]);
 
     if (!from || !to) {
       return <div />;

ts/components/conversationList/StartNewConversation.tsx

@@ -11,6 +11,7 @@ import { BaseConversationListItem } from './BaseConversationListItem';
 import type { ParsedE164Type } from '../../util/libphonenumberInstance';
 import type { LookupConversationWithoutUuidActionsType } from '../../util/lookupConversationWithoutUuid';
 import type { LocalizerType } from '../../types/Util';
+import type { ShowConversationType } from '../../state/ducks/conversations';
 import { AvatarColors } from '../../types/Colors';
 
 type PropsData = {
@@ -20,7 +21,7 @@ type PropsData = {
 
 type PropsHousekeeping = {
   i18n: LocalizerType;
-  showConversation: (conversationId: string) => void;
+  showConversation: ShowConversationType;
 } & LookupConversationWithoutUuidActionsType;
 
 export type Props = PropsData & PropsHousekeeping;
@@ -55,7 +56,7 @@ export const StartNewConversation: FunctionComponent<Props> = React.memo(
       });
 
       if (conversationId !== undefined) {
-        showConversation(conversationId);
+        showConversation({ conversationId });
       }
     }, [
       showConversation,

ts/components/conversationList/UsernameSearchResultListItem.tsx

@@ -9,6 +9,7 @@ import { BaseConversationListItem } from './BaseConversationListItem';
 import type { LocalizerType } from '../../types/Util';
 import { lookupConversationWithoutUuid } from '../../util/lookupConversationWithoutUuid';
 import type { LookupConversationWithoutUuidActionsType } from '../../util/lookupConversationWithoutUuid';
+import type { ShowConversationType } from '../../state/ducks/conversations';
 
 type PropsData = {
   username: string;
@@ -17,7 +18,7 @@ type PropsData = {
 
 type PropsHousekeeping = {
   i18n: LocalizerType;
-  showConversation: (conversationId: string) => void;
+  showConversation: ShowConversationType;
 } & LookupConversationWithoutUuidActionsType;
 
 export type Props = PropsData & PropsHousekeeping;
@@ -44,7 +45,7 @@ export const UsernameSearchResultListItem: FunctionComponent<Props> = ({
     });
 
     if (conversationId !== undefined) {
-      showConversation(conversationId);
+      showConversation({ conversationId });
     }
   }, [
     username,

ts/components/leftPane/LeftPaneArchiveHelper.tsx

@@ -14,7 +14,7 @@ import type { PropsData as ConversationListItemPropsType } from '../conversation
 import type { LocalizerType } from '../../types/Util';
 import type {
   ConversationType,
-  OpenConversationInternalType,
+  ShowConversationType,
 } from '../../state/ducks/conversations';
 import { LeftPaneSearchInput } from '../LeftPaneSearchInput';
 import type { LeftPaneSearchPropsType } from './LeftPaneSearchHelper';
@@ -84,13 +84,13 @@ export class LeftPaneArchiveHelper extends LeftPaneHelper<LeftPaneArchivePropsTy
     clearSearch,
     i18n,
     updateSearchTerm,
-    openConversationInternal,
+    showConversation,
   }: Readonly<{
     clearConversationSearch: () => unknown;
     clearSearch: () => unknown;
     i18n: LocalizerType;
     updateSearchTerm: (searchTerm: string) => unknown;
-    openConversationInternal: OpenConversationInternalType;
+    showConversation: ShowConversationType;
   }>): ReactChild | null {
     if (!this.searchConversation) {
       return null;
@@ -103,9 +103,9 @@ export class LeftPaneArchiveHelper extends LeftPaneHelper<LeftPaneArchivePropsTy
         i18n={i18n}
         searchConversation={this.searchConversation}
         searchTerm={this.searchTerm}
+        showConversation={showConversation}
         startSearchCounter={this.startSearchCounter}
         updateSearchTerm={updateSearchTerm}
-        openConversationInternal={openConversationInternal}
       />
     );
   }

ts/components/leftPane/LeftPaneHelper.tsx

@@ -10,7 +10,7 @@ import type {
   ReplaceAvatarActionType,
   SaveAvatarToDiskActionType,
 } from '../../types/Avatar';
-import type { OpenConversationInternalType } from '../../state/ducks/conversations';
+import type { ShowConversationType } from '../../state/ducks/conversations';
 
 export enum FindDirection {
   Up,
@@ -43,7 +43,7 @@ export abstract class LeftPaneHelper<T> {
         event: ChangeEvent<HTMLInputElement>
       ) => unknown;
       updateSearchTerm: (searchTerm: string) => unknown;
-      openConversationInternal: OpenConversationInternalType;
+      showConversation: ShowConversationType;
     }>
   ): null | ReactChild {
     return null;

ts/components/leftPane/LeftPaneInboxHelper.tsx

@@ -9,7 +9,7 @@ import { Intl } from '../Intl';
 import type { ToFindType } from './LeftPaneHelper';
 import type {
   ConversationType,
-  OpenConversationInternalType,
+  ShowConversationType,
 } from '../../state/ducks/conversations';
 import { LeftPaneHelper } from './LeftPaneHelper';
 import { getConversationInDirection } from './getConversationInDirection';
@@ -85,14 +85,14 @@ export class LeftPaneInboxHelper extends LeftPaneHelper<LeftPaneInboxPropsType>
     clearConversationSearch,
     clearSearch,
     i18n,
+    showConversation,
     updateSearchTerm,
-    openConversationInternal,
   }: Readonly<{
     clearConversationSearch: () => unknown;
     clearSearch: () => unknown;
     i18n: LocalizerType;
+    showConversation: ShowConversationType;
     updateSearchTerm: (searchTerm: string) => unknown;
-    openConversationInternal: OpenConversationInternalType;
   }>): ReactChild {
     return (
       <LeftPaneSearchInput
@@ -102,9 +102,9 @@ export class LeftPaneInboxHelper extends LeftPaneHelper<LeftPaneInboxPropsType>
         i18n={i18n}
         searchConversation={this.searchConversation}
         searchTerm={this.searchTerm}
+        showConversation={showConversation}
         startSearchCounter={this.startSearchCounter}
         updateSearchTerm={updateSearchTerm}
-        openConversationInternal={openConversationInternal}
       />
     );
   }

ts/components/leftPane/LeftPaneSearchHelper.tsx

@@ -13,7 +13,7 @@ import type { PropsData as ConversationListItemPropsType } from '../conversation
 import { handleKeydownForSearch } from './handleKeydownForSearch';
 import type {
   ConversationType,
-  OpenConversationInternalType,
+  ShowConversationType,
 } from '../../state/ducks/conversations';
 import { LeftPaneSearchInput } from '../LeftPaneSearchInput';
 
@@ -104,14 +104,14 @@ export class LeftPaneSearchHelper extends LeftPaneHelper<LeftPaneSearchPropsType
     clearConversationSearch,
     clearSearch,
     i18n,
+    showConversation,
     updateSearchTerm,
-    openConversationInternal,
   }: Readonly<{
     clearConversationSearch: () => unknown;
     clearSearch: () => unknown;
     i18n: LocalizerType;
+    showConversation: ShowConversationType;
     updateSearchTerm: (searchTerm: string) => unknown;
-    openConversationInternal: OpenConversationInternalType;
   }>): ReactChild {
     return (
       <LeftPaneSearchInput
@@ -119,12 +119,12 @@ export class LeftPaneSearchHelper extends LeftPaneHelper<LeftPaneSearchPropsType
         clearSearch={clearSearch}
         disabled={this.searchDisabled}
         i18n={i18n}
+        onEnterKeyDown={this.onEnterKeyDown}
         searchConversation={this.searchConversation}
         searchTerm={this.searchTerm}
+        showConversation={showConversation}
         startSearchCounter={this.startSearchCounter}
         updateSearchTerm={updateSearchTerm}
-        openConversationInternal={openConversationInternal}
-        onEnterKeyDown={this.onEnterKeyDown}
       />
     );
   }
@@ -361,13 +361,13 @@ export class LeftPaneSearchHelper extends LeftPaneHelper<LeftPaneSearchPropsType
 
   private onEnterKeyDown(
     clearSearch: () => unknown,
-    openConversationInternal: OpenConversationInternalType
+    showConversation: ShowConversationType
   ): void {
     const conversation = this.getConversationAndMessageAtIndex(0);
     if (!conversation) {
       return;
     }
-    openConversationInternal(conversation);
+    showConversation(conversation);
     clearSearch();
   }
 }

ts/groups/joinViaLink.tsx

@@ -74,7 +74,7 @@ export async function joinViaLink(hash: string): Promise<void> {
     log.warn(
       `joinViaLink/${logId}: Already a member of group, opening conversation`
     );
-    window.reduxActions.conversations.openConversationInternal({
+    window.reduxActions.conversations.showConversation({
       conversationId: existingConversation.id,
     });
     showToast(ToastAlreadyGroupMember);
@@ -166,7 +166,7 @@ export async function joinViaLink(hash: string): Promise<void> {
     // We're waiting for the left pane to re-sort before we navigate to that conversation
     await sleep(200);
 
-    window.reduxActions.conversations.openConversationInternal({
+    window.reduxActions.conversations.showConversation({
       conversationId: existingConversation.id,
     });
 
@@ -253,7 +253,7 @@ export async function joinViaLink(hash: string): Promise<void> {
             log.warn(
               `joinViaLink/${logId}: User is part of group on second check, opening conversation`
             );
-            window.reduxActions.conversations.openConversationInternal({
+            window.reduxActions.conversations.showConversation({
               conversationId: targetConversation.id,
             });
             return;
@@ -347,7 +347,7 @@ export async function joinViaLink(hash: string): Promise<void> {
               );
             }
 
-            window.reduxActions.conversations.openConversationInternal({
+            window.reduxActions.conversations.showConversation({
               conversationId: targetConversation.id,
             });
           } catch (error) {

ts/signal.ts

@@ -3,7 +3,6 @@
 
 // The idea with this file is to make it webpackable for the style guide
 
-import * as Backbone from './backbone';
 import * as Crypto from './Crypto';
 import * as Curve from './Curve';
 import { start as conversationControllerStart } from './ConversationController';
@@ -33,7 +32,6 @@ import { createForwardMessageModal } from './state/roots/createForwardMessageMod
 import { createGroupLinkManagement } from './state/roots/createGroupLinkManagement';
 import { createGroupV1MigrationModal } from './state/roots/createGroupV1MigrationModal';
 import { createGroupV2JoinModal } from './state/roots/createGroupV2JoinModal';
-import { createLeftPane } from './state/roots/createLeftPane';
 import { createMessageDetail } from './state/roots/createMessageDetail';
 import { createConversationNotificationsSettings } from './state/roots/createConversationNotificationsSettings';
 import { createGroupV2Permissions } from './state/roots/createGroupV2Permissions';
@@ -424,7 +422,6 @@ export const setup = (options: {
     createGroupV1MigrationModal,
     createGroupV2JoinModal,
     createGroupV2Permissions,
-    createLeftPane,
     createMessageDetail,
     createConversationNotificationsSettings,
     createPendingInvites,
@@ -482,7 +479,6 @@ export const setup = (options: {
   };
 
   return {
-    Backbone,
     Components,
     Crypto,
     Curve,

ts/state/ducks/audioPlayer.ts

@@ -4,10 +4,11 @@
 import { useBoundActions } from '../../hooks/useBoundActions';
 
 import type {
-  SwitchToAssociatedViewActionType,
   MessageDeletedActionType,
   MessageChangedActionType,
+  SelectedConversationChangedActionType,
 } from './conversations';
+import { SELECTED_CONVERSATION_CHANGED } from './conversations';
 
 // State
 
@@ -59,9 +60,9 @@ export function reducer(
   state: Readonly<AudioPlayerStateType> = getEmptyState(),
   action: Readonly<
     | AudioPlayerActionType
-    | SwitchToAssociatedViewActionType
     | MessageDeletedActionType
     | MessageChangedActionType
+    | SelectedConversationChangedActionType
   >
 ): AudioPlayerStateType {
   if (action.type === 'audioPlayer/SET_ACTIVE_AUDIO_ID') {
@@ -75,7 +76,7 @@ export function reducer(
   }
 
   // Reset activeAudioID on conversation change.
-  if (action.type === 'SWITCH_TO_ASSOCIATED_VIEW') {
+  if (action.type === SELECTED_CONVERSATION_CHANGED) {
     return {
       ...state,
       activeAudioID: undefined,

ts/state/ducks/conversations.ts

@@ -22,7 +22,6 @@ import { calling } from '../../services/calling';
 import { getOwn } from '../../util/getOwn';
 import { assert, strictAssert } from '../../util/assert';
 import * as universalExpireTimer from '../../util/universalExpireTimer';
-import { trigger } from '../../shims/events';
 import type { ToggleProfileEditorErrorActionType } from './globalModals';
 import { TOGGLE_PROFILE_EDITOR_ERROR } from './globalModals';
 import { isRecord } from '../../util/isRecord';
@@ -347,12 +346,6 @@ export type ConversationsStateType = {
   messagesByConversation: MessagesByConversationType;
 };
 
-export type OpenConversationInternalType = (_: {
-  conversationId: string;
-  messageId?: string;
-  switchToAssociatedView?: boolean;
-}) => void;
-
 // Helpers
 
 export const getConversationCallMode = (
@@ -399,6 +392,8 @@ const CONVERSATION_STOPPED_BY_MISSING_VERIFICATION =
 const DISCARD_MESSAGES = 'conversations/DISCARD_MESSAGES';
 const REPLACE_AVATARS = 'conversations/REPLACE_AVATARS';
 const UPDATE_USERNAME_SAVE_STATE = 'conversations/UPDATE_USERNAME_SAVE_STATE';
+export const SELECTED_CONVERSATION_CHANGED =
+  'conversations/SELECTED_CONVERSATION_CHANGED';
 
 export type CancelVerificationDataByConversationActionType = {
   type: typeof CANCEL_CONVERSATION_PENDING_VERIFICATION;
@@ -642,10 +637,11 @@ export type ClearUnreadMetricsActionType = {
   };
 };
 export type SelectedConversationChangedActionType = {
-  type: 'SELECTED_CONVERSATION_CHANGED';
+  type: typeof SELECTED_CONVERSATION_CHANGED;
   payload: {
-    id: string;
+    id?: string;
     messageId?: string;
+    switchToAssociatedView?: boolean;
   };
 };
 type ReviewGroupMemberNameCollisionActionType = {
@@ -710,10 +706,6 @@ type ShowChooseGroupMembersActionType = {
 type StartSettingGroupMetadataActionType = {
   type: 'START_SETTING_GROUP_METADATA';
 };
-export type SwitchToAssociatedViewActionType = {
-  type: 'SWITCH_TO_ASSOCIATED_VIEW';
-  payload: { conversationId: string };
-};
 export type ToggleConversationInChooseMembersActionType = {
   type: 'TOGGLE_CONVERSATION_IN_CHOOSE_MEMBERS';
   payload: {
@@ -792,7 +784,6 @@ export type ConversationActionType =
   | ShowInboxActionType
   | StartComposingActionType
   | StartSettingGroupMetadataActionType
-  | SwitchToAssociatedViewActionType
   | ToggleConversationInChooseMembersActionType
   | ToggleComposeEditingAvatarActionType
   | UpdateUsernameSaveStateActionType;
@@ -831,8 +822,6 @@ export const actions = {
   messagesAdded,
   messagesReset,
   myProfileChanged,
-  openConversationExternal,
-  openConversationInternal,
   removeAllConversations,
   removeCustomColorOnConversations,
   removeMemberFromGroup,
@@ -1527,9 +1516,9 @@ function createGroup(
   | CreateGroupPendingActionType
   | CreateGroupFulfilledActionType
   | CreateGroupRejectedActionType
-  | SwitchToAssociatedViewActionType
+  | SelectedConversationChangedActionType
 > {
-  return async (dispatch, getState, ...args) => {
+  return async (dispatch, getState) => {
     const { composer } = getState().conversations;
     if (
       composer?.step !== ComposerStep.SetGroupMetadata ||
@@ -1559,10 +1548,12 @@ function createGroup(
           ),
         },
       });
-      openConversationInternal({
+      dispatch(
+        showConversation({
           conversationId: conversation.id,
           switchToAssociatedView: true,
-      })(dispatch, getState, ...args);
+        })
+      );
     } catch (err) {
       log.error('Failed to create group', err && err.stack ? err.stack : err);
       dispatch({ type: 'CREATE_GROUP_REJECTED' });
@@ -1924,48 +1915,6 @@ function toggleConversationInChooseMembers(
   };
 }
 
-// Note: we need two actions here to simplify. Operations outside of the left pane can
-//   trigger an 'openConversation' so we go through Whisper.events for all
-//   conversation selection. Internal just triggers the Whisper.event, and External
-//   makes the changes to the store.
-function openConversationInternal({
-  conversationId,
-  messageId,
-  switchToAssociatedView,
-}: Readonly<{
-  conversationId: string;
-  messageId?: string;
-  switchToAssociatedView?: boolean;
-}>): ThunkAction<
-  void,
-  RootStateType,
-  unknown,
-  SwitchToAssociatedViewActionType
-> {
-  return dispatch => {
-    trigger('showConversation', conversationId, messageId);
-
-    if (switchToAssociatedView) {
-      dispatch({
-        type: 'SWITCH_TO_ASSOCIATED_VIEW',
-        payload: { conversationId },
-      });
-    }
-  };
-}
-function openConversationExternal(
-  id: string,
-  messageId?: string
-): SelectedConversationChangedActionType {
-  return {
-    type: 'SELECTED_CONVERSATION_CHANGED',
-    payload: {
-      id,
-      messageId,
-    },
-  };
-}
-
 function toggleHideStories(
   conversationId: string
 ): ThunkAction<void, RootStateType, unknown, NoopActionType> {
@@ -2039,12 +1988,26 @@ function showInbox(): ShowInboxActionType {
     payload: null,
   };
 }
-function showConversation(
+
-  conversationId: string
+type ShowConversationArgsType = {
-): ThunkAction<void, RootStateType, unknown, ShowInboxActionType> {
+  conversationId?: string;
-  return dispatch => {
+  messageId?: string;
-    trigger('showConversation', conversationId);
+  switchToAssociatedView?: boolean;
-    dispatch(showInbox());
+};
+export type ShowConversationType = (_: ShowConversationArgsType) => unknown;
+
+function showConversation({
+  conversationId,
+  messageId,
+  switchToAssociatedView,
+}: ShowConversationArgsType): SelectedConversationChangedActionType {
+  return {
+    type: SELECTED_CONVERSATION_CHANGED,
+    payload: {
+      id: conversationId,
+      messageId,
+      switchToAssociatedView,
+    },
   };
 }
 function showArchivedConversations(): ShowArchivedConversationsActionType {
@@ -2475,7 +2438,7 @@ export function reducer(
     };
   }
   if (action.type === 'CREATE_GROUP_FULFILLED') {
-    // We don't do much here and instead rely on `openConversationInternal` to do most of
+    // We don't do much here and instead rely on `showConversation` to do most of
     //   the work.
     return {
       ...state,
@@ -3065,14 +3028,31 @@ export function reducer(
       },
     };
   }
-  if (action.type === 'SELECTED_CONVERSATION_CHANGED') {
+  if (action.type === SELECTED_CONVERSATION_CHANGED) {
     const { payload } = action;
-    const { id } = payload;
+    const { id, messageId, switchToAssociatedView } = payload;
 
-    return {
+    const nextState = {
       ...omit(state, 'contactSpoofingReview'),
       selectedConversationId: id,
     };
+
+    if (messageId) {
+      nextState.selectedMessage = messageId;
+    }
+
+    if (switchToAssociatedView && id) {
+      const conversation = getOwn(state.conversationLookup, id);
+      if (!conversation) {
+        return nextState;
+      }
+      return {
+        ...omit(nextState, 'composer'),
+        showArchived: Boolean(conversation.isArchived),
+      };
+    }
+
+    return nextState;
   }
   if (action.type === 'SHOW_INBOX') {
     return {
@@ -3432,20 +3412,6 @@ export function reducer(
     }
   }
 
-  if (action.type === 'SWITCH_TO_ASSOCIATED_VIEW') {
-    const conversation = getOwn(
-      state.conversationLookup,
-      action.payload.conversationId
-    );
-    if (!conversation) {
-      return state;
-    }
-    return {
-      ...omit(state, 'composer'),
-      showArchived: Boolean(conversation.isArchived),
-    };
-  }
-
   if (action.type === 'TOGGLE_CONVERSATION_IN_CHOOSE_MEMBERS') {
     const { composer } = state;
     if (composer?.step !== ComposerStep.ChooseGroupMembers) {

ts/state/ducks/search.ts

@@ -31,6 +31,7 @@ import {
   getUserConversationId,
 } from '../selectors/user';
 import { strictAssert } from '../../util/assert';
+import { SELECTED_CONVERSATION_CHANGED } from './conversations';
 
 const {
   searchMessages: dataSearchMessages,
@@ -431,7 +432,7 @@ export function reducer(
     return getEmptyState();
   }
 
-  if (action.type === 'SELECTED_CONVERSATION_CHANGED') {
+  if (action.type === SELECTED_CONVERSATION_CHANGED) {
     const { payload } = action;
     const { id, messageId } = payload;
     const { searchConversationId } = state;

ts/state/roots/createLeftPane.tsx

@@ -1,15 +0,0 @@
-// Copyright 2019-2020 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-import React from 'react';
-import { Provider } from 'react-redux';
-
-import type { Store } from 'redux';
-
-import { SmartLeftPane } from '../smart/LeftPane';
-
-export const createLeftPane = (store: Store): React.ReactElement => (
-  <Provider store={store}>
-    <SmartLeftPane />
-  </Provider>
-);

ts/state/smart/App.tsx

@@ -10,6 +10,7 @@ import { App } from '../../components/App';
 import { SmartCallManager } from './CallManager';
 import { SmartCustomizingPreferredReactionsModal } from './CustomizingPreferredReactionsModal';
 import { SmartGlobalModalContainer } from './GlobalModalContainer';
+import { SmartLeftPane } from './LeftPane';
 import { SmartSafetyNumberViewer } from './SafetyNumberViewer';
 import { SmartStories } from './Stories';
 import type { StateType } from '../reducer';
@@ -47,6 +48,7 @@ const mapStateToProps = (state: StateType) => {
       <SmartCustomizingPreferredReactionsModal />
     ),
     renderGlobalModalContainer: () => <SmartGlobalModalContainer />,
+    renderLeftPane: () => <SmartLeftPane />,
     renderSafetyNumber: (props: SafetyNumberProps) => (
       <SmartSafetyNumberViewer {...props} />
     ),
@@ -68,6 +70,8 @@ const mapStateToProps = (state: StateType) => {
     registerSingleDevice: (number: string, code: string): Promise<void> => {
       return window.getAccountManager().registerSingleDevice(number, code);
     },
+    selectedConversationId: state.conversations.selectedConversationId,
+    selectedMessage: state.conversations.selectedMessage,
     theme: getTheme(state),
 
     executeMenuRole: (role: MenuItemConstructorOptions['role']): void => {

ts/state/smart/Stories.tsx

@@ -33,8 +33,7 @@ function renderStoryViewer({
 
 export function SmartStories(): JSX.Element | null {
   const storiesActions = useStoriesActions();
-  const { openConversationInternal, toggleHideStories } =
+  const { showConversation, toggleHideStories } = useConversationsActions();
-    useConversationsActions();
 
   const i18n = useSelector<StateType, LocalizerType>(getIntl);
 
@@ -56,9 +55,9 @@ export function SmartStories(): JSX.Element | null {
     <Stories
       hiddenStories={hiddenStories}
       i18n={i18n}
-      openConversationInternal={openConversationInternal}
       preferredWidthFromStorage={preferredWidthFromStorage}
       renderStoryViewer={renderStoryViewer}
+      showConversation={showConversation}
       stories={stories}
       toggleHideStories={toggleHideStories}
       {...storiesActions}

ts/state/smart/StoryViewer.tsx

@@ -41,8 +41,7 @@ export function SmartStoryViewer({
   const storiesActions = useStoriesActions();
   const { onSetSkinTone, toggleHasAllStoriesMuted } = useItemsActions();
   const { onUseEmoji } = useEmojisActions();
-  const { openConversationInternal, toggleHideStories } =
+  const { showConversation, toggleHideStories } = useConversationsActions();
-    useConversationsActions();
 
   const i18n = useSelector<StateType, LocalizerType>(getIntl);
   const getPreferredBadge = useSelector(getPreferredBadgeSelector);
@@ -74,7 +73,7 @@ export function SmartStoryViewer({
       onClose={onClose}
       onHideStory={toggleHideStories}
       onGoToConversation={senderId => {
-        openConversationInternal({ conversationId: senderId });
+        showConversation({ conversationId: senderId });
         storiesActions.toggleStoriesView();
       }}
       onNextUserStories={onNextUserStories}

ts/test-both/state/ducks/audioPlayer_test.ts

@@ -4,8 +4,11 @@
 import { assert } from 'chai';
 
 import { actions } from '../../../state/ducks/audioPlayer';
-import type { SwitchToAssociatedViewActionType } from '../../../state/ducks/conversations';
+import type { SelectedConversationChangedActionType } from '../../../state/ducks/conversations';
-import { actions as conversationsActions } from '../../../state/ducks/conversations';
+import {
+  SELECTED_CONVERSATION_CHANGED,
+  actions as conversationsActions,
+} from '../../../state/ducks/conversations';
 import { noopAction } from '../../../state/ducks/noop';
 
 import type { StateType } from '../../../state/reducer';
@@ -51,9 +54,9 @@ describe('both/state/ducks/audioPlayer', () => {
   it('resets activeAudioID when changing the conversation', () => {
     const state = getInitializedState();
 
-    const updated = rootReducer(state, <SwitchToAssociatedViewActionType>{
+    const updated = rootReducer(state, <SelectedConversationChangedActionType>{
-      type: 'SWITCH_TO_ASSOCIATED_VIEW',
+      type: SELECTED_CONVERSATION_CHANGED,
-      payload: { conversationId: 'any' },
+      payload: { id: 'any' },
     });
 
     assert.strictEqual(updated.audioPlayer.activeAudioID, undefined);

ts/test-electron/state/ducks/conversations_test.ts

@@ -15,13 +15,14 @@ import {
 import type {
   CancelVerificationDataByConversationActionType,
   ConversationMessageType,
-  ConversationsStateType,
   ConversationType,
+  ConversationsStateType,
   MessageType,
-  SwitchToAssociatedViewActionType,
+  SelectedConversationChangedActionType,
   ToggleConversationInChooseMembersActionType,
 } from '../../../state/ducks/conversations';
 import {
+  SELECTED_CONVERSATION_CHANGED,
   actions,
   cancelConversationVerification,
   clearCancelledConversationVerification,
@@ -56,7 +57,6 @@ const {
   createGroup,
   discardMessages,
   messageChanged,
-  openConversationInternal,
   repairNewestMessage,
   repairOldestMessage,
   resetAllChatColors,
@@ -68,6 +68,7 @@ const {
   setPreJoinConversation,
   showArchivedConversations,
   showChooseGroupMembers,
+  showConversation,
   showInbox,
   startComposing,
   startSettingGroupMetadata,
@@ -341,82 +342,40 @@ describe('both/state/ducks/conversations', () => {
       };
     }
 
-    describe('openConversationInternal', () => {
+    describe('showConversation', () => {
-      it("returns a thunk that triggers a 'showConversation' event when passed a conversation ID", () => {
+      it('selects a conversation id', () => {
-        const dispatch = sinon.spy();
+        const state = {
+          ...getEmptyState(),
+        };
+        const action = showConversation({ conversationId: 'abc123' });
+        const nextState = reducer(state, action);
 
-        openConversationInternal({ conversationId: 'abc123' })(
+        assert.equal(nextState.selectedConversationId, 'abc123');
-          dispatch,
+        assert.isUndefined(nextState.selectedMessage);
-          getEmptyRootState,
-          null
-        );
-
-        sinon.assert.calledOnce(
-          window.Whisper.events.trigger as sinon.SinonSpy
-        );
-        sinon.assert.calledWith(
-          window.Whisper.events.trigger as sinon.SinonSpy,
-          'showConversation',
-          'abc123',
-          undefined
-        );
       });
 
-      it("returns a thunk that triggers a 'showConversation' event when passed a conversation ID and message ID", () => {
+      it('selects a conversation and a message', () => {
-        const dispatch = sinon.spy();
+        const state = {
-
+          ...getEmptyState(),
-        openConversationInternal({
+        };
+        const action = showConversation({
           conversationId: 'abc123',
           messageId: 'xyz987',
-        })(dispatch, getEmptyRootState, null);
+        });
+        const nextState = reducer(state, action);
 
-        sinon.assert.calledOnce(
+        assert.equal(nextState.selectedConversationId, 'abc123');
-          window.Whisper.events.trigger as sinon.SinonSpy
+        assert.equal(nextState.selectedMessage, 'xyz987');
-        );
-        sinon.assert.calledWith(
-          window.Whisper.events.trigger as sinon.SinonSpy,
-          'showConversation',
-          'abc123',
-          'xyz987'
-        );
       });
 
-      it("returns a thunk that doesn't dispatch any actions by default", () => {
+      describe('showConversation switchToAssociatedView=true', () => {
-        const dispatch = sinon.spy();
+        let action: SelectedConversationChangedActionType;
-
-        openConversationInternal({ conversationId: 'abc123' })(
-          dispatch,
-          getEmptyRootState,
-          null
-        );
-
-        sinon.assert.notCalled(dispatch);
-      });
-
-      it('dispatches a SWITCH_TO_ASSOCIATED_VIEW action if called with a flag', () => {
-        const dispatch = sinon.spy();
-
-        openConversationInternal({
-          conversationId: 'abc123',
-          switchToAssociatedView: true,
-        })(dispatch, getEmptyRootState, null);
-
-        sinon.assert.calledWith(dispatch, {
-          type: 'SWITCH_TO_ASSOCIATED_VIEW',
-          payload: { conversationId: 'abc123' },
-        });
-      });
-
-      describe('SWITCH_TO_ASSOCIATED_VIEW', () => {
-        let action: SwitchToAssociatedViewActionType;
 
         beforeEach(() => {
-          const dispatch = sinon.spy();
+          action = showConversation({
-          openConversationInternal({
             conversationId: 'fake-conversation-id',
             switchToAssociatedView: true,
-          })(dispatch, getEmptyRootState, null);
+          });
-          [action] = dispatch.getCall(0).args;
         });
 
         it('shows the inbox if the conversation is not archived', () => {
@@ -451,13 +410,6 @@ describe('both/state/ducks/conversations', () => {
           assert.isUndefined(result.composer);
           assert.isTrue(result.showArchived);
         });
-
-        it('does nothing if the conversation is not found', () => {
-          const state = getEmptyState();
-          const result = reducer(state, action);
-
-          assert.strictEqual(result, state);
-        });
       });
     });
 
@@ -769,26 +721,23 @@ describe('both/state/ducks/conversations', () => {
           null
         );
 
-        sinon.assert.calledWith(
-          window.Whisper.events.trigger as sinon.SinonSpy,
-          'showConversation',
-          '9876',
-          undefined
-        );
-
         sinon.assert.calledWith(dispatch, {
           type: 'CREATE_GROUP_FULFILLED',
           payload: { invitedUuids: [abc] },
         });
 
+        sinon.assert.calledWith(dispatch, {
+          type: SELECTED_CONVERSATION_CHANGED,
+          payload: {
+            id: '9876',
+            messageId: undefined,
+            switchToAssociatedView: true,
+          },
+        });
+
         const fulfilledAction = dispatch.getCall(1).args[0];
         const result = reducer(conversationsState, fulfilledAction);
         assert.deepEqual(result.invitedUuidsForNewlyCreatedGroup, [abc]);
-
-        sinon.assert.calledWith(dispatch, {
-          type: 'SWITCH_TO_ASSOCIATED_VIEW',
-          payload: { conversationId: '9876' },
-        });
       });
     });
 

ts/util/lint/exceptions.json

@@ -8300,22 +8300,6 @@
     "reasonCategory": "falseMatch",
     "updated": "2020-07-21T18:34:59.251Z"
   },
-  {
-    "rule": "DOM-innerHTML",
-    "path": "ts/backbone/views/Lightbox.ts",
-    "line": "  container.innerHTML = '';",
-    "reasonCategory": "usageTrusted",
-    "updated": "2018-09-17T20:50:40.689Z",
-    "reasonDetail": "Hard-coded value"
-  },
-  {
-    "rule": "DOM-innerHTML",
-    "path": "ts/backbone/views/Lightbox.ts",
-    "line": "  container.innerHTML = '';",
-    "reasonCategory": "usageTrusted",
-    "updated": "2018-09-17T20:50:40.689Z",
-    "reasonDetail": "Hard-coded value"
-  },
   {
     "rule": "jQuery-html(",
     "path": "ts/backbone/views/whisper_view.ts",
@@ -8598,16 +8582,16 @@
   {
     "rule": "React-useRef",
     "path": "ts/components/Inbox.tsx",
-    "line": "  const hostRef = useRef<HTMLDivElement | null>(null);",
+    "line": "  const conversationMountRef = useRef<HTMLDivElement | null>(null);",
     "reasonCategory": "usageTrusted",
-    "updated": "2021-07-30T16:57:33.618Z"
+    "updated": "2022-06-15T01:24:12.761Z"
   },
   {
     "rule": "React-useRef",
     "path": "ts/components/Inbox.tsx",
-    "line": "  const viewRef = useRef<InboxViewType | undefined>(undefined);",
+    "line": "  const conversationViewRef = useRef<ConversationView | null>(null);",
     "reasonCategory": "usageTrusted",
-    "updated": "2021-07-30T16:57:33.618Z"
+    "updated": "2022-06-15T01:24:12.761Z"
   },
   {
     "rule": "React-useRef",
@@ -9121,90 +9105,6 @@
     "reasonCategory": "falseMatch",
     "updated": "2021-09-17T21:51:57.475Z"
   },
-  {
-    "rule": "jQuery-$(",
-    "path": "ts/views/inbox_view.tsx",
-    "line": "  template: () => $('#app-loading-screen').html(),",
-    "reasonCategory": "usageTrusted",
-    "updated": "2021-09-15T21:07:50.995Z"
-  },
-  {
-    "rule": "jQuery-$(",
-    "path": "ts/views/inbox_view.tsx",
-    "line": "      this.$('.message').text(message);",
-    "reasonCategory": "usageTrusted",
-    "updated": "2021-09-15T21:07:50.995Z"
-  },
-  {
-    "rule": "jQuery-$(",
-    "path": "ts/views/inbox_view.tsx",
-    "line": "  template: () => $('#two-column').html(),",
-    "reasonCategory": "usageTrusted",
-    "updated": "2021-09-15T21:07:50.995Z"
-  },
-  {
-    "rule": "jQuery-$(",
-    "path": "ts/views/inbox_view.tsx",
-    "line": "      el: this.$('.conversation-stack'),",
-    "reasonCategory": "usageTrusted",
-    "updated": "2021-09-15T21:07:50.995Z"
-  },
-  {
-    "rule": "jQuery-$(",
-    "path": "ts/views/inbox_view.tsx",
-    "line": "    this.$('.no-conversation-open').toggle(!isAnyConversationOpen);",
-    "reasonCategory": "usageTrusted",
-    "updated": "2021-10-08T17:40:22.770Z"
-  },
-  {
-    "rule": "jQuery-$(",
-    "path": "ts/views/inbox_view.tsx",
-    "line": "    this.$('.left-pane-placeholder').replaceWith(this.leftPaneView.el);",
-    "reasonCategory": "usageTrusted",
-    "updated": "2021-10-08T17:40:22.770Z"
-  },
-  {
-    "rule": "jQuery-$(",
-    "path": "ts/views/inbox_view.tsx",
-    "line": "    this.$('.whats-new-placeholder').append(this.whatsNewLink.el);",
-    "reasonCategory": "usageTrusted",
-    "updated": "2021-10-22T20:58:48.103Z"
-  },
-  {
-    "rule": "jQuery-append(",
-    "path": "ts/views/inbox_view.tsx",
-    "line": "    this.$('.whats-new-placeholder').append(this.whatsNewLink.el);",
-    "reasonCategory": "usageTrusted",
-    "updated": "2021-10-22T20:58:48.103Z"
-  },
-  {
-    "rule": "jQuery-appendTo(",
-    "path": "ts/views/inbox_view.tsx",
-    "line": "      view.$el.appendTo(this.el);",
-    "reasonCategory": "usageTrusted",
-    "updated": "2021-09-15T21:07:50.995Z"
-  },
-  {
-    "rule": "jQuery-html(",
-    "path": "ts/views/inbox_view.tsx",
-    "line": "  template: () => $('#app-loading-screen').html(),",
-    "reasonCategory": "usageTrusted",
-    "updated": "2021-09-15T21:07:50.995Z"
-  },
-  {
-    "rule": "jQuery-html(",
-    "path": "ts/views/inbox_view.tsx",
-    "line": "  template: () => $('#two-column').html(),",
-    "reasonCategory": "usageTrusted",
-    "updated": "2021-09-15T21:07:50.995Z"
-  },
-  {
-    "rule": "jQuery-prependTo(",
-    "path": "ts/views/inbox_view.tsx",
-    "line": "      this.appLoadingScreen.$el.prependTo(this.el);",
-    "reasonCategory": "usageTrusted",
-    "updated": "2021-09-15T21:07:50.995Z"
-  },
   {
     "rule": "DOM-innerHTML",
     "path": "ts/windows/loading/start.ts",

ts/util/showLightbox.tsx

@@ -0,0 +1,39 @@
+// Copyright 2022 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+import { render } from 'react-dom';
+import type { PropsType } from '../components/Lightbox';
+import { Lightbox } from '../components/Lightbox';
+
+// NOTE: This file is temporarily here for convenicence of use by
+// conversation_view while it is transitioning from Backbone into pure React.
+// Please use <Lightbox /> directly and DO NOT USE THESE FUNCTIONS.
+
+let lightboxMountNode: HTMLElement | undefined;
+
+export function isLightboxOpen(): boolean {
+  return Boolean(lightboxMountNode);
+}
+
+export function closeLightbox(): void {
+  if (!lightboxMountNode) {
+    return;
+  }
+
+  window.ReactDOM.unmountComponentAtNode(lightboxMountNode);
+  document.body.removeChild(lightboxMountNode);
+  lightboxMountNode = undefined;
+}
+
+export function showLightbox(props: PropsType): void {
+  if (lightboxMountNode) {
+    closeLightbox();
+  }
+
+  lightboxMountNode = document.createElement('div');
+  lightboxMountNode.setAttribute('data-id', 'lightbox');
+  document.body.appendChild(lightboxMountNode);
+
+  render(<Lightbox {...props} />, lightboxMountNode);
+}

ts/views/conversation_view.tsx

@@ -58,7 +58,7 @@ import {
 import { getActiveCallState } from '../state/selectors/calling';
 import { getTheme } from '../state/selectors/user';
 import { ReactWrapperView } from './ReactWrapperView';
-import { Lightbox } from '../components/Lightbox';
+import type { Lightbox } from '../components/Lightbox';
 import { ConversationDetailsMembershipList } from '../components/conversation/conversation-details/ConversationDetailsMembershipList';
 import { showSafetyNumberChangeDialog } from '../shims/showSafetyNumberChangeDialog';
 import type {
@@ -121,6 +121,11 @@ import { retryDeleteForEveryone } from '../util/retryDeleteForEveryone';
 import { ContactDetail } from '../components/conversation/ContactDetail';
 import { MediaGallery } from '../components/conversation/media-gallery/MediaGallery';
 import type { ItemClickEvent } from '../components/conversation/media-gallery/types/ItemClickEvent';
+import {
+  closeLightbox,
+  isLightboxOpen,
+  showLightbox,
+} from '../util/showLightbox';
 
 type AttachmentOptions = {
   messageId: string;
@@ -1905,28 +1910,23 @@ export class ConversationView extends window.Backbone.View<ConversationModel> {
 
     await message.markViewOnceMessageViewed();
 
-    const closeLightbox = async () => {
+    this.listenTo(message, 'expired', async () => {
       log.info('displayTapToViewMessage: attempting to close lightbox');
 
-      if (!this.lightboxView) {
+      // This isn't really a bullet-proof check because the lightbox could
+      // be open while we're viewing a regular media message
+      if (!isLightboxOpen()) {
         log.info('displayTapToViewMessage: lightbox was already closed');
         return;
       }
 
-      const { lightboxView } = this;
-      this.lightboxView = undefined;
-
       this.stopListening(message);
-      window.Signal.Backbone.Views.Lightbox.hide();
+      closeLightbox();
-      lightboxView.remove();
 
       await deleteTempFile(tempPath);
-    };
+    });
-    this.listenTo(message, 'expired', closeLightbox);
     this.listenTo(message, 'change', () => {
-      if (this.lightboxView) {
+      showLightbox(getProps());
-        this.lightboxView.update(<Lightbox {...getProps()} />);
-      }
     });
 
     const getProps = (): ComponentProps<typeof Lightbox> => {
@@ -1934,7 +1934,7 @@ export class ConversationView extends window.Backbone.View<ConversationModel> {
 
       return {
         close: () => {
-          this.lightboxView?.remove();
+          closeLightbox();
         },
         i18n: window.i18n,
         media: [
@@ -1957,18 +1957,7 @@ export class ConversationView extends window.Backbone.View<ConversationModel> {
       };
     };
 
-    if (this.lightboxView) {
+    showLightbox(getProps());
-      this.lightboxView.remove();
-      this.lightboxView = undefined;
-    }
-
-    this.lightboxView = new ReactWrapperView({
-      className: 'lightbox-wrapper',
-      JSX: <Lightbox {...getProps()} />,
-      onClose: closeLightbox,
-    });
-
-    window.Signal.Backbone.Views.Lightbox.show(this.lightboxView.el);
 
     log.info('displayTapToViewMessage: showed lightbox');
   }
@@ -2084,34 +2073,17 @@ export class ConversationView extends window.Backbone.View<ConversationModel> {
         mediaItem.attachment.path === selectedMediaItem.attachment.path
     );
 
-    if (this.lightboxView) {
+    showLightbox({
-      this.lightboxView.remove();
+      close: closeLightbox,
-      this.lightboxView = undefined;
+      i18n: window.i18n,
-    }
+      getConversation: getConversationSelector(window.reduxStore.getState()),
-
+      media,
-    this.lightboxView = new ReactWrapperView({
+      onForward: messageId => {
-      className: 'lightbox-wrapper',
-      JSX: (
-        <Lightbox
-          close={() => {
-            this.lightboxView?.remove();
-          }}
-          i18n={window.i18n}
-          getConversation={getConversationSelector(
-            window.reduxStore.getState()
-          )}
-          media={media}
-          onForward={messageId => {
         this.showForwardMessageModal(messageId);
-          }}
+      },
-          onSave={onSave}
+      onSave,
-          selectedIndex={selectedIndex >= 0 ? selectedIndex : 0}
+      selectedIndex: selectedIndex >= 0 ? selectedIndex : 0,
-        />
-      ),
-      onClose: () => window.Signal.Backbone.Views.Lightbox.hide(),
     });
-
-    window.Signal.Backbone.Views.Lightbox.show(this.lightboxView.el);
   }
 
   showLightbox({

ts/views/inbox_view.tsx

@@ -1,231 +0,0 @@
-// Copyright 2014-2022 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-import * as React from 'react';
-import * as Backbone from 'backbone';
-import * as log from '../logging/log';
-import type { ConversationModel } from '../models/conversations';
-import { ReactWrapperView } from './ReactWrapperView';
-import { showToast } from '../util/showToast';
-import { strictAssert } from '../util/assert';
-import { WhatsNewLink } from '../components/WhatsNewLink';
-import { ToastStickerPackInstallFailed } from '../components/ToastStickerPackInstallFailed';
-
-window.Whisper = window.Whisper || {};
-const { Whisper } = window;
-
-class ConversationStack extends Backbone.View {
-  public override className = 'conversation-stack';
-
-  private conversationStack: Array<ConversationModel> = [];
-
-  private getTopConversation(): undefined | ConversationModel {
-    return this.conversationStack[this.conversationStack.length - 1];
-  }
-
-  public open(conversation: ConversationModel, messageId: string): void {
-    const topConversation = this.getTopConversation();
-
-    if (!topConversation || topConversation.id !== conversation.id) {
-      const view = new Whisper.ConversationView({
-        model: conversation,
-      });
-      this.listenTo(conversation, 'unload', () => this.onUnload(conversation));
-      this.listenTo(conversation, 'showSafetyNumber', () =>
-        view.showSafetyNumber()
-      );
-      view.$el.appendTo(this.el);
-
-      if (topConversation) {
-        topConversation.trigger('unload', 'opened another conversation');
-      }
-
-      this.conversationStack.push(conversation);
-
-      conversation.trigger('opened', messageId);
-    } else if (messageId) {
-      conversation.trigger('scroll-to-message', messageId);
-    }
-
-    this.render();
-  }
-
-  public unload(): void {
-    this.getTopConversation()?.trigger('unload', 'force unload requested');
-  }
-
-  private onUnload(conversation: ConversationModel) {
-    this.stopListening(conversation);
-    this.conversationStack = this.conversationStack.filter(
-      (c: ConversationModel) => c !== conversation
-    );
-
-    this.render();
-  }
-
-  public override render(): ConversationStack {
-    const isAnyConversationOpen = Boolean(this.conversationStack.length);
-    this.$('.no-conversation-open').toggle(!isAnyConversationOpen);
-
-    // Make sure poppers are positioned properly
-    window.dispatchEvent(new Event('resize'));
-
-    return this;
-  }
-}
-
-const AppLoadingScreen = Whisper.View.extend({
-  template: () => $('#app-loading-screen').html(),
-  className: 'app-loading-screen',
-  updateProgress(count: number) {
-    if (count > 0) {
-      const message = window.i18n('loadingMessages', [count.toString()]);
-      this.$('.message').text(message);
-    }
-  },
-  render_attributes: {
-    message: window.i18n('loading'),
-  },
-});
-
-Whisper.InboxView = Whisper.View.extend({
-  template: () => $('#two-column').html(),
-  className: 'Inbox',
-  initialize(
-    options: {
-      initialLoadComplete?: boolean;
-      window?: typeof window;
-    } = {}
-  ) {
-    this.ready = false;
-    this.render();
-
-    this.conversation_stack = new ConversationStack({
-      el: this.$('.conversation-stack'),
-    });
-
-    this.renderWhatsNew();
-
-    Whisper.events.on('refreshConversation', ({ oldId, newId }) => {
-      const convo = this.conversation_stack.lastConversation;
-      if (convo && convo.get('id') === oldId) {
-        this.conversation_stack.open(newId);
-      }
-    });
-
-    // Close current opened conversation to reload the group information once
-    // linked.
-    Whisper.events.on('setupAsNewDevice', () => {
-      this.conversation_stack.unload();
-    });
-
-    window.Whisper.events.on('showConversation', (id, messageId) => {
-      const conversation = window.ConversationController.get(id);
-      strictAssert(conversation, 'Conversation must be found');
-
-      conversation.setMarkedUnread(false);
-
-      const { openConversationExternal } = window.reduxActions.conversations;
-      if (openConversationExternal) {
-        openConversationExternal(conversation.id, messageId);
-      }
-
-      this.conversation_stack.open(conversation, messageId);
-    });
-
-    window.Whisper.events.on('loadingProgress', count => {
-      const view = this.appLoadingScreen;
-      if (view) {
-        view.updateProgress(count);
-      }
-    });
-
-    if (!options.initialLoadComplete) {
-      this.appLoadingScreen = new AppLoadingScreen();
-      this.appLoadingScreen.render();
-      this.appLoadingScreen.$el.prependTo(this.el);
-      this.startConnectionListener();
-    } else {
-      this.setupLeftPane();
-    }
-
-    Whisper.events.on('pack-install-failed', () => {
-      showToast(ToastStickerPackInstallFailed);
-    });
-  },
-  render_attributes: {
-    welcomeToSignal: window.i18n('welcomeToSignal'),
-    // TODO DESKTOP-1451: add back the selectAContact message
-    selectAContact: '',
-  },
-  events: {
-    click: 'onClick',
-  },
-  renderWhatsNew() {
-    if (this.whatsNewLink) {
-      return;
-    }
-    const { showWhatsNewModal } = window.reduxActions.globalModals;
-    this.whatsNewLink = new ReactWrapperView({
-      JSX: (
-        <WhatsNewLink
-          i18n={window.i18n}
-          showWhatsNewModal={showWhatsNewModal}
-        />
-      ),
-    });
-    this.$('.whats-new-placeholder').append(this.whatsNewLink.el);
-  },
-  setupLeftPane() {
-    if (this.leftPaneView) {
-      return;
-    }
-    this.leftPaneView = new ReactWrapperView({
-      className: 'left-pane-wrapper',
-      JSX: window.Signal.State.Roots.createLeftPane(window.reduxStore),
-    });
-
-    this.$('.left-pane-placeholder').replaceWith(this.leftPaneView.el);
-  },
-  startConnectionListener() {
-    this.interval = setInterval(() => {
-      const status = window.getSocketStatus();
-      switch (status) {
-        case 'CONNECTING':
-          break;
-        case 'OPEN':
-          clearInterval(this.interval);
-          // if we've connected, we can wait for real empty event
-          this.interval = null;
-          break;
-        case 'CLOSING':
-        case 'CLOSED':
-          clearInterval(this.interval);
-          this.interval = null;
-          // if we failed to connect, we pretend we got an empty event
-          this.onEmpty();
-          break;
-        default:
-          log.warn(
-            `startConnectionListener: Found unexpected socket status ${status}; calling onEmpty() manually.`
-          );
-          this.onEmpty();
-          break;
-      }
-    }, 1000);
-  },
-  onEmpty() {
-    this.setupLeftPane();
-
-    const view = this.appLoadingScreen;
-    if (view) {
-      this.appLoadingScreen = null;
-      view.remove();
-
-      const searchInput = document.querySelector(
-        '.LeftPaneSearchInput__input'
-      ) as HTMLElement;
-      searchInput?.focus?.();
-    }
-  },
-});

ts/window.d.ts

@@ -44,7 +44,6 @@ import { createGroupLinkManagement } from './state/roots/createGroupLinkManageme
 import { createGroupV1MigrationModal } from './state/roots/createGroupV1MigrationModal';
 import { createGroupV2JoinModal } from './state/roots/createGroupV2JoinModal';
 import { createGroupV2Permissions } from './state/roots/createGroupV2Permissions';
-import { createLeftPane } from './state/roots/createLeftPane';
 import { createMessageDetail } from './state/roots/createMessageDetail';
 import { createConversationNotificationsSettings } from './state/roots/createConversationNotificationsSettings';
 import { createPendingInvites } from './state/roots/createPendingInvites';
@@ -137,7 +136,6 @@ export declare class WebAudioRecorderClass {
 }
 
 export type SignalCoreType = {
-  Backbone: any;
   Crypto: typeof Crypto;
   Curve: typeof Curve;
   Data: typeof Data;
@@ -187,7 +185,6 @@ export type SignalCoreType = {
       createGroupV1MigrationModal: typeof createGroupV1MigrationModal;
       createGroupV2JoinModal: typeof createGroupV2JoinModal;
       createGroupV2Permissions: typeof createGroupV2Permissions;
-      createLeftPane: typeof createLeftPane;
       createMessageDetail: typeof createMessageDetail;
       createConversationNotificationsSettings: typeof createConversationNotificationsSettings;
       createPendingInvites: typeof createPendingInvites;

ts/windows/main/phase3-post-signal.ts

@@ -8,6 +8,5 @@ import '../../models/conversations';
 
 import '../../backbone/views/whisper_view';
 import '../../views/conversation_view';
-import '../../views/inbox_view';
 import '../../SignalProtocolStore';
 import '../../background';