remove conversation stack

background.html

@@ -41,14 +41,12 @@
       <div class='left-pane-placeholder'></div>
     </div>
     <div id='main-view'>
-      <div class='conversation-stack'>
-        <div class='conversation placeholder'>
-          <div class='conversation-header'></div>
-          <div class='container'>
-            <div class="content session-full-logo">
-              <img src="images/session/brand.svg" class="session-brand-logo" />
-              <img src="images/session/session-text.svg" class="session-text-logo" />
-            </div>
+      <div class='conversation placeholder'>
+        <div class='conversation-header'></div>
+        <div class='container'>
+          <div class="content session-full-logo">
+            <img src="images/session/brand.svg" class="session-brand-logo" />
+            <img src="images/session/session-text.svg" class="session-text-logo" />
           </div>
         </div>
       </div>

background_test.html

@@ -40,14 +40,12 @@
       <div class='left-pane-placeholder'></div>
     </div>
     <div id='main-view'>
-      <div class='conversation-stack'>
-        <div class='conversation placeholder'>
-          <div class='conversation-header'></div>
-          <div class='container'>
-            <div class="content session-full-logo">
-              <img src="images/session/brand.svg" class="session-brand-logo" />
-              <img src="images/session/session-text.svg" class="session-text-logo" />
-            </div>
+      <div class='conversation placeholder'>
+        <div class='conversation-header'></div>
+        <div class='container'>
+          <div class="content session-full-logo">
+            <img src="images/session/brand.svg" class="session-brand-logo" />
+            <img src="images/session/session-text.svg" class="session-text-logo" />
           </div>
         </div>
       </div>

js/modules/loki_app_dot_net_api.js

@@ -1185,7 +1185,7 @@ class LokiPublicChannelAPI {
         moderators.includes(ourNumberDevice);
     }
 
-    if(this.running) {
+    if (this.running) {
       await this.conversation.setModerators(moderators || []);
     }
   }
@@ -1479,7 +1479,10 @@ class LokiPublicChannelAPI {
 
       // update where we last checked
       this.deleteLastId = res.response.meta.max_id;
-      more = res.response.meta.more && res.response.data.length >= params.count && this.running;
+      more =
+        res.response.meta.more &&
+        res.response.data.length >= params.count &&
+        this.running;
     }
   }
 
@@ -1830,7 +1833,6 @@ class LokiPublicChannelAPI {
       return;
     }
 
-
     // slave to primary map for this group of messages
     let slavePrimaryMap = {};
 

js/views/inbox_view.js

@@ -18,34 +18,6 @@
 
   window.Whisper = window.Whisper || {};
 
-  Whisper.ConversationStack = Whisper.View.extend({
-    className: 'conversation-stack',
-    open(conversation) {
-      this.setupSessionConversation(conversation.id);
-      conversation.trigger('opened');
-    },
-    close(conversation) {
-      const $el = $(`#conversation-${conversation.cid}`);
-      if ($el && $el.length > 0) {
-        $el.remove();
-      }
-    },
-    setupSessionConversation() {
-      // Here we set up a full redux store with initial state for our Conversation Root
-
-      this.sessionConversationView = new Whisper.ReactWrapperView({
-        JSX: Signal.State.Roots.createSessionConversation(window.inboxStore),
-        className: 'conversation-item',
-      });
-
-      // Add sessionConversation to the DOM
-      $('#main-view .conversation-stack').html('');
-      $('#main-view .conversation-stack').append(
-        this.sessionConversationView.el
-      );
-    },
-  });
-
   Whisper.AppLoadingScreen = Whisper.View.extend({
     templateName: 'app-loading-screen',
     className: 'app-loading-screen',
@@ -59,11 +31,6 @@
       this.render();
       this.$el.attr('tabindex', '1');
 
-      this.conversation_stack = new Whisper.ConversationStack({
-        el: this.$('.conversation-stack'),
-        model: { window: options.window },
-      });
-
       if (!options.initialLoadComplete) {
         this.appLoadingScreen = new Whisper.AppLoadingScreen();
         this.appLoadingScreen.render();
@@ -97,6 +64,28 @@
       // FIXME: Fix this for new react views
       this.setupLeftPane();
     },
+    open(conversation) {
+      this.setupSessionConversation(conversation.id);
+      conversation.trigger('opened');
+    },
+    close(conversation) {
+      const $el = $(`#conversation-${conversation.cid}`);
+      if ($el && $el.length > 0) {
+        $el.remove();
+      }
+    },
+    setupSessionConversation() {
+      // Here we set up a full redux store with initial state for our Conversation Root
+
+      this.sessionConversationView = new Whisper.ReactWrapperView({
+        JSX: Signal.State.Roots.createSessionConversation(window.inboxStore),
+        className: 'conversation-item',
+      });
+
+      // Add sessionConversation to the DOM
+      $('#main-view').html('');
+      $('#main-view').append(this.sessionConversationView.el);
+    },
     async setupLeftPane() {
       // Here we set up a full redux store with initial state for our LeftPane Root
       const convoCollection = getConversations();
@@ -292,7 +281,7 @@
         conversation.updateProfileName();
       }
 
-      this.conversation_stack.open(conversation);
+      this.open(conversation);
     },
   });
 

stylesheets/_conversation.scss

@@ -161,22 +161,6 @@
   margin-bottom: -5px;
 }
 
-.conversation-stack-border {
-  border-bottom: solid;
-  border-color: white;
-  border-width: 4px;
-}
-
-.conversation-stack-no-border {
-  border-bottom: none;
-}
-
-.dark-theme {
-  .conversation-stack-border {
-    border-color: black;
-  }
-}
-
 .bottom-bar .preview-wrapper {
   margin-top: 3px;
   margin-inline-start: 37px;

stylesheets/_index.scss

@@ -1,8 +1,3 @@
-.conversation-stack {
-  position: relative;
-}
-
-.conversation-stack,
 .new-conversation,
 .inbox,
 .gutter {
@@ -68,7 +63,6 @@
 }
 
 .expired {
-  .conversation-stack,
   .gutter {
     height: calc(100% - 48px);
   }
@@ -208,18 +202,6 @@ h4.section-toggle,
   flex: 1;
 }
 
-.conversation-stack {
-  .conversation {
-    display: none;
-  }
-  .placeholder {
-    height: 100%;
-  }
-  .conversation:first-child {
-    display: block;
-  }
-}
-
 .tool-bar {
   color: $color-light-90;
 

stylesheets/_session.scss

@@ -66,11 +66,6 @@ textarea {
   display: flex;
   flex-grow: 1;
   position: relative;
-
-  .conversation-stack {
-    display: block;
-    width: 100%;
-  }
 }
 
 .button-group > div {

stylesheets/_session_left_pane.scss

@@ -337,9 +337,12 @@ $session-compose-margin: 20px;
   }
 }
 
-.conversation.placeholder .container {
-  display: flex;
-  height: 100%;
+.conversation.placeholder {
+  margin: auto;
+  .container {
+    display: flex;
+    height: 100%;
+  }
 }
 
 .session-full-logo {

test/index.html

@@ -29,14 +29,12 @@
       <div class="network-status-container"></div>
       <div class="left-pane-placeholder"></div>
     </div>
-    <div class="conversation-stack">
-      <div class="conversation placeholder">
-        <div class="conversation-header"></div>
-        <div class="container">
-          <div class="content session-full-logo">
-            <img src="images/session/brand.svg" class="session-brand-logo" />
-            <img src="images/session/session-text.svg" class="session-text-logo" />
-          </div>
+    <div class="conversation placeholder">
+      <div class="conversation-header"></div>
+      <div class="container">
+        <div class="content session-full-logo">
+          <img src="images/session/brand.svg" class="session-brand-logo" />
+          <img src="images/session/session-text.svg" class="session-text-logo" />
         </div>
       </div>
     </div>

test/views/inbox_view_test.js

@@ -36,7 +36,7 @@ describe('InboxView', () => {
 
   describe('the conversation stack', () => {
     it('should be rendered', () => {
-      assert.ok(inboxView.$('.conversation-stack').length === 1);
+      assert.ok(inboxView.length === 1);
     });
 
     describe('opening a conversation', () => {
@@ -47,7 +47,7 @@ describe('InboxView', () => {
           triggeredOpenedCount += 1;
         });
 
-        inboxView.conversation_stack.open(conversation);
+        inboxView.open(conversation);
       });
 
       it('should trigger an opened event', () => {
@@ -56,7 +56,7 @@ describe('InboxView', () => {
 
       describe('and then opening it again immediately', () => {
         before(() => {
-          inboxView.conversation_stack.open(conversation);
+          inboxView.open(conversation);
         });
 
         it('should trigger the opened event again', () => {

ts/components/MainViewController.tsx

@@ -20,22 +20,20 @@ import { ToastUtils } from '../session/utils';
 export class MessageView extends React.Component {
   public render() {
     return (
-      <div className="conversation-stack">
-        <div className="conversation placeholder">
-          <div className="conversation-header" />
-          <div className="container">
-            <div className="content session-full-logo">
-              <img
-                src="images/session/brand.svg"
-                className="session-brand-logo"
-                alt="full-brand-logo"
-              />
-              <img
-                src="images/session/session-text.svg"
-                className="session-text-logo"
-                alt="full-brand-logo"
-              />
-            </div>
+      <div className="conversation placeholder">
+        <div className="conversation-header" />
+        <div className="container">
+          <div className="content session-full-logo">
+            <img
+              src="images/session/brand.svg"
+              className="session-brand-logo"
+              alt="full-brand-logo"
+            />
+            <img
+              src="images/session/session-text.svg"
+              className="session-text-logo"
+              alt="full-brand-logo"
+            />
           </div>
         </div>
       </div>

ts/components/session/LeftPaneMessageSection.tsx

@@ -445,7 +445,9 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
           window.i18n('connectToServerSuccess')
         );
       } else {
-        throw new Error('Open group joined but the corresponding server does not exist');
+        throw new Error(
+          'Open group joined but the corresponding server does not exist'
+        );
       }
       this.setState({ loading: false });
       const openGroupConversation = await OpenGroup.getConversation(serverUrl);

ts/components/session/conversation/SessionConversation.tsx

@@ -177,9 +177,9 @@ export class SessionConversation extends React.Component<Props, State> {
   public componentDidUpdate(prevProps: Props, prevState: State) {
     const { conversationKey: oldKey } = prevProps;
     try {
-    const oldConversationModel = window.ConversationController.getOrThrow(
-      oldKey
-    );
+      const oldConversationModel = window.ConversationController.getOrThrow(
+        oldKey
+      );
       oldConversationModel.off('change', this.refreshMessages);
     } catch (e) {
       window.log.warn(e);

ts/session/types/OpenGroup.ts

@@ -94,9 +94,7 @@ export class OpenGroup {
    * @param onLoading Callback function to be called once server begins connecting
    * @returns `OpenGroup` if connection success or if already connected
    */
-  public static async join(
-    server: string
-  ): Promise<OpenGroup | undefined> {
+  public static async join(server: string): Promise<OpenGroup | undefined> {
     const prefixedServer = OpenGroup.prefixify(server);
     if (!OpenGroup.validate(server)) {
       return;