chore: Inbox view improvements (#8866)

* chore: Inbox view improvements

* chore: Review fix

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

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

@@ -66,7 +66,7 @@
         </div>
       </div>
       <div
-        class="header-actions-wrap items-center flex flex-row flex-grow justify-end mt-3 lg:mt-0"
+        class="header-actions-wrap items-center flex flex-row flex-grow justify-end mt-3 lg:mt-0 rtl:relative rtl:left-6"
         :class="{ 'justify-end': isContactPanelOpen }"
       >
         <more-actions :conversation-id="currentChat.id" />

app/javascript/dashboard/i18n/locale/en/inbox.json

@@ -6,6 +6,7 @@
       "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",
       "SNOOZED_UNTIL": "Snoozed until",
       "SNOOZED_UNTIL_TOMORROW": "Snoozed until tomorrow",

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue

@@ -182,6 +182,7 @@ import { getCountryFlag } from 'dashboard/helper/flag';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import {
   isAConversationRoute,
+  isAInboxViewRoute,
   getConversationDashboardRoute,
 } from '../../../../helper/routeHelpers';
 
@@ -303,6 +304,10 @@ export default {
           this.$router.push({
             name: getConversationDashboardRoute(this.$route.name),
           });
+        } else if (isAInboxViewRoute(this.$route.name)) {
+          this.$router.push({
+            name: 'inbox',
+          });
         } else if (this.$route.name !== 'contacts_dashboard') {
           this.$router.push({
             name: 'contacts_dashboard',

app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue

@@ -20,8 +20,14 @@
         <span class="spinner mt-4 mb-4" />
       </div>
       <p
-        v-if="showEndOfList"
+        v-if="showEmptyState"
-        class="text-center text-slate-300 dark:text-slate-400 p-4"
+        class="text-center text-slate-400 text-sm dark:text-slate-400 p-4 font-medium"
+      >
+        {{ $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>
@@ -77,6 +83,12 @@ export default {
     showEndOfList() {
       return this.uiFlags.isAllNotificationsLoaded && !this.uiFlags.isFetching;
     },
+    showEmptyState() {
+      return !this.uiFlags.isFetching && !this.records.length;
+    },
+    showEndOfListMessage() {
+      return this.showEndOfList && this.records.length;
+    },
   },
   mounted() {
     this.$store.dispatch('notifications/clear');

app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue

@@ -5,7 +5,11 @@
       :conversation-id="conversationId"
       :is-on-expanded-layout="isOnExpandedLayout"
     />
-    <div v-if="showInboxMessageView" class="flex flex-col w-full h-full">
+    <div
+      v-if="showInboxMessageView"
+      class="flex flex-col h-full"
+      :class="isOnExpandedLayout ? 'w-full' : 'w-[calc(100%-360px)]'"
+    >
       <inbox-item-header
         :total-length="totalNotifications"
         :current-index="activeNotificationIndex"
@@ -27,13 +31,13 @@
       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-row items-center gap-1">
+      <div v-else class="flex flex-col items-center gap-2">
         <fluent-icon
           icon="mail-inbox"
-          size="18"
+          size="40"
-          class="text-slate-700 dark:text-slate-400"
+          class="text-slate-600 dark:text-slate-400"
         />
-        <span class="text-slate-700 text-sm font-medium dark:text-slate-400">
+        <span class="text-slate-500 text-sm font-medium dark:text-slate-300">
           {{ $t('INBOX.LIST.NOTE') }}
         </span>
       </div>

app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     role="button"
-    class="flex flex-col pl-5 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="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
         ? 'bg-slate-25 dark:bg-slate-800 click-animation'
@@ -13,7 +13,7 @@
     <div class="flex relative items-center justify-between w-full">
       <div
         v-if="isUnread"
-        class="absolute -left-3.5 flex w-2 h-2 rounded bg-woot-500 dark:bg-woot-500"
+        class="absolute ltr:-left-3.5 rtl:-right-3.5 flex w-2 h-2 rounded bg-woot-500 dark:bg-woot-500"
       />
       <InboxNameAndId :inbox="inbox" :conversation-id="primaryActor.id" />
 

app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex gap-2 py-2 pl-4 h-14 pr-2 justify-between items-center w-full border-b border-slate-50 dark:border-slate-800/50"
+    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"
   >
     <pagination-button
       v-if="totalLength > 1"

app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex w-full pl-4 pr-2 py-2 h-14 justify-between items-center border-b border-slate-50 dark:border-slate-800/50"
+    class="flex w-full ltr:pl-4 rtl:pl-2 rtl:pr-4 ltr:pr-2 py-2 h-14 justify-between items-center border-b border-slate-50 dark:border-slate-800/50"
   >
     <div class="flex items-center gap-1.5">
       <h1 class="font-medium text-slate-900 dark:text-slate-25 text-xl">