From cd0f2ab3185037f8443a6a4bfb1998800e12a540 Mon Sep 17 00:00:00 2001
From: theaiagent <h.aykut.cosgun@bozok.edu.tr>
Date: Fri, 3 Apr 2026 22:06:45 +0300
Subject: [PATCH] fix: expand arrow key guard for form controls and wire i18n
 for fixed shortcuts

- Add HTMLSelectElement and contentEditable to the arrow key input guard
  to prevent intercepting native keyboard behavior on form controls
- Add i18nKey field to FixedShortcut interface and wire up i18n lookups
  in ShortcutsConfigDialog and KeyboardShortcutsHelp so fixed shortcut
  labels are properly localized
---
 .../video-editor/KeyboardShortcutsHelp.tsx    |  6 ++--
 .../video-editor/ShortcutsConfigDialog.tsx    |  8 +++--
 src/components/video-editor/VideoEditor.tsx   |  7 ++++-
 src/lib/shortcuts.ts                          | 31 +++++++++++++++----
 4 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/src/components/video-editor/KeyboardShortcutsHelp.tsx b/src/components/video-editor/KeyboardShortcutsHelp.tsx
index 5287365..b90b377 100644
--- a/src/components/video-editor/KeyboardShortcutsHelp.tsx
+++ b/src/components/video-editor/KeyboardShortcutsHelp.tsx
@@ -37,8 +37,10 @@ export function KeyboardShortcutsHelp() {
 
 					<div className="pt-1 border-t border-white/5 mt-1 space-y-1.5">
 						{FIXED_SHORTCUTS.map((fixed) => (
-							<div key={fixed.label} className="flex items-center justify-between">
-								<span className="text-slate-400">{fixed.label}</span>
+							<div key={fixed.i18nKey} className="flex items-center justify-between">
+								<span className="text-slate-400">
+									{t(`fixedActions.${fixed.i18nKey}`, { defaultValue: fixed.label })}
+								</span>
 								<kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">
 									{isMac
 										? fixed.display
diff --git a/src/components/video-editor/ShortcutsConfigDialog.tsx b/src/components/video-editor/ShortcutsConfigDialog.tsx
index 775cb8c..faa7513 100644
--- a/src/components/video-editor/ShortcutsConfigDialog.tsx
+++ b/src/components/video-editor/ShortcutsConfigDialog.tsx
@@ -197,12 +197,14 @@ export function ShortcutsConfigDialog() {
 					<p className="text-[10px] text-slate-500 mb-2 uppercase tracking-wide font-semibold">
 						{t("fixed")}
 					</p>
-					{FIXED_SHORTCUTS.map(({ label, display }) => (
+					{FIXED_SHORTCUTS.map(({ i18nKey, label, display }) => (
 						<div
-							key={label}
+							key={i18nKey}
 							className="flex items-center justify-between py-1.5 px-1 border-b border-white/5 last:border-0"
 						>
-							<span className="text-sm text-slate-400">{label}</span>
+							<span className="text-sm text-slate-400">
+								{t(`fixedActions.${i18nKey}`, { defaultValue: label })}
+							</span>
 							<kbd className="px-2 py-1 bg-white/5 border border-white/10 rounded text-xs font-mono text-slate-400 min-w-[90px] text-center">
 								{display}
 							</kbd>
diff --git a/src/components/video-editor/VideoEditor.tsx b/src/components/video-editor/VideoEditor.tsx
index 9cd467a..3efd9ce 100644
--- a/src/components/video-editor/VideoEditor.tsx
+++ b/src/components/video-editor/VideoEditor.tsx
@@ -940,7 +940,12 @@ export default function VideoEditor() {
 				!e.altKey
 			) {
 				const target = e.target;
-				if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
+				if (
+					target instanceof HTMLInputElement ||
+					target instanceof HTMLTextAreaElement ||
+					target instanceof HTMLSelectElement ||
+					(target instanceof HTMLElement && target.isContentEditable)
+				) {
 					return;
 				}
 				e.preventDefault();
diff --git a/src/lib/shortcuts.ts b/src/lib/shortcuts.ts
index 1ca4975..00b96b6 100644
--- a/src/lib/shortcuts.ts
+++ b/src/lib/shortcuts.ts
@@ -21,14 +21,16 @@ export interface ShortcutBinding {
 export type ShortcutsConfig = Record<ShortcutAction, ShortcutBinding>;
 
 export interface FixedShortcut {
+	i18nKey: string;
 	label: string;
 	display: string;
 	bindings: ShortcutBinding[];
 }
 
 export const FIXED_SHORTCUTS: FixedShortcut[] = [
-	{ label: "Undo", display: "Ctrl + Z", bindings: [{ key: "z", ctrl: true }] },
+	{ i18nKey: "undo", label: "Undo", display: "Ctrl + Z", bindings: [{ key: "z", ctrl: true }] },
 	{
+		i18nKey: "redo",
 		label: "Redo",
 		display: "Ctrl + Shift + Z / Ctrl + Y",
 		bindings: [
@@ -36,21 +38,38 @@ export const FIXED_SHORTCUTS: FixedShortcut[] = [
 			{ key: "y", ctrl: true },
 		],
 	},
-	{ label: "Cycle Annotations Forward", display: "Tab", bindings: [{ key: "tab" }] },
 	{
+		i18nKey: "cycleAnnotationsForward",
+		label: "Cycle Annotations Forward",
+		display: "Tab",
+		bindings: [{ key: "tab" }],
+	},
+	{
+		i18nKey: "cycleAnnotationsBackward",
 		label: "Cycle Annotations Backward",
 		display: "Shift + Tab",
 		bindings: [{ key: "tab", shift: true }],
 	},
 	{
+		i18nKey: "deleteSelectedAlt",
 		label: "Delete Selected (alt)",
 		display: "Del / ⌫",
 		bindings: [{ key: "delete" }, { key: "backspace" }],
 	},
-	{ label: "Pan Timeline", display: "Shift + Ctrl + Scroll", bindings: [] },
-	{ label: "Zoom Timeline", display: "Ctrl + Scroll", bindings: [] },
-	{ label: "Frame Back", display: "←", bindings: [{ key: "arrowleft" }] },
-	{ label: "Frame Forward", display: "→", bindings: [{ key: "arrowright" }] },
+	{
+		i18nKey: "panTimeline",
+		label: "Pan Timeline",
+		display: "Shift + Ctrl + Scroll",
+		bindings: [],
+	},
+	{ i18nKey: "zoomTimeline", label: "Zoom Timeline", display: "Ctrl + Scroll", bindings: [] },
+	{ i18nKey: "frameBack", label: "Frame Back", display: "←", bindings: [{ key: "arrowleft" }] },
+	{
+		i18nKey: "frameForward",
+		label: "Frame Forward",
+		display: "→",
+		bindings: [{ key: "arrowright" }],
+	},
 ];
 
 export type ShortcutConflict =