Skip to content

Add auto-hide vertical scrollbar to diff pane#93

Merged
benvinegar merged 2 commits intomainfrom
feature/vertical-scrollbar
Mar 24, 2026
Merged

Add auto-hide vertical scrollbar to diff pane#93
benvinegar merged 2 commits intomainfrom
feature/vertical-scrollbar

Conversation

@benvinegar
Copy link
Member

Summary

Adds a vertical scrollbar to the diff pane with auto-hide behavior and drag-to-scroll functionality.

Features

  • 1-character width scrollbar positioned on the right side of the diff pane
  • Drag to scroll - click and drag the scrollbar thumb to navigate content
  • Proportional thumb sizing - thumb height reflects the ratio of viewport to content (e.g., viewing 25% of content = thumb is 25% of track)
  • Auto-hide behavior - scrollbar appears when scrolling (keyboard, mousewheel) and hides after 2 seconds of inactivity
  • Hidden when content fits - scrollbar only appears when content exceeds viewport height
  • Theme-aware styling - uses accentMuted color normally, accent color when dragging

Technical Implementation

  • New VerticalScrollbar component in src/ui/components/scrollbar/
  • Integrated into DiffPane with proper absolute positioning
  • Scroll activity detection via existing 50ms polling mechanism
  • Drag handling following existing PaneDivider patterns
  • Total content height calculated from file section metrics

Testing

  • All existing tests pass (191 tests)
  • TypeScript typecheck passes
  • Linting passes (oxlint + oxfmt)

Visual Preview

Active (content scrolls via keyboard/mouse):
┌─────────────────────────────────────────────────┬─┐
│ File content...                                 │█│
│ More content...                                 │█│  <- thumb visible
│ Even more...                                    │ │
│                                                 │ │
└─────────────────────────────────────────────────┴─┘

Idle (>2s):
┌─────────────────────────────────────────────────┐
│ File content...                                 │
│ More content...                                 │  <- scrollbar hidden
│ Even more...                                    │
│                                                 │
└─────────────────────────────────────────────────┘

@benvinegar benvinegar force-pushed the feature/vertical-scrollbar branch from 48ee42f to 61a3cb9 Compare March 23, 2026 21:25
- New VerticalScrollbar component with drag-to-scroll support
- Auto-hide behavior: scrollbar appears on scroll activity (keyboard, mousewheel)
- Hides after 2 seconds of inactivity
- 1-character width using theme colors (accentMuted normal, accent when dragging)
- Proportional thumb sizing based on viewport/content ratio
- Only visible when content exceeds viewport height
- Fixed: Set scrollStep=1 for precise 1-line scrolling with arrow keys
- Test scrollbar visibility when content exceeds viewport
- Test auto-hide behavior after 2 seconds of inactivity
- Test scrollbar appears on mouse scroll wheel activity
- Test up/down arrow key scrolling functionality
- Test scrollbar hidden when content fits in viewport
@benvinegar benvinegar force-pushed the feature/vertical-scrollbar branch from 41101c4 to ea6bd9c Compare March 24, 2026 04:12
@benvinegar benvinegar merged commit d17537b into main Mar 24, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant