fix: Update UI issues with sidebar (#10535)

This PR fixes a few UI issues with the sidebar

1. `z-index` issues with sidebar dropdowns
2. Move the event listener to the root of the dropdown container, it
allows more consistent behaviour of the trigger, earlier the click on
the trigger when the dropdown was open would cause the container to
re-render
3. Use `perserve-open` for the status switcher menu item in the profile
menu.
4. Use `sessionStorage` instead of `localStorage` to preserve sidebar
dropdown info. When opening the dashboard without directly going to a
specific route, any previous known item would get expanded even if it's
link was not active, this caused issues across tabs too, this fixes it.
5. Use `snakeCaseKeys` instead of `decamelize` we had two packages doing
the same thing
6. Update `vueuse` the new version is vue3 only

app/javascript/dashboard/components-next/dropdown-menu/base/DropdownContainer.vue

@@ -21,9 +21,9 @@ provideDropdownContext({
 </script>
 
 <template>
-  <div class="relative space-y-2">
+  <div v-on-click-outside="closeMenu" class="relative space-y-2">
     <slot name="trigger" :is-open :toggle="() => toggle()" />
-    <div v-if="isOpen" v-on-click-outside="closeMenu" class="absolute">
+    <div v-if="isOpen" class="absolute">
       <slot />
     </div>
   </div>

app/javascript/dashboard/components-next/sidebar/Sidebar.vue

@@ -45,7 +45,7 @@ useSidebarKeyboardShortcuts(toggleShortcutModalFn);
 const expandedItem = useStorage(
   'next-sidebar-expanded-item',
   null,
-  localStorage
+  sessionStorage
 );
 
 const setExpandedItem = name => {

app/javascript/dashboard/components-next/sidebar/SidebarProfileMenuStatus.vue

@@ -67,7 +67,7 @@ function updateAutoOffline(autoOffline) {
 <template>
   <DropdownSection>
     <div class="grid gap-0">
-      <DropdownItem>
+      <DropdownItem preserve-open>
         <div class="flex-grow flex items-center gap-1">
           {{ $t('SIDEBAR.SET_YOUR_AVAILABILITY') }}
         </div>
@@ -90,7 +90,7 @@ function updateAutoOffline(autoOffline) {
               </div>
             </Button>
           </template>
-          <DropdownBody class="min-w-32">
+          <DropdownBody class="min-w-32 z-20">
             <DropdownItem
               v-for="status in availabilityStatuses"
               :key="status.value"

app/javascript/dashboard/store/modules/contacts/actions.js

@@ -4,7 +4,7 @@ import {
 } from 'shared/helpers/CustomErrors';
 import types from '../../mutation-types';
 import ContactAPI from '../../../api/contacts';
-import decamelizeKeys from 'decamelize-keys';
+import snakecaseKeys from 'snakecase-keys';
 import AccountActionsAPI from '../../../api/accountActions';
 import AnalyticsHelper from '../../../helper/AnalyticsHelper';
 import { CONTACTS_EVENTS } from '../../../helper/AnalyticsHelper/events';
@@ -93,7 +93,7 @@ export const actions = {
   update: async ({ commit }, { id, isFormData = false, ...contactParams }) => {
     const { avatar, customAttributes, ...paramsToDecamelize } = contactParams;
     const decamelizedContactParams = {
-      ...decamelizeKeys(paramsToDecamelize),
+      ...snakecaseKeys(paramsToDecamelize),
       ...(customAttributes && { custom_attributes: customAttributes }),
       ...(avatar && { avatar }),
     };
@@ -114,7 +114,7 @@ export const actions = {
   },
 
   create: async ({ commit }, { isFormData = false, ...contactParams }) => {
-    const decamelizedContactParams = decamelizeKeys(contactParams, {
+    const decamelizedContactParams = snakecaseKeys(contactParams, {
       deep: true,
     });
     commit(types.SET_CONTACT_UI_FLAG, { isCreating: true });