chore: Move conversation header above sidebar (#1835)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue

@@ -1,16 +1,34 @@
 <template>
-  <div :class="conversationClass">
-    <messages-view
+  <div class="conversation-details-wrap">
+    <conversation-header
       v-if="currentChat.id"
-      :inbox-id="inboxId"
+      :chat="currentChat"
       :is-contact-panel-open="isContactPanelOpen"
       @contact-panel-toggle="onToggleContactPanel"
     />
-    <empty-state v-else />
+    <div class="messages-and-sidebar">
+      <messages-view
+        v-if="currentChat.id"
+        :inbox-id="inboxId"
+        :is-contact-panel-open="isContactPanelOpen"
+        @contact-panel-toggle="onToggleContactPanel"
+      />
+      <empty-state v-else />
+
+      <div v-show="showContactPanel" class="conversation-sidebar-wrap">
+        <contact-panel
+          v-if="showContactPanel"
+          :conversation-id="currentChat.id"
+          :on-toggle="onToggleContactPanel"
+        />
+      </div>
+    </div>
   </div>
 </template>
 <script>
 import { mapGetters } from 'vuex';
+import ContactPanel from 'dashboard/routes/dashboard/conversation/ContactPanel';
+import ConversationHeader from './ConversationHeader';
 import EmptyState from './EmptyState';
 import MessagesView from './MessagesView';
 
@@ -18,6 +36,8 @@ export default {
   components: {
     EmptyState,
     MessagesView,
+    ContactPanel,
+    ConversationHeader,
   },
 
   props: {
@@ -35,10 +55,8 @@ export default {
     ...mapGetters({
       currentChat: 'getSelectedChat',
     }),
-    conversationClass() {
-      return `medium-${
-        this.isContactPanelOpen ? '5' : '8'
-      } columns conversation-wrap`;
+    showContactPanel() {
+      return this.isContactPanelOpen && this.currentChat.id;
     },
   },
   methods: {
@@ -48,3 +66,50 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+@import '~dashboard/assets/scss/app.scss';
+
+.conversation-details-wrap {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border-left: 1px solid var(--color-border);
+}
+
+.messages-and-sidebar {
+  display: flex;
+  background: var(--color-background-light);
+  margin: 0;
+  height: auto;
+  flex: 1 1;
+  overflow: hidden;
+}
+
+.conversation-sidebar-wrap {
+  height: auto;
+  flex: 0 1;
+  overflow: hidden;
+  overflow: auto;
+  background: white;
+  flex-shrink: 0;
+  flex-basis: 28rem;
+
+  @include breakpoint(large up) {
+    flex-basis: 31em;
+  }
+
+  @include breakpoint(xlarge up) {
+    flex-basis: 32em;
+  }
+
+  @include breakpoint(xxlarge up) {
+    flex-basis: 36rem;
+  }
+
+  &::v-deep .contact--panel {
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+  }
+}
+</style>

app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="conv-header">
-    <div class="user" :class="{ hide: isContactPanelOpen }">
+    <div class="user">
       <Thumbnail
         :src="currentContact.thumbnail"
         size="40px"
@@ -9,7 +9,7 @@
         :status="currentContact.availability_status"
       />
       <div class="user--profile__meta">
-        <h3 v-if="!isContactPanelOpen" class="user--name text-truncate">
+        <h3 class="user--name text-truncate">
           {{ currentContact.name }}
         </h3>
         <button
@@ -17,9 +17,11 @@
           @click="$emit('contact-panel-toggle')"
         >
           {{
-            `${$t('CONVERSATION.HEADER.OPEN')} ${$t(
-              'CONVERSATION.HEADER.DETAILS'
-            )}`
+            `${
+              isContactPanelOpen
+                ? $t('CONVERSATION.HEADER.CLOSE')
+                : $t('CONVERSATION.HEADER.OPEN')
+            } ${$t('CONVERSATION.HEADER.DETAILS')}`
           }}
         </button>
       </div>

app/javascript/dashboard/components/widgets/conversation/EmptyState.vue

@@ -77,14 +77,49 @@ export default {
       ) {
         return 'inbox-empty-state';
       }
-      return 'columns full-height conv-empty-state';
+      return 'columns conv-empty-state';
     },
   },
 };
 </script>
-<style scoped>
+<style lang="scss" scoped>
 .inbox-empty-state {
   height: 100%;
   overflow: auto;
 }
+
+.current-chat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+
+  div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+
+    img {
+      margin: var(--space-normal);
+      width: 10rem;
+    }
+
+    span {
+      font-size: var(--font-size-small);
+      font-weight: var(--font-weight-medium);
+      text-align: center;
+    }
+  }
+}
+
+.conv-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
 </style>

app/javascript/dashboard/components/widgets/conversation/MessagesView.vue

@@ -1,10 +1,5 @@
 <template>
-  <div class="view-box columns">
-    <conversation-header
-      :chat="currentChat"
-      :is-contact-panel-open="isContactPanelOpen"
-      @contact-panel-toggle="onToggleContactPanel"
-    />
+  <div class="view-box fill-height">
     <div v-if="!currentChat.can_reply" class="banner messenger-policy--banner">
       <span>
         {{ $t('CONVERSATION.CANNOT_REPLY') }}
@@ -86,7 +81,6 @@
 <script>
 import { mapGetters } from 'vuex';
 
-import ConversationHeader from './ConversationHeader';
 import ReplyBox from './ReplyBox';
 import Message from './Message';
 import conversationMixin from '../../../mixins/conversations';
@@ -95,7 +89,6 @@ import { BUS_EVENTS } from 'shared/constants/busEvents';
 
 export default {
   components: {
-    ConversationHeader,
     Message,
     ReplyBox,
   },
@@ -316,4 +309,9 @@ export default {
 .spinner--container {
   min-height: var(--space-jumbo);
 }
+
+.view-box.fill-height {
+  height: auto;
+  flex-grow: 1;
+}
 </style>