feat: Dynamically show Shift key in shortcut modal for QWERTZ layout (#9888)

# Pull Request Template

## Description

This PR includes UI changes to dynamically add the `Shift` key to the
key set `Alt+KeyP` and `Alt+KeyL` in the keyboard shortcut modal for the
`QWERTZ` layout.

**Context**
Previously, the `Alt+L` shortcut for toggling the reply editor
conflicted with the `@` symbol on the QWERTZ layout in macOS. The new
`useDetectLayout` composable checks the active keyboard layout. If
`QWERTZ` is detected, the shortcuts are modified to `Shift+Alt+KeyP` and
`Shift+Alt+KeyL`.

[PR with the functionality
changes](https://github.com/chatwoot/chatwoot/pull/9831#event-13764407813)

Fixes
https://linear.app/chatwoot/issue/PR-1095/typing-a-in-private-note-switches-to-reply-tab-with-german-keyboard

## Type of change

- [x] Breaking change (fix or feature that would cause existing
functionality not to work as expected)

## How Has This Been Tested?

**Loom video**

https://www.loom.com/share/35b741c5afc64bc58bd4e7dc5dad012d?sid=f66ca0bf-b6a7-40fc-8972-ff0cd0196a16

## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue

@@ -1,28 +1,43 @@
-<script>
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useDetectKeyboardLayout } from 'dashboard/composables/useDetectKeyboardLayout';
 import { SHORTCUT_KEYS } from './constants';
+import {
+  LAYOUT_QWERTZ,
+  keysToModifyInQWERTZ,
+} from 'shared/helpers/KeyboardHelpers';
 import Hotkey from 'dashboard/components/base/Hotkey.vue';
 
-export default {
-  components: {
-    Hotkey,
-  },
-  props: {
-    show: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      shortcutKeys: SHORTCUT_KEYS,
-    };
-  },
-  methods: {
-    title(item) {
-      return this.$t(`KEYBOARD_SHORTCUTS.TITLE.${item.label}`);
-    },
+defineProps({
+  show: {
+    type: Boolean,
+    default: false,
   },
+});
+
+const { t } = useI18n();
+
+const shortcutKeys = SHORTCUT_KEYS;
+const currentLayout = ref(null);
+
+const title = item => t(`KEYBOARD_SHORTCUTS.TITLE.${item.label}`);
+
+// Added this function to check if the keySet needs a shift key
+// This is used to display the shift key in the modal
+// If the current layout is QWERTZ and the keySet contains a key that needs a shift key
+// If layout is QWERTZ then we add the Shift+keysToModify to fix an known issue
+// https://github.com/chatwoot/chatwoot/issues/9492
+const needsShiftKey = keySet => {
+  return (
+    currentLayout.value === LAYOUT_QWERTZ &&
+    keySet.some(key => keysToModifyInQWERTZ.has(key))
+  );
 };
+
+onMounted(async () => {
+  currentLayout.value = await useDetectKeyboardLayout();
+});
 </script>
 
 <template>
@@ -94,6 +109,12 @@ export default {
             {{ title(shortcutKey) }}
           </h5>
           <div class="flex items-center gap-2 mb-1 ml-2">
+            <Hotkey
+              v-if="needsShiftKey(shortcutKey.keySet)"
+              custom-class="min-h-[28px] min-w-[36px] key"
+            >
+              {{ 'Shift' }}
+            </Hotkey>
             <Hotkey
               :class="{ 'min-w-[60px]': shortcutKey.firstKey !== 'Up' }"
               custom-class="min-h-[28px] normal-case key"

app/javascript/dashboard/components/widgets/modal/constants.js

@@ -4,71 +4,83 @@ export const SHORTCUT_KEYS = [
     label: 'NAVIGATE_DROPDOWN',
     firstKey: 'Up',
     secondKey: 'Down',
+    keySet: ['ArrowUp', 'ArrowDown'],
   },
   {
     id: 2,
     label: 'RESOLVE_CONVERSATION',
     firstKey: 'Alt / ⌥',
     secondKey: 'E',
+    keySet: ['Alt+KeyE'],
   },
   {
     id: 3,
     label: 'GO_TO_CONVERSATION_DASHBOARD',
     firstKey: 'Alt / ⌥',
     secondKey: 'C',
+    keySet: ['Alt+KeyC'],
   },
   {
     id: 4,
     label: 'ADD_ATTACHMENT',
     firstKey: 'Alt / ⌥',
     secondKey: 'A',
+    keySet: ['Alt+KeyA'],
   },
   {
     id: 5,
     label: 'GO_TO_CONTACTS_DASHBOARD',
     firstKey: 'Alt / ⌥',
     secondKey: 'V',
+    keySet: ['Alt+KeyV'],
   },
   {
     id: 6,
     label: 'TOGGLE_SIDEBAR',
     firstKey: 'Alt / ⌥',
     secondKey: 'O',
+    keySet: ['Alt+KeyO'],
   },
   {
     id: 7,
     label: 'GO_TO_REPORTS_SIDEBAR',
     firstKey: 'Alt / ⌥',
     secondKey: 'R',
+    keySet: ['Alt+KeyR'],
   },
   {
     id: 8,
     label: 'MOVE_TO_NEXT_TAB',
     firstKey: 'Alt / ⌥',
     secondKey: 'N',
+    keySet: ['Alt+KeyN'],
   },
   {
     id: 9,
     label: 'GO_TO_SETTINGS',
     firstKey: 'Alt / ⌥',
     secondKey: 'S',
+    keySet: ['Alt+KeyS'],
   },
   {
     id: 11,
     label: 'SWITCH_TO_PRIVATE_NOTE',
     firstKey: 'Alt / ⌥',
     secondKey: 'P',
+    keySet: ['Alt+KeyP'],
   },
   {
-    id: 13,
+    id: 12,
     label: 'SWITCH_TO_REPLY',
     firstKey: 'Alt / ⌥',
     secondKey: 'L',
+    keySet: ['Alt+KeyL'],
   },
   {
-    id: 14,
+    id: 13,
     label: 'TOGGLE_SNOOZE_DROPDOWN',
     firstKey: 'Alt / ⌥',
     secondKey: 'M',
+    keySet: ['Alt+KeyM'],
   },
 ];