From 53927b5a72d2d015fcfbbb2a0f2b303a671132c0 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Wed, 7 Feb 2024 13:14:58 +0530
Subject: [PATCH] chore: Inbox view improvements (#8866)

* chore: Inbox view improvements

* chore: Review fix

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
---
 .../widgets/conversation/ConversationHeader.vue  |  2 +-
 .../dashboard/i18n/locale/en/inbox.json          |  1 +
 .../conversation/contact/ContactInfo.vue         |  5 +++++
 .../routes/dashboard/inbox/InboxList.vue         | 16 ++++++++++++++--
 .../routes/dashboard/inbox/InboxView.vue         | 14 +++++++++-----
 .../dashboard/inbox/components/InboxCard.vue     |  4 ++--
 .../inbox/components/InboxItemHeader.vue         |  2 +-
 .../inbox/components/InboxListHeader.vue         |  2 +-
 8 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
index ce398e9e6..42172eb23 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/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" />
diff --git a/app/javascript/dashboard/i18n/locale/en/inbox.json b/app/javascript/dashboard/i18n/locale/en/inbox.json
index 8cb947e86..dcac5459f 100644
--- a/app/javascript/dashboard/i18n/locale/en/inbox.json
+++ b/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",
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
index 0133ceed6..79d96517d 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/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',
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue b/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
index 898c63dde..64ff7936b 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
@@ -20,8 +20,14 @@
         <span class="spinner mt-4 mb-4" />
       </div>
       <p
-        v-if="showEndOfList"
-        class="text-center text-slate-300 dark:text-slate-400 p-4"
+        v-if="showEmptyState"
+        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');
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue b/app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue
index 5f60f9d2e..23f32cbbe 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue
+++ b/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"
-          class="text-slate-700 dark:text-slate-400"
+          size="40"
+          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>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue
index ab0081183..c514f24f7 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue
+++ b/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" />
 
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
index 619c13b97..14882f84c 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
+++ b/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"
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
index 2ad981fec..c7486cbf6 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
+++ b/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">