feat: allow clicking keyboard hints throughout #266

⚠️ Potential issue | 🟡 Minor

Prevent React key collisions for repeated labels in KeyHint.
<Fragment key={k}> uses the label as the React key; if keyList contains duplicate labels (e.g. "Shift" twice), reconciliation can be incorrect. Use a composite key with the index.

Proposed fix

-      {keyList.map((k, i) => (
-        <Fragment key={k}>
+      {keyList.map((k, i) => (
+        <Fragment key={`${k}-${i}`}>
           {i > 0 && (separator != null ? <> {separator} </> : ' ')}
           <Kbd className={chipClass}>{k}</Kbd>
         </Fragment>
       ))}

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

      {keyList.map((k, i) => (
        <Fragment key={`${k}-${i}`}>
          {i > 0 && (separator != null ? <> {separator} </> : ' ')}
          <Kbd className={chipClass}>{k}</Kbd>
        </Fragment>

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@js/desktop/src/components/key-hint.tsx` around lines 45 - 49, The Fragment in
KeyHint maps keyList with <Fragment key={k}> which can collide when labels
repeat; change the key to a composite unique identifier (for example using the
index) such as `${k}-${i}` to avoid React reconciliation issues — locate the map
in the KeyHint component (keyList.map((k, i) => ...)) and replace the Fragment
key to use both the label and index (or just the index if appropriate) so each
rendered element has a stable, unique key.

✅ Addressed in commit dd850d2

_⚠️ Potential issue_ | _🟡 Minor_ **Prevent React key collisions for repeated labels in `KeyHint`.** `<Fragment key={k}>` uses the label as the React key; if `keyList` contains duplicate labels (e.g. `"Shift"` twice), reconciliation can be incorrect. Use a composite key with the index. <details> <summary>Proposed fix</summary> ```diff - {keyList.map((k, i) => ( - <Fragment key={k}> + {keyList.map((k, i) => ( + <Fragment key={`${k}-${i}`}> {i > 0 && (separator != null ? <> {separator} </> : ' ')} <Kbd className={chipClass}>{k}</Kbd> </Fragment> ))} ``` </details>  <details> <summary>📝 Committable suggestion</summary> > ‼️ **IMPORTANT** > Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements. ```suggestion {keyList.map((k, i) => ( <Fragment key={`${k}-${i}`}> {i > 0 && (separator != null ? <> {separator} </> : ' ')} <Kbd className={chipClass}>{k}</Kbd> </Fragment> ``` </details>  <details> <summary>🤖 Prompt for AI Agents</summary> ``` Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@js/desktop/src/components/key-hint.tsx` around lines 45 - 49, The Fragment in KeyHint maps keyList with <Fragment key={k}> which can collide when labels repeat; change the key to a composite unique identifier (for example using the index) such as `${k}-${i}` to avoid React reconciliation issues — locate the map in the KeyHint component (keyList.map((k, i) => ...)) and replace the Fragment key to use both the label and index (or just the index if appropriate) so each rendered element has a stable, unique key. ``` </details>    ✅ Addressed in commit dd850d2