feat: Inbox page view (#8841)

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

@@ -6,6 +6,7 @@
     <conversation-header
       v-if="currentChat.id"
       :chat="currentChat"
+      :is-inbox-view="isInboxView"
       :is-contact-panel-open="isContactPanelOpen"
       :show-back-button="isOnExpandedLayout"
       @contact-panel-toggle="onToggleContactPanel"
@@ -30,6 +31,7 @@
       <messages-view
         v-if="currentChat.id"
         :inbox-id="inboxId"
+        :is-inbox-view="isInboxView"
         :is-contact-panel-open="isContactPanelOpen"
         @contact-panel-toggle="onToggleContactPanel"
       />
@@ -80,6 +82,10 @@ export default {
       default: '',
       required: false,
     },
+    isInboxView: {
+      type: Boolean,
+      default: false,
+    },
     isContactPanelOpen: {
       type: Boolean,
       default: true,

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

@@ -87,6 +87,7 @@ import Thumbnail from '../Thumbnail.vue';
 import wootConstants from 'dashboard/constants/globals';
 import { conversationListPageURL } from 'dashboard/helper/URLHelper';
 import { conversationReopenTime } from 'dashboard/helper/snoozeHelpers';
+import { frontendURL } from 'dashboard/helper/URLHelper';
 
 export default {
   components: {
@@ -109,6 +110,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    isInboxView: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     ...mapGetters({
@@ -123,6 +128,9 @@ export default {
         params: { accountId, inbox_id: inboxId, label, teamId },
         name,
       } = this.$route;
+      if (this.isInboxView) {
+        return frontendURL(`accounts/${accountId}/inbox`);
+      }
       return conversationListPageURL({
         accountId,
         inboxId,

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

@@ -12,7 +12,10 @@
         variant="smooth"
         size="tiny"
         color-scheme="secondary"
-        class="rounded-bl-calc rtl:rotate-180 rounded-tl-calc fixed top-[9.5rem] md:top-[6.25rem] z-10 bg-white dark:bg-slate-700 border-slate-50 dark:border-slate-600 border-solid border border-r-0 box-border"
+        class="rounded-bl-calc rtl:rotate-180 rounded-tl-calc fixed z-10 bg-white dark:bg-slate-700 border-slate-50 dark:border-slate-600 border-solid border border-r-0 box-border"
+        :class="
+          isInboxView ? 'top-52 md:top-40' : 'top-[9.5rem] md:top-[6.25rem]'
+        "
         :icon="isRightOrLeftIcon"
         @click="onToggleContactPanel"
       />
@@ -142,6 +145,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    isInboxView: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data() {