From 02a2683eb0865a273af5d7539a8681433ee14ba9 Mon Sep 17 00:00:00 2001
From: silentoplayz <jacwoo21@outlook.com>
Date: Thu, 23 Oct 2025 05:40:31 -0400
Subject: [PATCH] fix: display correct keys for international keyboards

Updates the ShortcutsModal to dynamically display the correct physical keys for users with non-US keyboard layouts.

The `ShortcutItem` component now uses `navigator.keyboard.getLayoutMap()` to resolve `KeyboardEvent.code` values (e.g., "Slash") to the character they produce on the user's active keyboard layout (e.g., "-").

This ensures the displayed shortcuts match the keys the user needs to press. A fallback is included for older browsers that do not support this API.
---
 src/lib/components/chat/ShortcutItem.svelte | 37 +++++++++++++++++----
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/chat/ShortcutItem.svelte b/src/lib/components/chat/ShortcutItem.svelte
index 494631a984..aaa4dd7de5 100644
--- a/src/lib/components/chat/ShortcutItem.svelte
+++ b/src/lib/components/chat/ShortcutItem.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext } from 'svelte';
+	import { getContext, onMount } from 'svelte';
 	import Tooltip from '../common/Tooltip.svelte';
 	import type { Shortcut } from '$lib/shortcuts';
 
@@ -7,17 +7,39 @@
 	export let isMac: boolean;
 
 	const i18n = getContext('i18n');
+	let keyboardLayoutMap: Map<string, string> | undefined;
+
+	onMount(async () => {
+		if (navigator.keyboard && 'getLayoutMap' in navigator.keyboard) {
+			try {
+				keyboardLayoutMap = await navigator.keyboard.getLayoutMap();
+			} catch (error) {
+				console.error('Failed to get keyboard layout map:', error);
+			}
+		}
+	});
 
 	function formatKey(key: string): string {
-		const lowerKey = key.toLowerCase();
-
-		switch (lowerKey) {
+		// First, handle special modifier keys which are defined in lowercase
+		switch (key) {
 			case 'mod':
 				return isMac ? '⌘' : 'Ctrl';
 			case 'shift':
 				return isMac ? '⇧' : 'Shift';
 			case 'alt':
 				return isMac ? '⌥' : 'Alt';
+		}
+
+		// Next, try to use the layout map with the raw KeyboardEvent.code (e.g., "Slash")
+		if (keyboardLayoutMap && keyboardLayoutMap.has(key)) {
+			const mappedKey = keyboardLayoutMap.get(key) ?? key;
+			// For single characters, make them uppercase. For others (like 'CapsLock'), leave as is.
+			return mappedKey.length === 1 ? mappedKey.toUpperCase() : mappedKey;
+		}
+
+		// Finally, provide a fallback for browsers without getLayoutMap or for keys not in the map
+		const lowerKey = key.toLowerCase();
+		switch (lowerKey) {
 			case 'backspace':
 			case 'delete':
 				return isMac ? '⌫' : 'Delete';
@@ -40,8 +62,11 @@
 			case 'semicolon':
 				return ';';
 			default:
-				if (lowerKey.startsWith('key')) return key.slice(-1);
-				if (lowerKey.startsWith('digit')) return key.slice(-1);
+				// For 'KeyA', 'Digit1', etc., extract the last character.
+				if (lowerKey.startsWith('key') || lowerKey.startsWith('digit')) {
+					return key.slice(-1).toUpperCase();
+				}
+				// For anything else, just uppercase it.
 				return key.toUpperCase();
 		}
 	}