feat: Add inbox view under feature flag on the sidebar (#9049)

Co-authored-by: Pranav <pranav@chatwoot.com>
2025-11-01 11:37:58 +00:00 · 2024-03-08 07:57:39 +05:30
parent b6bf6bd414
commit 0685e04aae
18 changed files with 340 additions and 256 deletions
--- a/app/javascript/dashboard/components/buttons/ResolveAction.vue
+++ b/app/javascript/dashboard/components/buttons/ResolveAction.vue
@@ -48,7 +48,7 @@
      v-on-clickaway="closeDropdown"
      class="dropdown-pane dropdown-pane--open"
    >
-      <woot-dropdown-menu>
+      <woot-dropdown-menu class="mb-0">
        <woot-dropdown-item v-if="!isPending">
          <woot-button
            variant="clear"
--- a/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
+++ b/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
@@ -2,6 +2,15 @@ import { FEATURE_FLAGS } from '../../../../featureFlags';
 import { frontendURL } from '../../../../helper/URLHelper';

 const primaryMenuItems = accountId => [
+  {
+    icon: 'mail-inbox',
+    key: 'inboxView',
+    label: 'INBOX_VIEW',
+    featureFlag: FEATURE_FLAGS.INBOX_VIEW,
+    toState: frontendURL(`accounts/${accountId}/inbox-view`),
+    toStateName: 'inbox_view',
+    roles: ['administrator', 'agent'],
+  },
  {
    icon: 'chat',
    key: 'conversations',
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@@ -8,7 +8,7 @@
      :chat="currentChat"
      :is-inbox-view="isInboxView"
      :is-contact-panel-open="isContactPanelOpen"
-      :show-back-button="isOnExpandedLayout"
+      :show-back-button="isOnExpandedLayout && !isInboxView"
      @contact-panel-toggle="onToggleContactPanel"
    />
    <woot-tabs
@@ -35,7 +35,10 @@
        :is-contact-panel-open="isContactPanelOpen"
        @contact-panel-toggle="onToggleContactPanel"
      />
-      <empty-state v-else :is-on-expanded-layout="isOnExpandedLayout" />
+      <empty-state
+        v-if="!currentChat.id && !isInboxView"
+        :is-on-expanded-layout="isOnExpandedLayout"
+      />
      <div
        v-show="showContactPanel"
        class="conversation-sidebar-wrap basis-full sm:basis-[17.5rem] md:basis-[18.75rem] lg:basis-[19.375rem] xl:basis-[20.625rem] 2xl:basis-[25rem] rtl:border-r border-slate-50 dark:border-slate-700 h-auto overflow-auto z-10 flex-shrink-0 flex-grow-0"
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -3,7 +3,8 @@
    class="bg-white dark:bg-slate-900 flex justify-between items-center py-2 px-4 border-b border-slate-50 dark:border-slate-800/50 flex-col md:flex-row"
  >
    <div
-      class="flex-1 w-full min-w-0 flex flex-col md:flex-row items-center justify-center"
+      class="flex-1 w-full min-w-0 flex flex-col items-center justify-center"
+      :class="isInboxView ? 'sm:flex-row' : 'md:flex-row'"
    >
      <div class="flex justify-start items-center min-w-0 w-fit max-w-full">
        <back-button
@@ -87,7 +88,6 @@ import Thumbnail from '../Thumbnail.vue';
 import wootConstants from 'dashboard/constants/globals';
 import { conversationListPageURL } from 'dashboard/helper/URLHelper';
 import { snoozedReopenTime } from 'dashboard/helper/snoozeHelpers';
-import { frontendURL } from 'dashboard/helper/URLHelper';

 export default {
  components: {
@@ -128,9 +128,6 @@ export default {
        params: { accountId, inbox_id: inboxId, label, teamId },
        name,
      } = this.$route;
-      if (this.isInboxView) {
-        return frontendURL(`accounts/${accountId}/inbox`);
-      }
      return conversationListPageURL({
        accountId,
        inboxId,
--- a/app/javascript/dashboard/i18n/locale/en/inbox.json
+++ b/app/javascript/dashboard/i18n/locale/en/inbox.json
@@ -4,17 +4,18 @@
      "TITLE": "Inbox",
      "DISPLAY_DROPDOWN": "Display",
      "LOADING": "Fetching notifications",
-      "EOF": "All notifications loaded 🎉",
      "404": "There are no active notifications in this group.",
      "NO_NOTIFICATIONS": "No notifications",
      "NOTE": "Notifications from all subscribed inboxes",
+      "NO_MESSAGES_AVAILABLE": "Oops! Not able to fetch messages",
      "SNOOZED_UNTIL": "Snoozed until",
      "SNOOZED_UNTIL_TOMORROW": "Snoozed until tomorrow",
      "SNOOZED_UNTIL_NEXT_WEEK": "Snoozed until next week"
    },
    "ACTION_HEADER": {
      "SNOOZE": "Snooze notification",
-      "DELETE": "Delete notification"
+      "DELETE": "Delete notification",
+      "BACK": "Back"
    },
    "TYPES": {
      "CONVERSATION_MENTION": "You have been mentioned in a conversation",
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -195,6 +195,7 @@
  "SIDEBAR": {
    "CURRENTLY_VIEWING_ACCOUNT": "Currently viewing:",
    "SWITCH": "Switch",
+    "INBOX_VIEW": "Inbox View",
    "CONVERSATIONS": "Conversations",
    "INBOX": "Inbox",
    "ALL_CONVERSATIONS": "All Conversations",
--- a/app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js
@@ -1,28 +1,9 @@
 /* eslint arrow-body-style: 0 */
 import { frontendURL } from '../../../helper/URLHelper';
 const ConversationView = () => import('./ConversationView');
-const InboxView = () => import('../inbox/InboxView.vue');

 export default {
  routes: [
-    {
-      path: frontendURL('accounts/:accountId/inbox-view'),
-      name: 'inbox_view',
-      roles: ['administrator', 'agent'],
-      component: InboxView,
-      props: () => {
-        return { inboxId: 0 };
-      },
-    },
-    {
-      path: frontendURL('accounts/:accountId/inbox-view/:conversation_id'),
-      name: 'inbox_view_conversation',
-      roles: ['administrator', 'agent'],
-      component: InboxView,
-      props: route => {
-        return { inboxId: 0, conversationId: route.params.conversation_id };
-      },
-    },
    {
      path: frontendURL('accounts/:accountId/dashboard'),
      name: 'home',
--- a/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
@@ -3,6 +3,7 @@ import conversation from './conversation/conversation.routes';
 import { routes as searchRoutes } from '../../modules/search/search.routes';
 import { routes as contactRoutes } from './contacts/routes';
 import { routes as notificationRoutes } from './notifications/routes';
+import { routes as inboxRoutes } from './inbox/routes';
 import { frontendURL } from '../../helper/URLHelper';
 import helpcenterRoutes from './helpcenter/helpcenter.routes';

@@ -16,6 +17,7 @@ export default {
      path: frontendURL('accounts/:account_id'),
      component: AppContainer,
      children: [
+        ...inboxRoutes,
        ...conversation.routes,
        ...settings.routes,
        ...contactRoutes,
--- a/app/javascript/dashboard/routes/dashboard/inbox/InboxEmptyState.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/InboxEmptyState.vue
@@ -0,0 +1,40 @@
+<template>
+  <div
+    class="text-center bg-slate-25 dark:bg-slate-800 justify-center w-full h-full hidden md:flex items-center"
+  >
+    <span v-if="uiFlags.isFetching" class="spinner my-4" />
+    <div v-else class="flex flex-col items-center gap-2">
+      <fluent-icon
+        icon="mail-inbox"
+        size="40"
+        class="text-slate-600 dark:text-slate-400"
+      />
+      <span class="text-slate-500 text-sm font-medium dark:text-slate-300">
+        {{ emptyMessage }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+export default {
+  props: {
+    emptyStateMessage: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    ...mapGetters({
+      uiFlags: 'notifications/getUIFlags',
+    }),
+    emptyMessage() {
+      if (this.emptyStateMessage) {
+        return this.emptyStateMessage;
+      }
+      return this.$t('INBOX.LIST.NOTE');
+    },
+  },
+};
+</script>
--- a/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
@@ -1,9 +1,14 @@
 <template>
+  <section class="flex w-full h-full bg-white dark:bg-slate-900">
    <div
-    class="flex flex-col h-full w-full ltr:border-r border-slate-50 dark:border-slate-800/50"
-    :class="isOnExpandedLayout ? '' : 'min-w-[360px] max-w-[360px]'"
+      class="flex flex-col h-full w-full md:min-w-[360px] md:max-w-[360px] ltr:border-r border-slate-50 dark:border-slate-800/50"
+      :class="!currentNotificationId ? 'flex' : 'hidden md:flex'"
    >
-    <inbox-list-header @filter="onFilterChange" />
+      <inbox-list-header
+        :is-context-menu-open="isInboxContextMenuOpen"
+        @filter="onFilterChange"
+        @redirect="redirectToInbox"
+      />
      <div
        ref="notificationList"
        class="flex flex-col w-full h-[calc(100%-56px)] overflow-x-hidden overflow-y-auto"
@@ -11,10 +16,13 @@
        <inbox-card
          v-for="notificationItem in notifications"
          :key="notificationItem.id"
+          :active="currentNotificationId === notificationItem.id"
          :notification-item="notificationItem"
          @mark-notification-as-read="markNotificationAsRead"
          @mark-notification-as-unread="markNotificationAsUnRead"
          @delete-notification="deleteNotification"
+          @context-menu-open="isInboxContextMenuOpen = true"
+          @context-menu-close="isInboxContextMenuOpen = false"
        />
        <div v-if="uiFlags.isFetching" class="text-center">
          <span class="spinner mt-4 mb-4" />
@@ -25,12 +33,6 @@
        >
          {{ $t('INBOX.LIST.NO_NOTIFICATIONS') }}
        </p>
-      <p
-        v-if="showEndOfListMessage"
-        class="text-center text-slate-400 dark:text-slate-400 p-4"
-      >
-        {{ $t('INBOX.LIST.EOF') }}
-      </p>
        <intersection-observer
          v-if="!showEndOfList && !uiFlags.isFetching"
          :options="infiniteLoaderOptions"
@@ -38,6 +40,8 @@
        />
      </div>
    </div>
+    <router-view />
+  </section>
 </template>

 <script>
@@ -49,6 +53,7 @@ import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import IntersectionObserver from 'dashboard/components/IntersectionObserver.vue';
 import alertMixin from 'shared/mixins/alertMixin';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
+
 export default {
  components: {
    InboxCard,
@@ -56,16 +61,6 @@ export default {
    IntersectionObserver,
  },
  mixins: [alertMixin, uiSettingsMixin],
-  props: {
-    conversationId: {
-      type: [String, Number],
-      default: 0,
-    },
-    isOnExpandedLayout: {
-      type: Boolean,
-      default: false,
-    },
-  },
  data() {
    return {
      infiniteLoaderOptions: {
@@ -76,6 +71,8 @@ export default {
      status: '',
      type: '',
      sortOrder: wootConstants.INBOX_SORT_BY.NEWEST,
+      isInboxContextMenuOpen: false,
+      notificationIdToSnooze: null,
    };
  },
  computed: {
@@ -85,6 +82,9 @@ export default {
      uiFlags: 'notifications/getUIFlags',
      notification: 'notifications/getFilteredNotifications',
    }),
+    currentNotificationId() {
+      return Number(this.$route.params.notification_id);
+    },
    inboxFilters() {
      return {
        page: this.page,
@@ -102,9 +102,6 @@ export default {
    showEmptyState() {
      return !this.uiFlags.isFetching && !this.notifications.length;
    },
-    showEndOfListMessage() {
-      return this.showEndOfList && this.notifications.length;
-    },
  },
  mounted() {
    this.setSavedFilter();
@@ -115,13 +112,11 @@ export default {
      this.page = 1;
      this.$store.dispatch('notifications/clear');
      const filter = this.inboxFilters;
-
      this.$store.dispatch('notifications/index', filter);
    },
    redirectToInbox() {
-      if (!this.conversationId) return;
      if (this.$route.name === 'inbox_view') return;
-      this.$router.push({ name: 'inbox_view' });
+      this.$router.replace({ name: 'inbox_view' });
    },
    loadMoreNotifications() {
      if (this.uiFlags.isAllNotificationsLoaded) return;
@@ -177,13 +172,14 @@ export default {
        });
    },
    onFilterChange(option) {
-      if (option.type === wootConstants.INBOX_FILTER_TYPE.STATUS) {
+      const { STATUS, TYPE, SORT_ORDER } = wootConstants.INBOX_FILTER_TYPE;
+      if (option.type === STATUS) {
        this.status = option.selected ? option.key : '';
      }
-      if (option.type === wootConstants.INBOX_FILTER_TYPE.TYPE) {
+      if (option.type === TYPE) {
        this.type = option.selected ? option.key : '';
      }
-      if (option.type === wootConstants.INBOX_FILTER_TYPE.SORT_ORDER) {
+      if (option.type === SORT_ORDER) {
        this.sortOrder = option.key;
      }
      this.fetchNotifications();
--- a/app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue
@@ -1,127 +1,102 @@
 <template>
-  <section class="flex w-full h-full bg-white dark:bg-slate-900">
-    <inbox-list
-      v-show="showConversationList"
-      :conversation-id="conversationId"
-      :is-on-expanded-layout="isOnExpandedLayout"
+  <div class="h-full w-full md:w-[calc(100%-360px)]">
+    <div v-if="showEmptyState" class="flex w-full h-full">
+      <inbox-empty-state
+        :empty-state-message="$t('INBOX.LIST.NO_MESSAGES_AVAILABLE')"
      />
-    <div
-      v-if="showInboxMessageView"
-      class="flex flex-col h-full"
-      :class="isOnExpandedLayout ? 'w-full' : 'w-[calc(100%-360px)]'"
-    >
+    </div>
+    <div v-else class="flex flex-col h-full w-full">
      <inbox-item-header
-        :total-length="totalNotifications"
+        class="flex-1"
+        :total-length="totalNotificationCount"
        :current-index="activeNotificationIndex"
        :active-notification="activeNotification"
        @next="onClickNext"
        @prev="onClickPrev"
      />
+      <div
+        v-if="isConversationLoading"
+        class="flex items-center h-[calc(100%-56px)] justify-center bg-slate-25 dark:bg-slate-800"
+      >
+        <span class="spinner my-4" />
+      </div>
      <conversation-box
+        v-else
        class="h-[calc(100%-56px)]"
        is-inbox-view
        :inbox-id="inboxId"
        :is-contact-panel-open="isContactPanelOpen"
-        :is-on-expanded-layout="isOnExpandedLayout"
+        :is-on-expanded-layout="false"
        @contact-panel-toggle="onToggleContactPanel"
      />
    </div>
-    <div
-      v-if="!showInboxMessageView && !isOnExpandedLayout"
-      class="text-center bg-slate-25 dark:bg-slate-800 justify-center w-full h-full flex items-center"
-    >
-      <span v-if="uiFlags.isFetching" class="spinner mt-4 mb-4" />
-      <div v-else class="flex flex-col items-center gap-2">
-        <fluent-icon
-          icon="mail-inbox"
-          size="40"
-          class="text-slate-600 dark:text-slate-400"
-        />
-        <span class="text-slate-500 text-sm font-medium dark:text-slate-300">
-          {{ $t('INBOX.LIST.NOTE') }}
-        </span>
  </div>
-    </div>
-  </section>
 </template>

 <script>
 import { mapGetters } from 'vuex';
-import InboxList from './InboxList.vue';
 import InboxItemHeader from './components/InboxItemHeader.vue';
 import ConversationBox from 'dashboard/components/widgets/conversation/ConversationBox.vue';
+import InboxEmptyState from './InboxEmptyState.vue';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
-import wootConstants from 'dashboard/constants/globals';
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';

 export default {
  components: {
-    InboxList,
    InboxItemHeader,
+    InboxEmptyState,
    ConversationBox,
  },
  mixins: [uiSettingsMixin],
-  props: {
-    inboxId: {
-      type: [String, Number],
-      default: 0,
-    },
-    conversationId: {
-      type: [String, Number],
-      default: 0,
-    },
+  data() {
+    return {
+      isConversationLoading: false,
+    };
  },
  computed: {
    ...mapGetters({
      currentAccountId: 'getCurrentAccountId',
-      notifications: 'notifications/getNotifications',
+      notification: 'notifications/getFilteredNotifications',
      currentChat: 'getSelectedChat',
-      allConversation: 'getAllConversations',
+      activeNotificationById: 'notifications/getNotificationById',
+      conversationById: 'getConversationById',
      uiFlags: 'notifications/getUIFlags',
+      meta: 'notifications/getMeta',
    }),
+    notifications() {
+      return this.notification({
+        sortOrder: this.activeSortOrder,
+      });
+    },
+    inboxId() {
+      return Number(this.$route.params.inboxId);
+    },
+    notificationId() {
+      return Number(this.$route.params.notification_id);
+    },
    activeNotification() {
-      return this.notifications.find(
-        n => n.primary_actor.id === Number(this.conversationId)
-      );
+      return this.activeNotificationById(this.notificationId);
    },
-    isInboxViewEnabled() {
-      return this.$store.getters['accounts/isFeatureEnabledGlobally'](
-        this.currentAccountId,
-        FEATURE_FLAGS.INBOX_VIEW
-      );
+    conversationId() {
+      return this.activeNotification?.primary_actor?.id;
    },
-    showConversationList() {
-      return this.isOnExpandedLayout ? !this.conversationId : true;
+    totalNotificationCount() {
+      return this.meta.count;
    },
-    isFetchingInitialData() {
-      return this.uiFlags.isFetching && !this.notifications.length;
-    },
-    showInboxMessageView() {
+    showEmptyState() {
      return (
-        Boolean(this.conversationId) &&
-        Boolean(this.currentChat.id) &&
-        !this.isFetchingInitialData
+        !this.conversationId ||
+        (!this.notifications?.length && this.uiFlags.isFetching)
      );
    },
-    totalNotifications() {
-      return this.notifications?.length ?? 0;
-    },
    activeNotificationIndex() {
-      const conversationId = Number(this.conversationId);
-      const notificationIndex = this.notifications.findIndex(
-        n => n.primary_actor.id === conversationId
-      );
-      return notificationIndex >= 0 ? notificationIndex + 1 : 0;
+      return this.notifications?.findIndex(n => n.id === this.notificationId);
    },
-    isOnExpandedLayout() {
-      const {
-        LAYOUT_TYPES: { CONDENSED },
-      } = wootConstants;
-      const { conversation_display_type: conversationDisplayType = CONDENSED } =
-        this.uiSettings;
-      return conversationDisplayType !== CONDENSED;
+    activeSortOrder() {
+      const { inbox_filter_by: filterBy = {} } = this.uiSettings;
+      const { sort_by: sortBy } = filterBy;
+      return sortBy || 'desc';
    },
    isContactPanelOpen() {
      if (this.currentChat.id) {
@@ -135,29 +110,29 @@ export default {
  watch: {
    conversationId: {
      immediate: true,
-      handler() {
+      handler(newVal, oldVal) {
+        if (newVal !== oldVal) {
          this.fetchConversationById();
+        }
      },
    },
  },
  mounted() {
-    // Open inbox view if inbox view feature is enabled, else redirect to dashboard
-    // TODO: Remove this code once inbox view feature is enabled for all accounts
-    if (!this.isInboxViewEnabled) {
-      this.$router.push({
-        name: 'home',
-      });
-    }
    this.$store.dispatch('agents/get');
  },
  methods: {
    async fetchConversationById() {
-      if (!this.conversationId) return;
-      const chat = this.findConversation();
-      if (!chat) {
-        await this.$store.dispatch('getConversation', this.conversationId);
+      if (!this.notificationId || !this.conversationId) return;
+      this.$store.dispatch('clearSelectedState');
+      const existingChat = this.findConversation();
+      if (existingChat) {
+        this.setActiveChat(existingChat);
+        return;
      }
+      this.isConversationLoading = true;
+      await this.$store.dispatch('getConversation', this.conversationId);
      this.setActiveChat();
+      this.isConversationLoading = false;
    },
    setActiveChat() {
      const selectedConversation = this.findConversation();
@@ -169,20 +144,31 @@ export default {
        });
    },
    findConversation() {
-      const conversationId = Number(this.conversationId);
-      return this.allConversation.find(c => c.id === conversationId);
+      return this.conversationById(this.conversationId);
    },
    navigateToConversation(activeIndex, direction) {
-      const indexOffset = direction === 'next' ? 0 : -2;
-      const targetNotification = this.notifications[activeIndex + indexOffset];
+      let updatedIndex;
+      if (direction === 'prev' && activeIndex) {
+        updatedIndex = activeIndex - 1;
+      } else if (
+        direction === 'next' &&
+        activeIndex < this.totalNotificationCount
+      ) {
+        updatedIndex = activeIndex + 1;
+      }
+      const targetNotification = this.notifications[updatedIndex];
      if (targetNotification) {
+        this.openNotification(targetNotification);
+      }
+    },
+    openNotification(notification) {
      const {
        id,
        primary_actor_id: primaryActorId,
        primary_actor_type: primaryActorType,
-          primary_actor: { id: conversationId, meta: { unreadCount } = {} },
+        primary_actor: { meta: { unreadCount } = {} },
        notification_type: notificationType,
-        } = targetNotification;
+      } = notification;

      this.$track(INBOX_EVENTS.OPEN_CONVERSATION_VIA_INBOX, {
        notificationType,
@@ -197,9 +183,8 @@ export default {

      this.$router.push({
        name: 'inbox_view_conversation',
-          params: { conversation_id: conversationId },
+        params: { notification_id: id },
      });
-      }
    },
    onClickNext() {
      this.navigateToConversation(this.activeNotificationIndex, 'next');
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue
@@ -3,7 +3,7 @@
    role="button"
    class="flex flex-col ltr:pl-5 rtl:pl-3 rtl:pr-5 ltr:pr-3 gap-2.5 py-3 w-full border-b border-slate-50 dark:border-slate-800/50 hover:bg-slate-25 dark:hover:bg-slate-800 cursor-pointer"
    :class="
-      isInboxCardActive
+      active
        ? 'bg-slate-25 dark:bg-slate-800 click-animation'
        : 'bg-white dark:bg-slate-900'
    "
@@ -23,26 +23,21 @@
      </div>
    </div>

-    <div class="flex flex-row justify-between items-center w-full">
-      <div class="flex gap-1.5 items-center max-w-[calc(100%-70px)]">
+    <div class="flex flex-row justify-between items-center w-full gap-2">
      <Thumbnail
        v-if="assigneeMeta"
        :src="assigneeMeta.thumbnail"
        :username="assigneeMeta.name"
        size="16px"
-          class="relative bottom-0.5"
      />
-        <div class="flex min-w-0">
      <span
-            class="text-slate-800 dark:text-slate-50 text-sm overflow-hidden text-ellipsis whitespace-nowrap"
+        class="flex-1 text-slate-800 dark:text-slate-50 text-sm overflow-hidden text-ellipsis whitespace-nowrap"
        :class="isUnread ? 'font-medium' : 'font-normal'"
      >
        {{ pushTitle }}
      </span>
-        </div>
-      </div>
      <span
-        class="font-medium max-w-[60px] text-slate-600 dark:text-slate-300 text-xs whitespace-nowrap"
+        class="font-medium text-slate-600 dark:text-slate-300 text-xs whitespace-nowrap"
      >
        {{ lastActivityAt }}
      </span>
@@ -61,6 +56,7 @@
    />
  </div>
 </template>
+
 <script>
 import PriorityIcon from './PriorityIcon.vue';
 import StatusIcon from './StatusIcon.vue';
@@ -84,6 +80,10 @@ export default {
      type: Object,
      default: () => {},
    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
  },
  data() {
    return {
@@ -95,9 +95,6 @@ export default {
    primaryActor() {
      return this.notificationItem?.primary_actor;
    },
-    isInboxCardActive() {
-      return this.$route.params.conversation_id === this.primaryActor?.id;
-    },
    inbox() {
      return this.$store.getters['inboxes/getInbox'](
        this.primaryActor.inbox_id
@@ -166,11 +163,11 @@ export default {
        id,
        primary_actor_id: primaryActorId,
        primary_actor_type: primaryActorType,
-        primary_actor: { id: conversationId, inbox_id: inboxId },
+        primary_actor: { inbox_id: inboxId },
        notification_type: notificationType,
      } = notification;

-      if (this.$route.params.conversation_id !== conversationId) {
+      if (this.$route.params.notification_id !== id) {
        this.$track(INBOX_EVENTS.OPEN_CONVERSATION_VIA_INBOX, {
          notificationType,
        });
@@ -184,13 +181,14 @@ export default {

        this.$router.push({
          name: 'inbox_view_conversation',
-          params: { inboxId, conversation_id: conversationId },
+          params: { inboxId, notification_id: id },
        });
      }
    },
    closeContextMenu() {
      this.isContextMenuOpen = false;
      this.contextMenuPosition = { x: null, y: null };
+      this.$emit('context-menu-close');
    },
    openContextMenu(e) {
      this.closeContextMenu();
@@ -200,6 +198,7 @@ export default {
        y: e.pageY || e.clientY,
      };
      this.isContextMenuOpen = true;
+      this.$emit('context-menu-open');
    },
    handleAction(key) {
      switch (key) {
@@ -218,17 +217,21 @@ export default {
  },
 };
 </script>
+
 <style scoped>
 .click-animation {
  animation: click-animation 0.3s ease-in-out;
 }
+
@keyframes click-animation {
  0% {
    transform: scale(1);
  }
+
  50% {
    transform: scale(0.99);
  }
+
  100% {
    transform: scale(1);
  }
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
@@ -2,10 +2,20 @@
  <div
    class="flex gap-2 py-2 ltr:pl-4 rtl:pl-2 h-14 ltr:pr-2 rtl:pr-4 rtl:border-r justify-between items-center w-full border-b border-slate-50 dark:border-slate-800/50"
  >
+    <woot-button
+      variant="clear link"
+      class="flex md:hidden !pt-1 !pb-1 rounded-md ltr:pr-1 rtl:pl-1 !no-underline"
+      size="medium"
+      color-scheme="primary"
+      icon="chevron-left"
+      @click="onClickGoToInboxList"
+    >
+      {{ $t('INBOX.ACTION_HEADER.BACK') }}
+    </woot-button>
    <pagination-button
      v-if="totalLength > 1"
      :total-length="totalLength"
-      :current-index="currentIndex"
+      :current-index="currentIndex + 1"
      @next="onClickNext"
      @prev="onClickPrev"
    />
@@ -16,6 +26,7 @@
        size="small"
        color-scheme="secondary"
        icon="snooze"
+        class="[&>span]:hidden md:[&>span]:inline-flex"
        @click="openSnoozeNotificationModal"
      >
        {{ $t('INBOX.ACTION_HEADER.SNOOZE') }}
@@ -25,6 +36,7 @@
        size="small"
        color-scheme="secondary"
        variant="hollow"
+        class="[&>span]:hidden md:[&>span]:inline-flex"
        @click="deleteNotification"
      >
        {{ $t('INBOX.ACTION_HEADER.DELETE') }}
@@ -41,6 +53,7 @@
    </woot-modal>
  </div>
 </template>
+
 <script>
 import { mapGetters } from 'vuex';
 import { getUnixTime } from 'date-fns';
@@ -73,14 +86,10 @@ export default {
    },
  },
  data() {
-    return {
-      showCustomSnoozeModal: false,
-    };
+    return { showCustomSnoozeModal: false };
  },
  computed: {
-    ...mapGetters({
-      meta: 'notifications/getMeta',
-    }),
+    ...mapGetters({ meta: 'notifications/getMeta' }),
  },
  mounted() {
    bus.$on(CMD_SNOOZE_NOTIFICATION, this.onCmdSnoozeNotification);
@@ -96,15 +105,17 @@ export default {
    hideCustomSnoozeModal() {
      this.showCustomSnoozeModal = false;
    },
-    snoozeNotification(snoozedUntil) {
-      this.$store
-        .dispatch('notifications/snooze', {
+    async snoozeNotification(snoozedUntil) {
+      try {
+        await this.$store.dispatch('notifications/snooze', {
          id: this.activeNotification?.id,
          snoozedUntil,
-        })
-        .then(() => {
-          this.showAlert(this.$t('INBOX.ALERTS.SNOOZE'));
        });
+
+        this.showAlert(this.$t('INBOX.ALERTS.SNOOZE'));
+      } catch (error) {
+        // Silently fail without any change in the UI
+      }
    },
    onCmdSnoozeNotification(snoozeType) {
      if (snoozeType === wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME) {
@@ -132,7 +143,7 @@ export default {
        .then(() => {
          this.showAlert(this.$t('INBOX.ALERTS.DELETE'));
        });
-      this.$router.push({ name: 'inbox_view' });
+      this.$router.replace({ name: 'inbox_view' });
    },
    onClickNext() {
      this.$emit('next');
@@ -140,6 +151,9 @@ export default {
    onClickPrev() {
      this.$emit('prev');
    },
+    onClickGoToInboxList() {
+      this.$router.replace({ name: 'inbox_view' });
+    },
  },
 };
 </script>
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
@@ -26,7 +26,7 @@
        <inbox-display-menu
          v-if="showInboxDisplayMenu"
          v-on-clickaway="openInboxDisplayMenu"
-          class="absolute top-8"
+          class="absolute top-9 ltr:left-0 rtl:right-0"
          @filter="onFilterChange"
        />
      </div>
@@ -49,7 +49,7 @@
      <inbox-option-menu
        v-if="showInboxOptionMenu"
        v-on-clickaway="openInboxOptionsMenu"
-        class="absolute top-9"
+        class="absolute top-9 ltr:right-0 ltr:md:right-[unset] rtl:left-0 rtl:md:left-[unset]"
        @option-click="onInboxOptionMenuClick"
      />
    </div>
@@ -69,12 +69,29 @@ export default {
    InboxDisplayMenu,
  },
  mixins: [clickaway, alertMixin],
+  props: {
+    isContextMenuOpen: {
+      type: Boolean,
+      default: false,
+    },
+  },
  data() {
    return {
      showInboxDisplayMenu: false,
      showInboxOptionMenu: false,
    };
  },
+  watch: {
+    isContextMenuOpen: {
+      handler(val) {
+        if (val) {
+          this.showInboxDisplayMenu = false;
+          this.showInboxOptionMenu = false;
+        }
+      },
+      immediate: true,
+    },
+  },
  methods: {
    markAllRead() {
      this.$track(INBOX_EVENTS.MARK_ALL_NOTIFICATIONS_AS_READ);
@@ -99,22 +116,19 @@ export default {
      this.showInboxOptionMenu = !this.showInboxOptionMenu;
    },
    onInboxOptionMenuClick(key) {
-      this.showInboxOptionMenu = false;
-      if (key === 'mark_all_read') {
-        this.markAllRead();
-      }
-      if (key === 'delete_all') {
-        this.deleteAll();
-      }
-      if (key === 'delete_all_read') {
-        this.deleteAllRead();
-      }
+      const actions = {
+        mark_all_read: () => this.markAllRead(),
+        delete_all: () => this.deleteAll(),
+        delete_all_read: () => this.deleteAllRead(),
+      };
+      const action = actions[key];
+      if (action) action();
+      this.$emit('redirect');
    },
    onFilterChange(option) {
      this.$emit('filter', option);
      this.showInboxDisplayMenu = false;
-      if (this.$route.name === 'inbox_view') return;
-      this.$router.push({ name: 'inbox_view' });
+      this.$emit('redirect');
    },
  },
 };
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/PaginationButton.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/PaginationButton.vue
@@ -19,7 +19,7 @@
      />
    </div>
    <div class="flex items-center gap-1 whitespace-nowrap">
-      <span class="text-sm font-medium text-gray-600">
+      <span class="text-sm font-medium text-gray-600 tabular-nums">
        {{ totalLength <= 1 ? '1' : currentIndex }}
      </span>
      <span
@@ -28,7 +28,7 @@
      >
        /
      </span>
-      <span v-if="totalLength > 1" class="text-sm text-slate-400">
+      <span v-if="totalLength > 1" class="text-sm text-slate-400 tabular-nums">
        {{ totalLength }}
      </span>
    </div>
--- a/app/javascript/dashboard/routes/dashboard/inbox/routes.js
+++ b/app/javascript/dashboard/routes/dashboard/inbox/routes.js
@@ -0,0 +1,25 @@
+import { frontendURL } from 'dashboard/helper/URLHelper';
+const InboxListView = () => import('./InboxList.vue');
+const InboxDetailView = () => import('./InboxView.vue');
+const InboxEmptyStateView = () => import('./InboxEmptyState.vue');
+
+export const routes = [
+  {
+    path: frontendURL('accounts/:accountId/inbox-view'),
+    component: InboxListView,
+    children: [
+      {
+        path: '',
+        name: 'inbox_view',
+        component: InboxEmptyStateView,
+        roles: ['administrator', 'agent'],
+      },
+      {
+        path: ':notification_id',
+        name: 'inbox_view_conversation',
+        component: InboxDetailView,
+        roles: ['administrator', 'agent'],
+      },
+    ],
+  },
+];
--- a/app/javascript/dashboard/store/modules/notifications/getters.js
+++ b/app/javascript/dashboard/store/modules/notifications/getters.js
@@ -11,6 +11,9 @@ export const getters = {
    );
    return sortedNotifications;
  },
+  getNotificationById: $state => id => {
+    return $state.records[id] || {};
+  },
  getUIFlags($state) {
    return $state.uiFlags;
  },
--- a/app/javascript/dashboard/store/modules/specs/notifications/getters.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/notifications/getters.spec.js
@@ -44,6 +44,16 @@ describe('#getters', () => {
    ]);
  });

+  it('getNotificationById', () => {
+    const state = {
+      records: {
+        1: { id: 1 },
+      },
+    };
+    expect(getters.getNotificationById(state)(1)).toEqual({ id: 1 });
+    expect(getters.getNotificationById(state)(2)).toEqual({});
+  });
+
  it('getUIFlags', () => {
    const state = {
      uiFlags: {