feat: Add new sidebar for Chatwoot V4 (#10291)

This PR has the initial version of the new sidebar targeted for the next major redesign of the app. This PR includes the following changes

- Components in the `layouts-next` and `base-next` directories in `dashboard/components`
- Two generic components `Avatar` and `Icon`
- `SidebarGroup` component to manage expandable sidebar groups with nested navigation items. This includes handling active states, transitions, and permissions.
- `SidebarGroupHeader` component to display the header of each navigation group with optional icons and active state indication.
- `SidebarGroupLeaf` component for individual navigation items within a group, supporting icons and active state.
- `SidebarGroupSeparator` component to visually separate nested navigation items. (They look a lot like header)
- `SidebarGroupEmptyLeaf` component to render empty state of any navigation groups.

----

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Pranav <pranavrajs@gmail.com>

app/javascript/dashboard/store/modules/specs/customViews/mutations.spec.js

@@ -4,34 +4,122 @@ import { customViewList, updateCustomViewList } from './fixtures';
 
 describe('#mutations', () => {
   describe('#SET_CUSTOM_VIEW', () => {
-    it('set custom view records', () => {
-      const state = { records: [] };
-      mutations[types.SET_CUSTOM_VIEW](state, customViewList);
-      expect(state.records).toEqual(customViewList);
+    it('[Conversation] set custom view records', () => {
+      const state = {
+        records: [],
+        conversation: { records: [] },
+        contact: { records: [] },
+      };
+      mutations[types.SET_CUSTOM_VIEW](state, {
+        data: customViewList,
+        filterType: 'conversation',
+      });
+      expect(state.conversation.records).toEqual(customViewList);
+      expect(state.contact.records).toEqual([]);
+    });
+
+    it('[Contact] set custom view records', () => {
+      const state = {
+        records: [],
+        conversation: { records: [] },
+        contact: { records: [] },
+      };
+      mutations[types.SET_CUSTOM_VIEW](state, {
+        data: customViewList,
+        filterType: 'contact',
+      });
+      expect(state.contact.records).toEqual(customViewList);
+      expect(state.conversation.records).toEqual([]);
     });
   });
 
   describe('#ADD_CUSTOM_VIEW', () => {
-    it('push newly created custom views to the store', () => {
-      const state = { records: [customViewList] };
-      mutations[types.ADD_CUSTOM_VIEW](state, customViewList[0]);
-      expect(state.records).toEqual([customViewList, customViewList[0]]);
+    it('[Conversation] push newly created custom views to the store', () => {
+      const state = {
+        conversation: { records: [customViewList] },
+        contact: { records: [] },
+      };
+      mutations[types.ADD_CUSTOM_VIEW](state, {
+        data: customViewList[0],
+        filterType: 'conversation',
+      });
+      expect(state.conversation.records).toEqual([
+        customViewList,
+        customViewList[0],
+      ]);
+      expect(state.contact.records).toEqual([]);
+    });
+
+    it('[Contact] push newly created custom views to the store', () => {
+      const state = {
+        conversation: { records: [] },
+        contact: { records: [customViewList] },
+      };
+      mutations[types.ADD_CUSTOM_VIEW](state, {
+        data: customViewList[0],
+        filterType: 'contact',
+      });
+      expect(state.contact.records).toEqual([
+        customViewList,
+        customViewList[0],
+      ]);
+      expect(state.conversation.records).toEqual([]);
     });
   });
 
   describe('#DELETE_CUSTOM_VIEW', () => {
-    it('delete custom view record', () => {
-      const state = { records: [customViewList[0]] };
-      mutations[types.DELETE_CUSTOM_VIEW](state, customViewList[0]);
-      expect(state.records).toEqual([customViewList[0]]);
+    it('[Conversation] delete custom view record', () => {
+      const state = {
+        conversation: { records: [customViewList[0]] },
+        contact: { records: [] },
+      };
+      mutations[types.DELETE_CUSTOM_VIEW](state, {
+        data: customViewList[0],
+        filterType: 'conversation',
+      });
+      expect(state.conversation.records).toEqual([customViewList[0]]);
+      expect(state.contact.records).toEqual([]);
+    });
+
+    it('[Contact] delete custom view record', () => {
+      const state = {
+        contact: { records: [customViewList[0]] },
+        conversation: { records: [] },
+      };
+      mutations[types.DELETE_CUSTOM_VIEW](state, {
+        data: customViewList[0],
+        filterType: 'contact',
+      });
+      expect(state.contact.records).toEqual([customViewList[0]]);
+      expect(state.conversation.records).toEqual([]);
     });
   });
 
   describe('#UPDATE_CUSTOM_VIEW', () => {
-    it('update custom view record', () => {
-      const state = { records: [updateCustomViewList[0]] };
-      mutations[types.UPDATE_CUSTOM_VIEW](state, updateCustomViewList[0]);
-      expect(state.records).toEqual(updateCustomViewList);
+    it('[Conversation] update custom view record', () => {
+      const state = {
+        conversation: { records: [updateCustomViewList[0]] },
+        contact: { records: [] },
+      };
+      mutations[types.UPDATE_CUSTOM_VIEW](state, {
+        data: updateCustomViewList[0],
+        filterType: 'conversation',
+      });
+      expect(state.conversation.records).toEqual(updateCustomViewList);
+      expect(state.contact.records).toEqual([]);
+    });
+
+    it('[Contact] update custom view record', () => {
+      const state = {
+        contact: { records: [updateCustomViewList[0]] },
+        conversation: { records: [] },
+      };
+      mutations[types.UPDATE_CUSTOM_VIEW](state, {
+        data: updateCustomViewList[0],
+        filterType: 'contact',
+      });
+      expect(state.contact.records).toEqual(updateCustomViewList);
+      expect(state.conversation.records).toEqual([]);
     });
   });