feat: add Cmd+Shift+. keyboard shortcut for previous mode switching (#5695)

* feat: add Cmd+Shift+. keyboard shortcut for previous mode switching

- Add switchToPreviousMode function that cycles backwards through modes array
- Update handleKeyDown to detect Cmd+Shift+. keyboard combination
- Update modeShortcutText to display both next and previous mode shortcuts
- Add forPreviousMode translation key to all 18 language files
- Implements backwards mode cycling using modulo arithmetic for proper array wrapping

Fixes #5692

* fix: correct keyboard shortcut detection for Cmd+Shift+. (previous mode)

When Shift is pressed with the period key, event.key becomes ">" instead of ".".
Fixed line 1576 to check for event.key === ">" for proper Cmd+Shift+. detection.

Fixes keyboard shortcut issue reported in PR comment.

* fix: use event.code for cross-platform keyboard shortcut compatibility

- Replace event.key checks with event.code === "Period" for both shortcuts
- Fixes keyboard layout compatibility issue where Shift+Period produces different characters on non-US layouts
- Consolidates both shortcuts into a single conditional block for better maintainability
- Addresses feedback from @daniel-lxs in PR #5695

Author: roomote

webview-ui/src/components/chat/ChatView.tsx

@@ -79,7 +79,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 	})
 	const { t } = useAppTranslation()
 	const { t: tSettings } = useTranslation("settings")
-	const modeShortcutText = `${isMac ? "⌘" : "Ctrl"} + . ${t("chat:forNextMode")}`
+	const modeShortcutText = `${isMac ? "⌘" : "Ctrl"} + . ${t("chat:forNextMode")}, ${isMac ? "⌘" : "Ctrl"} + Shift + . ${t("chat:forPreviousMode")}`
 	const {
 		clineMessages: messages,
 		currentTaskItem,
@@ -1555,16 +1555,33 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 		switchToMode(allModes[nextModeIndex].slug)
 	}, [mode, customModes, switchToMode])
 
+	// Function to handle switching to previous mode
+	const switchToPreviousMode = useCallback(() => {
+		const allModes = getAllModes(customModes)
+		const currentModeIndex = allModes.findIndex((m) => m.slug === mode)
+		const previousModeIndex = (currentModeIndex - 1 + allModes.length) % allModes.length
+		// Update local state and notify extension to sync mode change
+		switchToMode(allModes[previousModeIndex].slug)
+	}, [mode, customModes, switchToMode])
+
 	// Add keyboard event handler
 	const handleKeyDown = useCallback(
 		(event: KeyboardEvent) => {
-			// Check for Command + . (period)
-			if ((event.metaKey || event.ctrlKey) && event.key === ".") {
+			// Check for Command/Ctrl + Period (with or without Shift)
+			// Using event.code for better cross-platform compatibility
+			if ((event.metaKey || event.ctrlKey) && event.code === "Period") {
 				event.preventDefault() // Prevent default browser behavior
-				switchToNextMode()
+
+				if (event.shiftKey) {
+					// Shift + Period = Previous mode
+					switchToPreviousMode()
+				} else {
+					// Just Period = Next mode
+					switchToNextMode()
+				}
 			}
 		},
-		[switchToNextMode],
+		[switchToNextMode, switchToPreviousMode],
 	)
 
 	// Add event listener

webview-ui/src/i18n/locales/ca/chat.json

@@ -123,6 +123,7 @@
 	"separator": "Separador",
 	"edit": "Edita...",
 	"forNextMode": "per al següent mode",
+	"forPreviousMode": "per al mode anterior",
 	"error": "Error",
 	"diffError": {
 		"title": "Edició fallida"

webview-ui/src/i18n/locales/de/chat.json

@@ -123,6 +123,7 @@
 	"separator": "Trennlinie",
 	"edit": "Bearbeiten...",
 	"forNextMode": "für nächsten Modus",
+	"forPreviousMode": "für vorherigen Modus",
 	"error": "Fehler",
 	"diffError": {
 		"title": "Bearbeitung fehlgeschlagen"

webview-ui/src/i18n/locales/en/chat.json

@@ -131,6 +131,7 @@
 	"separator": "Separator",
 	"edit": "Edit...",
 	"forNextMode": "for next mode",
+	"forPreviousMode": "for previous mode",
 	"apiRequest": {
 		"title": "API Request",
 		"failed": "API Request Failed",

webview-ui/src/i18n/locales/es/chat.json

@@ -123,6 +123,7 @@
 	"separator": "Separador",
 	"edit": "Editar...",
 	"forNextMode": "para el siguiente modo",
+	"forPreviousMode": "para el modo anterior",
 	"error": "Error",
 	"diffError": {
 		"title": "Edición fallida"

webview-ui/src/i18n/locales/fr/chat.json

@@ -123,6 +123,7 @@
 	"separator": "Séparateur",
 	"edit": "Éditer...",
 	"forNextMode": "pour le prochain mode",
+	"forPreviousMode": "pour le mode précédent",
 	"error": "Erreur",
 	"diffError": {
 		"title": "Modification échouée"

webview-ui/src/i18n/locales/hi/chat.json

@@ -123,6 +123,7 @@
 	"separator": "विभाजक",
 	"edit": "संपादित करें...",
 	"forNextMode": "अगले मोड के लिए",
+	"forPreviousMode": "पिछले मोड के लिए",
 	"error": "त्रुटि",
 	"diffError": {
 		"title": "संपादन असफल"

webview-ui/src/i18n/locales/id/chat.json

@@ -137,6 +137,7 @@
 	"separator": "Pemisah",
 	"edit": "Edit...",
 	"forNextMode": "untuk mode selanjutnya",
+	"forPreviousMode": "untuk mode sebelumnya",
 	"apiRequest": {
 		"title": "Permintaan API",
 		"failed": "Permintaan API Gagal",

webview-ui/src/i18n/locales/it/chat.json

@@ -123,6 +123,7 @@
 	"separator": "Separatore",
 	"edit": "Modifica...",
 	"forNextMode": "per la prossima modalità",
+	"forPreviousMode": "per la modalità precedente",
 	"instructions": {
 		"wantsToFetch": "Roo vuole recuperare istruzioni dettagliate per aiutare con l'attività corrente"
 	},

webview-ui/src/i18n/locales/ja/chat.json

@@ -123,6 +123,7 @@
 	"separator": "区切り",
 	"edit": "編集...",
 	"forNextMode": "次のモード用",
+	"forPreviousMode": "前のモード用",
 	"error": "エラー",
 	"diffError": {
 		"title": "編集に失敗しました"