51 lines (36 loc) · 1.43 KB

VibePad Progress

Session: 2026-02-03

Version: 1.7.0

Feature: Scroll Sync

User Story: As a user, I need the rendered JSON or Markdown to stay in sync when I scroll on the raw data side (the left side).

Changes Made

`src/js/newtab.js`

Added initScrollSync() function with:
- Percentage-based scroll calculation (handles different content heights)
- Throttled scroll events (~60fps / 16ms) for smooth performance
- Toggle button creation for preview panel headers
- localStorage persistence of user preference
- Prevention of feedback loops with isScrolling flag

`src/css/newtab.css`

Added .scroll-sync-toggle button styles
- Matches existing toolbar button aesthetic
- Active state uses accent color
- Hidden on mobile (stacked layout doesn't need sync)

Technical Details

Sync Method: Percentage-based (scrollTop / (scrollHeight - clientHeight))
Performance: Throttled to ~60fps using timestamp comparison
Scope: Left-to-right sync only (raw input → rendered preview)
Persistence: User preference saved in localStorage as scrollSyncEnabled

Files Changed

File	Lines Added
`src/js/newtab.js`	+123
`src/css/newtab.css`	+52

Testing

All 51 existing tests pass
Manual testing: scroll sync works for both JSON and Markdown tabs

TODOs

None for this feature

Previous Sessions

(No prior sessions recorded)