Keyboard Shortcut Translation between macOS and Linux/PC not correct

[Kentokamoto]

Currently, docs translate keyboard shortcuts between macOS and Linux/PC by simply replacing "CTRL" with the "Command" icon.

docs/src/components/KeyboardShortcut.tsx

Lines 18 to 44 in f756f83

	useEffect(() => {
	// OS detection should run only on the client-side
	const isMacUser = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
	if (isMacUser) {
	if (macosShortcut) {
	setDisplayShortcut(macosShortcut);
	} else {
	// Convert common Windows/Linux keys to macOS equivalents
	let convertedShortcut = shortcut;
	convertedShortcut = convertedShortcut.replace(/Ctrl\s*\+\s*/gi, "⌘ + ");
	convertedShortcut = convertedShortcut.replace(/Alt\s*\+\s*/gi, "⌥ + ");
	convertedShortcut = convertedShortcut.replace(/Cmd\s*\+\s*/gi, "⌘ + "); // In case Cmd was used in the base shortcut
	convertedShortcut = convertedShortcut.replace(
	/Option\s*\+\s*/gi,
	"⌥ + "
	); // In case Option was used
	// Replace individual keys if not part of a combo already handled
	convertedShortcut = convertedShortcut.replace(/(?<!⌘ )Ctrl/gi, "⌘");
	convertedShortcut = convertedShortcut.replace(/(?<!⌥ )Alt/gi, "⌥");
	setDisplayShortcut(convertedShortcut);
	}
	} else {
	// For non-Mac users, display the original shortcut or Windows/Linux specific if ever needed
	setDisplayShortcut(shortcut);
	}
	}, [shortcut, macosShortcut]);

This does not seem to be entirely correct for some keyboard shortcuts on macOS.
For example: The shortcut to toggle Picture-in-Picture is currently defined as

docs/content/docs/user-manual/shortcuts.mdx

Line 116 in f756f83

| Toggle Picture-in-Picture | <KeyboardShortcut shortcut="Shift + Ctrl + ]" /> |

Which is rendered as

However, when doing a fresh Zen install, the default keyboard shortcut is set to: