feat: Improve email rendering, introduce a new layout for emails (#5039)

Co-authored-by: Fayaz Ahmed <15716057+fayazara@users.noreply.github.com>

app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue

@@ -1,18 +1,25 @@
 <template>
   <section class="conversation-page">
     <chat-list
+      :show-conversation-list="showConversationList"
       :conversation-inbox="inboxId"
       :label="label"
       :team-id="teamId"
       :conversation-type="conversationType"
       :folders-id="foldersId"
+      :is-on-expanded-layout="isOnExpandedLayout"
       @conversation-load="onConversationLoad"
     >
-      <pop-over-search />
+      <pop-over-search
+        :is-on-expanded-layout="isOnExpandedLayout"
+        @toggle-conversation-layout="toggleConversationLayout"
+      />
     </chat-list>
     <conversation-box
+      v-if="showMessageView"
       :inbox-id="inboxId"
       :is-contact-panel-open="isContactPanelOpen"
+      :is-on-expanded-layout="isOnExpandedLayout"
       @contact-panel-toggle="onToggleContactPanel"
     />
   </section>
@@ -25,6 +32,7 @@ import ConversationBox from '../../../components/widgets/conversation/Conversati
 import PopOverSearch from './search/PopOverSearch';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
+import wootConstants from 'dashboard/constants';
 
 export default {
   components: {
@@ -69,6 +77,21 @@ export default {
       chatList: 'getAllConversations',
       currentChat: 'getSelectedChat',
     }),
+    showConversationList() {
+      return this.isOnExpandedLayout ? !this.conversationId : true;
+    },
+    showMessageView() {
+      return this.conversationId ? true : !this.isOnExpandedLayout;
+    },
+    isOnExpandedLayout() {
+      const {
+        LAYOUT_TYPES: { CONDENSED },
+      } = wootConstants;
+      const {
+        conversation_display_type: conversationDisplayType = CONDENSED,
+      } = this.uiSettings;
+      return conversationDisplayType !== CONDENSED;
+    },
     isContactPanelOpen() {
       if (this.currentChat.id) {
         const {
@@ -101,6 +124,17 @@ export default {
       this.$store.dispatch('setActiveInbox', this.inboxId);
       this.setActiveChat();
     },
+    toggleConversationLayout() {
+      const { LAYOUT_TYPES } = wootConstants;
+      const {
+        conversation_display_type: conversationDisplayType = LAYOUT_TYPES.CONDENSED,
+      } = this.uiSettings;
+      const newViewType =
+        conversationDisplayType === LAYOUT_TYPES.CONDENSED
+          ? LAYOUT_TYPES.EXPANDED
+          : LAYOUT_TYPES.CONDENSED;
+      this.updateUISettings({ conversation_display_type: newViewType });
+    },
     fetchConversationIfUnavailable() {
       if (!this.conversationId) {
         return;

app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue

@@ -11,6 +11,10 @@
         :placeholder="$t('CONVERSATION.SEARCH_MESSAGES')"
         @focus="onSearch"
       />
+      <switch-layout
+        :is-on-expanded-layout="isOnExpandedLayout"
+        @toggle="$emit('toggle-conversation-layout')"
+      />
     </div>
     <div v-if="showSearchBox" class="results-wrap">
       <div class="show-results">
@@ -55,10 +59,11 @@ import { mapGetters } from 'vuex';
 import timeMixin from '../../../../mixins/time';
 import ResultItem from './ResultItem';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
-
+import SwitchLayout from './SwitchLayout.vue';
 export default {
   components: {
     ResultItem,
+    SwitchLayout,
   },
 
   directives: {
@@ -71,6 +76,13 @@ export default {
 
   mixins: [timeMixin, messageFormatterMixin, clickaway],
 
+  props: {
+    isOnExpandedLayout: {
+      type: Boolean,
+      required: true,
+    },
+  },
+
   data() {
     return {
       searchTerm: '',

app/javascript/dashboard/routes/dashboard/conversation/search/SwitchLayout.vue

@@ -0,0 +1,59 @@
+<template>
+  <button
+    v-tooltip.left="$t('CONVERSATION.SWITCH_VIEW_LAYOUT')"
+    class="layout-switch__container"
+    @click="toggle"
+  >
+    <div
+      class="layout-switch__btn left"
+      :class="{ active: !isOnExpandedLayout }"
+    >
+      <fluent-icon icon="panel-sidebar" :size="16" />
+    </div>
+    <div
+      class="layout-switch__btn right"
+      :class="{ active: isOnExpandedLayout }"
+    >
+      <fluent-icon icon="panel-contract" :size="16" />
+    </div>
+  </button>
+</template>
+
+<script>
+export default {
+  props: {
+    isOnExpandedLayout: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    toggle() {
+      this.$emit('toggle');
+    },
+  },
+};
+</script>
+
+<style lang="scss" soped>
+.layout-switch__container {
+  align-items: center;
+  background-color: var(--s-100);
+  border-radius: var(--border-radius-medium);
+  cursor: pointer;
+  display: flex;
+  padding: var(--space-micro);
+
+  .layout-switch__btn {
+    border-radius: var(--border-radius-normal);
+    color: var(--s-400);
+    display: flex;
+    padding: var(--space-micro) var(--space-smaller);
+
+    &.active {
+      background-color: var(--white);
+      color: var(--w-500);
+    }
+  }
+}
+</style>