feat: Creates a modal showing all the available keyboard shortcuts (#2728)

* feat: Adds modal showing all the available keyboard shortcuts

* Minor fixes

* Minor fixes

* Spacing fixes

* fix translations

* Adds i18n

* Review fixes

* Review fixes

* spacing fixes

* Review fixes

* Minor fixes

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

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

@@ -50,10 +50,17 @@
         :show="showOptionsMenu"
         @toggle-accounts="toggleAccountModal"
         @show-support-chat-window="toggleSupportChatWindow"
+        @key-shortcut-modal="toggleKeyShortcutModal"
         @close="toggleOptions"
       />
     </div>
 
+    <woot-key-shortcut-modal
+      v-if="showShortcutModal"
+      @close="closeKeyShortcutModal"
+      @clickaway="closeKeyShortcutModal"
+    />
+
     <account-selector
       :show-account-modal="showAccountModal"
       @close-account-modal="toggleAccountModal"
@@ -86,6 +93,9 @@ import OptionsMenu from './sidebarComponents/OptionsMenu.vue';
 import AccountSelector from './sidebarComponents/AccountSelector.vue';
 import AddAccountModal from './sidebarComponents/AddAccountModal.vue';
 import AddLabelModal from '../../routes/dashboard/settings/labels/AddLabel';
+import WootKeyShortcutModal from 'components/widgets/modal/WootKeyShortcutModal';
+import { hasPressedCommandAndForwardSlash } from 'shared/helpers/KeyboardHelpers';
+import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 
 export default {
   components: {
@@ -97,14 +107,16 @@ export default {
     AccountSelector,
     AddAccountModal,
     AddLabelModal,
+    WootKeyShortcutModal,
   },
-  mixins: [adminMixin, alertMixin],
+  mixins: [adminMixin, alertMixin, eventListenerMixins],
   data() {
     return {
       showOptionsMenu: false,
       showAccountModal: false,
       showCreateAccountModal: false,
       showAddLabelModal: false,
+      showShortcutModal: false,
     };
   },
 
@@ -254,7 +266,19 @@ export default {
     this.$store.dispatch('teams/get');
     this.setChatwootUser();
   },
+
   methods: {
+    toggleKeyShortcutModal() {
+      this.showShortcutModal = true;
+    },
+    closeKeyShortcutModal() {
+      this.showShortcutModal = false;
+    },
+    handleKeyEvents(e) {
+      if (hasPressedCommandAndForwardSlash(e)) {
+        this.toggleKeyShortcutModal();
+      }
+    },
     toggleSupportChatWindow() {
       window.$chatwoot.toggle();
     },