Clicking on the "X changes X ago" message opens up a handy diff
visualizer to see what those changes were. However, it had quite a few
issues that needed fixing.
- Disconnecting a session with it expanded caused an error as it tried
to read the serveSession that no longer exists during the page fade
transition. (#671)
- Resolved by converting to stateful component and holding the
serveSession during the lifetime to ensure it can render the last known
changes during the fade transition
- Leaving it open while new changes are synced did not update the
visualizer
- The patch data was piggybacking on an existing binding, which meant
that new patches did not trigger rerender.
- Resolved by converting to state
- Also made some improvements to that old binding
- Moved from app to connected page for better organization and
separation of duties
- No more useless updates causing rerenders with no real change
- Scroll window child component wouldn't actually display the updated
visuals
- Resolved by making major improvements to VirtualScroller
- Made more robust against edge case states
- Made smarter about knowing when it needs to refresh
As you can see in this slow motion GIF, it works now.

* Add user confirmation to initial sync
* Use "Accept" instead of "Confirm"
* Draw tree alphabetically for determinism
* Add diff table dropdown
* Add diff table to newly added objects
* Unblock keybind workflow
* Only show reject button when two way is enabled
* Try to patch back to the files when changes are rejected
* Improve text spacing of the prop diff table
* Skip user confirmation of perfect syncs
* Give instances names for debugging UI
* Optimize tree building
* Efficiency: dynamic virtual scrolling & lazy rendering
* Simplify virtual scroller logic and avoid wasteful rerenders
* Remove debug print
* Consistent naming
* Move new patch applied callback into accept
* Pcall archivable
* Keybinds open popup diff window
* Theme rows in diff
* Remove relic of prototype
* Color value visuals and better component name
* changeBatcher is not needed when no sync is active
* Simplify popup roact entrypoint
* Alphabetical prop lists and refactor
* Add a stroke to color blot for contrast
* Make color blots animate transparency with the rest of the page
* StyLua formatting on newly added files
* Remove wasteful table
* Fix diffing custom properties
* Display tables more meaningfully
* Allow children in the button components
* Create a rough tooltip component
* Add tooltips to buttons
* Use provider+trigger schema to avoid tooltip ZIndex issues
* Add triangle point to tooltip
* Tooltip underneath instead of covering
* Cancel hovers when unmounting
* Allow multiple canvases from one provider
* Display above or below depending on available space
* Move patch equality to PatchSet.isEqual
* Use Container
* Remove old submodules
* Reduce false positives in diff
* Add debug log
* Fuzzy equals CFrame in diffs to avoid floating point in
* Fix decodeValue usage
* Support the .changedName patches
* Fix content overlapping border
* Fix tooltip tail alignment
* Fix tooltip text fit
* Whoops, fix it properly
* Move PatchVisualizer to Components
* Provide Connected info with full patch data
* Avoid implicit nil return
* Add patch visualizer to connected page
* Make Current column invisible when visualizing applied patches
* Avoid floating point diffs in a numbers and vectors