feat: Open "Switch Account" modal when clicking account name on dashboard (#4613)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

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

@@ -19,6 +19,7 @@
       :menu-config="activeSecondaryMenu"
       :current-role="currentRole"
       @add-label="showAddLabelPopup"
+      @toggle-accounts="toggleAccountModal"
     />
   </aside>
 </template>

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

@@ -1,14 +1,34 @@
 <template>
-  <div v-if="showShowCurrentAccountContext" class="account-context--group">
+  <div
+    v-if="showShowCurrentAccountContext"
+    class="account-context--group"
+    @mouseover="setShowSwitch"
+    @mouseleave="resetShowSwitch"
+  >
     {{ $t('SIDEBAR.CURRENTLY_VIEWING_ACCOUNT') }}
     <p class="account-context--name text-ellipsis">
       {{ account.name }}
     </p>
+    <transition name="fade">
+      <div v-if="showSwitchButton" class="account-context--switch-group">
+        <woot-button
+          variant="clear"
+          icon="arrow-swap"
+          class="cursor-pointer"
+          @click="$emit('toggle-accounts')"
+        >
+          {{ $t('SIDEBAR.SWITCH') }}
+        </woot-button>
+      </div>
+    </transition>
   </div>
 </template>
 <script>
 import { mapGetters } from 'vuex';
 export default {
+  data() {
+    return { showSwitchButton: false };
+  },
   computed: {
     ...mapGetters({
       account: 'getCurrentAccount',
@@ -18,6 +38,14 @@ export default {
       return this.userAccounts.length > 1 && this.account.name;
     },
   },
+  methods: {
+    setShowSwitch() {
+      this.showSwitchButton = true;
+    },
+    resetShowSwitch() {
+      this.showSwitchButton = false;
+    },
+  },
 };
 </script>
 <style scoped lang="scss">
@@ -27,10 +55,49 @@ export default {
   font-size: var(--font-size-mini);
   padding: var(--space-small);
   margin-bottom: var(--space-small);
+  width: 100%;
+  position: relative;
+
+  &:hover {
+    background: var(--b-100);
+  }
 
   .account-context--name {
     font-weight: var(--font-weight-medium);
     margin-bottom: 0;
   }
 }
+
+.account-context--switch-group {
+  --overlay-shadow: linear-gradient(
+    to right,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 1) 50%
+  );
+
+  align-items: center;
+  background-image: var(--overlay-shadow);
+  border-top-left-radius: 0;
+  border-top-right-radius: var(--border-radius-normal);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: var(--border-radius-normal);
+  display: flex;
+  height: 100%;
+  justify-content: end;
+  opacity: 1;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 100%;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 300ms ease;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
 </style>

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

@@ -1,6 +1,6 @@
 <template>
   <div v-if="hasSecondaryMenu" class="main-nav secondary-menu">
-    <account-context />
+    <account-context @toggle-accounts="toggleAccountModal" />
     <transition-group name="menu-list" tag="ul" class="menu vertical">
       <secondary-nav-item
         v-for="menuItem in accessibleMenuItems"
@@ -224,6 +224,9 @@ export default {
     showAddLabelPopup() {
       this.$emit('add-label');
     },
+    toggleAccountModal() {
+      this.$emit('toggle-accounts');
+    },
   },
 };
 </script>

app/javascript/dashboard/i18n/locale/en/settings.json

@@ -147,6 +147,7 @@
   },
   "SIDEBAR": {
     "CURRENTLY_VIEWING_ACCOUNT": "Currently viewing:",
+    "SWITCH": "Switch",
     "CONVERSATIONS": "Conversations",
     "ALL_CONVERSATIONS": "All Conversations",
     "MENTIONED_CONVERSATIONS": "Mentions",