feat: Adds the ability to have custom view for conversations (#3666)

* feat: Adds the ability to save custom filters and display folders on the sidebar

* Minor fixes

* Review fixes

* Review fixes

* i18n fixes

* Shows conversations when the user click on the folder sidebar item

* Spacing fixes

* Review fixes

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

app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue

@@ -40,6 +40,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    customViews: {
+      type: Array,
+      default: () => [],
+    },
     menuConfig: {
       type: Object,
       default: () => {},
@@ -150,11 +154,35 @@ export default {
         })),
       };
     },
+    customViewsSection() {
+      return {
+        icon: 'folder',
+        label: 'CUSTOM_VIEWS',
+        hasSubMenu: true,
+        key: 'custom_view',
+        children: this.customViews
+          .filter(view => view.filter_type === 'conversation')
+          .map(view => ({
+            id: view.id,
+            label: view.name,
+            truncateLabel: true,
+            toState: frontendURL(
+              `accounts/${this.accountId}/custom_view/${view.id}`
+            ),
+          })),
+      };
+    },
     additionalSecondaryMenuItems() {
       let conversationMenuItems = [this.inboxSection, this.labelSection];
       if (this.teams.length) {
         conversationMenuItems = [this.teamSection, ...conversationMenuItems];
       }
+      if (this.customViews.length) {
+        conversationMenuItems = [
+          this.customViewsSection,
+          ...conversationMenuItems,
+        ];
+      }
       return {
         conversations: conversationMenuItems,
         contacts: [this.contactLabelSection],

app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue

@@ -7,7 +7,7 @@
       v-else
       class="secondary-menu--title secondary-menu--link fs-small"
       :class="computedClass"
-      :to="menuItem.toState"
+      :to="menuItem && menuItem.toState"
     >
       <fluent-icon
         :icon="menuItem.icon"