feat: Updates sidebar to accomodate sub menu (#3416)

* Enhancement: Updates sidebar to a new design (#2733)

* feat: Changes primary navbar to new design (#2598)

* feat: updates design for secondary navbar (#2612)

* Changes primary nvbar to new design

* Updates design for contexual sidebar

* Fixes issues with JSON

* Remove duplication of notificatons in Navigation

* Fixes broken tests

* Fixes broken tests

* Update app/javascript/dashboard/components/layout/AvailabilityStatus.vue

* Update app/javascript/dashboard/components/layout/AvailabilityStatus.vue

* Update app/javascript/dashboard/components/layout/SidebarItem.vue

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

* Update app/javascript/dashboard/components/layout/SidebarItem.vue

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

* Update app/javascript/dashboard/modules/sidebar/components/Secondary.vue

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

* Chore: Update design changes to features

* Fixes menu transitions and refactors code

* Refactors sidebar routeing logic

* lint error fixes

* Fixes dropdown menu styles

* Fixes secondary new item links

* Fixes lint scss issues

* fixes linter issues

* Fixes broken test cases

* Update AvailabilityStatus.spec.js

* Review feedbacks

* Fixes add modal for label

* Add tooltip for primary menu item

* Tooltip for notifications

* Adds tooltip for primary menu items

* Review fixes

* Review fixes

* Fix merge issues

* fixes logo size for login pages

* fixes Merge breaks with styles

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/dashboard/components/widgets/Thumbnail.vue

@@ -116,6 +116,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    shouldShowStatusAlways: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -124,6 +128,7 @@ export default {
   },
   computed: {
     showStatusIndicator() {
+      if (this.shouldShowStatusAlways) return true;
       return this.status === 'online' || this.status === 'busy';
     },
     avatarSize() {
@@ -210,5 +215,9 @@ export default {
   .user-online-status--busy {
     background: $warning-color;
   }
+
+  .user-online-status--offline {
+    background: var(--s-500);
+  }
 }
 </style>

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

@@ -20,7 +20,7 @@ export default {
     background: var(--g-400);
   }
   &__offline {
-    background: var(--b-600);
+    background: var(--s-500);
   }
   &__busy {
     background: var(--y-700);

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

@@ -51,6 +51,7 @@
         @toggle-user-mention="toggleUserMention"
         @toggle-canned-menu="toggleCannedMenu"
       />
+      <h1>{{ message }}</h1>
     </div>
     <div v-if="hasAttachments" class="attachment-preview-box" @paste="onPaste">
       <attachment-preview

app/javascript/dashboard/components/widgets/conversation/bubble/File.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="file message-text__wrap">
     <div class="icon-wrap">
-      <fluent-icon icon="document" class="file--icon" />
+      <fluent-icon icon="document" class="file--icon" size="32" />
     </div>
     <div class="meta">
       <h5 class="text-block-title">
         {{ decodeURI(fileName) }}
       </h5>
       <a
-        class="download clear button small"
+        class="download clear link button small"
         rel="noreferrer noopener nofollow"
         target="_blank"
         :href="url"