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/components/ChatList.vue

@@ -109,7 +109,7 @@ const chatListLoading = useMapGetter('getChatListLoadingStatus');
 const activeInbox = useMapGetter('getSelectedInbox');
 const conversationStats = useMapGetter('conversationStats/getStats');
 const appliedFilters = useMapGetter('getAppliedConversationFilters');
-const folders = useMapGetter('customViews/getCustomViews');
+const folders = useMapGetter('customViews/getConversationCustomViews');
 const agentList = useMapGetter('agents/getAgents');
 const teamsList = useMapGetter('teams/getTeams');
 const inboxesList = useMapGetter('inboxes/getInboxes');

app/javascript/dashboard/components/SidemenuIcon.vue

@@ -1,5 +1,7 @@
 <script>
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
+import { mapGetters } from 'vuex';
 import { emitter } from 'shared/helpers/mitt';
 
 export default {
@@ -9,6 +11,18 @@ export default {
       default: 'small',
     },
   },
+  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
+    }),
+    hasNextSidebar() {
+      return this.isFeatureEnabledonAccount(
+        this.accountId,
+        FEATURE_FLAGS.CHATWOOT_V4
+      );
+    },
+  },
   methods: {
     onMenuItemClick() {
       emitter.emit(BUS_EVENTS.TOGGLE_SIDEMENU);
@@ -17,8 +31,10 @@ export default {
 };
 </script>
 
+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <woot-button
+    v-if="!hasNextSidebar"
     :size="size"
     variant="clear"
     color-scheme="secondary"

app/javascript/dashboard/components/layout/Sidebar.vue

@@ -104,6 +104,9 @@ export default {
       return '';
     },
     customViews() {
+      if (!this.activeCustomView) {
+        return [];
+      }
       return this.$store.getters['customViews/getCustomViewsByFilterType'](
         this.activeCustomView
       );

app/javascript/dashboard/components/policy.vue

@@ -1,32 +1,31 @@
 <script setup>
-import { useStoreGetters } from 'dashboard/composables/store';
+import { usePolicy } from 'dashboard/composables/usePolicy';
 import { computed } from 'vue';
-import {
-  getUserPermissions,
-  hasPermissions,
-} from '../helper/permissionsHelper';
 
 const props = defineProps({
+  as: {
+    type: String,
+    default: 'div',
+  },
   permissions: {
     type: Array,
     required: true,
   },
+  featureFlag: {
+    type: String,
+    default: null,
+  },
 });
 
-const getters = useStoreGetters();
-const user = computed(() => getters.getCurrentUser.value);
-const accountId = computed(() => getters.getCurrentAccountId.value);
-const userPermissions = computed(() => {
-  return getUserPermissions(user.value, accountId.value);
-});
-const hasPermission = computed(() => {
-  return hasPermissions(props.permissions, userPermissions.value);
-});
+const { checkFeatureAllowed, checkPermissions } = usePolicy();
+
+const isFeatureAllowed = computed(() => checkFeatureAllowed(props.featureFlag));
+const hasPermission = computed(() => checkPermissions(props.permissions));
 </script>
 
 <!-- eslint-disable vue/no-root-v-if -->
 <template>
-  <div v-if="hasPermission">
+  <component :is="as" v-if="isFeatureAllowed && hasPermission">
     <slot />
-  </div>
+  </component>
 </template>

app/javascript/dashboard/components/specs/SidemenuIcon.spec.js

@@ -1,10 +1,29 @@
 import { shallowMount } from '@vue/test-utils';
+import { createStore } from 'vuex';
 import SidemenuIcon from '../SidemenuIcon.vue';
 
+const store = createStore({
+  modules: {
+    auth: {
+      namespaced: false,
+      getters: {
+        getCurrentAccountId: () => 1,
+      },
+    },
+    accounts: {
+      namespaced: true,
+      getters: {
+        isFeatureEnabledonAccount: () => () => false,
+      },
+    },
+  },
+});
+
 describe('SidemenuIcon', () => {
   test('matches snapshot', () => {
     const wrapper = shallowMount(SidemenuIcon, {
       stubs: { WootButton: { template: '<button><slot /></button>' } },
+      global: { plugins: [store] },
     });
     expect(wrapper.vm).toBeTruthy();
     expect(wrapper.element).toMatchSnapshot();