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"