feat(ui): improve hotkey customization UX with interactive controls and validation

[Pfannkuchensack]

Summary

Type: Feature Enhancement (UI/UX)

What: Improved the hotkey editor UI with interactive modifier buttons, validation, and better user guidance.

Why: The previous hotkey editor required users to manually type modifier strings like "mod+", "ctrl+", "shift+", which was error-prone and unclear. Users had no guidance on valid syntax or immediate feedback on invalid combinations.

How:

• Added interactive Modifier Buttons (Mod, Ctrl, Shift, Alt) that intelligently insert modifiers at the cursor position with automatic + handling
• Implemented live validation with visual feedback (red border for invalid input, disabled save button)
• Added live preview showing how the hotkey will look using the Kbd component
• Created an info tooltip with syntax help, examples, and valid key references
• Split documentation into user-facing (docs/features/hotkeys.md) and developer (docs/contributing/HOTKEYS.md) documentation
• Moved documentation from frontend folder to main docs structure

Screenshots:

Edit mode with modifier buttons and help tooltip:
Screenshot

Related Issues / Discussions

QA Instructions

1. Test Modifier Buttons:

   • Open Hotkeys Modal
   • Click "Edit Mode"
   • Click the pencil icon on any hotkey
   • Click the "Mod", "Ctrl", "Shift", "Alt" buttons
   • Verify they insert the modifier at cursor position with smart + handling

2. Test Validation:

   • Try entering invalid hotkeys: mod+, shift+ctrl+ (ending with modifier)
   • Verify red border appears on input
   • Verify save button is disabled
   • Enter valid hotkey like mod+k
   • Verify border returns to normal and save button is enabled

3. Test Live Preview:

   • While editing, type a hotkey combination
   • Verify the preview shows below with Kbd components
   • Test multiple hotkeys: mod+a, ctrl+b

4. Test Help Tooltip:

   • Click the "?" info icon while editing
   • Verify tooltip shows syntax help with examples

5. Test Functionality:

   • Save a custom hotkey using the modifier buttons
   • Verify it persists after page reload
   • Verify the hotkey actually works in the app
   • Reset using the counter-clockwise arrow icon

Merge Plan

No special merge requirements. This is a purely additive UI enhancement with no breaking changes.

Checklist

• The PR has a short but descriptive title, suitable for a changelog
• Tests added / updated (if applicable) - No new tests needed (uses existing hotkeysSlice.test.ts)
• ❗Changes to a redux slice have a corresponding migration - No redux slice changes (only UI)
• Documentation added / updated (if applicable) - Comprehensive documentation added and restructured
• Updated What's New copy (if doing a release after this PR) - Not applicable

[lstein]

I like the new functionality. Here are some comments on the UI:

1. There's still an unintuitive mix of clicking and typing to enter the hotkey. For example, if I want a hotkey to be mod-enter, I have to click "Mod" and then type "enter". This lets errors creep in (see issue Use seed and prompt in image filenames #2). Other hotkey editors allow you to capture the desired key combination by first clicking a button labeled "Set" and then simply pressing the desired key combo on the keyboard. No editable text field is needed.
2. There doesn't seem to be full error checking on the hotkey edit field. I was able to enter "mod-ent", "foobar", etc, and there was no indication that these were invalid key combinations.
3. The red shading that indicates a partial hotkey ("shift+") only appears when the textbox loses focus. I don't think you need to have the textbox at all (see Not working on windows ( no readline ) but pyreadline is avalilable #1) but if you do, the box should change dynamically as the user types in the hotkey combo.

Let me know your response to these points and I'll do the code review when the feature set is stable.

[Pfannkuchensack]

1. The buttons for the special keys are there if somebody dont know how to write them. so you can still type mod+enter if you want. But i think buttons for anything that is not the key itself should be a better option.
2. i will update that.
3. i will check that.

[lstein]

1. The buttons for the special keys are there if somebody dont know how to write them. so you can still type mod+enter if you want. But i think buttons for anything that is not the key itself should be a better option.

I'm suggesting this pattern:

1. Press the pencil icon to edit the hotkey.
2. The user is prompted to press the desired hotkey key combination. For example, he presses the shift key plus the "k" key.
3. The system displays the selected combination in a noneditable field as "shift-k".

So there is no manual editing at all.

Note that you will have to detect and warn when a chosen hotkey conflicts with a previously-assigned hotkey. You may handle it already: I didn't functionally check for this scenario.