App view change working

background.html

@@ -48,13 +48,15 @@
       <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'>
-            <img src='images/session/brand.svg' class='session-filter-color-green session-logo-128' />
-            <p class='session-logo-text'>SESSION</p>
+    <div id='main-view'>
+      <div class='conversation-stack'>
+        <div class='conversation placeholder'>
+          <div class='conversation-header'></div>
+          <div class='container'>
+            <div class='content'>
+              <img src='images/session/brand.svg' class='session-filter-color-green session-logo-128' />
+              <p class='session-logo-text'>SESSION</p>
+            </div>
           </div>
         </div>
       </div>

js/views/inbox_view.js

@@ -47,11 +47,10 @@
       }
     },
     showToast({ message }) {
-      const toast = new Whisper.MessageToastView({
-        message,
+      window.pushToast({
+        title: message,
+        type: 'success',
       });
-      toast.$el.appendTo(this.$el);
-      toast.render();
     },
     showConfirmationDialog({ title, message, onOk, onCancel }) {
       window.confirmationDialog({

stylesheets/_session.scss

@@ -192,6 +192,20 @@ $session_message-container-border-radius: 5px;
   z-index: 1;
 }
 
+
+#main-view {
+  height: 100vh;
+  display: flex;
+  flex-grow: 1;
+
+  .conversation-stack {
+    display: block;
+    width: 100%;
+  }
+}
+
+
+
 .button-group > div {
   margin-left: 5px;
   margin-right: 5px;
@@ -898,6 +912,41 @@ label {
   }
 }
 
+.session-settings {
+  &-list{
+    width: 100%;
+  }
+
+  &-item {
+    font-size: 15px;
+    font-weight: bold;
+    color: $session-color-white;
+
+    height: 90px;
+    padding: 0px 15px;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  
+    &__info {
+      background-color: $session-shade-1;
+    }
+    
+    &__description {
+      font-size: 13px;
+      @include session-color-subtle($session-color-white);
+    }
+
+    &:not(:last-child){
+      border-bottom: 1px solid $session-shade-3;
+    }
+  }
+
+}
+
+
+
 #qr svg {
   width: $session-modal-size-sm;
   height: $session-modal-size-sm;

ts/components/LeftPane.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { MainViewController } from './MainViewController';
+
 import { ActionsPanel, SectionType } from './session/ActionsPanel';
 import { LeftPaneMessageSection } from './session/LeftPaneMessageSection';
 
@@ -209,6 +211,8 @@ export class LeftPane extends React.Component<Props, State> {
         clearSearch={clearSearch}
       />
     );
+
+    // Render Message View Also!
   }
 
   private renderContactSection() {
@@ -240,8 +244,6 @@ export class LeftPane extends React.Component<Props, State> {
   }
 
   private renderSettingSection() {
-    const {} = this.props;
-
     return <LeftPaneSettingSection />;
   }
 }

ts/components/MainViewController.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { SessionSettingListItem } from './session/settings/SessionSettingListItem';
+
+// interface State {
+// }
+
+// interface Props {
+
+// }
+
+// export class LeftPane extends React.Component<Props, State> {
+//   public state = {
+//   };
+
+//   public constructor(props: any) {
+//     super(props);
+//   }
+
+
+//   public render(): JSX.Element {
+//     return (
+//       <div>
+//           Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis, pariatur dicta placeat corporis similique modi quod veritatis voluptatum impedit tempore voluptas nostrum magni aspernatur iure, labore ipsam odit possimus exercitationem?
+//       </div>
+//     );
+//   }
+
+// }
+
+export class MainViewController {
+    public static renderMessageView() {
+        const element = (
+            <div className="conversation-stack">
+                <div className="conversation placeholder">
+                    <div className="conversation-header"></div>
+                    <div className="container">
+                        <div className="content">
+                            <img src="images/session/brand.svg" className="session-filter-color-green session-logo-128"/>
+                            <p className="session-logo-text">SESSION</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+        
+        ReactDOM.render(element, document.getElementById('main-view'));
+    }
+
+    public static renderSettingsView() {
+        const element = (
+            <div className="session-settings-list">
+                <SessionSettingListItem />
+            </div>
+        );
+        
+        ReactDOM.render(element, document.getElementById('main-view'));
+    }
+}

ts/components/session/LeftPaneMessageSection.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
+
 import { AutoSizer, List } from 'react-virtualized';
 
+import { MainViewController } from '../MainViewController';
 import {
   ConversationListItem,
   PropsData as ConversationListItemPropsType,
@@ -155,6 +157,9 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
   }
 
   public render(): JSX.Element {
+
+    MainViewController.renderMessageView();
+
     return (
       <div>
         {this.renderHeader()}

ts/components/session/LeftPaneSettingSection.tsx

@@ -3,6 +3,8 @@ import classNames from 'classnames';
 
 import { LeftPane } from '../LeftPane';
 
+import { MainViewController } from '../MainViewController';
+
 import {
   SessionButton,
   SessionButtonColor,
@@ -11,8 +13,6 @@ import {
 
 import { SessionIcon, SessionIconSize, SessionIconType } from './icon';
 import { SessionSearchInput } from './SessionSearchInput';
-import { Session } from 'inspector';
-
 
 export enum SessionSettingCategory {
   Account = 'account',
@@ -35,7 +35,7 @@ export class LeftPaneSettingSection extends React.Component<Props, State> {
     super(props);
 
     this.state = {
-      settingCategory: SessionSettingCategory.Privacy,
+      settingCategory: SessionSettingCategory.Account,
       searchQuery: '',
     };
 
@@ -46,10 +46,11 @@ export class LeftPaneSettingSection extends React.Component<Props, State> {
   }
 
   public render(): JSX.Element {
+    MainViewController.renderSettingsView();
+
     return (
       <div className="left-pane-setting-section">
         {this.renderHeader()}
-
         {this.renderSettings()}
       </div>
     );

ts/components/session/SessionSeedModal.tsx

@@ -213,7 +213,6 @@ export class SessionSeedModal extends React.Component<Props, State> {
       title: window.i18n('copiedMnemonic'),
       type: 'success',
       id: 'copySeedToast',
-      shouldFade: false,
     });
   }
 

ts/components/session/settings/SessionSettingListItem.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { SessionToggle } from '../SessionToggle';
+
+interface Props {
+}
+
+
+// export settings = {
+//   id
+//   category
+//   name
+//   description
+//   type (toggle, dropdown, etc)
+// }
+
+
+export class SessionSettingListItem extends React.Component<Props> {
+  public constructor(props: Props) {
+    super(props);
+    this.state = {
+    };
+  }
+
+
+
+  public render(): JSX.Element {
+    return (
+      <div className="session-settings-item">
+        <div className="session-settings-item__info">
+          <div className="session-settings-item__title">
+                Typing indicators
+          </div>
+
+          <div className="session-settings-item__description">
+              This is the description of the super usper awesome setting item
+          </div>
+        </div>
+
+        <div className="session-sessings-item__selection">
+          <SessionToggle active={true} />
+        </div>
+        
+      </div>
+    );
+  }
+
+}