feat(ui): Redesign ExtraKeys UI & fix mobile keyboard UX #13
Conversation
… opening keyboard on phone.
…tly closing and opening bug
📝 WalkthroughWalkthroughThese changes implement pointer gesture handling with movement threshold detection in the ExtraKeys component and refactor keyboard state management in the trackpad route to use viewport-based synchronization instead of focus-based triggers. Changes
Sequence Diagram(s)sequenceDiagram
participant User as User/Pointer
participant ExtraKeys as ExtraKeys Component
participant State as Internal State
participant Parent as Parent Component
User->>ExtraKeys: Pointer Down
ExtraKeys->>State: Record start position, set activeKey
ExtraKeys->>ExtraKeys: preventDefault & stopPropagation
User->>ExtraKeys: Pointer Move
ExtraKeys->>ExtraKeys: Calculate dx/dy from start
alt Movement > MOVE_THRESHOLD
ExtraKeys->>State: Mark as moved, clear activeKey
end
User->>ExtraKeys: Pointer Up
ExtraKeys->>State: Check if moved and key active
alt Not moved AND key still active
ExtraKeys->>Parent: sendKey(lowercase key)
end
ExtraKeys->>State: Reset all tracking state
sequenceDiagram
participant Window as Window Viewport
participant Effect as useEffect Hook
participant Ref as keyboardOpenRef
participant Input as Hidden Input
Window->>Effect: Trigger on resize
Effect->>Effect: Check viewport height < 85%
alt Viewport reduced (keyboard visible)
Effect->>Ref: Set keyboardOpenRef.current = true
else Viewport normal
Effect->>Input: blur() hidden input
Effect->>Ref: Reset keyboardOpenRef
end
Note over Window,Input: toggleKeyboard callback<br/>(on user action)
Input->>Input: focus() or blur() based on keyboardOpenRef
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
aniket866
left a comment
aniket866
left a comment
There was a problem hiding this comment.
Overall changes improve stability, touch/keyboard handling, and user experience, especially on mobile devices.
Everything is handled correctly
There was a problem hiding this comment.
Better touch handling with pointer events and movement threshold improves accuracy and UX.
There was a problem hiding this comment.
Better keyboard state handling improves mobile behavior and prevents bugs.
|
hi @sp3cia1 I have reviewed your PR , changes are good , nice work on UX specially for mobile , improving button UX, |
3 participants
Summary of Changes
This PR addresses Issue #8 by redesigning the
ExtraKeyscomponent to match Termux's aesthetic. While implementing the UI changes, I discovered several UX bugs that made the mobile experience frustrating, so I took the initiative and fixed those as well.UI Changes
ExtraKeyswith pill-shaped buttons, shadows, and touch-responsive active statesUX Bug Fixes (Autonomy)
e.preventDefault()in handlerspreventDefault+stopPropagationon pointer eventsvisualViewportresize eventsJustification
Per contribution guidelines on Autonomy & Decision-Making, changes that improve usability may be made when the specification is silent. The original issue focused on UI, but the keyboard bugs made the app nearly unusable on mobile. Fixing them was necessary to deliver a quality implementation.
Key technical decisions:
visualViewportAPI: Used to reliably detect keyboard visibility. Comparing against storedoriginalHeightsince bothvisualViewport.heightandwindow.innerHeightshrink together when keyboard opens.preventDefaultto block focus changes.Platform-Specific Behavior
Videos
Before (Old UI + Bugs):
rein_before_bug_fixes.mp4
After (New UI + Fixes):
rein_after_bug_fixes.mp4
Fixes #8
and other massive ux improvements.
Summary by CodeRabbit
Release Notes
New Features
Bug Fixes