From ad014c2547e74dc8cd90d4fff8ce4d6d9c98018c Mon Sep 17 00:00:00 2001
From: thibaud-leclere <thibaud.leclere@gmail.com>
Date: Sat, 28 Mar 2026 13:19:21 +0100
Subject: [PATCH] feat: add LetterInput component with auto-focus navigation

---
 assets/react/controllers/LetterInput.jsx | 26 ++++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 assets/react/controllers/LetterInput.jsx

diff --git a/assets/react/controllers/LetterInput.jsx b/assets/react/controllers/LetterInput.jsx
new file mode 100644
index 0000000..fe00e74
--- /dev/null
+++ b/assets/react/controllers/LetterInput.jsx
@@ -0,0 +1,26 @@
+import React, { useRef, useCallback } from 'react';
+
+export default function LetterInput({ highlighted, onNext, onPrev, inputRef }) {
+    const handleKeyUp = useCallback((e) => {
+        if (e.key === 'Backspace') {
+            e.target.value = '';
+            onPrev?.();
+        } else if (e.key.length === 1 && /[a-zA-Z]/.test(e.key)) {
+            e.target.value = e.key.toUpperCase();
+            onNext?.();
+        }
+    }, [onNext, onPrev]);
+
+    return (
+        <td>
+            <input
+                ref={inputRef}
+                type="text"
+                maxLength={1}
+                className={`letter-input${highlighted ? ' letter-highlighted' : ''}`}
+                onKeyUp={handleKeyUp}
+                autoComplete="off"
+            />
+        </td>
+    );
+}