Add visual keyboard layout editor and cheatsheet #296
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Adds a visual keyboard interface for both editing and viewing shortcuts: - Keyboard Editor: A new Settings tab that displays a full QWERTY keyboard. Click any key to add or edit actions and groups directly on the layout. - Keyboard Cheatsheet: An alternative to the list-style cheatsheet that shows your bindings overlaid on a keyboard. Toggle between styles in preferences. Technical Details: - New KeyboardLayout module: KeyboardLayoutModel, KeyboardLayoutView, KeyView - KeyboardCheatsheetView for overlay display of bindings - KeyboardPane settings tab with unified editor for actions and groups - Modifier key monitoring in Controller for real-time shift state - Cheatsheet style preference stored in UserDefaults - Extracted reusable components: KeyBadge, CheatsheetRows 🤖 Generated with assistance from [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
kevintraver
force-pushed
the
feat/keyboard-layout
branch
from
4b87973 to
6805b18
Compare
Change material from hudWindow to popover and add semi-transparent window background overlay (70% opacity) for better contrast while maintaining blur effect.
…ition Update the keyboard cheatsheet centering logic to align with the main theme window positioning. Both windows now share the same vertical offset (slightly above true center) for consistent visual alignment. Changes: - Modified centerCheatsheetWindow to use theme-matching vertical offset - Added multiple centering passes to handle SwiftUI layout timing - Improved showCheatsheet timing to ensure proper sizing before display 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Simplified the group editing interface by removing redundant elements and improving the action flow with clearer button labels. Changes: - Removed "Edit Group Layout" button from group editor body - Removed helper text "Assign actions to keys within this group" - Changed "Done" button to "Assign Actions" for groups - Added "Cancel" button for groups to dismiss without saving - "Assign Actions" button now saves and opens keyboard layout in one step 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
… button - Replace "Root" text with house icon for cleaner UI - Use default macOS button styling for breadcrumb buttons - Adjust breadcrumb alignment to match keyboard layout edges - Add balanced left/right spacing for proper visual alignment 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Align spacebar left edge with C key and right edge with comma key - Adjust spacebar width from 6.5u to 6.0u for accurate alignment - Balance right Cmd (1.5u) and Opt (1.5u) keys to meet under slash key - Maintain total bottom row width at 15 units 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Replace single group label with full breadcrumb path showing navigation hierarchy. Breadcrumbs are read-only (non-interactive) for display purposes only.
…orners Enhanced favicon presentation in keyboard layout and cheatsheet views: - Enabled favicon loading in keyboard layout (was previously disabled) - Removed padding to display favicons at full icon size - Added rounded corners (20% radius) to match app icon styling - Maintained aspect ratio with .fit content mode for better appearance Favicons now match the visual style of native app icons throughout the UI. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Fix rowWidth calculation to properly count gaps between keys instead of using total width units - Simplify keyboard centering in KeyboardPane by using center alignment and frame width instead of manual spacer calculations - Remove complex left/right offset logic for cleaner layout code This fixes spacing issues where keyboard rows were misaligned.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Adds a visual keyboard interface for both editing and viewing shortcuts.
Features
Keyboard Editor - A new Settings tab that displays a full QWERTY keyboard. Click any key to add or edit actions and groups directly on the layout.
Keyboard Cheatsheet - An alternative to the list-style cheatsheet that shows your bindings overlaid on a keyboard. Toggle between styles in Advanced preferences.
Screenshot
Technical Details
KeyboardLayoutmodule:KeyboardLayoutModel,KeyboardLayoutView,KeyViewKeyboardCheatsheetViewfor overlay display of bindingsKeyboardPanesettings tab with unified editor for actions and groupsControllerfor real-time shift stateUserDefaultsKeyBadge,CheatsheetRows